ueberarbeitung mit bjoern

2026-07-29 20:11:55 +00:00
parent 3fc98b8480
commit 96fddf4cd9
7 changed files with 11 additions and 11 deletions
@@ -0,0 +1,86 @@
+"use client";
+
+import Link from "next/link";
+import { useNewsletterSignup } from "../../lib/useNewsletterSignup";
+
+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>
+  );
+}
+
+export function EmailCapture({ buttonLabel = "Challenge starten" }: { buttonLabel?: string }) {
+  const { email, emailError, consent, handleConsentChange, status, error, successMessage, emailRef, handleEmailChange, handleEmailBlur, handleSubmit } =
+    useNewsletterSignup("challenge");
+
+  if (status === "success") {
+    return <p className="text-[1rem] text-[#222221] font-medium">{successMessage}</p>;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-2 w-full">
+      {/* Stacked full-width below sm: — side by side, the button's own
+          content width plus the input's min-w-0 squeeze left it cramped
+          on a narrow phone. Default align-items: stretch in flex-col
+          mode is what makes both the input and the button (shrink-0,
+          fixed to its label's width) fill the row once stacked, no
+          explicit w-full needed on either. */}
+      <div className="flex flex-col sm:flex-row gap-3 w-full">
+        <input
+          ref={emailRef}
+          type="email"
+          required
+          value={email}
+          onChange={(e) => handleEmailChange(e.target.value)}
+          onBlur={(e) => handleEmailBlur(e.target.value)}
+          placeholder="Deine E-Mail-Adresse"
+          aria-invalid={Boolean(emailError)}
+          className={`flex-1 min-w-0 bg-white border rounded-lg px-4 py-3 text-[1rem] text-[#868686] outline-none transition-colors ${
+            emailError ? "border-red-600 focus:border-red-600" : "border-[#d9d9d9] focus:border-[#f6a701]"
+          }`}
+        />
+        <button
+          type="submit"
+          disabled={status === "submitting"}
+          className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:brightness-95 active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f6a701] focus-visible:ring-offset-2 disabled:opacity-60 disabled:pointer-events-none"
+        >
+          {status === "submitting" ? "Wird gesendet…" : buttonLabel}
+        </button>
+      </div>
+      {emailError && <p className="text-[0.8rem] text-red-600">{emailError}</p>}
+      {/* Consent checkbox — this signup's legal basis is consent (email
+          marketing), same wording as the other newsletter forms; colors
+          match this page's own hardcoded palette instead of the shared
+          design tokens, consistent with the rest of the page. */}
+      <label className="flex gap-2 items-start cursor-pointer">
+        <input
+          type="checkbox"
+          required
+          checked={consent}
+          onChange={(e) => handleConsentChange(e.target.checked)}
+          className="size-4 shrink-0 mt-0.5 rounded-xs border border-[#d9d9d9] accent-[#f6a701]"
+        />
+        <span className="text-[0.8rem] text-[#444] leading-normal">
+          Ich akzeptiere die{" "}
+          <Link
+            href="/datenschutz"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-[#f6a701]"
+          >
+            Datenschutzerklärung
+          </Link>
+          .
+        </span>
+      </label>
+      {status === "error" && <p className="text-[0.8rem] text-red-600">{error}</p>}
+      <p className="flex items-center gap-1.5 text-[0.8rem] text-[#888]">
+        <LockIcon />
+        Keine Werbung. Jederzeit abbestellbar.
+      </p>
+    </form>
+  );
+}