From 7f67d123d6415de92418393a0af36f2f43d49b32 Mon Sep 17 00:00:00 2001 From: Tim Leikauf Date: Sun, 28 Jun 2026 23:04:02 +0200 Subject: [PATCH] =?UTF-8?q?Initial=20Next.js=2014=20project=20=E2=80=94=20?= =?UTF-8?q?HyggeCraftery=20web?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .gitignore | 6 + app/apps/fittimo/page.tsx | 109 ++++++++++++ app/apps/page.tsx | 102 +++++++++++ app/apps/rezeptimo/page.tsx | 109 ++++++++++++ app/apps/snakkimo/page.tsx | 109 ++++++++++++ app/globals.css | 39 +++-- app/layout.tsx | 69 +++++--- app/page.tsx | 292 +++++++++++++++++++++---------- app/shop/page.tsx | 71 ++++++++ components/ui/Footer.tsx | 95 ++++++++++ components/ui/Nav.tsx | 146 ++++++++++++++++ components/ui/NewsletterForm.tsx | 65 +++++++ lib/shopify.ts | 31 ++++ public/hero-lifestyle.png | Bin 0 -> 8843136 bytes tailwind.config.ts | 26 ++- 15 files changed, 1124 insertions(+), 145 deletions(-) create mode 100644 app/apps/fittimo/page.tsx create mode 100644 app/apps/page.tsx create mode 100644 app/apps/rezeptimo/page.tsx create mode 100644 app/apps/snakkimo/page.tsx create mode 100644 app/shop/page.tsx create mode 100644 components/ui/Footer.tsx create mode 100644 components/ui/Nav.tsx create mode 100644 components/ui/NewsletterForm.tsx create mode 100644 lib/shopify.ts create mode 100644 public/hero-lifestyle.png diff --git a/.gitignore b/.gitignore index fd3dbb5..ec5f96b 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,9 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# env files +.env +.env.local +.env.development.local +.env.production.local diff --git a/app/apps/fittimo/page.tsx b/app/apps/fittimo/page.tsx new file mode 100644 index 0000000..647994c --- /dev/null +++ b/app/apps/fittimo/page.tsx @@ -0,0 +1,109 @@ +import type { Metadata } from 'next' +import Link from 'next/link' + +export const metadata: Metadata = { + title: 'Fittimo – Bewegung im Alltag | HyggeCraftery', + description: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang.', +} + +const accent = '#7DAF8A' + +const features = [ + { title: 'Sanfte Übungen', desc: 'Keine schweißtreibenden Sessions — sanfte Bewegung, die sich gut anfühlt.' }, + { title: 'Atemübungen', desc: 'Atme dich in die Ruhe. Geführte Übungen für Momente der Stille.' }, + { title: 'Jederzeit & überall', desc: 'Kein Gym nötig. Eine Kachel, eine Übung, ein Moment für dich.' }, + { title: 'Körper & Geist', desc: 'Bewegung als Ritual — nicht als Pflicht. Fittimo verbindet beides.' }, +] + +export default function FittimoPage() { + return ( +
+ + {/* App-Header */} +
+
+
+ +
+
+ Fittimo + by HyggeCraftery +
+
+ +
+ + {/* Hero */} +
+
+
+ + Bewegung im Alltag +
+

+ Eine Übung.
Jederzeit.
Überall. +

+

+ Bewegung, die sich anfühlt wie durch einen schönen Feed scrollen. Kleine Übungen, großer Effekt — ganz ohne Druck. +

+ +
+ +
+
+
+ F +
+
+
+ + {/* Features */} +
+
+
+ Features +

+ Warum Fittimo? +

+
+
+ {features.map((f) => ( +
+

{f.title}

+

{f.desc}

+
+ ))} +
+
+
+ + {/* Download */} +
+
+

+ Bereit für mehr Bewegung? +

+

+ Fittimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon. +

