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>
+  );
+}
@@ -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() {
      <Tools />
      <Blog />
      <About />
+      <Newsletter />
    </main>
  );
 }
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 64 55.0096" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-decoration">
+<path id="path" d="M27.502 54.9421C0.939821 54.5475 2.5023 54.5949 1.83943 54.2634C1.508 54.0898 1.11343 53.7268 0.971386 53.4585C0.608385 52.7483 0.308515 49.2446 0.10334 43.4523C-0.180747 35.3716 0.166471 7.04176 0.592603 3.26971C0.766212 1.69144 1.16078 0.760266 1.80787 0.334134C2.45496 -0.0919975 4.80657 -0.10778 10.7724 0.271003C17.1644 0.681352 25.4029 1.10748 36.8138 1.62831C41.5959 1.84927 46.6306 2.10179 48.0195 2.1807C53.2435 2.52792 61.4505 3.26971 61.9082 3.44332C62.9183 3.8221 63.5022 4.67436 63.7232 6.07902C63.8021 6.5525 63.9126 15.5644 63.9599 26.0756C64.0704 45.4094 63.9599 52.2748 63.5338 53.569C63.155 54.7054 63.0445 54.7369 56.8262 54.8948C52.0283 55.021 34.7936 55.0526 27.502 54.9421ZM59.1305 52.0854L59.6513 51.975L58.0414 50.081C53.5276 44.8096 47.183 38.2441 39.8914 31.2997C35.7879 27.3856 31.5266 23.4873 31.3688 23.4873C31.1162 23.4873 26.0342 28.3168 21.331 33.02C14.7654 39.6014 9.62028 45.1411 5.50101 50.081L4.049 51.8171L9.69919 51.9434C24.6138 52.2433 33.9256 52.338 45.731 52.2748C52.8016 52.2433 58.8306 52.1486 59.1305 52.0854ZM61.2453 26.2492C61.2138 15.8327 61.1348 7.02598 61.0717 6.67876C60.9612 6.07902 60.9297 6.04745 60.251 5.93697C58.1046 5.60554 44.5631 4.72171 35.1566 4.31136C26.5393 3.93258 17.2906 3.47488 11.7983 3.12766C9.06789 2.95405 6.0534 2.79623 5.09066 2.78044L3.35457 2.7331L3.24409 4.15354C3.19674 4.94267 3.07048 7.92559 2.96 10.7822C2.75483 16.6692 2.72326 45.4094 2.91265 47.5085L3.03891 48.8816L4.25418 47.4138C11.1038 39.1279 29.2697 20.8831 31.132 20.4254C31.7002 20.2834 32.0159 20.4886 34.5411 22.7139C42.2746 29.5005 55.0585 42.3318 60.0143 48.2503L61.1191 49.5602L61.2138 47.3822C61.2611 46.167 61.2769 36.6658 61.2453 26.2492Z" fill="var(--fill-0, #F6A701)"/>
+</g>
+</svg>