admin/hyggecraftery-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Next.js 14 project — HyggeCraftery web

Browse Source 
- 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>
This commit is contained in:
Tim Leikauf
2026-06-28 23:04:02 +02:00
parent 4bdf182958
commit 7f67d123d6
15 changed files with 1124 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
app/page.tsx
View File

@@ -1,101 +1,203 @@
import Image from "next/image";
import Image from 'next/image'
import Link from 'next/link'
import NewsletterForm from '@/components/ui/NewsletterForm'
export default function Home() {
export default function HomePage() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="https://nextjs.org/icons/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden', position: 'relative', lineHeight: 1.6 }}>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="https://nextjs.org/icons/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
{/* ===== HERO ===== */}
<section style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '40px 48px 90px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
<div style={{ position: 'relative', zIndex: 5 }}>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: '#F5F0E8', borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 28 }}>
<span style={{ width: 7, height: 7, borderRadius: '50%', background: '#C4896A', display: 'inline-block' }} />
<span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#8a7a68' }}>Seit 2019 · Schweden</span>
</div>
<h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 78, lineHeight: 1.04, letterSpacing: -1, margin: '0 0 24px', color: '#3D2B1F' }}>
Leben.<br />
<span style={{ fontStyle: 'italic', color: '#C4896A' }}>Langsam.</span> Schön.
</h1>
<p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 38px' }}>
Handgemachte Stücke und sanfte Rituale für ein Zuhause, das zur Ruhe einlädt. Wir feiern das Langsame, das Echte, das Wesentliche.
</p>
<div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
<Link href="/shop" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: '#C4896A', color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, letterSpacing: 0.3, padding: '16px 32px', borderRadius: 44 }}>
Entdecken
<span style={{ display: 'inline-block', width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)' }} />
</Link>
<Link href="/#ueber" style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: '1.5px solid #A8B89A', paddingBottom: 3 }}>
Unsere Geschichte
</Link>
</div>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
<div style={{ position: 'relative', height: 560 }}>
<div style={{ position: 'absolute', right: -30, top: 20, width: '120%', height: 520, background: '#F5F0E8', borderRadius: '46% 54% 48% 52% / 56% 44% 56% 44%' }} />
<div style={{ position: 'absolute', inset: 0, right: -10, borderRadius: '48% 52% 46% 54% / 54% 46% 54% 46%', overflow: 'hidden', background: '#EDE6DA' }}>
<Image
src="/hero-lifestyle.png"
alt="Stilles Stillleben mit zwei Tassen Tee, getrockneten Blumen und Leinen am Fenster"
fill
style={{ objectFit: 'cover' }}
priority
/>
</div>
<div className="animate-float" style={{ position: 'absolute', left: -46, bottom: 30, width: 118, height: 118, borderRadius: '50% 50% 50% 14px', background: '#A8B89A', zIndex: 6 }} />
<div className="animate-float-slow" style={{ position: 'absolute', right: 8, top: -18, width: 64, height: 64, borderRadius: '50%', background: '#C4896A', opacity: 0.85, zIndex: 6 }} />
</div>
</section>
{/* ===== ÜBER UNS ===== */}
<section id="ueber" style={{ position: 'relative', background: '#F5F0E8', padding: '120px 48px' }}>
<div style={{ position: 'absolute', left: -90, top: 60, width: 240, height: 240, borderRadius: '42% 58% 60% 40% / 52% 44% 56% 48%', background: '#FAFAF7', opacity: 0.6 }} />
<div style={{ position: 'absolute', right: -60, bottom: -40, width: 200, height: 200, borderRadius: '50% 50% 46% 54% / 58% 50% 50% 42%', background: '#A8B89A', opacity: 0.32 }} />
<div style={{ position: 'relative', zIndex: 3, maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#A8B89A' }}>Über uns</span>
<p style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 400, fontSize: 38, lineHeight: 1.42, letterSpacing: -0.4, color: '#3D2B1F', margin: '26px auto 0', maxWidth: 760 }}>
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.
</p>
</div>
</section>
{/* ===== SHOP TEASER ===== */}
<section id="shop" style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '120px 48px' }}>
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 54, gap: 24, flexWrap: 'wrap' }}>
<div>
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#C4896A' }}>Shop</span>
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, letterSpacing: -0.8, color: '#3D2B1F', margin: '14px 0 0' }}>
Stücke fürs Zuhause
</h2>
</div>
<Link href="/shop" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, border: '1.5px solid #3D2B1F', color: '#3D2B1F', fontSize: 15, fontWeight: 600, padding: '14px 28px', borderRadius: 44 }}>
Zum Shop <span style={{ fontSize: 18, lineHeight: 1 }}>→</span>
</Link>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30 }}>
{shopProducts.map((p) => (
<Link key={p.name} href="/shop" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
<div style={{ position: 'relative', height: 360, borderRadius: 30, overflow: 'hidden', background: p.bg, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 18 }}>
{p.badge && (
<span style={{ position: 'absolute', top: 18, left: 18, background: '#A8B89A', color: '#FAFAF7', fontSize: 11.5, fontWeight: 700, letterSpacing: 0.6, padding: '6px 13px', borderRadius: 30 }}>
{p.badge}
</span>
)}
<span style={{ fontFamily: 'Mulish, monospace', fontSize: 11.5, letterSpacing: 1, color: '#8a7a68', background: 'rgba(250,250,247,0.72)', padding: '7px 13px', borderRadius: 18 }}>
[ Produktfoto ]
</span>
</div>
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 18 }}>
<h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 23, color: '#3D2B1F', margin: 0 }}>{p.name}</h3>
<span style={{ fontSize: 15, fontWeight: 700, color: '#C4896A' }}>{p.price}</span>
</div>
<p style={{ fontSize: 14, color: '#8a7a68', margin: '5px 0 0' }}>{p.desc}</p>
</Link>
))}
</div>
</section>
{/* ===== APPS TEASER ===== */}
<section id="apps" style={{ position: 'relative', background: '#3D2B1F', color: '#FAFAF7', padding: '120px 48px', borderRadius: '60px 60px 0 0' }}>
<div style={{ maxWidth: 1240, margin: '0 auto' }}>
<div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 60px' }}>
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#A8B89A' }}>Unsere Apps</span>
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, letterSpacing: -0.8, margin: '14px 0 16px', color: '#FAFAF7' }}>
Achtsamkeit in der Tasche
</h2>
<p style={{ fontSize: 16, color: 'rgba(250,250,247,0.62)', margin: 0 }}>
Drei sanfte Begleiter für einen langsameren, bewussteren Alltag.
</p>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 26 }}>
{appCards.map((app) => (
<div key={app.name} style={{ background: 'rgba(250,250,247,0.05)', border: '1px solid rgba(250,250,247,0.1)', borderRadius: 30, padding: '38px 32px' }}>
<div style={{ width: 62, height: 62, borderRadius: app.iconRadius, background: app.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
<span style={app.iconInner} />
</div>
<h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 27, margin: '0 0 10px', color: '#FAFAF7' }}>{app.name}</h3>
<p style={{ fontSize: 14.5, color: 'rgba(250,250,247,0.6)', margin: '0 0 22px' }}>{app.desc}</p>
<Link href={app.href} style={{ textDecoration: 'none', fontSize: 14.5, fontWeight: 600, color: app.linkColor, borderBottom: `1.5px solid ${app.linkColor}50`, paddingBottom: 2 }}>
Mehr erfahren →
</Link>
</div>
))}
</div>
</div>
</section>
{/* ===== NEWSLETTER ===== */}
<section id="newsletter" style={{ position: 'relative', background: '#3D2B1F', padding: '0 48px 120px' }}>
<div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', background: '#FAFAF7', borderRadius: 44, padding: '72px 56px', textAlign: 'center', overflow: 'hidden' }}>
<div style={{ position: 'absolute', right: -40, top: -40, width: 160, height: 160, borderRadius: '50% 50% 46% 54% / 56% 50% 50% 44%', background: '#F5F0E8' }} />
<div style={{ position: 'absolute', left: -30, bottom: -30, width: 110, height: 110, borderRadius: '50% 50% 50% 14px', background: '#A8B89A', opacity: 0.4 }} />
<div style={{ position: 'relative', zIndex: 3 }}>
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#C4896A' }}>Newsletter</span>
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '18px 0 14px' }}>
Ein wenig Hygge in dein Postfach
</h2>
<p style={{ fontSize: 16, color: '#8a7a68', margin: '0 auto 36px', maxWidth: 460 }}>
Sanfte Geschichten, saisonale Rituale und stille Inspiration — etwa einmal im Monat, ganz ohne Eile.
</p>
<NewsletterForm />
</div>
</div>
</section>
</div>
);
)
}
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',
},
]