feat(Newsletter): add newsletter signup section with framed card layout

Cream card (bg-[#f8f3ec], rounded-xl) inside section padding of 80px. Left copy column has fixed w-[38.25rem] (612px) with icon (-rotate-4) and Lora heading; right form column is flex-1 with email input + orange submit button side by side, privacy note below. Input and button share items-stretch so they align to equal height. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 21:15:35 +00:00
parent 1cc3e30987
commit 11b21b23cf
3 changed files with 78 additions and 0 deletions
@@ -0,0 +1,71 @@
+export function Newsletter() {
+  return (
+    <section className="py-16 w-full">
+
+      {/* Outer section padding — same 80px horizontal as all other sections */}
+      <div className="px-[5rem] w-full">
+
+        {/* Rounded card: cream bg, 32px inner padding, 56px gap between copy and form */}
+        <div className="bg-[#f8f3ec] flex gap-[3.5rem] items-center px-8 rounded-xl w-full">
+
+          {/* Left: copy — fixed width 612px so form always gets the remaining flex-1 */}
+          <div className="flex gap-8 items-start py-4 shrink-0 w-[38.25rem]">
+
+            {/* Decorative envelope icon, tilted -4° as per design */}
+            <div className="flex items-center justify-center shrink-0 w-[4.23rem] h-[3.71rem]">
+              <div className="-rotate-4">
+                <img
+                  alt=""
+                  src="/newsletter-icon.png"
+                  className="w-16 h-[3.438rem] block"
+                />
+              </div>
+            </div>
+
+            {/* Heading + body */}
+            <div className="flex flex-col gap-4 flex-1 min-w-0 text-[#222221]">
+              <p
+                className="font-semibold text-[1.75rem] leading-normal"
+                style={{ fontFamily: "var(--font-lora)" }}
+              >
+                Starte mit einer Woche voller Klarheit
+              </p>
+              <p className="font-normal text-[1rem] leading-6">
+                Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge,
+                mit der du durch mehr Struktur weniger Stress spürst.
+              </p>
+            </div>
+          </div>
+
+          {/* Right: form — takes remaining space, centered vertically */}
+          <div className="flex flex-1 items-center self-stretch min-w-0">
+            <div className="flex flex-1 flex-col gap-4 min-w-0">
+
+              {/* Input + submit button side by side */}
+              <div className="flex gap-4 items-stretch w-full">
+                <input
+                  type="email"
+                  placeholder="Deine E-Mail-Adresse"
+                  className="flex-1 min-w-0 bg-white border border-[#d9d9d9] rounded-lg px-6 py-3 text-[1rem] text-[#868686] font-normal outline-none focus:border-[#f6a701] transition-colors"
+                />
+                <button
+                  type="submit"
+                  className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1.125rem] text-[#222221] tracking-[0.18px] whitespace-nowrap hover:brightness-95 transition-all"
+                >
+                  Jetzt anmelden
+                </button>
+              </div>
+
+              {/* Privacy note */}
+              <p className="text-[0.75rem] text-[#222221] font-normal leading-normal">
+                Ich achte auf deine Daten. Kein Spam, jederzeit abbestellbar.
+              </p>
+
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}