feat: 7-Tage-Challenge detail page with hero, steps, benefits, testimonials, CTA

app/challenge/page.tsx

@@ -0,0 +1,374 @@
+import Link from "next/link";
+import { Footer } from "../components/Footer";
+
+function IconEnvelope() {
+  return (
+    <svg width="52" height="44" viewBox="0 0 52 44" fill="none">
+      <rect x="2" y="2" width="48" height="40" rx="3" stroke="#f6a701" strokeWidth="2" />
+      <path d="M2 2l24 22L50 2" stroke="#f6a701" strokeWidth="2" />
+    </svg>
+  );
+}
+
+function IconMailLines() {
+  return (
+    <svg width="56" height="44" viewBox="0 0 56 44" fill="none">
+      <line x1="2" y1="12" x2="12" y2="12" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+      <line x1="2" y1="20" x2="9" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+      <line x1="2" y1="28" x2="7" y2="28" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+      <rect x="13" y="2" width="41" height="40" rx="3" stroke="#f6a701" strokeWidth="2" />
+      <path d="M13 2l20.5 19L54 2" stroke="#f6a701" strokeWidth="2" />
+    </svg>
+  );
+}
+
+function IconNotepad() {
+  return (
+    <svg width="46" height="52" viewBox="0 0 46 52" fill="none">
+      <rect x="2" y="4" width="32" height="42" rx="2" stroke="#f6a701" strokeWidth="2" />
+      <line x1="9" y1="16" x2="27" y2="16" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+      <line x1="9" y1="23" x2="24" y2="23" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+      <line x1="9" y1="30" x2="20" y2="30" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="37" cy="40" r="7" stroke="#f6a701" strokeWidth="2" />
+      <line x1="37" y1="27" x2="37" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconCheckCircle() {
+  return (
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+      <circle cx="24" cy="24" r="21" stroke="#f6a701" strokeWidth="2" />
+      <path d="M14 24l7.5 7.5L34 16" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function Check() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-0.5">
+      <path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function LockIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="shrink-0">
+      <rect x="2" y="6" width="10" height="7" rx="1.5" stroke="#888" strokeWidth="1.3" />
+      <path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="#888" strokeWidth="1.3" />
+    </svg>
+  );
+}
+
+function ArrowRight() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-[#ccc] shrink-0">
+      <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+const steps = [
+  {
+    icon: <IconEnvelope />,
+    title: "1. Anmelden",
+    desc: "Trage dich mit deiner E-Mail-Adresse ein und starte sofort.",
+  },
+  {
+    icon: <IconMailLines />,
+    title: "2. E-Mail erhalten",
+    desc: "Du bekommst 7 Tage lang jeweils einen Impuls direkt in dein Postfach.",
+  },
+  {
+    icon: <IconNotepad />,
+    title: "3. Umsetzen",
+    desc: "Setze die einfache Aufgabe in wenigen Minuten um – für mehr Klarheit und Fokus.",
+  },
+  {
+    icon: <IconCheckCircle />,
+    title: "4. Dranbleiben",
+    desc: "Kleine Schritte führen zu großen Veränderungen – Tag für Tag.",
+  },
+];
+
+const benefits = [
+  { title: "Klarheit gewinnen", desc: "Sortiere deine Gedanken und erkenne, was wirklich zählt." },
+  { title: "Fokus stärken", desc: "Richte deine Aufmerksamkeit auf das Wesentliche." },
+  { title: "Struktur schaffen", desc: "Einfache Methoden für mehr Ordnung im Alltag." },
+  { title: "Gewohnheiten aufbauen", desc: "Kleine Schritte, die langfristig Wirkung zeigen." },
+  { title: "Gelassener leben", desc: "Weniger Stress, mehr Zeit für die Dinge, die dir wichtig sind." },
+];
+
+const testimonials = [
+  {
+    avatar: "/avatar-1.jpg",
+    quote: "„Die 7-Tage-Challenge hat mir geholfen, wieder klar zu sehen und mit kleinen Schritten wirklich etwas zu verändern.“",
+    name: "Sarah M.",
+    role: "Marketing Managerin",
+  },
+  {
+    avatar: "/avatar-2.jpg",
+    quote: "„Kurz, konkret und unglaublich wirkungsvoll. Ich habe direkt mehr Fokus und weniger Druck im Kopf.“",
+    name: "Thomas K.",
+    role: "Selbständiger Berater",
+  },
+  {
+    avatar: "/avatar-3.jpg",
+    quote: "„Endlich eine Challenge, die nicht überfordert, sondern genau die richtigen Impulse gibt – jeden Tag.“",
+    name: "Miriam L.",
+    role: "Projektleiterin",
+  },
+];
+
+function EmailCapture({ buttonLabel = "Challenge starten" }: { buttonLabel?: string }) {
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <div className="flex gap-3 w-full">
+        <input
+          type="email"
+          placeholder="Deine E-Mail-Adresse"
+          className="flex-1 min-w-0 bg-white border border-[#d9d9d9] rounded-lg px-4 py-3 text-[1rem] text-[#868686] outline-none focus:border-[#f6a701] transition-colors"
+        />
+        <button
+          type="submit"
+          className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:brightness-95 transition-all"
+        >
+          {buttonLabel}
+        </button>
+      </div>
+      <p className="flex items-center gap-1.5 text-[0.8rem] text-[#888]">
+        <LockIcon />
+        Keine Werbung. Jederzeit abbestellbar.
+      </p>
+    </div>
+  );
+}
+
+export default function ChallengePage() {
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-[#f5f0e8]">
+
+        {/* ── Hero ── */}
+        <section className="w-full flex items-stretch overflow-hidden" style={{ minHeight: "32rem" }}>
+
+          {/* Left: text + form */}
+          <div className="flex flex-col justify-center gap-6 px-8 lg:px-[5rem] py-10 lg:py-14 w-full lg:w-[52%] lg:shrink-0">
+
+            {/* Breadcrumb */}
+            <p className="text-[0.875rem] text-[#888] flex items-center gap-1.5">
+              <Link href="/" className="hover:text-[#f6a701] transition-colors">Startseite</Link>
+              <span>›</span>
+              <span className="text-[#222221]">7-Tage-Challenge</span>
+            </p>
+
+            {/* Headline */}
+            <h1
+              className="font-semibold text-[#222221] leading-[1.15]"
+              style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(2.25rem, 5vw, 3.75rem)" }}
+            >
+              7 Tage.<br />
+              Mehr Klarheit.<br />
+              Weniger Stress.
+            </h1>
+
+            {/* Subtitle */}
+            <p className="text-[1rem] text-[#444] leading-[1.6] max-w-[30rem]">
+              Die 7-Tage-Challenge für deinen klaren Kopf und mehr Struktur im Alltag.
+            </p>
+
+            {/* Checklist */}
+            <ul className="flex flex-col gap-2">
+              {[
+                "7 kurze Impulse – direkt in dein Postfach",
+                "Praktisch, umsetzbar und alltagstauglich",
+                "Für mehr Fokus, Ruhe und Klarheit",
+              ].map((item) => (
+                <li key={item} className="flex items-start gap-2 text-[#222221] text-[0.95rem]">
+                  <Check />
+                  {item}
+                </li>
+              ))}
+            </ul>
+
+            {/* Email form */}
+            <EmailCapture />
+          </div>
+
+          {/* Right: hero image with badge */}
+          <div className="hidden lg:block flex-1 relative overflow-hidden">
+            <img
+              alt="7-Tage-Challenge"
+              src="/blog-featured.jpg"
+              className="absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
+            />
+            {/* Badge */}
+            <div className="absolute top-8 right-8 w-[7.5rem] h-[7.5rem] rounded-full bg-white shadow-md flex flex-col items-center justify-center text-center p-3 gap-1">
+              <p className="text-[0.65rem] font-semibold text-[#222221] leading-tight">
+                Jeden Tag ein neuer Impuls in deinem Postfach.
+              </p>
+              <svg width="20" height="16" viewBox="0 0 20 16" fill="none">
+                <rect x="1" y="1" width="18" height="14" rx="2" stroke="#f6a701" strokeWidth="1.5" />
+                <path d="M1 1l9 8 9-8" stroke="#f6a701" strokeWidth="1.5" />
+              </svg>
+            </div>
+          </div>
+
+        </section>
+
+        {/* ── So funktioniert die Challenge ── */}
+        <section className="bg-white w-full py-14 lg:py-20">
+          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col items-center gap-12">
+
+            <div className="flex flex-col items-center gap-2 text-center">
+              <h2
+                className="font-semibold text-[#222221]"
+                style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.5rem, 3vw, 2rem)" }}
+              >
+                So funktioniert die Challenge
+              </h2>
+              <p className="text-[1rem] text-[#666]">Jeden Tag ein Impuls. In nur wenigen Minuten.</p>
+            </div>
+
+            <div className="flex flex-col lg:flex-row items-start lg:items-start gap-8 lg:gap-2 w-full">
+              {steps.flatMap((step, i) => [
+                <div key={step.title} className="flex lg:flex-col items-start lg:items-center gap-4 lg:gap-5 flex-1 min-w-0">
+                  <div className="flex items-center justify-center w-16 h-14 shrink-0">
+                    {step.icon}
+                  </div>
+                  <div className="flex flex-col gap-1 lg:text-center">
+                    <p className="font-semibold text-[#222221] text-[1rem]">{step.title}</p>
+                    <p className="text-[0.875rem] text-[#666] leading-[1.5]">{step.desc}</p>
+                  </div>
+                </div>,
+                i < steps.length - 1 ? (
+                  <div key={`arrow-${i}`} className="hidden lg:flex items-center shrink-0 mt-5">
+                    <ArrowRight />
+                  </div>
+                ) : null,
+              ])}
+            </div>
+
+          </div>
+        </section>
+
+        {/* ── Das erwartet dich ── */}
+        <section className="w-full py-14 lg:py-20">
+          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col gap-10">
+
+            <div className="flex flex-col items-center gap-2 text-center">
+              <h2
+                className="font-semibold text-[#222221]"
+                style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.5rem, 3vw, 2rem)" }}
+              >
+                Das erwartet dich
+              </h2>
+              <p className="text-[1rem] text-[#666]">7 Tage. 7 Impulse. Für mehr Klarheit in deinem Alltag.</p>
+            </div>
+
+            <div className="flex flex-col lg:flex-row gap-10 lg:gap-16 items-center">
+
+              {/* Image */}
+              <div className="w-full lg:w-[44%] lg:shrink-0 rounded-xl overflow-hidden" style={{ minHeight: "18rem" }}>
+                <img
+                  alt="Notizbuch"
+                  src="/challenge-content.jpg"
+                  className="w-full h-full object-cover"
+                  style={{ minHeight: "18rem" }}
+                />
+              </div>
+
+              {/* Checklist */}
+              <ul className="flex flex-col gap-5 flex-1">
+                {benefits.map((b) => (
+                  <li key={b.title} className="flex items-start gap-3">
+                    <Check />
+                    <div className="flex flex-col gap-0.5">
+                      <p className="font-semibold text-[#222221] text-[1rem]">{b.title}</p>
+                      <p className="text-[0.9rem] text-[#555] leading-[1.5]">{b.desc}</p>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+
+            </div>
+          </div>
+        </section>
+
+        {/* ── Was andere sagen ── */}
+        <section className="bg-white w-full py-14 lg:py-20">
+          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col gap-10">
+
+            <h2
+              className="font-semibold text-[#222221] text-center"
+              style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.5rem, 3vw, 2rem)" }}
+            >
+              Was andere sagen
+            </h2>
+
+            <div className="flex flex-col lg:flex-row gap-6">
+              {testimonials.map((t) => (
+                <div
+                  key={t.name}
+                  className="flex-1 bg-[#f5f0e8] rounded-xl p-6 flex flex-col gap-4"
+                >
+                  <p className="text-[#222221] text-[0.95rem] leading-[1.6] flex-1">{t.quote}</p>
+                  <div className="flex items-center gap-3">
+                    <img
+                      alt={t.name}
+                      src={t.avatar}
+                      className="w-10 h-10 rounded-full object-cover shrink-0"
+                    />
+                    <div>
+                      <p className="font-semibold text-[#222221] text-[0.9rem]">{t.name}</p>
+                      <p className="text-[#777] text-[0.8rem]">{t.role}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+          </div>
+        </section>
+
+        {/* ── Bottom CTA ── */}
+        <section className="w-full py-14 lg:py-16">
+          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto">
+            <div className="bg-[#f8f3ec] rounded-xl flex flex-col lg:flex-row gap-8 lg:gap-[3.5rem] items-start lg:items-center px-6 lg:px-10 py-8">
+
+              {/* Left: icon + copy */}
+              <div className="flex gap-5 items-start flex-1 min-w-0">
+                <div className="shrink-0 -rotate-4">
+                  <svg width="52" height="44" viewBox="0 0 52 44" fill="none">
+                    <rect x="2" y="2" width="48" height="40" rx="3" stroke="#f6a701" strokeWidth="2" />
+                    <path d="M2 2l24 22L50 2" stroke="#f6a701" strokeWidth="2" />
+                  </svg>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <p
+                    className="font-semibold text-[#222221] leading-normal"
+                    style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.125rem, 2vw, 1.375rem)" }}
+                  >
+                    Starte jetzt deine 7-Tage-Challenge
+                  </p>
+                  <p className="text-[0.9rem] text-[#555] leading-[1.5]">
+                    Trage dich ein und erhalte ab sofort täglich einen Impuls für mehr Klarheit und Fokus.
+                  </p>
+                </div>
+              </div>
+
+              {/* Right: form */}
+              <div className="w-full lg:w-[24rem] lg:shrink-0">
+                <EmailCapture />
+              </div>
+
+            </div>
+          </div>
+        </section>
+
+      </main>
+      <Footer />
+    </>
+  );
+}