@pradip1995/segment-login-template 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/account-guest-orders.tsx

@@ -4,6 +4,7 @@ import type { HttpTypes } from "@medusajs/types"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import { logoutGuest } from "@pradip1995/commerce-core/data/guest"
+import { auth } from "./account-theme"
 
 export default function AccountGuestOrders({
   orders,
@@ -14,30 +15,56 @@ export default function AccountGuestOrders({
 }) {
   const safeOrders: HttpTypes.StoreOrder[] = Array.isArray(orders)
     ? orders
-    : Array.isArray((orders as any)?.orders)
-    ? (orders as any).orders
-    : []
+    : Array.isArray((orders as { orders?: HttpTypes.StoreOrder[] })?.orders)
+      ? ((orders as { orders: HttpTypes.StoreOrder[] }).orders)
+      : []
 
   async function handleSignOut() {
     await logoutGuest()
     window.location.href = `/${countryCode}/account`
   }
 
+  async function handleCheckDifferent() {
+    await logoutGuest()
+    window.location.href = `/${countryCode}/account?view=guest`
+  }
+
   return (
     <div className="space-y-6">
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div>
-          <h2 className="section-heading text-xl mb-1">Guest orders</h2>
-          <p className="text-sm text-muted">Orders linked to your verified email.</p>
+          <div className="flex items-center gap-2 mb-2" aria-hidden>
+            <span className="h-px w-6 bg-brand-accent/70" />
+            <span className="text-brand-accent text-[7px]">◆</span>
+            <span className="h-px w-6 bg-brand-accent/70" />
+          </div>
+          <h2 className="font-heading text-2xl font-bold text-heading uppercase tracking-[0.08em] mb-1">
+            Guest orders
+          </h2>
+          <p className="text-sm text-muted">
+            Track orders linked to your verified email.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            onClick={handleCheckDifferent}
+            className="btn-outline text-xs"
+          >
+            Check different email
+          </button>
+          <button type="button" onClick={handleSignOut} className="btn-outline text-xs">
+            End guest session
+          </button>
         </div>
-        <button type="button" onClick={handleSignOut} className="btn-outline text-xs">
-          End guest session
-        </button>
       </div>
 
       {safeOrders.length === 0 ? (
-        <div className="card-surface rounded-2xl p-8 text-center text-sm text-muted">
-          No guest orders found for this session.
+        <div className="border border-cart-border bg-surface p-8 text-center">
+          <p className="text-sm text-muted mb-4">No guest orders found for this session.</p>
+          <LocalizedLink href="/store" className={`${auth.btnPrimary} ${auth.btnShine} inline-flex`}>
+            <span className="relative z-[1]">Continue shopping</span>
+          </LocalizedLink>
         </div>
       ) : (
         <ul className="space-y-3">
@@ -45,10 +72,12 @@ export default function AccountGuestOrders({
             <li key={order.id}>
               <LocalizedLink
                 href={`/orders/${order.id}`}
-                className="card-surface rounded-2xl p-5 flex items-center justify-between gap-4 hover:border-brand-accent transition-colors block"
+                className="border border-cart-border bg-surface p-5 flex items-center justify-between gap-4 hover:border-brand-accent transition-colors duration-200 block"
               >
                 <div>
-                  <p className="font-semibold text-heading text-sm">Order #{order.display_id}</p>
+                  <p className="font-semibold text-heading text-sm">
+                    Order #{order.display_id}
+                  </p>
                   <p className="text-xs text-muted mt-1 capitalize">
                     {order.status?.replace(/_/g, " ")}
                   </p>

package/src/account-theme.ts

@@ -1,4 +1,4 @@
-/** Account / order visual tokens — maps to segment-tokens CSS variables */
+/** Logged-in account visual tokens — maps to segment-tokens CSS variables */
 export const acct = {
   pageBg: "bg-page-bg",
   card: "bg-surface border border-cart-border rounded-none shadow-card",
@@ -26,3 +26,54 @@ export const acct = {
   badge:
     "inline-flex items-center px-3 py-1 text-xs font-semibold border rounded-none",
 } as const
+
+/** Auth / login visual tokens — maps to segment-tokens CSS variables (theme-safe) */
+export const auth = {
+  viewport:
+    "w-full flex flex-col lg:flex-row overflow-hidden min-h-[calc(100svh-6.25rem)] lg:h-[calc(100svh-6.25rem)] lg:max-h-[calc(100svh-6.25rem)] bg-page-bg",
+  formColumn: "relative flex flex-1 flex-col min-h-0 w-full lg:w-1/2 bg-page-bg",
+  formWash:
+    "pointer-events-none absolute inset-y-0 -left-20 w-40 bg-gradient-to-r from-transparent to-page-bg hidden lg:block z-[1]",
+  formGlow:
+    "pointer-events-none absolute inset-0 bg-gradient-to-l from-brand-primary/[0.03] via-transparent to-transparent hidden lg:block",
+  formInner:
+    "relative z-[2] flex flex-1 flex-col justify-center min-h-0 overflow-y-auto overscroll-contain px-5 sm:px-10 md:px-12 lg:px-14 xl:px-20 py-5 sm:py-6 lg:py-8",
+  formCard:
+    "relative w-full max-w-[440px] shrink-0 border border-cart-border/60 bg-surface shadow-[0_10px_40px_-16px_rgba(0,0,0,0.12)] p-7 sm:p-8",
+  desktopHeader: "hidden lg:block mb-6 max-w-[440px] shrink-0",
+  title:
+    "font-heading text-2xl xl:text-[32px] font-bold text-heading uppercase tracking-[0.08em] leading-tight",
+  subtitle: "mt-2 text-[11px] font-medium text-muted uppercase tracking-[0.28em]",
+  mobileTitle:
+    "font-heading text-base font-bold text-heading uppercase tracking-[0.16em] lg:hidden",
+  fieldLabel:
+    "text-[10px] font-semibold text-heading/80 uppercase tracking-[0.22em]",
+  input:
+    "w-full px-0 py-3 text-sm text-heading bg-transparent border-0 border-b-2 border-cart-border rounded-none placeholder:text-muted/50 focus:outline-none focus:border-brand-primary focus:ring-0 transition-colors duration-200",
+  btnPrimary:
+    "group relative w-full py-3.5 bg-brand-primary text-inverse text-[11px] font-bold uppercase tracking-[0.28em] shadow-[0_8px_28px_-6px_rgba(0,0,0,0.25)] hover:bg-brand-accent hover:shadow-[0_12px_32px_-6px_rgba(0,0,0,0.3)] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden active:scale-[0.98]",
+  btnShine:
+    "before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/15 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700",
+  btnOutline:
+    "w-full flex items-center justify-center gap-2.5 py-3 border border-brand-primary/15 bg-surface/80 hover:bg-page-bg hover:border-brand-primary/35 shadow-sm transition-all duration-200 disabled:opacity-50",
+  guestCta:
+    "w-full py-3 border border-brand-primary/20 bg-gradient-to-r from-surface to-page-bg text-heading text-[10px] font-bold uppercase tracking-[0.18em] hover:border-brand-accent hover:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.15)] transition-all duration-300 flex items-center justify-center gap-2 disabled:opacity-50 active:scale-[0.98]",
+  tabActive:
+    "pb-3 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] border-b-2 -mb-px border-brand-accent text-brand-accent transition-colors duration-200",
+  tabIdle:
+    "pb-3 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] border-b-2 -mb-px border-transparent text-muted hover:text-heading transition-colors duration-200",
+  modeActive:
+    "flex-1 py-2 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] rounded-md bg-surface text-heading shadow-sm transition-colors duration-200",
+  modeIdle:
+    "flex-1 py-2 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] rounded-md text-muted hover:text-heading transition-colors duration-200",
+  chipActive:
+    "px-3 py-1.5 text-xs font-medium border border-brand-accent text-brand-accent bg-brand-accent/5 transition-colors duration-200",
+  chipIdle:
+    "px-3 py-1.5 text-xs font-medium border border-cart-border text-muted hover:text-heading transition-colors duration-200",
+} as const
+
+export type BrandPanelConfig = {
+  image?: string | null
+  eyebrow?: string | null
+  headline?: string | null
+}

package/src/forgot-password-form.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from "react"
 import { checkEmailRegistered, requestPasswordReset } from "./auth-server"
+import { auth } from "./account-theme"
+import { AuthField, Ornament } from "./login-form"
 
 export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
   const [email, setEmail] = useState("")
@@ -42,13 +44,17 @@ export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
 
   if (success) {
     return (
-      <div className="space-y-4 text-center py-4">
-        <div className="w-14 h-14 mx-auto rounded-full bg-green-100 flex items-center justify-center text-2xl">
-          ✉
+      <div className="space-y-5 text-center py-4">
+        <Ornament />
+        <div className="w-14 h-14 mx-auto rounded-full bg-brand-accent/10 flex items-center justify-center text-brand-accent">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden>
+            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+            <polyline points="22,6 12,13 2,6" />
+          </svg>
         </div>
-        <h2 className="section-heading text-lg">Check your email</h2>
+        <h2 className={`${auth.title} text-xl`}>Check your email</h2>
         <p className="text-sm text-muted">{message}</p>
-        <button type="button" onClick={onBack} className="btn-outline w-full">
+        <button type="button" onClick={onBack} className={auth.btnOutline}>
           Back to sign in
         </button>
       </div>
@@ -56,31 +62,43 @@ export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <p className="text-sm text-muted">
-        Enter your email and we&apos;ll send a link to reset your password.
-      </p>
-      <label className="block">
-        <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
-          Email
-        </span>
-        <input
-          name="email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-          className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
-        />
-      </label>
-      {error && <p className="text-sm text-brand-sale">{error}</p>}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Sending…" : "Send reset link"}
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div className="text-center lg:text-left">
+        <Ornament />
+        <h2 className={`${auth.title} text-xl lg:text-2xl`}>Reset password</h2>
+        <p className="mt-2 text-sm text-muted">
+          Enter your email and we&apos;ll send a link to reset your password.
+        </p>
+      </div>
+
+      <AuthField
+        label="Email"
+        name="email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        autoComplete="email"
+        placeholder="you@example.com"
+      />
+
+      {error && (
+        <p className="text-sm text-brand-sale" role="alert">
+          {error}
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={pending}
+        className={`${auth.btnPrimary} ${auth.btnShine}`}
+      >
+        <span className="relative z-[1]">{pending ? "Sending…" : "Send reset link"}</span>
       </button>
+
       <button
         type="button"
         onClick={onBack}
-        className="text-sm text-muted hover:text-brand-accent w-full text-center"
+        className="text-sm text-muted hover:text-brand-accent w-full text-center transition-colors"
       >
         Back to sign in
       </button>

package/src/google-auth-section.tsx

@@ -6,9 +6,7 @@ import {
   GOOGLE_LOGIN_COUNTRY_CODE_KEY,
 } from "@pradip1995/commerce-auth/util/google-auth-client"
 import { initiateGoogleAuth } from "./auth-server"
-
-const BUTTON_CLASS =
-  "btn-outline w-full flex items-center justify-center gap-2.5 py-3 px-4"
+import { auth } from "./account-theme"
 
 export default function GoogleAuthSection({ countryCode }: { countryCode: string }) {
   const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID?.trim()
@@ -46,9 +44,9 @@ export default function GoogleAuthSection({ countryCode }: { countryCode: string
   }
 
   return (
-    <div className="mb-6">
+    <div>
       {error && (
-        <p className="mb-3 text-sm text-red-600" role="alert">
+        <p className="mb-3 text-sm text-brand-sale" role="alert">
           {error}
         </p>
       )}
@@ -56,10 +54,10 @@ export default function GoogleAuthSection({ countryCode }: { countryCode: string
         type="button"
         onClick={handleClick}
         disabled={loading}
-        className={BUTTON_CLASS}
-        style={{ borderRadius: "30px" }}
+        className={auth.btnOutline}
+        aria-label="Continue with Google"
       >
-        <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
           <path
             fill="#4285F4"
             d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
@@ -77,8 +75,8 @@ export default function GoogleAuthSection({ countryCode }: { countryCode: string
             d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
           />
         </svg>
-        <span className="text-sm text-gray-700 font-bold">
-          {loading ? "Connecting..." : "Continue with Google"}
+        <span className="text-xs text-heading font-medium tracking-wide">
+          {loading ? "Redirecting…" : "Continue with Google"}
         </span>
       </button>
     </div>

package/src/guest-order-modal.tsx

@@ -0,0 +1,224 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { sendOTP, verifyOTP } from "./auth-server"
+import OtpVerificationModal from "./otp-verification-modal"
+import type { OtpVerificationComponent } from "./otp-component"
+import { auth } from "./account-theme"
+
+type GuestOrderModalProps = {
+  open: boolean
+  onClose: () => void
+  countryCode: string
+  initialEmail?: string
+  autoStart?: boolean
+  OtpComponent?: OtpVerificationComponent
+}
+
+export default function GuestOrderModal({
+  open,
+  onClose,
+  countryCode,
+  initialEmail = "",
+  autoStart = false,
+  OtpComponent = OtpVerificationModal,
+}: GuestOrderModalProps) {
+  const [email, setEmail] = useState(initialEmail)
+  const [otp, setOtp] = useState("")
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [step, setStep] = useState<"email" | "otp">("email")
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const autoStartedRef = useRef(false)
+
+  useEffect(() => {
+    if (initialEmail) setEmail(initialEmail)
+  }, [initialEmail])
+
+  useEffect(() => {
+    if (open && autoStart && initialEmail && !autoStartedRef.current) {
+      autoStartedRef.current = true
+      void handleSendOtp(initialEmail)
+    }
+    if (!open) {
+      autoStartedRef.current = false
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, autoStart, initialEmail])
+
+  async function handleSendOtp(emailToSend = email) {
+    if (!emailToSend.trim()) return
+    setPending(true)
+    setError(null)
+
+    try {
+      const res = await sendOTP(emailToSend.trim())
+      if (!res.success && (res as { error?: string }).error) {
+        throw new Error((res as { error?: string }).error)
+      }
+      setOtpToken((res as { token?: string }).token || "guest")
+      setOtp("")
+      setStep("otp")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send code")
+      setStep("email")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleVerifyOtp() {
+    if (!otp || otp.length < 6) return
+    setPending(true)
+    setError(null)
+
+    try {
+      const res = await verifyOTP(email.trim(), otpToken || "", otp)
+      if (!res.success) {
+        throw new Error((res as { error?: string }).error || "Invalid code")
+      }
+      // verifyOTP sets httpOnly `_medusa_guest_jwt` via the server action
+      setSuccess(true)
+      window.setTimeout(() => {
+        window.location.href = `/${countryCode}/account/guest-orders`
+      }, 900)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Verification failed")
+      setPending(false)
+    }
+  }
+
+  async function handleResend() {
+    await handleSendOtp(email)
+  }
+
+  function handleClose() {
+    setEmail(initialEmail || "")
+    setOtp("")
+    setOtpToken(null)
+    setStep("email")
+    setError(null)
+    setSuccess(false)
+    setPending(false)
+    autoStartedRef.current = false
+    onClose()
+  }
+
+  if (!open) return null
+
+  if (step === "otp" || success) {
+    return (
+      <OtpComponent
+        open
+        preventClose={!success}
+        title={success ? "Verified" : "Verify your email"}
+        description={
+          success
+            ? "Opening your guest orders…"
+            : `Enter the 6-digit code sent to ${email || "your email"}.`
+        }
+        otp={otp}
+        onOtpChange={setOtp}
+        error={error}
+        pending={pending}
+        success={success}
+        successTitle="Verification successful"
+        successMessage="Redirecting to your guest orders…"
+        verifyLabel="Verify & view orders"
+        onVerify={handleVerifyOtp}
+        onResend={handleResend}
+        onClose={handleClose}
+        extraContent={
+          !success ? (
+            <button
+              type="button"
+              onClick={() => {
+                setStep("email")
+                setOtp("")
+                setError(null)
+              }}
+              className="text-xs text-muted hover:text-brand-accent mb-4 w-full text-center"
+            >
+              Change email
+            </button>
+          ) : undefined
+        }
+      />
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="Close guest order dialog"
+        onClick={handleClose}
+      />
+      <div className="relative w-full max-w-md border border-cart-border/60 bg-surface shadow-[0_10px_40px_-16px_rgba(0,0,0,0.2)] p-7 sm:p-8">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            void handleSendOtp()
+          }}
+          className="space-y-5"
+        >
+          <div className="text-center">
+            <Ornament />
+            <h2 className={`${auth.title} text-xl xl:text-2xl`}>Track your order</h2>
+            <p className="mt-2 text-sm text-muted leading-relaxed">
+              Enter the email used at checkout. We&apos;ll send a one-time code to view guest
+              orders.
+            </p>
+          </div>
+
+          <label className="block">
+            <span className={`${auth.fieldLabel} mb-1.5 block`}>Email</span>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoComplete="email"
+              placeholder="you@example.com"
+              className={auth.input}
+            />
+          </label>
+
+          {error && (
+            <p className="text-sm text-brand-sale" role="alert">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={pending || !email.trim()}
+            className={`${auth.btnPrimary} ${auth.btnShine}`}
+          >
+            <span className="relative z-[1]">{pending ? "Sending…" : "Send verification code"}</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={handleClose}
+            className="text-sm text-muted hover:text-brand-accent w-full text-center transition-colors"
+          >
+            Cancel
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+function Ornament() {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-4" aria-hidden>
+      <span className="h-px w-8 bg-gradient-to-r from-transparent to-brand-accent" />
+      <span className="text-brand-accent text-[8px] leading-none">◆</span>
+      <span className="h-px w-8 bg-gradient-to-l from-transparent to-brand-accent" />
+    </div>
+  )
+}

package/src/login-brand-panel.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import Image from "next/image"
+import type { BrandPanelConfig } from "./account-theme"
+
+type LoginBrandPanelProps = {
+  panel?: BrandPanelConfig | null
+  variant?: "desktop" | "mobile"
+}
+
+const PLACEHOLDER =
+  "data:image/svg+xml," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200" viewBox="0 0 800 1200">
+      <defs>
+        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stop-color="#1a1a1a"/>
+          <stop offset="100%" stop-color="#3d3d3d"/>
+        </linearGradient>
+      </defs>
+      <rect width="800" height="1200" fill="url(#g)"/>
+      <circle cx="400" cy="520" r="80" fill="none" stroke="#c9a46c" stroke-width="1.5" opacity="0.5"/>
+      <circle cx="400" cy="520" r="40" fill="#c9a46c" opacity="0.25"/>
+    </svg>`
+  )
+
+export default function LoginBrandPanel({
+  panel,
+  variant = "desktop",
+}: LoginBrandPanelProps) {
+  const image = panel?.image || PLACEHOLDER
+
+  if (variant === "mobile") {
+    return (
+      <div className="relative w-full h-[26vh] min-h-[160px] max-h-[200px] shrink-0 overflow-hidden bg-page-bg lg:hidden">
+        <Image
+          src={image}
+          alt=""
+          fill
+          className="object-cover object-center"
+          sizes="100vw"
+          priority
+          unoptimized={image.startsWith("data:")}
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-page-bg/20 to-page-bg" />
+        {(panel?.eyebrow || panel?.headline) && (
+          <div className="absolute inset-x-0 bottom-0 p-5 z-[1]">
+            {panel.eyebrow && (
+              <p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/80 mb-1">
+                {panel.eyebrow}
+              </p>
+            )}
+            {panel.headline && (
+              <p className="font-heading text-lg text-inverse font-bold tracking-wide">
+                {panel.headline}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative hidden lg:block lg:w-1/2 h-full shrink-0 overflow-hidden bg-page-bg">
+      <Image
+        src={image}
+        alt=""
+        fill
+        className="object-cover object-center"
+        sizes="50vw"
+        priority
+        unoptimized={image.startsWith("data:")}
+      />
+      <div
+        className="absolute inset-y-0 right-0 w-[50%] min-w-[200px] bg-gradient-to-l from-page-bg via-page-bg/80 to-transparent"
+        aria-hidden
+      />
+      <div className="absolute inset-0 bg-gradient-to-r from-black/[0.04] via-transparent to-transparent" />
+      {(panel?.eyebrow || panel?.headline) && (
+        <div className="absolute inset-x-0 bottom-0 p-10 xl:p-14 z-[1] max-w-md">
+          {panel.eyebrow && (
+            <p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/70 mb-2">
+              {panel.eyebrow}
+            </p>
+          )}
+          {panel.headline && (
+            <p className="font-heading text-2xl xl:text-3xl text-inverse font-bold tracking-wide leading-snug">
+              {panel.headline}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}