feat(demo): contact me page with channel cards

[fpindej]

Summary

Create a "Contact Me" page with a grid of contact channel cards (Email, LinkedIn, GitHub, Web). This is a simple static page that links to the developer's real contact information, serving as both a demo page and actual contact surface.

Context

The old demo had a clean card grid at demo.netrock.dev/contact:

• 2x2 grid on desktop, stacked on mobile
• Each card: Icon + Title + short description + action button
• Channels: Email, LinkedIn, GitHub, Web

Implementation Details

1. Route

src/frontend/src/routes/(app)/contact/
├── +page.svelte      # Contact me page
└── +page.server.ts   # Minimal server load (user from parent)

2. Page Content

Header:

• Title: "Contact Us" / "Napište nám"
• Subtitle: "Have a question, idea, or just want to say hello? Reach out through any of these channels."

Cards (2x2 grid → stacked on mobile):

Channel	Icon	Description (en)	Description (cs)	Link
Email	Mail	Send us an email anytime.	Napište mi e-mail kdykoliv.	mailto:contact@mail.pindej.cz
LinkedIn	Linkedin	Connect with us on LinkedIn.	Spojte se se mnou na LinkedInu.	https://www.linkedin.com/in/filip-dorian-pindej/
GitHub	Github	Check out the source code.	Podívejte se na zdrojový kód.	https://github.com/fpindej
Web	Globe	Visit our personal website.	Navštivte můj osobní web.	https://pindej.cz

3. Component

The page is simple enough to be inline in +page.svelte, but extract a reusable ContactChannelCard if desired:

<Card.Root class="hover:border-primary/50 transition-colors">
    <Card.Header>
        <div class="flex items-center gap-3">
            <Icon class="h-5 w-5 text-muted-foreground" />
            <Card.Title>{title}</Card.Title>
        </div>
    </Card.Header>
    <Card.Content>
        <p class="text-sm text-muted-foreground">{description}</p>
    </Card.Content>
    <Card.Footer>
        <Button variant="outline" size="sm" href={link} target="_blank" rel="noopener">
            <Icon class="me-2 h-4 w-4" />
            {buttonLabel}
        </Button>
    </Card.Footer>
</Card.Root>

4. Layout

<div class="grid gap-6 sm:grid-cols-2">
    {#each channels as channel}
        <ContactChannelCard {...channel} />
    {/each}
</div>

• Mobile: Single column (cards stack)
• Tablet/Desktop: 2 columns
• Cards have hover effect (subtle border color change)
• External links open in new tab with rel="noopener"

5. i18n Keys

"contact_title": "Contact Us",
"contact_description": "Have a question, idea, or just want to say hello? Reach out through any of these channels.",
"contact_email_title": "Email",
"contact_email_description": "Send us an email anytime.",
"contact_email_button": "Email",
"contact_linkedin_title": "LinkedIn",
"contact_linkedin_description": "Connect with us on LinkedIn.",
"contact_linkedin_button": "LinkedIn",
"contact_github_title": "GitHub",
"contact_github_description": "Check out the source code.",
"contact_github_button": "GitHub",
"contact_web_title": "Web",
"contact_web_description": "Visit our personal website.",
"contact_web_button": "Web"

Czech translations:

"contact_title": "Napište nám",
"contact_description": "Máte otázku, nápad, nebo chcete jen pozdravit? Ozvěte se přes některý z těchto kanálů.",
"contact_email_title": "E-mail",
"contact_email_description": "Napište mi e-mail kdykoliv.",
"contact_email_button": "E-mail",
"contact_linkedin_title": "LinkedIn",
"contact_linkedin_description": "Spojte se se mnou na LinkedInu.",
"contact_linkedin_button": "LinkedIn",
"contact_github_title": "GitHub",
"contact_github_description": "Podívejte se na zdrojový kód.",
"contact_github_button": "GitHub",
"contact_web_title": "Web",
"contact_web_description": "Navštivte můj osobní web.",
"contact_web_button": "Web"

6. Contact Info (from project memory)

• Email: contact@mail.pindej.cz
• LinkedIn: https://www.linkedin.com/in/filip-dorian-pindej/
• GitHub: https://github.com/fpindej
• Web: https://pindej.cz

Verification

cd src/frontend && pnpm run test && pnpm run format && pnpm run lint && pnpm run check

Dependencies

• Requires issue feat(demo): update sidebar navigation for demo pages #2 (Sidebar nav) for navigation item

Acceptance Criteria

• Page renders at /contact with header and 4 channel cards
• Cards in 2-column grid on desktop/iPad, single column on mobile
• Each card has icon, title, description, and action button
• External links open in new tab
• Email link uses mailto: protocol
• Hover effects on cards
• i18n: all text in en + cs
• Dark mode compatible
• Touch-friendly button sizes (44px)

[fpindej]

Dependencies

• Requires feat(demo): update sidebar navigation for demo pages #2 (sidebar nav) for navigation item
• No backend dependencies — this is a static page