-
-
-
-
- Read our docs
-
+ {/* ===== HERO ===== */}
+
+
+
+ Seit 2019 · Schweden
+
+
+ Leben.Langsam. Schön.
+
+
+ Handgemachte Stücke und sanfte Rituale für ein Zuhause, das zur Ruhe einlädt. Wir feiern das Langsame, das Echte, das Wesentliche.
+
+
+
+
+ {/* ===== ÜBER UNS ===== */}
+
+
+
+
+
Über uns
+
+ HyggeCraftery wurde aus einer einfachen Sehnsucht geboren — nach mehr Wärme im Alltag. Wir gestalten Dinge, die zum Innehalten einladen, von Hand und mit Bedacht gefertigt. Denn das schönste Leben ist nicht das schnellste, sondern das achtsamste.
+
+
+
+ {/* ===== SHOP TEASER ===== */}
+
+
+
+ Shop
+
+ Stücke fürs Zuhause
+
+
+
+ Zum Shop
→
+
+
+ {shopProducts.map((p) => (
+
+
+ {p.badge && (
+
+ {p.badge}
+
+ )}
+
+ [ Produktfoto ]
+
+
+
+
{p.name}
+ {p.price}
+
+
{p.desc}
+
+ ))}
+
+
+ {/* ===== APPS TEASER ===== */}
+
+
+
+
Unsere Apps
+
+ Achtsamkeit in der Tasche
+
+
+ Drei sanfte Begleiter für einen langsameren, bewussteren Alltag.
+
+
+
+
+ {appCards.map((app) => (
+
+
+
+
{app.name}
+
{app.desc}
+
+ Mehr erfahren →
+
+
+ ))}
+
+
+
+ {/* ===== NEWSLETTER ===== */}
+
+
+
+
+
+
Newsletter
+
+ Ein wenig Hygge in dein Postfach
+
+
+ Sanfte Geschichten, saisonale Rituale und stille Inspiration — etwa einmal im Monat, ganz ohne Eile.
+
+
+
+
+
- );
+ )
}
+
+const shopProducts = [
+ {
+ name: 'Leinen-Kissen «Fjord»',
+ price: '€ 48',
+ desc: 'Sanftes Leinen in gedämpftem Salbei.',
+ badge: 'Neu',
+ bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E7DDCC 11px,#E7DDCC 22px)',
+ },
+ {
+ name: 'Keramik-Tasse «Lykke»',
+ price: '€ 32',
+ desc: 'Handgedreht, jede ein Unikat.',
+ badge: null,
+ bg: 'repeating-linear-gradient(40deg,#EEE6D6,#EEE6D6 11px,#E4D9C7 11px,#E4D9C7 22px)',
+ },
+ {
+ name: 'Duftkerze «Skog»',
+ price: '€ 26',
+ desc: 'Zeder, Moos und stiller Wald.',
+ badge: null,
+ bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E6DBCA 11px,#E6DBCA 22px)',
+ },
+]
+
+const appCards = [
+ {
+ name: 'Snakkimo',
+ desc: 'Tägliche Sprach-Impulse, die dich in kleinen Schritten weiterbringen.',
+ href: '/apps/snakkimo',
+ accent: '#A8B89A',
+ iconRadius: '20px 20px 20px 6px',
+ iconInner: { width: 24, height: 24, borderRadius: '50%', border: '3px solid #3D2B1F', display: 'inline-block' } as React.CSSProperties,
+ linkColor: '#A8B89A',
+ },
+ {
+ name: 'Fittimo',
+ desc: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang.',
+ href: '/apps/fittimo',
+ accent: '#C4896A',
+ iconRadius: '20px 6px 20px 20px',
+ iconInner: { width: 24, height: 24, background: '#3D2B1F', transform: 'rotate(45deg)', borderRadius: 5, display: 'inline-block' } as React.CSSProperties,
+ linkColor: '#C4896A',
+ },
+ {
+ name: 'Rezeptimo',
+ desc: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend.',
+ href: '/apps/rezeptimo',
+ accent: '#F5F0E8',
+ iconRadius: '6px 20px 20px 20px',
+ iconInner: { width: 24, height: 24, borderRadius: '50% 50% 50% 4px', background: '#3D2B1F', display: 'inline-block' } as React.CSSProperties,
+ linkColor: '#F5F0E8',
+ },
+]
diff --git a/app/shop/page.tsx b/app/shop/page.tsx
new file mode 100644
index 0000000..a7cdf9c
--- /dev/null
+++ b/app/shop/page.tsx
@@ -0,0 +1,71 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+ title: 'Shop – HyggeCraftery',
+ description: 'Handgemachte Stücke für ein langsameres, schöneres Zuhause.',
+}
+
+const products = [
+ { name: 'Leinen-Kissen «Fjord»', price: '€ 48', desc: 'Sanftes Leinen in gedämpftem Salbei.', badge: 'Neu', bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E7DDCC 11px,#E7DDCC 22px)' },
+ { name: 'Keramik-Tasse «Lykke»', price: '€ 32', desc: 'Handgedreht, jede ein Unikat.', badge: null, bg: 'repeating-linear-gradient(40deg,#EEE6D6,#EEE6D6 11px,#E4D9C7 11px,#E4D9C7 22px)' },
+ { name: 'Duftkerze «Skog»', price: '€ 26', desc: 'Zeder, Moos und stiller Wald.', badge: null, bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E6DBCA 11px,#E6DBCA 22px)' },
+ { name: 'Wolldecke «Vintersol»', price: '€ 89', desc: 'Weiche Merinowolle in warmen Tönen.', badge: 'Bald', bg: 'repeating-linear-gradient(40deg,#EDE5D5,#EDE5D5 11px,#E3D8C5 11px,#E3D8C5 22px)' },
+ { name: 'Keramik-Schale «Ro»', price: '€ 38', desc: 'Für Früchte, Schlüssel oder stille Momente.', badge: null, bg: 'repeating-linear-gradient(40deg,#F2EAD8,#F2EAD8 11px,#E8DEC8 11px,#E8DEC8 22px)' },
+ { name: 'Leinentuch «Morgon»', price: '€ 44', desc: 'Natürlich, weich, zeitlos.', badge: null, bg: 'repeating-linear-gradient(40deg,#EFE8D8,#EFE8D8 11px,#E5DBC6 11px,#E5DBC6 22px)' },
+]
+
+export default function ShopPage() {
+ return (
+
+
+
+ {/* Header */}
+
+
Shop
+
+ Stücke fürs Zuhause
+
+
+ Handgefertigte Objekte für ein langsameres, bewussteres Zuhause.
+ Jedes Stück ist mit Bedacht ausgewählt.
+
+
+
+ {/* Shopify-Platzhalter-Hinweis */}
+
+
🛒
+
+ Shop-Integration kommt bald. {' '}
+ Diese Produkte sind Platzhalter. Die Shopify Storefront API wird in{' '}
+ lib/shopify.ts{' '}
+ integriert.
+
+
+
+ {/* Product grid */}
+
+ {products.map((p) => (
+
+
+ {p.badge && (
+
+ {p.badge}
+
+ )}
+
+ [ Produktfoto ]
+
+
+
+
{p.name}
+ {p.price}
+
+
{p.desc}
+
+ ))}
+
+
+
+ )
+}
diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
new file mode 100644
index 0000000..f495364
--- /dev/null
+++ b/components/ui/Footer.tsx
@@ -0,0 +1,95 @@
+import Link from 'next/link'
+
+export default function Footer() {
+ return (
+
+ )
+}
+
+function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/components/ui/Nav.tsx b/components/ui/Nav.tsx
new file mode 100644
index 0000000..c4b277a
--- /dev/null
+++ b/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 (
+
+ {/* Logo */}
+
+
+ HyggeCraftery
+
+
+
+ {/* Nav links */}
+
+ setAppsOpen(true)}
+ onMouseLeave={() => setAppsOpen(false)}
+ >
+
setAppsOpen((v) => !v)}
+ aria-expanded={appsOpen}
+ >
+ Apps
+
+
+ {appsOpen && (
+
+ {apps.map((app) => (
+
+ )}
+
+
+ )
+}
+
+const navLinkStyle: React.CSSProperties = {
+ textDecoration: 'none',
+ color: '#3D2B1F',
+ fontSize: 14.5,
+ fontWeight: 500,
+ letterSpacing: 0.3,
+ opacity: 0.78,
+}
diff --git a/components/ui/NewsletterForm.tsx b/components/ui/NewsletterForm.tsx
new file mode 100644
index 0000000..d1e051f
--- /dev/null
+++ b/components/ui/NewsletterForm.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function NewsletterForm() {
+ const [email, setEmail] = useState('')
+ const [submitted, setSubmitted] = useState(false)
+
+ if (submitted) {
+ return (
+
+
+ ✓
+
+ Tack så mycket! Willkommen in der Ruhe.
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/lib/shopify.ts b/lib/shopify.ts
new file mode 100644
index 0000000..e7a21e5
--- /dev/null
+++ b/lib/shopify.ts
@@ -0,0 +1,31 @@
+// Shopify Storefront API Integration kommt hier
+
+export const SHOPIFY_STOREFRONT_API_URL = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+ ? `https://${process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN}/api/2024-01/graphql.json`
+ : ''
+
+export const SHOPIFY_STOREFRONT_ACCESS_TOKEN =
+ process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? ''
+
+export type ShopifyProduct = {
+ id: string
+ title: string
+ handle: string
+ description: string
+ priceRange: {
+ minVariantPrice: {
+ amount: string
+ currencyCode: string
+ }
+ }
+ images: {
+ edges: Array<{
+ node: {
+ url: string
+ altText: string | null
+ }
+ }>
+ }
+}
+
+// TODO: implement fetchProducts(), fetchProductByHandle(), etc.
diff --git a/public/hero-lifestyle.png b/public/hero-lifestyle.png
new file mode 100644
index 0000000..fbe6385
Binary files /dev/null and b/public/hero-lifestyle.png differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d43da91..79ec5de 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,19 +1,29 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss'
const config: Config = {
content: [
- "./pages/**/*.{js,ts,jsx,tsx,mdx}",
- "./components/**/*.{js,ts,jsx,tsx,mdx}",
- "./app/**/*.{js,ts,jsx,tsx,mdx}",
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
- background: "var(--background)",
- foreground: "var(--foreground)",
+ beige: '#F5F0E8',
+ offwhite: '#FAFAF7',
+ sage: '#A8B89A',
+ terracotta: '#C4896A',
+ darkbrown: '#3D2B1F',
+ snakkimo: '#7BA7BC',
+ fittimo: '#7DAF8A',
+ rezeptimo: '#C4896A',
+ },
+ fontFamily: {
+ serif: ['"Cormorant Garamond"', 'serif'],
+ sans: ['Mulish', 'sans-serif'],
},
},
},
plugins: [],
-};
-export default config;
+}
+export default config