7f67d123d6
- 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>
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
'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>
|
|
)
|
|
}
|