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
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user