diff --git a/app/components/Newsletter.tsx b/app/components/Newsletter.tsx new file mode 100644 index 0000000..867f446 --- /dev/null +++ b/app/components/Newsletter.tsx @@ -0,0 +1,71 @@ +export function Newsletter() { + return ( +
+ + {/* Outer section padding — same 80px horizontal as all other sections */} +
+ + {/* Rounded card: cream bg, 32px inner padding, 56px gap between copy and form */} +
+ + {/* Left: copy — fixed width 612px so form always gets the remaining flex-1 */} +
+ + {/* Decorative envelope icon, tilted -4° as per design */} +
+
+ +
+
+ + {/* Heading + body */} +
+

+ Starte mit einer Woche voller Klarheit +

+

+ Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge, + mit der du durch mehr Struktur weniger Stress spürst. +

+
+
+ + {/* Right: form — takes remaining space, centered vertically */} +
+
+ + {/* Input + submit button side by side */} +
+ + +
+ + {/* Privacy note */} +

+ Ich achte auf deine Daten. Kein Spam, jederzeit abbestellbar. +

+ +
+
+ +
+
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 32132b0..ec2b0d6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,6 +3,7 @@ import { Divider } from "./components/Divider"; import { Tools } from "./components/Tools"; import { Blog } from "./components/Blog"; import { About } from "./components/About"; +import { Newsletter } from "./components/Newsletter"; export default function Home() { return ( @@ -12,6 +13,7 @@ export default function Home() { + ); } diff --git a/public/newsletter-icon.png b/public/newsletter-icon.png new file mode 100644 index 0000000..709e03d --- /dev/null +++ b/public/newsletter-icon.png @@ -0,0 +1,5 @@ + + + + +