+ + Benachrichtigen lassen → + +
+
+ +
+ ) +} diff --git a/app/apps/page.tsx b/app/apps/page.tsx new file mode 100644 index 0000000..634bf38 --- /dev/null +++ b/app/apps/page.tsx @@ -0,0 +1,102 @@ +import type { Metadata } from 'next' +import Link from 'next/link' + +export const metadata: Metadata = { + title: 'Apps – HyggeCraftery', + description: 'Drei sanfte Apps für einen langsameren, bewussteren Alltag.', +} + +const apps = [ + { + name: 'Snakkimo', + tagline: 'Eine Kachel. Eine Lektion. Eine Sprache.', + desc: 'Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt — ganz ohne Druck.', + href: '/apps/snakkimo', + accent: '#7BA7BC', + iconRadius: '20px 20px 20px 6px', + badge: 'Sprachen lernen für Erwachsene', + }, + { + name: 'Fittimo', + tagline: 'Eine Übung. Jederzeit. Überall.', + desc: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang. Kleine Übungen, großer Effekt.', + href: '/apps/fittimo', + accent: '#7DAF8A', + iconRadius: '20px 6px 20px 20px', + badge: 'Bewegung im Alltag', + }, + { + name: 'Rezeptimo', + tagline: 'Ein Rezept. Einfach. Genussvoll.', + desc: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend. Ganz ohne Stress.', + href: '/apps/rezeptimo', + accent: '#C4896A', + iconRadius: '6px 20px 20px 20px', + badge: 'Kochen mit Freude', + }, +] + +export default function AppsPage() { + return ( +
+
+ +
+ Unsere Apps +

+ Achtsamkeit in der Tasche +

+

+ Drei sanfte Begleiter für einen langsameren, bewussteren Alltag. +

+
+ +
+ {apps.map((app, i) => ( + + {i % 2 !== 0 && ( +
+ {app.badge} +

{app.tagline}

+

{app.desc}

+ Mehr erfahren → +
+ )} + +
+
+ + {app.name[0]} + +
+
+ + {i % 2 === 0 && ( +
+ {app.badge} +

{app.tagline}

+

{app.desc}

+ Mehr erfahren → +
+ )} + + ))} +
+
+
+ ) +} diff --git a/app/apps/rezeptimo/page.tsx b/app/apps/rezeptimo/page.tsx new file mode 100644 index 0000000..e3c4851 --- /dev/null +++ b/app/apps/rezeptimo/page.tsx @@ -0,0 +1,109 @@ +import type { Metadata } from 'next' +import Link from 'next/link' + +export const metadata: Metadata = { + title: 'Rezeptimo – Kochen mit Freude | HyggeCraftery', + description: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend.', +} + +const accent = '#C4896A' + +const features = [ + { title: 'Saisonal', desc: 'Rezepte, die mit der Natur gehen. Frühling, Sommer, Herbst, Winter.' }, + { title: 'Einfach', desc: 'Wenige Zutaten, klare Schritte — Kochen als Meditation, nicht als Stress.' }, + { title: 'Ehrlich', desc: 'Keine Hochglanzküche. Echtes Essen für echte Menschen.' }, + { title: 'Nährend', desc: 'Gut für Körper und Seele. Slow Food im besten Sinne.' }, +] + +export default function RezeptimoPage() { + return ( +
+ + {/* App-Header */} +
+
+
+ +
+
+ Rezeptimo + by HyggeCraftery +
+
+ +
+ + {/* Hero */} +
+
+
+ + Kochen mit Freude +
+

+ Ein Rezept.
Einfach.
Genussvoll. +

+

+ Kochen, das sich anfühlt wie durch einen schönen Feed scrollen. Saisonale Rezepte, einfach gemacht — ganz ohne Stress. +

+ +
+ +
+
+
+ R +
+
+
+ + {/* Features */} +
+
+
+ Features +

+ Warum Rezeptimo? +

+
+
+ {features.map((f) => ( +
+

{f.title}

+

{f.desc}

+
+ ))} +
+
+
+ + {/* Download */} +
+
+

+ Bereit für langsames Kochen? +

+

+ Rezeptimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon. +

+ + Benachrichtigen lassen → + +
+
+ +
+ ) +} diff --git a/app/apps/snakkimo/page.tsx b/app/apps/snakkimo/page.tsx new file mode 100644 index 0000000..d0f6066 --- /dev/null +++ b/app/apps/snakkimo/page.tsx @@ -0,0 +1,109 @@ +import type { Metadata } from 'next' +import Link from 'next/link' + +export const metadata: Metadata = { + title: 'Snakkimo – Sprachen lernen | HyggeCraftery', + description: 'Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt.', +} + +const accent = '#7BA7BC' + +const features = [ + { title: 'Kachelformat', desc: 'Jede Lektion passt auf eine Kachel — kein Scrollen, kein Suchen, einfach lernen.' }, + { title: 'Tägliche Impulse', desc: 'Eine neue Vokabel, ein neuer Satz, ein neuer Moment. Jeden Tag.' }, + { title: 'Ohne Druck', desc: 'Kein Streak-Stress, keine Punktejagd. Nur du und die Sprache.' }, + { title: 'Viele Sprachen', desc: 'Spanisch, Französisch, Schwedisch, Japanisch und viele mehr.' }, +] + +export default function SnakkimoPage() { + return ( +
+ + {/* App-Header */} +
+
+
+ +
+
+ Snakkimo + by HyggeCraftery +
+
+ +
+ + {/* Hero */} +
+
+
+ + Sprachen lernen für Erwachsene +
+

+ Eine Kachel.
Eine Lektion.
Eine Sprache. +

+

+ Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt — ganz ohne Druck. +

+ +
+ +
+
+
+ S +
+
+
+ + {/* Features */} +
+
+
+ Features +

+ Warum Snakkimo? +

+
+
+ {features.map((f) => ( +
+

{f.title}

+

{f.desc}

+
+ ))} +
+
+
+ + {/* Download */} +
+
+

+ Bereit zum Lernen? +

+

+ Snakkimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon. +

+ + Benachrichtigen lassen → + +
+
+ +
+ ) +} diff --git a/app/globals.css b/app/globals.css index 13d40b8..dfc607c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,26 +2,31 @@ @tailwind components; @tailwind utilities; -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } +* { + box-sizing: border-box; } body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; + margin: 0; + font-family: 'Mulish', sans-serif; + color: #3D2B1F; + background: #FAFAF7; } -@layer utilities { - .text-balance { - text-wrap: balance; - } +@keyframes hcFloat { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-18px) rotate(4deg); } +} + +@keyframes hcFloatSlow { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(14px); } +} + +.animate-float { + animation: hcFloat 9s ease-in-out infinite; +} + +.animate-float-slow { + animation: hcFloatSlow 7s ease-in-out infinite; } diff --git a/app/layout.tsx b/app/layout.tsx index a36cde0..4fd10b7 100644 --- 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 ( - - - {children} + + + {/* Noise texture overlay */} +
+