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>
2026-06-28 23:04:02 +02:00
parent 4bdf182958
commit 7f67d123d6
15 changed files with 1124 additions and 145 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,35 +1,54 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Cormorant_Garamond, Mulish } from 'next/font/google'
+import './globals.css'
+import Nav from '@/components/ui/Nav'
+import Footer from '@/components/ui/Footer'

-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+const cormorant = Cormorant_Garamond({
+  subsets: ['latin'],
+  weight: ['400', '500', '600'],
+  style: ['normal', 'italic'],
+  variable: '--font-cormorant',
+})
+
+const mulish = Mulish({
+  subsets: ['latin'],
+  weight: ['300', '400', '500', '600', '700'],
+  variable: '--font-mulish',
+})

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'HyggeCraftery – Leben. Langsam. Schön.',
+  description:
+    'Handgemachte Stücke und sanfte Rituale für ein Zuhause, das zur Ruhe einlädt. Skandinavisches Lifestyle-Handwerk aus Schweden.',
+  metadataBase: new URL('https://hyggecraftery.com'),
+}

 export default function RootLayout({
  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="de" className={`${cormorant.variable} ${mulish.variable}`}>
+      <body>
+        {/* Noise texture overlay */}
+        <div
+          aria-hidden
+          style={{
+            position: 'fixed',
+            inset: 0,
+            pointerEvents: 'none',
+            zIndex: 90,
+            opacity: 0.05,
+            mixBlendMode: 'multiply',
+            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+          }}
+        />
+        <Nav />
+        <main>{children}</main>
+        <Footer />
      </body>
    </html>
-  );
+  )
 }