Little Island - Irský pub Frýdek-Místek

Web pro autentický irský pub v provozu od 2009. Guinness na čepu, 50+ druhů whiskey, weekend live music, soukromé eventy do 40 lidí. Tmavý "irský pub" aesthetic, prémiové foto, rezervace eventů.

Next.jsTypeScriptTailwind CSSResendVercel

V provozu od 2009

Brief

Little Island je irský pub ve Frýdku-Místku, v provozu od roku 2009. Guinness na čepu, 50+ druhů whiskey, víkendová live music, soukromé eventy do 40 hostů. Klient potřeboval marketingový web, který:

  1. Reflektuje atmosféru pubu (tmavé dřevo, teplé světlo, hudba) - ne corporate čistotu
  2. Slouží jako booking funnel pro soukromé akce
  3. Komunikuje program live music
  4. Nese SEO autoritu pro místní search ("irský pub Frýdek", "guinness Frýdek")
  5. Klient je restauratér, ne content marketer - web musí zvládnout fungovat měsíce bez aktualizace

Rozpočet a runway nebyly velkorysé. Postavil jsem statický Next.js, žádný headless CMS, MDX-driven content kde to dává smysl.

Brand language v CSS

Dárek pro frontend designera: "irský pub feeling" v digitální formě. Co to znamená?

  • Teplé barvy: žádný čistý černý #000, místo toho #1A140E (kávové dřevo). Ne bílá #FFF, místo toho #F5EFE2 (svíčkové světlo).
  • Serif accent fonty: nadpisy v Cormorant Garamond (klasický serif), tělo v Inter (neutrální). Logo + accent stringy ve stylizovaném Caveat (handwritten feeling).
  • Texturní pozadí: subtle wood-grain SVG noise overlay (10 % opacity) ne jen flat color. Generováno feTurbulence SVG filtrem, takže nemusíš servovat 200 kB textury.
  • Akcent ZELENÁ-IRSKÁ (#0A6B3F, ne neon Vercel green). Pro CTA, hover state.
/* tailwind.config.ts barevná paleta */
colors: {
  pub: {
    bg: '#1A140E',          // dark wood background
    surface: '#241A12',     // panel/card
    parchment: '#F5EFE2',   // body text on dark
    cream: '#E8DCC4',       // subtle highlight
    irish: '#0A6B3F',       // brand green
    amber: '#C68642',       // whiskey accent
  },
}

Test: ukázal jsem mock 5 lidem ("popiš první dojem"). Z 5: "útulné", "irská hospoda", "stará škola", "žádný startup", "vůně dřeva". Brand language je load-bearing UX, ne dekorace.

Booking flow

Soukromé eventy (narozeniny, firemní team building, svatba) jsou hlavní revenue stream nad rámec běžné gastro tržby. Form → email → manuální potvrzení.

// src/app/api/booking/route.ts
import { Resend } from 'resend';
import { z } from 'zod';
 
const resend = new Resend(process.env.RESEND_API_KEY!);
 
const BookingSchema = z.object({
  name: z.string().min(2).max(80),
  email: z.string().email(),
  phone: z.string().min(9).max(20),
  date: z.string(), // ISO date
  guests: z.number().int().min(5).max(40),
  occasion: z.string().max(200),
  honeypot: z.string().max(0).optional(), // anti-bot
});
 
export async function POST(req: Request) {
  const body = await req.json();
  const parsed = BookingSchema.safeParse(body);
  if (!parsed.success || parsed.data.honeypot) {
    return new Response('invalid', { status: 400 });
  }
 
  const data = parsed.data;
 
  // 1) email majiteli
  await resend.emails.send({
    from: 'rezervace@littleisland.cz',
    to: 'majitel@littleisland.cz',
    replyTo: data.email,
    subject: `Rezervace ${data.date} - ${data.guests} hostů`,
    html: renderOwnerEmail(data),
  });
 
  // 2) potvrzení hostovi
  await resend.emails.send({
    from: 'Little Island <rezervace@littleisland.cz>',
    to: data.email,
    subject: 'Tvá poptávka přijata - ozveme se do 24 h',
    html: renderGuestEmail(data),
  });
 
  return new Response('ok');
}

Žádný realtime calendar, žádná dostupnost. Manuální potvrzení od majitele, protože soukromé akce vyžadují domluvu (catering, otevírací hodiny, konkrétní ozvučení). Half-formová forma s explicitním "ozveme se do 24 hodin" snižuje očekávání instant booking a paradoxně zvyšuje kvalitu leadů (uživatelé, kteří očekávají instant booking, jsou v 70 % no-show).

Whiskey katalog

50+ druhů whiskey, kategorizace podle stylu (Single Malt, Blended, Bourbon, Irish, Rye). Postavil jsem to jako MDX entries:

content/whiskey/
├── jameson-original.mdx
├── tullamore-dew.mdx
├── connemara-peated.mdx
└── redbreast-12.mdx

Frontmatter:

---
name: 'Connemara Peated'
category: 'Irish Single Malt'
abv: 40
priceCzk: 120
notes: 'Jediná peated Irish whiskey. Kouř, vanilka, mírná medovost.'
origin: 'Cooley Distillery, IE'
---

UI filter: kategorie + price range + ABV. Žádná DB, vše statické. Tailwind grid layout, hover popup s notes. Klient přidá novou whiskey = jeden MDX soubor + commit + Vercel rebuild. Ne CMS dashboard.

Live music kalendář + ICS export

Víkendový program - kytarista nebo kapela - mění se každý měsíc. Klient je v MDX:

content/events/
├── 2026-02-15-tom-collins.mdx
├── 2026-02-22-the-emerald-band.mdx
└── 2026-03-01-irish-folk-trio.mdx

Plus jsem přidal ICS export pro každý event. Návštěvník může kliknout "Přidat do kalendáře" a stáhne se RFC 5545 formát:

// src/app/api/events/[slug]/ics/route.ts
export async function GET(_req: Request, { params }: { params: { slug: string } }) {
  const event = await getEvent(params.slug);
  if (!event) return new Response('not found', { status: 404 });
 
  const ics = [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//Little Island//Events//CS',
    'BEGIN:VEVENT',
    `UID:${event.slug}@littleisland.cz`,
    `DTSTAMP:${formatIcsDate(new Date())}`,
    `DTSTART:${formatIcsDate(event.startsAt)}`,
    `DTEND:${formatIcsDate(event.endsAt)}`,
    `SUMMARY:${escape(event.title)}`,
    `DESCRIPTION:${escape(event.description)}`,
    `LOCATION:Little Island Pub, Frýdek-Místek`,
    'END:VEVENT',
    'END:VCALENDAR',
  ].join('\r\n');
 
  return new Response(ics, {
    headers: {
      'Content-Type': 'text/calendar; charset=utf-8',
      'Content-Disposition': `attachment; filename="${event.slug}.ics"`,
    },
  });
}

Drobnost, ale uživatelé to vážně používají (~12 % kliknutí na event jde na Přidat do kalendáře).

SEO play

Cílení na lokální search:

KWMěs. objemPozice T+30
irish pub frydek mistek110#1
guinness frydek70#1
whiskey bar ostrava320#6 (ne lokálně, soutěž z Ostravy)
live music frydek90#2
firemní akce restaurace frydek40#1

Klíčové: strukturovaná data Restaurant + LocalBusiness, Google Maps embed, kompletní NAP (name-address-phone) konzistentní na webu i v Google Business Profile. Bez toho lokální Google nepustí.

Lessons

  • Klient bez času na content updates = static-first design. Žádný CMS dashboard, MDX commits přes Vercel deploy. Když potřebuje přidat whiskey, pošle mi zprávu, já udělám PR za 2 minuty.
  • Brand language v CSS je sales tool. Test "popiš první dojem" zachytil 5 z 5 lidí slovy "irská hospoda" - to je vyšší ROI než SEO copy.
  • Manuální booking je feature, ne bug. Soukromé akce vyžadují konverzaci, ne kalendář. Form je friction filter pro nekvalitní leady.
  • ICS export je ledničkový magnet. Stojí 30 řádků kódu, používá to 12 % uživatelů, ostatní ho vidí a vnímají to jako "tahle hospoda má vychytaný web".
  • Strukturovaná data Restaurant > obecná Page. Bez nich tě Google Maps nedohrávají v lokálních výsledcích.