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>
This commit is contained in:
Tim Leikauf
6
.gitignore
vendored
6
.gitignore
vendored
@@ -34,3 +34,9 @@ yarn-error.log*
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# env files
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.production.local
|
||||
|
||||
109
app/apps/fittimo/page.tsx
Normal file
109
app/apps/fittimo/page.tsx
Normal file
@@ -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 (
|
||||
<div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden' }}>
|
||||
|
||||
{/* App-Header */}
|
||||
<header style={{ position: 'relative', zIndex: 10, maxWidth: 1240, margin: '0 auto', padding: '30px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 34, height: 34, borderRadius: '50% 50% 50% 12px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ width: 13, height: 13, borderRadius: '50%', border: '2.5px solid #FAFAF7', display: 'inline-block' }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
|
||||
<span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 24, fontWeight: 600, letterSpacing: 0.4, color: '#3D2B1F' }}>Fittimo</span>
|
||||
<span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#9a8b78', marginTop: 3 }}>by HyggeCraftery</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
|
||||
<Link href="/" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>← HyggeCraftery</Link>
|
||||
<a href="#features" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>Features</a>
|
||||
<a href="#download" style={{ textDecoration: 'none', color: '#FAFAF7', background: accent, fontSize: 14, fontWeight: 600, padding: '11px 22px', borderRadius: 40 }}>App entdecken</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Hero */}
|
||||
<section style={{ maxWidth: 1240, margin: '0 auto', padding: '46px 48px 96px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: `${accent}28`, borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 26 }}>
|
||||
<span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, display: 'inline-block' }} />
|
||||
<span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#4a7a5a' }}>Bewegung im Alltag</span>
|
||||
</div>
|
||||
<h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 66, lineHeight: 1.08, letterSpacing: -0.8, margin: '0 0 22px', color: '#3D2B1F' }}>
|
||||
Eine Übung.<br />Jederzeit.<br /><span style={{ fontStyle: 'italic', color: accent }}>Überall.</span>
|
||||
</h1>
|
||||
<p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 36px' }}>
|
||||
Bewegung, die sich anfühlt wie durch einen schönen Feed scrollen. Kleine Übungen, großer Effekt — ganz ohne Druck.
|
||||
</p>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
|
||||
<a href="#download" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 32px', borderRadius: 44 }}>
|
||||
App entdecken
|
||||
<span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)', display: 'inline-block' }} />
|
||||
</a>
|
||||
<a href="#features" style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: `1.5px solid ${accent}`, paddingBottom: 3 }}>
|
||||
Mehr erfahren
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<div style={{ width: 320, height: 420, borderRadius: '40px 16px 40px 40px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'rgba(250,250,247,0.08)' }} />
|
||||
<span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 96, fontWeight: 600, color: 'rgba(250,250,247,0.9)', position: 'relative', zIndex: 1 }}>F</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section id="features" style={{ background: '#F5F0E8', padding: '100px 48px' }}>
|
||||
<div style={{ maxWidth: 1240, margin: '0 auto' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 60 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: accent }}>Features</span>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 46, letterSpacing: -0.6, color: '#3D2B1F', margin: '14px 0 0' }}>
|
||||
Warum Fittimo?
|
||||
</h2>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
|
||||
{features.map((f) => (
|
||||
<div key={f.title} style={{ background: '#FAFAF7', borderRadius: 28, padding: '36px 40px' }}>
|
||||
<h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 26, color: '#3D2B1F', margin: '0 0 10px' }}>{f.title}</h3>
|
||||
<p style={{ fontSize: 15, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Download */}
|
||||
<section id="download" style={{ background: '#3D2B1F', padding: '100px 48px', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 600, margin: '0 auto' }}>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, color: '#FAFAF7', margin: '0 0 20px' }}>
|
||||
Bereit für mehr Bewegung?
|
||||
</h2>
|
||||
<p style={{ fontSize: 16, color: 'rgba(250,250,247,0.65)', margin: '0 0 40px', lineHeight: 1.7 }}>
|
||||
Fittimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.
|
||||
</p>
|
||||
<Link href="/#newsletter" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }}>
|
||||
Benachrichtigen lassen →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
102
app/apps/page.tsx
Normal file
102
app/apps/page.tsx
Normal file
@@ -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 (
|
||||
<div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7' }}>
|
||||
<div style={{ maxWidth: 1240, margin: '0 auto', padding: '80px 48px 120px' }}>
|
||||
|
||||
<div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 80px' }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#A8B89A' }}>Unsere Apps</span>
|
||||
<h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 58, letterSpacing: -0.8, color: '#3D2B1F', margin: '14px 0 18px' }}>
|
||||
Achtsamkeit in der Tasche
|
||||
</h1>
|
||||
<p style={{ fontSize: 17, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>
|
||||
Drei sanfte Begleiter für einen langsameren, bewussteren Alltag.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
|
||||
{apps.map((app, i) => (
|
||||
<Link
|
||||
key={app.name}
|
||||
href={app.href}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: i % 2 === 0 ? '1fr 2fr' : '2fr 1fr',
|
||||
gap: 48,
|
||||
alignItems: 'center',
|
||||
background: '#F5F0E8',
|
||||
borderRadius: 40,
|
||||
padding: '56px 64px',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
{i % 2 !== 0 && (
|
||||
<div>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: app.accent }}>{app.badge}</span>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '12px 0 16px' }}>{app.tagline}</h2>
|
||||
<p style={{ fontSize: 16, color: '#6b5d4e', margin: '0 0 28px', lineHeight: 1.7 }}>{app.desc}</p>
|
||||
<span style={{ fontSize: 15, fontWeight: 600, color: app.accent, borderBottom: `1.5px solid ${app.accent}`, paddingBottom: 3 }}>Mehr erfahren →</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<div style={{ width: 200, height: 200, borderRadius: app.iconRadius, background: app.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 64, fontWeight: 600, color: 'rgba(250,250,247,0.9)' }}>
|
||||
{app.name[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{i % 2 === 0 && (
|
||||
<div>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: app.accent }}>{app.badge}</span>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '12px 0 16px' }}>{app.tagline}</h2>
|
||||
<p style={{ fontSize: 16, color: '#6b5d4e', margin: '0 0 28px', lineHeight: 1.7 }}>{app.desc}</p>
|
||||
<span style={{ fontSize: 15, fontWeight: 600, color: app.accent, borderBottom: `1.5px solid ${app.accent}`, paddingBottom: 3 }}>Mehr erfahren →</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
109
app/apps/rezeptimo/page.tsx
Normal file
109
app/apps/rezeptimo/page.tsx
Normal file
@@ -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 (
|
||||
<div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden' }}>
|
||||
|
||||
{/* App-Header */}
|
||||
<header style={{ position: 'relative', zIndex: 10, maxWidth: 1240, margin: '0 auto', padding: '30px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 34, height: 34, borderRadius: '50% 50% 50% 12px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ width: 13, height: 13, borderRadius: '50%', border: '2.5px solid #FAFAF7', display: 'inline-block' }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
|
||||
<span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 24, fontWeight: 600, letterSpacing: 0.4, color: '#3D2B1F' }}>Rezeptimo</span>
|
||||
<span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#9a8b78', marginTop: 3 }}>by HyggeCraftery</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
|
||||
<Link href="/" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>← HyggeCraftery</Link>
|
||||
<a href="#features" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>Features</a>
|
||||
<a href="#download" style={{ textDecoration: 'none', color: '#FAFAF7', background: accent, fontSize: 14, fontWeight: 600, padding: '11px 22px', borderRadius: 40 }}>App entdecken</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Hero */}
|
||||
<section style={{ maxWidth: 1240, margin: '0 auto', padding: '46px 48px 96px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: `${accent}28`, borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 26 }}>
|
||||
<span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, display: 'inline-block' }} />
|
||||
<span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#7a5a40' }}>Kochen mit Freude</span>
|
||||
</div>
|
||||
<h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 66, lineHeight: 1.08, letterSpacing: -0.8, margin: '0 0 22px', color: '#3D2B1F' }}>
|
||||
Ein Rezept.<br />Einfach.<br /><span style={{ fontStyle: 'italic', color: accent }}>Genussvoll.</span>
|
||||
</h1>
|
||||
<p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 36px' }}>
|
||||
Kochen, das sich anfühlt wie durch einen schönen Feed scrollen. Saisonale Rezepte, einfach gemacht — ganz ohne Stress.
|
||||
</p>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
|
||||
<a href="#download" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 32px', borderRadius: 44 }}>
|
||||
App entdecken
|
||||
<span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)', display: 'inline-block' }} />
|
||||
</a>
|
||||
<a href="#features" style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: `1.5px solid ${accent}`, paddingBottom: 3 }}>
|
||||
Mehr erfahren
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<div style={{ width: 320, height: 420, borderRadius: '16px 40px 40px 40px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'rgba(250,250,247,0.08)' }} />
|
||||
<span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 96, fontWeight: 600, color: 'rgba(250,250,247,0.9)', position: 'relative', zIndex: 1 }}>R</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section id="features" style={{ background: '#F5F0E8', padding: '100px 48px' }}>
|
||||
<div style={{ maxWidth: 1240, margin: '0 auto' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 60 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: accent }}>Features</span>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 46, letterSpacing: -0.6, color: '#3D2B1F', margin: '14px 0 0' }}>
|
||||
Warum Rezeptimo?
|
||||
</h2>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
|
||||
{features.map((f) => (
|
||||
<div key={f.title} style={{ background: '#FAFAF7', borderRadius: 28, padding: '36px 40px' }}>
|
||||
<h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 26, color: '#3D2B1F', margin: '0 0 10px' }}>{f.title}</h3>
|
||||
<p style={{ fontSize: 15, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Download */}
|
||||
<section id="download" style={{ background: '#3D2B1F', padding: '100px 48px', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 600, margin: '0 auto' }}>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, color: '#FAFAF7', margin: '0 0 20px' }}>
|
||||
Bereit für langsames Kochen?
|
||||
</h2>
|
||||
<p style={{ fontSize: 16, color: 'rgba(250,250,247,0.65)', margin: '0 0 40px', lineHeight: 1.7 }}>
|
||||
Rezeptimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.
|
||||
</p>
|
||||
<Link href="/#newsletter" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }}>
|
||||
Benachrichtigen lassen →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
109
app/apps/snakkimo/page.tsx
Normal file
109
app/apps/snakkimo/page.tsx
Normal file
@@ -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 (
|
||||
<div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden' }}>
|
||||
|
||||
{/* App-Header */}
|
||||
<header style={{ position: 'relative', zIndex: 10, maxWidth: 1240, margin: '0 auto', padding: '30px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 34, height: 34, borderRadius: '50% 50% 50% 12px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ width: 13, height: 13, borderRadius: '50%', border: '2.5px solid #FAFAF7', display: 'inline-block' }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
|
||||
<span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 24, fontWeight: 600, letterSpacing: 0.4, color: '#3D2B1F' }}>Snakkimo</span>
|
||||
<span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#9a8b78', marginTop: 3 }}>by HyggeCraftery</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
|
||||
<Link href="/" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>← HyggeCraftery</Link>
|
||||
<a href="#features" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>Features</a>
|
||||
<a href="#download" style={{ textDecoration: 'none', color: '#FAFAF7', background: accent, fontSize: 14, fontWeight: 600, padding: '11px 22px', borderRadius: 40 }}>App entdecken</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Hero */}
|
||||
<section style={{ maxWidth: 1240, margin: '0 auto', padding: '46px 48px 96px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: `${accent}28`, borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 26 }}>
|
||||
<span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, display: 'inline-block' }} />
|
||||
<span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#5f7e8d' }}>Sprachen lernen für Erwachsene</span>
|
||||
</div>
|
||||
<h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 66, lineHeight: 1.08, letterSpacing: -0.8, margin: '0 0 22px', color: '#3D2B1F' }}>
|
||||
Eine Kachel.<br />Eine Lektion.<br /><span style={{ fontStyle: 'italic', color: accent }}>Eine Sprache.</span>
|
||||
</h1>
|
||||
<p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 36px' }}>
|
||||
Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt — ganz ohne Druck.
|
||||
</p>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
|
||||
<a href="#download" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 32px', borderRadius: 44 }}>
|
||||
App entdecken
|
||||
<span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)', display: 'inline-block' }} />
|
||||
</a>
|
||||
<a href="#features" style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: `1.5px solid ${accent}`, paddingBottom: 3 }}>
|
||||
Mehr erfahren
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<div style={{ width: 320, height: 420, borderRadius: '40px 40px 40px 16px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'rgba(250,250,247,0.08)' }} />
|
||||
<span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 96, fontWeight: 600, color: 'rgba(250,250,247,0.9)', position: 'relative', zIndex: 1 }}>S</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section id="features" style={{ background: '#F5F0E8', padding: '100px 48px' }}>
|
||||
<div style={{ maxWidth: 1240, margin: '0 auto' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 60 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: accent }}>Features</span>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 46, letterSpacing: -0.6, color: '#3D2B1F', margin: '14px 0 0' }}>
|
||||
Warum Snakkimo?
|
||||
</h2>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
|
||||
{features.map((f) => (
|
||||
<div key={f.title} style={{ background: '#FAFAF7', borderRadius: 28, padding: '36px 40px' }}>
|
||||
<h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 26, color: '#3D2B1F', margin: '0 0 10px' }}>{f.title}</h3>
|
||||
<p style={{ fontSize: 15, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Download */}
|
||||
<section id="download" style={{ background: '#3D2B1F', padding: '100px 48px', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 600, margin: '0 auto' }}>
|
||||
<h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, color: '#FAFAF7', margin: '0 0 20px' }}>
|
||||
Bereit zum Lernen?
|
||||
</h2>
|
||||
<p style={{ fontSize: 16, color: 'rgba(250,250,247,0.65)', margin: '0 0 40px', lineHeight: 1.7 }}>
|
||||
Snakkimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.
|
||||
</p>
|
||||
<Link href="/#newsletter" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }}>
|
||||
Benachrichtigen lassen →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
286
app/page.tsx
286
app/page.tsx
@@ -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">
|
||||
<div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden', position: 'relative', lineHeight: 1.6 }}>
|
||||
|
||||
{/* ===== 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>
|
||||
|
||||
<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
|
||||
className="dark:invert"
|
||||
src="https://nextjs.org/icons/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
src="/hero-lifestyle.png"
|
||||
alt="Stilles Stillleben mit zwei Tassen Tee, getrockneten Blumen und Leinen am Fenster"
|
||||
fill
|
||||
style={{ objectFit: 'cover' }}
|
||||
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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{/* ===== Ü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>
|
||||
</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>
|
||||
</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',
|
||||
},
|
||||
]
|
||||
|
||||
71
app/shop/page.tsx
Normal file
71
app/shop/page.tsx
Normal file
@@ -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 (
|
||||
<div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', minHeight: '60vh' }}>
|
||||
<div style={{ maxWidth: 1240, margin: '0 auto', padding: '80px 48px 120px' }}>
|
||||
|
||||
{/* Header */}
|
||||
<div style={{ marginBottom: 64 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#C4896A' }}>Shop</span>
|
||||
<h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 62, letterSpacing: -1, color: '#3D2B1F', margin: '14px 0 18px' }}>
|
||||
Stücke fürs Zuhause
|
||||
</h1>
|
||||
<p style={{ fontSize: 17, color: '#6b5d4e', maxWidth: 540, margin: 0, lineHeight: 1.7 }}>
|
||||
Handgefertigte Objekte für ein langsameres, bewussteres Zuhause.
|
||||
Jedes Stück ist mit Bedacht ausgewählt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Shopify-Platzhalter-Hinweis */}
|
||||
<div style={{ background: '#F5F0E8', borderRadius: 20, padding: '20px 28px', marginBottom: 52, display: 'flex', alignItems: 'center', gap: 14 }}>
|
||||
<span style={{ fontSize: 20 }}>🛒</span>
|
||||
<p style={{ margin: 0, fontSize: 14, color: '#8a7a68', lineHeight: 1.6 }}>
|
||||
<strong style={{ color: '#3D2B1F' }}>Shop-Integration kommt bald.</strong>{' '}
|
||||
Diese Produkte sind Platzhalter. Die Shopify Storefront API wird in{' '}
|
||||
<code style={{ background: 'rgba(61,43,31,0.08)', padding: '2px 6px', borderRadius: 6, fontSize: 12 }}>lib/shopify.ts</code>{' '}
|
||||
integriert.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Product grid */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30 }}>
|
||||
{products.map((p) => (
|
||||
<div key={p.name} style={{ display: 'block', color: 'inherit' }}>
|
||||
<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: p.badge === 'Bald' ? '#C4896A' : '#A8B89A', color: '#FAFAF7', fontSize: 11.5, fontWeight: 700, letterSpacing: 0.6, padding: '6px 13px', borderRadius: 30 }}>
|
||||
{p.badge}
|
||||
</span>
|
||||
)}
|
||||
<span style={{ fontFamily: '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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
95
components/ui/Footer.tsx
Normal file
95
components/ui/Footer.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer style={{ background: '#3D2B1F', color: '#FAFAF7', padding: '0 48px 48px' }}>
|
||||
<div style={{ maxWidth: 1240, margin: '0 auto', borderTop: '1px solid rgba(250,250,247,0.14)', paddingTop: 56 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, paddingBottom: 52 }}>
|
||||
|
||||
{/* Brand */}
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 18 }}>
|
||||
<div style={{ width: 30, height: 30, borderRadius: '50% 50% 50% 10px', background: '#A8B89A' }} />
|
||||
<span style={{ fontFamily: 'var(--font-cormorant), "Cormorant Garamond", serif', fontSize: 23, fontWeight: 600, color: '#FAFAF7' }}>
|
||||
HyggeCraftery
|
||||
</span>
|
||||
</div>
|
||||
<p style={{ fontSize: 14.5, color: 'rgba(250,250,247,0.55)', maxWidth: 280, margin: 0 }}>
|
||||
Skandinavisches Lifestyle-Handwerk für ein langsameres, schöneres Leben. Mit Liebe gemacht in Schweden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Entdecken */}
|
||||
<div>
|
||||
<h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
|
||||
Entdecken
|
||||
</h4>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<FooterLink href="/shop">Shop</FooterLink>
|
||||
<FooterLink href="/apps">Apps</FooterLink>
|
||||
<FooterLink href="/#ueber">Über uns</FooterLink>
|
||||
<FooterLink href="/#newsletter">Newsletter</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service */}
|
||||
<div>
|
||||
<h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
|
||||
Service
|
||||
</h4>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<FooterLink href="#">Versand</FooterLink>
|
||||
<FooterLink href="#">Kontakt</FooterLink>
|
||||
<FooterLink href="#">Impressum</FooterLink>
|
||||
<FooterLink href="#">Datenschutz</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social */}
|
||||
<div>
|
||||
<h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
|
||||
Folgen
|
||||
</h4>
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
{[['Ig', 'Instagram'], ['Pin', 'Pinterest'], ['Jo', 'Journal']].map(([abbr, label]) => (
|
||||
<a
|
||||
key={abbr}
|
||||
href="#"
|
||||
title={label}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: '50% 50% 50% 12px',
|
||||
background: 'rgba(250,250,247,0.08)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
color: '#FAFAF7',
|
||||
}}
|
||||
>
|
||||
{abbr}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: '1px solid rgba(250,250,247,0.14)', paddingTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14 }}>
|
||||
<span style={{ fontSize: 13.5, color: 'rgba(250,250,247,0.45)' }}>© 2026 HyggeCraftery AB · Göteborg, Sverige</span>
|
||||
<span style={{ fontSize: 13.5, color: 'rgba(250,250,247,0.45)' }}>Leben. Langsam. Schön.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<Link href={href} style={{ textDecoration: 'none', fontSize: 14.5, color: 'rgba(250,250,247,0.7)' }}>
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
146
components/ui/Nav.tsx
Normal file
146
components/ui/Nav.tsx
Normal file
@@ -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,
|
||||
}
|
||||
65
components/ui/NewsletterForm.tsx
Normal file
65
components/ui/NewsletterForm.tsx
Normal file
@@ -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 (
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, background: '#F5F0E8', borderRadius: 40, padding: '16px 28px' }}>
|
||||
<span style={{ width: 26, height: 26, borderRadius: '50%', background: '#A8B89A', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#FAFAF7', fontSize: 14 }}>
|
||||
✓
|
||||
</span>
|
||||
<span style={{ fontSize: 15, fontWeight: 500, color: '#3D2B1F' }}>Tack så mycket! Willkommen in der Ruhe.</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
if (email.trim()) setSubmitted(true)
|
||||
}}
|
||||
style={{ display: 'flex', gap: 12, maxWidth: 480, margin: '0 auto', flexWrap: 'wrap' }}
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Deine E-Mail-Adresse"
|
||||
required
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 200,
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 15,
|
||||
color: '#3D2B1F',
|
||||
background: '#F5F0E8',
|
||||
border: '1.5px solid transparent',
|
||||
borderRadius: 40,
|
||||
padding: '15px 24px',
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
color: '#FAFAF7',
|
||||
background: '#C4896A',
|
||||
border: 'none',
|
||||
borderRadius: 40,
|
||||
padding: '15px 30px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Anmelden
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
31
lib/shopify.ts
Normal file
31
lib/shopify.ts
Normal file
@@ -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.
|
||||
BIN
public/hero-lifestyle.png
Normal file
BIN
public/hero-lifestyle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 MiB |
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user