0101447d84
Tracks pageviews, hero/CTA clicks, product teaser clicks, app card and detail views, newsletter signups, nav interactions, and footer link clicks with structured properties for PostHog dashboards. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
70 lines
2.0 KiB
TypeScript
Executable File
70 lines
2.0 KiB
TypeScript
Executable File
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { posthog } from '@/lib/posthog'
|
|
|
|
export default function NewsletterForm({ source = 'homepage' }: { source?: string }) {
|
|
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()) {
|
|
posthog.capture('newsletter_signup', { source })
|
|
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>
|
|
)
|
|
}
|