Initial Next.js 14 project — HyggeCraftery web

- App Router mit TypeScript & Tailwind CSS
- Landing Page mit Hero, Über uns, Shop-Teaser, Apps-Teaser, Newsletter
- /shop mit 6 Platzhalter-Produkten
- /apps Übersicht mit Snakkimo, Fittimo, Rezeptimo
- Nav mit Apps-Dropdown, Footer
- Design System: Cormorant Garamond + Mulish, Markenfarben
- lib/shopify.ts als Platzhalter für Storefront API
- Hero-Bild aus ZIP übernommen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/ui/Nav.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+
+const apps = [
+  { name: 'Snakkimo', href: '/apps/snakkimo', accent: '#7BA7BC' },
+  { name: 'Fittimo', href: '/apps/fittimo', accent: '#7DAF8A' },
+  { name: 'Rezeptimo', href: '/apps/rezeptimo', accent: '#C4896A' },
+]
+
+export default function Nav() {
+  const [appsOpen, setAppsOpen] = useState(false)
+
+  return (
+    <header
+      style={{
+        position: 'relative',
+        zIndex: 100,
+        maxWidth: 1240,
+        margin: '0 auto',
+        padding: '34px 48px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      {/* Logo */}
+      <Link href="/" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
+        <div
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: '50% 50% 50% 12px',
+            background: '#A8B89A',
+          }}
+        />
+        <span
+          style={{
+            fontFamily: 'var(--font-cormorant), "Cormorant Garamond", serif',
+            fontSize: 25,
+            fontWeight: 600,
+            letterSpacing: 0.5,
+            color: '#3D2B1F',
+          }}
+        >
+          HyggeCraftery
+        </span>
+      </Link>
+
+      {/* Nav links */}
+      <nav style={{ display: 'flex', alignItems: 'center', gap: 38 }}>
+        <Link href="/#ueber" style={navLinkStyle}>Über uns</Link>
+        <Link href="/shop" style={navLinkStyle}>Shop</Link>
+
+        {/* Apps dropdown */}
+        <div
+          style={{ position: 'relative' }}
+          onMouseEnter={() => setAppsOpen(true)}
+          onMouseLeave={() => setAppsOpen(false)}
+        >
+          <button
+            style={{ ...navLinkStyle, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
+            onClick={() => setAppsOpen((v) => !v)}
+            aria-expanded={appsOpen}
+          >
+            Apps
+          </button>
+
+          {appsOpen && (
+            <div
+              style={{
+                position: 'absolute',
+                top: '100%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                marginTop: 12,
+                background: '#FAFAF7',
+                border: '1.5px solid #F5F0E8',
+                borderRadius: 20,
+                padding: '8px 0',
+                minWidth: 160,
+                boxShadow: '0 8px 32px rgba(61,43,31,0.10)',
+                zIndex: 200,
+              }}
+            >
+              {apps.map((app) => (
+                <Link
+                  key={app.name}
+                  href={app.href}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    padding: '10px 20px',
+                    textDecoration: 'none',
+                    color: '#3D2B1F',
+                    fontSize: 14.5,
+                    fontWeight: 500,
+                  }}
+                  onClick={() => setAppsOpen(false)}
+                >
+                  <span
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      background: app.accent,
+                      flexShrink: 0,
+                    }}
+                  />
+                  {app.name}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <Link
+          href="/#newsletter"
+          style={{
+            textDecoration: 'none',
+            color: '#FAFAF7',
+            background: '#3D2B1F',
+            fontSize: 14,
+            fontWeight: 600,
+            letterSpacing: 0.3,
+            padding: '11px 22px',
+            borderRadius: 40,
+          }}
+        >
+          Newsletter
+        </Link>
+      </nav>
+    </header>
+  )
+}
+
+const navLinkStyle: React.CSSProperties = {
+  textDecoration: 'none',
+  color: '#3D2B1F',
+  fontSize: 14.5,
+  fontWeight: 500,
+  letterSpacing: 0.3,
+  opacity: 0.78,
+}