{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cta-section", "title": "Cta Section", "author": "AlgorizeTech", "description": "Ask the user to pick one of 4 cta section variants: https://avaraui.com/view/cta-section. This item holds 4 of them as looks of one component (offer-showcase, mobile-app, concentric-portal, brand-pillars). Skip the question if the user already named one. An interconnected Brand Pillars call-to-action component featuring interactive service cards, a synchronized scorecard with animated progress meters, and a highlight popover bar.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/mobile-mockup.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/CtaSectionBlock.tsx", "content": "\"use client\";\n\nimport React, { useState, useRef, useEffect, useLayoutEffect, useMemo } from \"react\";\nimport {\n Palette,\n Monitor,\n MessageSquare,\n TrendingUp,\n ArrowRight,\n ChevronDown,\n Sparkles,\n Check,\n Star,\n Play,\n Signal,\n Wifi,\n Battery,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { prefersReducedMotion, springTiming, usePrefersReducedMotion } from \"@/lib/animate\";\nimport { Iphone16ProMockup } from \"./MobileMockupBlock\";\n\n/** How a card travels: quick into a slot, slow and weighty back to the deck. */\nconst TO_SLOT = springTiming({ stiffness: 240, damping: 25 });\nconst TO_DECK = springTiming({ stiffness: 75, damping: 16, mass: 1.1 });\n\n/** A card's centre, size and tilt as drawn right now, even part-way through a flight. */\nfunction measureCard(el: HTMLElement) {\n const rect = el.getBoundingClientRect();\n const matrix = new DOMMatrixReadOnly(getComputedStyle(el).transform);\n return {\n x: rect.left + rect.width / 2,\n y: rect.top + rect.height / 2,\n width: el.offsetWidth,\n height: el.offsetHeight,\n rotate: (Math.atan2(matrix.b, matrix.a) * 180) / Math.PI,\n };\n}\n\n/** The \"drag the cards\" pill drops in after the cards have landed. */\nfunction enterPill(el: HTMLDivElement | null) {\n if (!el || prefersReducedMotion()) return;\n el.animate(\n [\n { opacity: 0, transform: \"translateY(-10px)\" },\n { opacity: 1, transform: \"none\" },\n ],\n { duration: 500, delay: 1500, easing: \"ease-in-out\", fill: \"backwards\" },\n );\n}\n\n/** Rises in when `show` turns true, and stays mounted until it has fallen back out. */\nfunction RisePresence({\n show,\n className,\n children,\n}: {\n show: boolean;\n className?: string;\n children: React.ReactNode;\n}) {\n const [present, setPresent] = useState(show);\n if (show && !present) setPresent(true);\n const ref = useRef(null);\n\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n if (prefersReducedMotion()) {\n if (!show) setPresent(false);\n return;\n }\n const shown = { opacity: 1, transform: \"none\" };\n const animation = el.animate(\n show\n ? [{ opacity: 0, transform: \"translateY(18px) scale(0.95)\" }, shown]\n : [shown, { opacity: 0, transform: \"translateY(12px) scale(0.95)\" }],\n { duration: 350, easing: \"ease-out\", fill: \"both\" },\n );\n if (!show) animation.onfinish = () => setPresent(false);\n return () => animation.cancel();\n }, [show, present]);\n\n if (!present) return null;\n return (\n
\n {children}\n
\n );\n}\n\n// Animated counter for scores and summary percentage\nfunction AnimatedNumber({\n value,\n duration = 0.8,\n suffix = \"\",\n}: {\n value: number;\n duration?: number;\n suffix?: string;\n}) {\n const [displayValue, setDisplayValue] = useState(value);\n const prevValueRef = useRef(value);\n\n useEffect(() => {\n let startTimestamp: number | null = null;\n const startVal = prevValueRef.current;\n const endVal = value;\n prevValueRef.current = value;\n\n if (startVal === endVal) {\n setDisplayValue(endVal);\n return;\n }\n\n const step = (timestamp: number) => {\n if (!startTimestamp) startTimestamp = timestamp;\n const progress = Math.min((timestamp - startTimestamp) / (duration * 1000), 1);\n const easeProgress = 1 - Math.pow(1 - progress, 3);\n setDisplayValue(Math.round(startVal + (endVal - startVal) * easeProgress));\n if (progress < 1) {\n window.requestAnimationFrame(step);\n }\n };\n const reqId = window.requestAnimationFrame(step);\n return () => window.cancelAnimationFrame(reqId);\n }, [value, duration]);\n\n return (\n \n {displayValue}\n {suffix}\n \n );\n}\n\n// ==========================================\n// TYPES & INTERFACES\n// ==========================================\nexport interface PillarItem {\n id: string;\n eyebrow: string;\n title: string;\n description: string;\n baselineScore?: number;\n score?: number;\n highlight?: boolean;\n icon?: React.ReactNode;\n}\n\nexport type CtaSectionVariant =\n | \"brand-pillars\"\n | \"minimal\"\n | \"split\"\n | \"concentric-portal\"\n | \"orbital-lens\"\n | \"offer-showcase\"\n | \"cta-offer-showcase\"\n | \"mobile-app\"\n | \"app-showcase\"\n | \"mobile-showcase\"\n | \"mobile-mockup\";\n\nexport interface CtaSectionProps extends React.HTMLAttributes {\n variant?: CtaSectionVariant;\n color?: string;\n heading?: string;\n headingAccent?: string;\n subheading?: string;\n statement?: string;\n pillars?: PillarItem[];\n summaryText?: string;\n summaryScore?: string | number;\n ctaText?: string;\n ctaHref?: string;\n onCtaClick?: () => void;\n activePillarId?: string;\n onPillarChange?: (id: string) => void;\n rounded?: string | number;\n className?: string;\n // Mobile App Showcase props\n appleStoreHref?: string;\n googlePlayHref?: string;\n showAppStoreBadges?: boolean;\n userName?: string;\n userAvatar?: string;\n featuredWorkoutTitle?: string;\n featuredWorkoutImage?: string;\n workoutDuration?: string;\n workoutCalories?: string;\n phonePosition?: \"left\" | \"right\";\n cardBackground?: string;\n // Concentric Portal / Orbital Lens props\n phrase?: string;\n scrollProgress?: number;\n autoRotate?: boolean;\n // Offer Showcase props\n badge?: string;\n price?: number | string;\n compareAtPrice?: number | string;\n currency?: string;\n period?: string;\n savingsText?: string;\n footnote?: string;\n mediaItems?: string[];\n images?: string[];\n enableHoverSlowdown?: boolean;\n}\n\n// ==========================================\n// DEFAULT PILLARS (Matching Framer Brand Pillars)\n// ==========================================\nexport const DEFAULT_PILLARS: PillarItem[] = [\n {\n id: \"branding\",\n eyebrow: \"Branding\",\n title: \"A brand that sticks\",\n description: \"Identity, visual language and positioning.\",\n baselineScore: 26,\n score: 100,\n icon: ,\n },\n {\n id: \"website\",\n eyebrow: \"Website\",\n title: 'An \"on-brand\" website',\n description: \"Your digital storefront, built to convert.\",\n baselineScore: 34,\n score: 100,\n icon: ,\n },\n {\n id: \"social\",\n eyebrow: \"Social content\",\n title: \"Content that stays consistent\",\n description: \"Social media that looks and sounds like your brand.\",\n baselineScore: 19,\n score: 100,\n icon: ,\n },\n {\n id: \"data\",\n eyebrow: \"Data & insights\",\n title: \"Knowing what works\",\n description: \"Insights that show what's working and what needs improvement.\",\n baselineScore: 41,\n score: 100,\n highlight: true,\n icon: ,\n },\n];\n\n// Preset color map for quick accents\nconst COLOR_MAP: Record = {\n orange: {\n bg: \"#f95716\",\n text: \"#f95716\",\n gradient: \"from-[#ff6426] to-[#e64708]\",\n },\n primary: {\n bg: \"var(--primary)\",\n text: \"var(--primary)\",\n gradient: \"from-primary to-primary/80\",\n },\n default: {\n bg: \"var(--primary)\",\n text: \"var(--primary)\",\n gradient: \"from-primary to-primary/80\",\n },\n lavender: {\n bg: \"#9b8afb\",\n text: \"#9b8afb\",\n gradient: \"from-[#a99bfb] to-[#8d7bf9]\",\n },\n indigo: {\n bg: \"#6366f1\",\n text: \"#6366f1\",\n gradient: \"from-indigo-500 to-indigo-600\",\n },\n rose: {\n bg: \"#f43f5e\",\n text: \"#f43f5e\",\n gradient: \"from-rose-500 to-rose-600\",\n },\n emerald: {\n bg: \"#10b981\",\n text: \"#10b981\",\n gradient: \"from-emerald-500 to-emerald-600\",\n },\n zinc: {\n bg: \"#18181b\",\n text: \"#18181b\",\n gradient: \"from-zinc-800 to-zinc-950\",\n },\n};\n\n/**\n * Universal theme color resolver:\n * Safely resolves 'default', 'primary', theme swatch names, or hex strings into concrete CSS values\n */\nexport function resolveThemeColor(color?: string, fallback = \"var(--primary)\"): string {\n if (!color || color === \"default\" || color === \"primary\") return fallback;\n const PRESET_HEX_MAP: Record = {\n lavender: \"#9b8afb\",\n indigo: \"#6366f1\",\n rose: \"#f43f5e\",\n emerald: \"#10b981\",\n orange: \"#f95716\",\n zinc: \"#18181b\",\n primary: fallback,\n default: fallback,\n };\n return PRESET_HEX_MAP[color] || COLOR_MAP[color]?.bg || color;\n}\n\n// Deck card placement & rotation offsets:\n// 1 line absolute at bottom, spanning across the component\n// Alternate rotation & translation (-5 to +5) as requested by user\n// Deck card placement & rotation offsets:\n// Perfectly distributed across the component from left edge (0%) to right edge\n// Responsive offsets based on container width\nconst DECK_CONFIG: Record<\n string,\n {\n rotate: number;\n pctOffset: number;\n mobilePctOffset: number;\n offsetY: number;\n zIndex: number;\n alignRight?: boolean;\n isOrange?: boolean;\n }\n> = {\n branding: { rotate: -5, pctOffset: 0, mobilePctOffset: 0, offsetY: 5, zIndex: 40 },\n website: { rotate: 5, pctOffset: 21.7, mobilePctOffset: 12, offsetY: -5, zIndex: 30 },\n social: { rotate: -5, pctOffset: 43.3, mobilePctOffset: 24, offsetY: 5, zIndex: 20 },\n data: { rotate: 3, pctOffset: 65, mobilePctOffset: 36, offsetY: -4, zIndex: 10, isOrange: true, alignRight: true },\n};\n\n// Alternating rotations on mobile (-5, +5, -5, +5)\nconst MOBILE_ROTATIONS: Record = {\n branding: -5,\n website: 5,\n social: -5,\n data: 5,\n};\n\n// Initial cascade / rain drop entrance delays (right-to-left: Data -> Social -> Website -> Branding)\nconst RAIN_DELAYS: Record = {\n data: 0.15,\n social: 0.45,\n website: 0.75,\n branding: 1.05,\n};\n\n// ==========================================\n// BRAND PILLARS CTA VARIANT (PIXEL-PERFECT FRAMER REPLICA)\n// ==========================================\nfunction BrandPillarsCta({\n color,\n heading,\n subheading,\n statement = \"A strong brand isn't built from a single element. Branding, website, social, and data reinforce each other — together creating a brand that's recognizable, consistent, and effective.\",\n pillars = DEFAULT_PILLARS,\n summaryText = 'One complete, consistent brand\" — 100%',\n summaryScore,\n ctaText = \"Boek a demo\",\n ctaHref = \"#\",\n onCtaClick,\n activePillarId: _controlledActiveId,\n onPillarChange,\n rounded,\n className,\n style,\n ...props\n}: CtaSectionProps) {\n // Starts with 0 cards placed (initial state matching the user's screenshot)\n const [placedCardIds, setPlacedCardIds] = useState([]);\n\n // Use CSS theme variable var(--primary) by default so theme switcher changes it across the entire component\n const activeAccent = resolveThemeColor(color, \"var(--primary)\");\n // Dynamic radius bound to global --radius token from the theme customizer sidebar\n const dynamicRadius =\n rounded !== undefined\n ? typeof rounded === \"number\"\n ? `${rounded}px`\n : rounded\n : \"var(--radius, 0.625rem)\";\n const containerRadius =\n rounded !== undefined\n ? dynamicRadius\n : \"calc(var(--radius, 0.625rem) * 1.6)\";\n const iconRadius =\n rounded !== undefined\n ? dynamicRadius\n : \"calc(var(--radius, 0.625rem) * 0.75)\";\n\n // Track responsive screen size for mobile deck spacing\n const [isMobile, setIsMobile] = useState(false);\n const [hasMounted, setHasMounted] = useState(false);\n\n useEffect(() => {\n setHasMounted(true);\n const checkMobile = () => setIsMobile(window.innerWidth < 640);\n checkMobile();\n window.addEventListener(\"resize\", checkMobile);\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n const reduceMotion = usePrefersReducedMotion();\n const sectionRef = useRef(null);\n const flightFrom = useRef<({ id: string } & ReturnType) | null>(null);\n const findCard = (id: string) =>\n [...(sectionRef.current?.querySelectorAll(\"[data-pillar-card]\") ?? [])].find(\n (el) => el.dataset.pillarCard === id,\n );\n\n // Cards rain into the deck on load, right to left.\n useLayoutEffect(() => {\n if (!hasMounted || prefersReducedMotion()) return;\n sectionRef.current?.querySelectorAll(\"[data-pillar-card]\").forEach((el) => {\n const y = Number(el.dataset.restY);\n const rotate = Number(el.dataset.restRotate);\n el.animate(\n [\n { opacity: 0, transform: `translateY(-750px) rotate(${rotate * 2}deg) scale(0.9)` },\n { opacity: 1, transform: `translateY(${y}px) rotate(${rotate}deg) scale(1)` },\n ],\n { ...TO_DECK, delay: (RAIN_DELAYS[el.dataset.pillarCard ?? \"\"] ?? 0) * 1000, fill: \"backwards\" },\n );\n });\n }, [hasMounted]);\n\n // A placed or returned card is a new element in a new spot. It starts at the\n // old one's position and size and flies to its own. Width and height animate\n // rather than scale, so the text on the card never stretches.\n useLayoutEffect(() => {\n const from = flightFrom.current;\n flightFrom.current = null;\n if (!from || prefersReducedMotion()) return;\n const el = findCard(from.id);\n if (!el) return;\n const to = measureCard(el);\n const restY = Number(el.dataset.restY);\n const left = el.offsetLeft;\n const dx = from.x - (to.x - to.width / 2) - from.width / 2;\n const dy = from.y - (to.y - restY - to.height / 2) - from.height / 2;\n el.animate(\n [\n {\n left: `${left}px`,\n right: \"auto\",\n width: `${from.width}px`,\n height: `${from.height}px`,\n transform: `translate(${dx}px, ${dy}px) rotate(${from.rotate}deg)`,\n },\n {\n left: `${left}px`,\n right: \"auto\",\n width: `${to.width}px`,\n height: `${to.height}px`,\n transform: `translate(0px, ${restY}px) rotate(${to.rotate}deg)`,\n },\n ],\n el.dataset.restSlot ? TO_SLOT : TO_DECK,\n );\n }, [placedCardIds]);\n\n // Active flying animations to ensure moving cards are always on top of EVERYTHING\n const [activeFlyingCards, setActiveFlyingCards] = useState>({});\n const flyingTimersRef = useRef>>({});\n\n // Toggle or place card\n const handlePlaceCard = (id: string) => {\n const isCurrentlyPlaced = placedCardIds.includes(id);\n const direction: \"toSlot\" | \"toDeck\" = isCurrentlyPlaced ? \"toDeck\" : \"toSlot\";\n\n const card = findCard(id);\n if (card) flightFrom.current = { id, ...measureCard(card) };\n\n // Elevate moving card above all other elements\n setActiveFlyingCards((prev) => ({ ...prev, [id]: direction }));\n\n if (flyingTimersRef.current[id]) {\n clearTimeout(flyingTimersRef.current[id]);\n }\n flyingTimersRef.current[id] = setTimeout(() => {\n setActiveFlyingCards((prev) => {\n const next = { ...prev };\n delete next[id];\n return next;\n });\n }, 700);\n\n setPlacedCardIds((prev) => {\n if (prev.includes(id)) {\n return prev.filter((item) => item !== id);\n }\n return [...prev, id];\n });\n onPillarChange?.(id);\n };\n\n\n const isAllPlaced = placedCardIds.length === pillars.length;\n const progressPercent = Math.round((placedCardIds.length / pillars.length) * 100);\n\n // Unplaced cards remaining in the floating deck\n const unplacedPillars = pillars.filter((p) => !placedCardIds.includes(p.id));\n\n return (\n \n
\n {/* Optional Header (hidden if not passed, as in standard Framer component) */}\n {(heading || subheading) && (\n
\n {subheading && (\n \n {subheading}\n \n )}\n {heading && (\n

\n {heading}\n

\n )}\n
\n )}\n\n {/* Relative wrapper holding both columns and the overlapping floating deck */}\n
\n {/* Main 2-Column Split Layout */}\n
\n {/* ======================================================== */}\n {/* LEFT COLUMN: 4 Vertical Card Slots */}\n {/* ======================================================== */}\n \n {pillars.map((pillar) => {\n const isPlaced = placedCardIds.includes(pillar.id);\n const isDataSlot = pillar.id === \"data\";\n const isCardFlying = Boolean(activeFlyingCards[pillar.id]);\n\n return (\n \n {/* Permanent Background Placeholder Slot - Always visible (\"agula harai jabe na\") */}\n !isPlaced && handlePlaceCard(pillar.id)}\n className={cn(\n \"p-5 sm:p-5.5 select-none border w-full h-full transition-all duration-300\",\n isPlaced ? \"cursor-default\" : \"cursor-pointer hover:border-foreground/10\",\n isDataSlot\n ? \"bg-muted-foreground/35 dark:bg-muted-foreground/25 text-white border-transparent\"\n : \"bg-card/70 dark:bg-card/40 text-muted-foreground border-border/60\"\n )}\n style={{ borderRadius: dynamicRadius }}\n title={!isPlaced ? \"Click to place card in slot\" : undefined}\n >\n
\n \n {pillar.icon}\n
\n
\n \n {pillar.eyebrow}\n \n \n {pillar.title}\n \n \n {pillar.description}\n

\n
\n
\n
\n\n {/* Shared Layout Card when placed - Sits directly ON TOP (\"agular uporer jaiya boshbe\") */}\n {isPlaced && (\n handlePlaceCard(pillar.id)}\n className={cn(\n \"absolute inset-0 cursor-pointer p-5 sm:p-5.5 select-none border w-full h-full\",\n isDataSlot\n ? \"text-white border-transparent\"\n : \"bg-card text-card-foreground border-border\"\n )}\n style={{\n backgroundColor: isDataSlot ? activeAccent : undefined,\n borderRadius: dynamicRadius,\n zIndex: isCardFlying ? 9999 : 20,\n }}\n title=\"Click to return card to deck\"\n >\n
\n \n {pillar.icon}\n
\n
\n \n {pillar.eyebrow}\n \n \n {pillar.title}\n \n \n {pillar.description}\n

\n
\n
\n \n )}\n \n );\n })}\n \n\n {/* ======================================================== */}\n {/* RIGHT COLUMN: White Scorecard Panel */}\n {/* ======================================================== */}\n
\n \n {/* Top Philosophy Statement */}\n
\n \n {statement}\n

\n\n {/* 4 Scorecards (2x2 on mobile matching screenshot, 4 across on desktop) */}\n
\n {pillars.map((pillar) => {\n const isPlaced = placedCardIds.includes(pillar.id);\n const isDataSlot = pillar.id === \"data\";\n const targetScore = isPlaced\n ? (pillar.score ?? 100)\n : (pillar.baselineScore ?? 25);\n\n return (\n handlePlaceCard(pillar.id)}\n className={cn(\n \"cursor-pointer flex flex-col justify-between items-center p-3 sm:p-4.5 h-44 sm:h-52 border transition-all duration-300 select-none\",\n isPlaced\n ? isDataSlot\n ? \"text-white border-transparent\"\n : \"bg-card text-card-foreground border-border\"\n : isDataSlot\n ? \"bg-muted-foreground/40 dark:bg-neutral-700 text-white border-transparent\"\n : \"bg-card text-card-foreground border-border\"\n )}\n style={{\n borderRadius: dynamicRadius,\n backgroundColor: isPlaced && isDataSlot ? activeAccent : undefined,\n filter: isPlaced ? \"grayscale(0)\" : \"grayscale(1)\",\n opacity: isPlaced ? 1 : 0.55,\n transform: isPlaced ? \"scale(1)\" : \"scale(0.98)\",\n }}\n >\n {/* Short Label */}\n \n {pillar.eyebrow.split(\" \")[0]}\n \n\n {/* Large Score with dynamic count-up */}\n
\n \n \n \n
\n\n {/* Bottom Full-Width Progress Track (Framer exact) */}\n \n \n
\n
\n );\n })}\n
\n \n\n {/* Bottom Summary Bar */}\n \n \n {summaryText}\n \n\n \n {summaryScore !== undefined ? (\n summaryScore\n ) : (\n \n )}\n \n \n \n \n \n\n {/* ======================================================== */}\n {/* ABSOLUTE CARDS DECK AT COMPONENT BOTTOM (Matches user screenshot 1:1) */}\n {/* ======================================================== */}\n {unplacedPillars.length > 0 && (\n \n {/* Floating Orange Instruction Pill with Down Arrow - disappears once any card is picked */}\n {placedCardIds.length === 0 && (\n \n \n ✋\n Drag the cards into place\n \n \n ↓\n \n \n )}\n\n {/* Cards Container: Stacked According to Index (Desktop: Horizontal line, Mobile: Stacked underneath each other) */}\n
\n {unplacedPillars.map((pillar, index) => {\n const cfg = DECK_CONFIG[pillar.id] || {\n rotate: 0,\n pctOffset: 0,\n mobilePctOffset: 0,\n offsetY: 0,\n zIndex: 1,\n };\n const isOrangeCard = pillar.id === \"data\";\n const isCardFlying = Boolean(activeFlyingCards[pillar.id]);\n const pct = cfg.pctOffset;\n const currentRotate = isMobile\n ? (MOBILE_ROTATIONS[pillar.id] ?? (index % 2 === 0 ? -5 : 5))\n : cfg.rotate;\n // On mobile, slight vertical offset (index * 5) so cards peek out according to index\n const currentY = isMobile ? (index * 5) : cfg.offsetY;\n\n return (\n handlePlaceCard(pillar.id)}\n className={cn(\n \"absolute top-0 cursor-pointer select-none\",\n \"w-[calc(100%-16px)] sm:w-[35%] p-4 sm:p-5 select-none min-h-[96px] sm:min-h-[104px] flex items-center\",\n isOrangeCard\n ? \"text-white border border-transparent\"\n : \"bg-card text-card-foreground border border-border\"\n )}\n style={{\n left: isMobile ? \"8px\" : (cfg.alignRight ? undefined : `${pct}%`),\n right: isMobile ? \"8px\" : (cfg.alignRight ? 0 : undefined),\n backgroundColor: isOrangeCard ? activeAccent : undefined,\n borderRadius: dynamicRadius,\n zIndex: isCardFlying ? 9999 : cfg.zIndex,\n opacity: hasMounted ? 1 : 0,\n transform: hasMounted\n ? `translateY(${currentY}px) rotate(${currentRotate}deg)`\n : `translateY(-750px) rotate(${currentRotate * 2}deg) scale(0.9)`,\n transition: reduceMotion ? undefined : `transform ${TO_DECK.duration}ms ${TO_DECK.easing}`,\n }}\n title=\"Click to place card in slot\"\n >\n
\n \n {pillar.icon}\n
\n
\n \n {pillar.eyebrow}\n \n \n {pillar.title}\n \n \n {pillar.description}\n

\n
\n
\n \n );\n })}\n \n \n )}\n \n\n {/* ======================================================== */}\n {/* BOTTOM CTA BUTTON (Matches Framer when 100% complete) */}\n {/* ======================================================== */}\n \n {\n if (ctaHref === \"#\") e.preventDefault();\n onCtaClick?.();\n }}\n className=\"inline-flex items-center gap-3 pl-6 pr-2.5 py-2.5 rounded-full text-white font-semibold text-sm sm:text-base transition-transform duration-200 hover:scale-[1.03] active:scale-[0.98]\"\n style={{ backgroundColor: activeAccent }}\n >\n {ctaText}\n \n \n \n \n \n \n \n );\n}\n\n// ==========================================\n// MINIMAL CTA VARIANT\n// ==========================================\nfunction MinimalCta({\n color,\n heading = \"Transform your brand into a growth engine\",\n statement = \"Start building unified identity, conversion-driven websites, and data-backed marketing systems today.\",\n ctaText = \"Get Started\",\n ctaHref = \"#\",\n onCtaClick,\n rounded,\n className,\n style,\n ...props\n}: CtaSectionProps) {\n const activeAccent = resolveThemeColor(color, \"var(--primary)\");\n const dynamicRadius =\n rounded !== undefined\n ? typeof rounded === \"number\"\n ? `${rounded}px`\n : rounded\n : \"var(--radius, 1rem)\";\n\n return (\n \n
\n

\n {heading}\n

\n

\n {statement}\n

\n
\n {\n if (ctaHref === \"#\") e.preventDefault();\n onCtaClick?.();\n }}\n className=\"inline-flex items-center gap-2 px-6 py-3.5 text-sm sm:text-base font-bold text-white shadow-lg transition-all hover:opacity-95 active:scale-95\"\n style={{\n backgroundColor: activeAccent,\n borderRadius: dynamicRadius,\n }}\n >\n {ctaText}\n \n \n
\n
\n \n );\n}\n\n// ==========================================\n// SPLIT CTA VARIANT\n// ==========================================\nfunction SplitCta({\n color,\n heading = \"One team for your complete brand ecosystem\",\n statement = \"From brand strategy to custom web development and growth content, everything connects seamlessly.\",\n ctaText = \"Book a Call\",\n ctaHref = \"#\",\n onCtaClick,\n pillars = DEFAULT_PILLARS,\n rounded,\n className,\n style,\n ...props\n}: CtaSectionProps) {\n const activeAccent = resolveThemeColor(color, \"var(--primary)\");\n const dynamicRadius =\n rounded !== undefined\n ? typeof rounded === \"number\"\n ? `${rounded}px`\n : rounded\n : \"var(--radius, 1rem)\";\n\n return (\n \n
\n \n
\n \n Unified Brand Growth\n \n

\n {heading}\n

\n

\n {statement}\n

\n
\n {\n if (ctaHref === \"#\") e.preventDefault();\n onCtaClick?.();\n }}\n className=\"inline-flex items-center gap-2 px-6 py-3 text-sm font-bold text-white shadow-md transition-all hover:opacity-95 active:scale-95\"\n style={{\n backgroundColor: activeAccent,\n borderRadius: dynamicRadius,\n }}\n >\n {ctaText}\n \n \n
\n
\n\n
\n {pillars.map((pillar) => (\n \n \n {pillar.icon}\n
\n
\n

{pillar.title}

\n

\n {pillar.description}\n

\n
\n
\n ))}\n \n \n \n \n );\n}\n\n// ==========================================\n// CONCENTRIC PORTAL / ORBITAL LENS CTA (Reference: contentarchitecture.dev)\n// ==========================================\n// Performance model:\n// - All orbital text + dotted orbits are drawn on ONE from pre-rendered glyph\n// sprites (no SVG , no per-ring components, no per-frame React work).\n// - A single rAF loop smooths scroll progress, repaints the canvas and writes the portal's\n// transform/opacity straight to the DOM, so scrubbing never triggers a React re-render.\n// - The loop sleeps when the section is off-screen or nothing is animating.\nconst PORTAL_RINGS = [\n { id: \"ring-1\", radius: 75, direction: \"cw\" as const, duration: 55, scrollAngle: 45 },\n { id: \"ring-2\", radius: 130, direction: \"ccw\" as const, duration: 70, scrollAngle: -60 },\n { id: \"ring-3\", radius: 190, direction: \"cw\" as const, duration: 85, scrollAngle: 75 },\n { id: \"ring-4\", radius: 255, direction: \"ccw\" as const, duration: 105, scrollAngle: -95 },\n { id: \"ring-5\", radius: 325, direction: \"cw\" as const, duration: 125, scrollAngle: 115 },\n { id: \"ring-6\", radius: 400, direction: \"ccw\" as const, duration: 150, scrollAngle: -135 },\n { id: \"ring-7\", radius: 480, direction: \"cw\" as const, duration: 175, scrollAngle: 155 },\n { id: \"ring-8\", radius: 565, direction: \"ccw\" as const, duration: 205, scrollAngle: -175 },\n { id: \"ring-9\", radius: 655, direction: \"cw\" as const, duration: 235, scrollAngle: 195 },\n { id: \"ring-10\", radius: 750, direction: \"ccw\" as const, duration: 270, scrollAngle: -215 },\n { id: \"ring-11\", radius: 850, direction: \"cw\" as const, duration: 310, scrollAngle: 235 },\n { id: \"ring-12\", radius: 955, direction: \"ccw\" as const, duration: 350, scrollAngle: -255 },\n { id: \"ring-13\", radius: 1065, direction: \"cw\" as const, duration: 395, scrollAngle: 275 },\n { id: \"ring-14\", radius: 1180, direction: \"ccw\" as const, duration: 445, scrollAngle: -295 },\n { id: \"ring-15\", radius: 1300, direction: \"cw\" as const, duration: 500, scrollAngle: 315 },\n];\n\nconst PORTAL_DOTTED_ORBITS = [\n 45, 102, 160, 222, 290, 362, 440, 522, 610, 702, 800, 902, 1010, 1122, 1240, 1365,\n];\n\nconst PORTAL_FONT_FAMILY = \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\";\nconst PORTAL_TEXT_COLOR = \"rgba(255, 255, 255, 0.94)\";\nconst PORTAL_DOT_COLOR = \"rgba(255, 255, 255, 0.22)\";\nconst PORTAL_GLYPH_ADVANCE = 0.74; // em: 0.6em monospace glyph + 0.14em letter-spacing\nconst PORTAL_MIN_SCALE = 0.94;\nconst PORTAL_MAX_SCALE = 1.22;\nconst PORTAL_SMOOTHING = 14; // higher = snappier follow of the scroll target (1/s)\n\nconst clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);\nconst portalLinesScale = (p: number) =>\n PORTAL_MIN_SCALE + (PORTAL_MAX_SCALE - PORTAL_MIN_SCALE) * clamp01(p / 0.85);\nconst portalCircleScale = (p: number) =>\n p <= 0.03 ? 0 : 1 - Math.pow(1 - clamp01((p - 0.03) / 0.72), 2.4);\n\ninterface PortalRingLayout {\n radius: number;\n fontSize: number;\n step: number; // radians between neighbouring glyphs\n chars: string[];\n sprites: Int16Array; // atlas index per glyph (-1 = blank)\n direction: 1 | -1;\n periodMs: number;\n scrollRad: number;\n}\n\ninterface GlyphAtlas {\n canvas: HTMLCanvasElement;\n cellW: number;\n cellH: number;\n baseline: number;\n index: Map;\n}\n\nfunction buildRingLayouts(phrase: string): PortalRingLayout[] {\n const unit = `${phrase.trim() || \"THE CONTENT ARCHITECTURE\"} · · · `;\n return PORTAL_RINGS.map((ring) => {\n const fontSize = ring.radius < 180 ? 16 : 18.5;\n // Whole number of phrase units per ring so the text wraps seamlessly (no cut-off at the seam)\n const natural = (2 * Math.PI * ring.radius) / (fontSize * PORTAL_GLYPH_ADVANCE);\n const count = unit.length * Math.max(1, Math.round(natural / unit.length));\n return {\n radius: ring.radius,\n fontSize,\n step: (2 * Math.PI) / count,\n chars: Array.from({ length: count }, (_, i) => unit[i % unit.length]),\n sprites: new Int16Array(count),\n direction: ring.direction === \"cw\" ? 1 : -1,\n periodMs: ring.duration * 1000,\n scrollRad: (ring.scrollAngle * Math.PI) / 180,\n };\n });\n}\n\n// Renders each distinct character once; frames then blit + rotate sprites (GPU textured quads).\nfunction buildGlyphAtlas(chars: string[], fontSize: number, pxScale: number): GlyphAtlas {\n const unique = Array.from(new Set(chars)).filter((c) => c.trim() !== \"\");\n const cellW = Math.ceil(fontSize * 0.9 * pxScale);\n const cellH = Math.ceil(fontSize * 1.4 * pxScale);\n const baseline = Math.ceil(fontSize * 1.08 * pxScale);\n const canvas = document.createElement(\"canvas\");\n canvas.width = cellW * Math.max(1, unique.length);\n canvas.height = cellH;\n const index = new Map();\n const ctx = canvas.getContext(\"2d\");\n if (ctx) {\n ctx.font = `700 ${fontSize * pxScale}px ${PORTAL_FONT_FAMILY}`;\n ctx.fillStyle = PORTAL_TEXT_COLOR;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"alphabetic\";\n unique.forEach((c, i) => {\n ctx.fillText(c, i * cellW + cellW / 2, baseline);\n index.set(c, i);\n });\n }\n return { canvas, cellW, cellH, baseline, index };\n}\n\nexport function ConcentricPortalCta({\n heading = \"The next 5 days are yours.\",\n subheading,\n statement,\n phrase = \"THE CONTENT ARCHITECTURE\",\n ctaText = \"GET ACCESS\",\n ctaHref = \"#\",\n onCtaClick,\n color,\n scrollProgress,\n autoRotate = true,\n className,\n style,\n ...props\n}: CtaSectionProps) {\n const containerRef = useRef(null);\n const canvasRef = useRef(null);\n const circleRef = useRef(null);\n const contentRef = useRef(null);\n const hintRef = useRef(null);\n\n // Scroll target (0..1). The render loop eases the displayed progress toward it.\n const targetRef = useRef(scrollProgress !== undefined ? clamp01(scrollProgress) : 0);\n const autoRotateRef = useRef(autoRotate);\n const maxDiameterRef = useRef(520);\n const loopRef = useRef<{ wake: () => void } | null>(null);\n\n // Screen-responsive max diameter\n const [maxDiameter, setMaxDiameter] = useState(520);\n useEffect(() => {\n const updateMax = () => {\n const w = typeof window !== \"undefined\" ? window.innerWidth : 1200;\n if (w < 480) {\n setMaxDiameter(Math.min(320, w - 32));\n } else if (w < 640) {\n setMaxDiameter(Math.min(420, w - 48));\n } else {\n setMaxDiameter(520);\n }\n };\n updateMax();\n window.addEventListener(\"resize\", updateMax);\n return () => window.removeEventListener(\"resize\", updateMax);\n }, []);\n\n useEffect(() => {\n maxDiameterRef.current = maxDiameter;\n loopRef.current?.wake();\n }, [maxDiameter]);\n\n useEffect(() => {\n autoRotateRef.current = autoRotate;\n loopRef.current?.wake();\n }, [autoRotate]);\n\n useEffect(() => {\n if (scrollProgress !== undefined) {\n targetRef.current = clamp01(scrollProgress);\n loopRef.current?.wake();\n }\n }, [scrollProgress]);\n\n // Render loop: smoothing + canvas painting + direct DOM writes (no React re-renders)\n useEffect(() => {\n const section = containerRef.current;\n const canvas = canvasRef.current;\n const circle = circleRef.current;\n const content = contentRef.current;\n const hint = hintRef.current;\n if (!section || !canvas || !circle || !content || !hint) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const layouts = buildRingLayouts(phrase);\n const dotsCanvas = document.createElement(\"canvas\");\n const dotsCtx = dotsCanvas.getContext(\"2d\");\n let atlases = new Map();\n let dotsKey = \"\";\n\n let width = 0;\n let height = 0;\n let dpr = 1;\n\n let p = targetRef.current;\n let appliedP = -1;\n let ambientMs = 0;\n let lastTs = 0;\n let raf = 0;\n let inView = true;\n\n const rebuildAtlases = () => {\n atlases = new Map();\n for (const layout of layouts) {\n let atlas = atlases.get(layout.fontSize);\n if (!atlas) {\n const chars = layouts\n .filter((l) => l.fontSize === layout.fontSize)\n .flatMap((l) => l.chars);\n atlas = buildGlyphAtlas(chars, layout.fontSize, dpr * PORTAL_MAX_SCALE);\n atlases.set(layout.fontSize, atlas);\n }\n for (let i = 0; i < layout.chars.length; i++) {\n layout.sprites[i] = atlas.index.get(layout.chars[i]) ?? -1;\n }\n }\n };\n\n const applyProgress = (value: number) => {\n const c = clamp01((value - 0.32) / 0.28);\n circle.style.transform = `scale(${portalCircleScale(value)})`;\n circle.style.opacity = String(clamp01((value - 0.03) / 0.05));\n circle.style.visibility = value <= 0.03 ? \"hidden\" : \"visible\";\n content.style.opacity = String(c);\n content.style.transform = `scale(${0.88 + 0.12 * c})`;\n hint.style.opacity = String(1 - clamp01(value / 0.08));\n };\n\n // Dotted orbits only change with the zoom level, so cache them between frames.\n const drawDots = (scale: number, reach: number) => {\n if (!dotsCtx) return;\n const key = `${canvas.width}x${canvas.height}:${scale.toFixed(4)}`;\n if (key !== dotsKey) {\n if (dotsCanvas.width !== canvas.width || dotsCanvas.height !== canvas.height) {\n dotsCanvas.width = canvas.width;\n dotsCanvas.height = canvas.height;\n }\n dotsCtx.setTransform(1, 0, 0, 1, 0, 0);\n dotsCtx.clearRect(0, 0, dotsCanvas.width, dotsCanvas.height);\n dotsCtx.setTransform(dpr * scale, 0, 0, dpr * scale, (width / 2) * dpr, (height / 2) * dpr);\n dotsCtx.strokeStyle = PORTAL_DOT_COLOR;\n dotsCtx.lineWidth = 1;\n dotsCtx.setLineDash([2, 7]);\n for (const r of PORTAL_DOTTED_ORBITS) {\n if (r * scale > reach) break;\n dotsCtx.beginPath();\n dotsCtx.arc(0, 0, r, 0, Math.PI * 2);\n dotsCtx.stroke();\n }\n dotsKey = key;\n }\n ctx.drawImage(dotsCanvas, 0, 0);\n };\n\n const draw = (value: number) => {\n if (!width || !height) return;\n const scale = portalLinesScale(value);\n const cx = width / 2;\n const cy = height / 2;\n const reach = Math.hypot(cx, cy) + 30; // farthest visible distance from center\n const circleR = value > 0.08 ? (maxDiameterRef.current / 2) * portalCircleScale(value) : 0;\n const k = scale * dpr;\n const margin = 24;\n\n ctx.setTransform(1, 0, 0, 1, 0, 0);\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawDots(scale, reach);\n\n for (const layout of layouts) {\n const rs = layout.radius * scale;\n if (rs > reach) continue; // ring is fully outside the section\n if (rs + layout.fontSize * 1.1 * scale < circleR) continue; // hidden under the portal\n const atlas = atlases.get(layout.fontSize);\n if (!atlas) continue;\n\n const ambient = autoRotateRef.current\n ? layout.direction * ((ambientMs / layout.periodMs) % 1) * Math.PI * 2\n : 0;\n const base = ambient + layout.scrollRad * value;\n const dw = atlas.cellW / (dpr * PORTAL_MAX_SCALE);\n const dh = atlas.cellH / (dpr * PORTAL_MAX_SCALE);\n const dy = -atlas.baseline / (dpr * PORTAL_MAX_SCALE);\n\n for (let i = 0; i < layout.sprites.length; i++) {\n const sprite = layout.sprites[i];\n if (sprite < 0) continue;\n const a = base + i * layout.step;\n const sn = Math.sin(a);\n const cs = Math.cos(a);\n const x = cx + sn * rs;\n const y = cy - cs * rs;\n if (x < -margin || x > width + margin || y < -margin || y > height + margin) continue;\n ctx.setTransform(cs * k, sn * k, -sn * k, cs * k, x * dpr, y * dpr);\n ctx.drawImage(\n atlas.canvas,\n sprite * atlas.cellW,\n 0,\n atlas.cellW,\n atlas.cellH,\n -dw / 2,\n dy,\n dw,\n dh\n );\n }\n }\n };\n\n // Returns true while another frame is needed\n const step = (now: number) => {\n const dt = lastTs ? Math.min(0.064, (now - lastTs) / 1000) : 0;\n lastTs = now;\n\n const target = targetRef.current;\n if (p !== target) {\n p += (target - p) * (1 - Math.exp(-dt * PORTAL_SMOOTHING));\n if (Math.abs(target - p) < 0.0004) p = target;\n }\n if (autoRotateRef.current) ambientMs += dt * 1000;\n\n if (p !== appliedP) {\n applyProgress(p);\n appliedP = p;\n }\n draw(p);\n return p !== target || autoRotateRef.current;\n };\n\n const tick = (now: number) => {\n raf = 0;\n if (step(now) && inView) {\n raf = requestAnimationFrame(tick);\n } else {\n lastTs = 0;\n }\n };\n\n const wake = () => {\n if (!raf && inView) raf = requestAnimationFrame(tick);\n };\n loopRef.current = { wake };\n\n const resize = () => {\n const nextDpr = Math.min(window.devicePixelRatio || 1, 2);\n width = section.clientWidth;\n height = section.clientHeight;\n canvas.width = Math.max(1, Math.round(width * nextDpr));\n canvas.height = Math.max(1, Math.round(height * nextDpr));\n dotsKey = \"\";\n if (nextDpr !== dpr || atlases.size === 0) {\n dpr = nextDpr;\n rebuildAtlases();\n }\n draw(p); // resizing clears the canvas; repaint immediately to avoid a flash\n wake();\n };\n\n const resizeObserver = new ResizeObserver(resize);\n resizeObserver.observe(section);\n const intersectionObserver = new IntersectionObserver(([entry]) => {\n inView = entry.isIntersecting;\n if (inView) wake();\n });\n intersectionObserver.observe(section);\n\n dpr = Math.min(window.devicePixelRatio || 1, 2);\n rebuildAtlases();\n resize();\n\n return () => {\n loopRef.current = null;\n if (raf) cancelAnimationFrame(raf);\n resizeObserver.disconnect();\n intersectionObserver.disconnect();\n };\n }, [phrase]);\n\n // Wheel scrubbing: scroll over the section smoothly scrubs 0 -> 1 without React re-renders\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n\n const onWheel = (e: WheelEvent) => {\n const cur = targetRef.current;\n const next = clamp01(cur + e.deltaY * 0.0014);\n\n // Intercept wheel while expanding (down < 0.99) or collapsing (up > 0.01)\n if ((e.deltaY > 0 && cur < 0.99) || (e.deltaY < 0 && cur > 0.01)) {\n e.preventDefault();\n targetRef.current = next;\n loopRef.current?.wake();\n }\n };\n\n el.addEventListener(\"wheel\", onWheel, { passive: false });\n return () => el.removeEventListener(\"wheel\", onWheel);\n }, []);\n\n // Touch swipe support for mobile\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n\n let touchStartY = 0;\n\n const onTouchStart = (e: TouchEvent) => {\n touchStartY = e.touches[0].clientY;\n };\n\n const onTouchMove = (e: TouchEvent) => {\n const currentY = e.touches[0].clientY;\n const diff = touchStartY - currentY;\n const cur = targetRef.current;\n const next = clamp01(cur + diff * 0.0035);\n\n if ((diff > 0 && cur < 0.99) || (diff < 0 && cur > 0.01)) {\n if (e.cancelable) e.preventDefault();\n targetRef.current = next;\n loopRef.current?.wake();\n }\n touchStartY = currentY;\n };\n\n el.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n el.addEventListener(\"touchmove\", onTouchMove, { passive: false });\n return () => {\n el.removeEventListener(\"touchstart\", onTouchStart);\n el.removeEventListener(\"touchmove\", onTouchMove);\n };\n }, []);\n\n // Split CTA text into [ Left ] [ Right • ] segments\n const [leftLabel, rightLabel] = useMemo(() => {\n if (ctaText && ctaText.includes(\" \")) {\n const parts = ctaText.trim().split(/\\s+/);\n return [parts[0], parts.slice(1).join(\" \")];\n }\n return [ctaText || \"GET\", \"ACCESS\"];\n }, [ctaText]);\n\n const activeAccent = resolveThemeColor(color, \"var(--primary)\");\n\n return (\n \n
\n {/* Top Monospace Code Matrix Texture */}\n
\n
\n

\n NEXT 16.X · ASTRO 7.X · SANITY V3 · TS: STRICT · AGENTS.MD: LOADED · AGENT-BROWSER: HEADLESS · DRIFT: 0 · LLMS.TXT · SKILLS · PORTABLE TEXT · DRAFT · PUBLISHED · REVALIDATE\n

\n

\n THE CONTENT ARCHITECTURE · SCHEMA · GROQ · PAGE BUILDER · SECTIONS · TYPEGEN · NEXT 16.X · ASTRO 7.X · SANITY V3 · TS: STRICT · AGENTS.MD: LOADED · AGENT-BROWSER: HEADLESS\n

\n

\n DRIFT: 0 · LLMS.TXT · SKILLS · PORTABLE TEXT · DRAFT · PUBLISHED · REVALIDATE · THE CONTENT ARCHITECTURE · SCHEMA · GROQ · PAGE BUILDER · SECTIONS · TYPEGEN\n

\n

\n AGENTS.MD: LOADED · AGENT-BROWSER: HEADLESS · DRIFT: 0 · LLMS.TXT · SKILLS · PORTABLE TEXT · DRAFT · PUBLISHED · REVALIDATE · THE CONTENT ARCHITECTURE\n

\n
\n
\n
\n\n {/* Concentric orbital rings & monospace text (single canvas, zoom handled in the draw loop) */}\n \n\n {/* Expanding White/Cream Circle Portal (\"The Eye\") */}\n
\n \n \n {/* Elegant Eyebrow Pill with Sparkles Icon */}\n
\n \n \n {subheading || \"Access Portal\"}\n \n
\n\n {/* Core Heading */}\n

\n {heading}\n

\n\n {/* Optional Statement / Subtext */}\n {statement ? (\n

\n {statement}\n

\n ) : null}\n\n {/* High-Tech Action Button & Micro-Trust Footnote */}\n
\n {\n if (ctaHref === \"#\") e.preventDefault();\n onCtaClick?.();\n }}\n className=\"inline-flex items-center gap-2 rounded-full bg-neutral-900 hover:bg-neutral-800 text-white pl-4 pr-1.5 py-1.5 shadow-[0_4px_16px_rgba(0,0,0,0.2)] border border-neutral-700/50 transition-all duration-200 active:scale-95 group cursor-pointer\"\n >\n
\n {leftLabel}\n \n \n {rightLabel}\n \n \n
\n
\n \n
\n \n\n
\n \n No credit card required · Instant setup\n
\n
\n
\n
\n
\n\n {/* Bottom Scroll Cue */}\n \n Scroll to expand\n \n \n \n \n );\n}\n\n// Alias for ConcentricPortalCta\nexport const OrbitalLensCta = ConcentricPortalCta;\n\n// ==========================================\n// CTA OFFER SHOWCASE VARIANT (FRAMER REPLICA)\n// Central high-impact offer card flanked by moving nature reels\n// ==========================================\nexport const DEFAULT_OFFER_NATURE_IMAGES: string[] = [\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145140/photo-1426604966848-d7adac402bff-1790145143490.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790146211/photo-1441974231531-c6227db76b6e-1790146212212.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790146209/photo-1469474968028-56623f02e42e-1790146212205.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790146210/photo-1506744038136-46273834b3fb-1790146212208.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145142/photo-1511671782779-c97d3d27a1d4-1790145143493.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145140/photo-1550684848-fac1c5b4e853-1790145143489.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790148864/photo-1618005182384-a83a8bd57fbe-1790148865111.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790166049/pexels-photo-7688336-1790166052227.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790166049/pexels-photo-8867434-1790166052229.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790166049/pexels-photo-7658387-1790166052226.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790166049/pexels-photo-7709086-1790166052228.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145139/pexels-photo-7709208-1790145143489.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145139/pexels-photo-1036623-1790145143487.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145142/pexels-photo-2043590-1790145143488.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145139/pexels-photo-1587009-1790145143488.jpg\",\n];\n\nfunction ReelLane({\n images,\n direction = \"up\",\n duration = 32,\n isSlowed = false,\n className,\n}: {\n images: string[];\n direction?: \"up\" | \"down\";\n duration?: number;\n isSlowed?: boolean;\n className?: string;\n}) {\n const laneRef = useRef(null);\n\n useEffect(() => {\n if (!laneRef.current) return;\n const anims = laneRef.current.getAnimations({ subtree: true });\n anims.forEach((a) => {\n a.playbackRate = isSlowed ? 0.25 : 1;\n });\n }, [isSlowed]);\n\n // Ensure minimum 8 images in a set so that the set height comfortably exceeds the entire viewport\n const setImages = useMemo(() => {\n if (!images || images.length === 0) return DEFAULT_OFFER_NATURE_IMAGES.slice(0, 8);\n let list = [...images];\n while (list.length < 8) {\n list = [...list, ...images];\n }\n return list;\n }, [images]);\n\n return (\n \n \n {/* Set 1: Full set with trailing gap via padding-bottom */}\n
\n {setImages.map((src, i) => (\n \n \n
\n ))}\n \n\n {/* Set 2: Exact identical duplicate set with matching trailing gap so loop is 100% seamless with zero jumps */}\n
\n {setImages.map((src, i) => (\n \n \n
\n ))}\n \n \n \n );\n}\n\nexport function OfferShowcaseCta({\n badge = \"Limited launch offer\",\n heading = \"Everything you need, one payment\",\n subheading = \"Lifetime access to every current and future release. No subscription, no renewals.\",\n statement,\n price = 149,\n compareAtPrice = 349,\n currency = \"$\",\n period = \"one-time\",\n savingsText = \"Save 57%\",\n ctaText = \"Claim the offer\",\n ctaHref = \"#\",\n onCtaClick,\n footnote = \"Secure checkout · 14-day refund\",\n mediaItems,\n images,\n color,\n rounded,\n className,\n style,\n ...props\n}: CtaSectionProps) {\n const [leftHovered, setLeftHovered] = useState(false);\n const [rightHovered, setRightHovered] = useState(false);\n\n const activeAccent = resolveThemeColor(color, \"var(--primary)\");\n const dynamicRadius =\n rounded !== undefined\n ? typeof rounded === \"number\"\n ? `${rounded}px`\n : rounded\n : \"var(--radius, 1rem)\";\n\n const numPrice = typeof price === \"number\" ? price : parseFloat(String(price)) || 149;\n const descriptionText = statement || subheading;\n\n // Prefer images, then mediaItems, falling back to default Cloudinary nature collection\n const rawList = images && images.length > 0 ? images : (mediaItems && mediaItems.length > 0 ? mediaItems : DEFAULT_OFFER_NATURE_IMAGES);\n const items = rawList.length >= 4 ? rawList : DEFAULT_OFFER_NATURE_IMAGES;\n\n // Distribute items across the 4 vertical lanes evenly\n const lane1: string[] = [];\n const lane2: string[] = [];\n const lane3: string[] = [];\n const lane4: string[] = [];\n\n items.forEach((src, idx) => {\n const laneIdx = idx % 4;\n if (laneIdx === 0) lane1.push(src);\n else if (laneIdx === 1) lane2.push(src);\n else if (laneIdx === 2) lane3.push(src);\n else lane4.push(src);\n });\n\n const safeLane1 = lane1.length > 0 ? lane1 : DEFAULT_OFFER_NATURE_IMAGES.slice(0, 4);\n const safeLane2 = lane2.length > 0 ? lane2 : DEFAULT_OFFER_NATURE_IMAGES.slice(4, 8);\n const safeLane3 = lane3.length > 0 ? lane3 : DEFAULT_OFFER_NATURE_IMAGES.slice(8, 12);\n const safeLane4 = lane4.length > 0 ? lane4 : DEFAULT_OFFER_NATURE_IMAGES.slice(12, 16);\n\n return (\n \n \n\n {/* 3D Flanking Media Reels Container */}\n
\n {/* Left Side (3D Perspective tilt with rotateY & rotate, exactly matching Framer) */}\n setLeftHovered(true)}\n onMouseLeave={() => setLeftHovered(false)}\n >\n \n {/* Lane 1: Primary visible lane on mobile & desktop */}\n \n {/* Lane 2: Outer lane on desktop (hidden on small mobile screens <=720px exactly per Framer spec) */}\n \n
\n \n\n {/* Right Side (3D Perspective tilt with rotateY & rotate, exactly matching Framer) */}\n setRightHovered(true)}\n onMouseLeave={() => setRightHovered(false)}\n >\n \n {/* Lane 3: Primary visible lane on mobile & desktop */}\n \n {/* Lane 4: Outer lane on desktop (hidden on small mobile screens <=720px exactly per Framer spec) */}\n \n \n \n \n\n {/* Edge gradient vignettes (top & bottom smooth fade to section background) */}\n \n \n\n {/* Vertical center wash running top-to-bottom behind the card across all screens (ComponentWall 2nd variant style) */}\n \n\n {/* Central High-Impact Ticket Offer Card (Clean Minimalist Ticket with real radial-gradient bite notches) */}\n
\n {/* Top Half of Card: Badge, Heading, Subtitle */}\n \n {badge && (\n \n \n {badge}\n \n )}\n\n

\n {heading}\n

\n\n {descriptionText && (\n

\n {descriptionText}\n

\n )}\n
\n\n {/* Bottom Half of Card: Price, Savings Chip, CTA Button, Footnote */}\n \n {/* Dashed Perforation Line Connecting the Left & Right Notches */}\n \n\n {/* Price display with superscript currency */}\n
\n \n {currency}\n \n \n \n \n {period && (\n \n {period}\n \n )}\n
\n\n {/* Strikethrough & Savings Tag */}\n {(compareAtPrice || savingsText) && (\n
\n {compareAtPrice && (\n \n {currency}{compareAtPrice}\n \n )}\n {savingsText && (\n \n {savingsText}\n \n )}\n
\n )}\n\n {/* CTA Button */}\n {\n if (ctaHref === \"#\") e.preventDefault();\n onCtaClick?.();\n }}\n style={{ borderRadius: dynamicRadius }}\n className=\"mt-4 sm:mt-5 w-full py-3 sm:py-3.5 px-6 font-semibold text-xs sm:text-[15px] bg-[#141414] hover:bg-black dark:bg-[#F4F4F2] dark:hover:bg-white text-white dark:text-[#0E0E10] transition-transform duration-300 hover:-translate-y-0.5 active:scale-[0.985] flex items-center justify-center gap-2.5 group cursor-pointer\"\n >\n {ctaText}\n \n \n \n \n\n {/* Footnote */}\n {footnote && (\n

\n {footnote}\n

\n )}\n \n \n \n );\n}\n\n// ==========================================\n// MOBILE APP SHOWCASE CTA (IPHONE MOCKUP)\n// Two-Section Transition: Section 1 (Center Phone) -> Section 2 (Left Phone + Right Content)\n// Driven by Parent Scroll / Wheel / Touch / Stepper\n// ==========================================\nexport function MobileAppCta({\n heading = \"Aura Clearmind..\\nYour partner in wellness.\",\n headingAccent = \"Your partner\",\n subheading = \"Find and book your favorite yoga classes, guided meditation, and daily mindful wellness sessions from anywhere with our all-in-one mobile app, designed to bring balance, clarity, and peace to your life.\",\n statement,\n badge = \"Mobile App Available\",\n appleStoreHref = \"#\",\n googlePlayHref = \"#\",\n showAppStoreBadges = true,\n userName = \"Alicia Regis\",\n userAvatar = \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790145142/pexels-photo-2043590-1790145143488.jpg\",\n featuredWorkoutTitle = \"Wellness Workshops\",\n featuredWorkoutImage = \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146210/photo-1506744038136-46273834b3fb-1790146212208.jpg\",\n workoutDuration = \"10 Min\",\n workoutCalories = \"300 Kcal\",\n color,\n scrollProgress,\n phonePosition = \"left\",\n cardBackground,\n rounded,\n className,\n style,\n ...props\n}: CtaSectionProps) {\n const containerRef = useRef(null);\n const stageRef = useRef(null);\n const phoneColRef = useRef(null);\n\n const [progress, setProgress] = useState(\n scrollProgress !== undefined ? Math.max(0, Math.min(1, scrollProgress)) : 0,\n );\n const targetProgressRef = useRef(\n scrollProgress !== undefined ? Math.max(0, Math.min(1, scrollProgress)) : 0,\n );\n const [shiftDeltaX, setShiftDeltaX] = useState(290);\n\n const activeAccent = resolveThemeColor(color, \"var(--primary)\");\n const descriptionText = subheading || statement;\n\n // Dynamic radius variables bound directly to global --radius token from the theme customizer sidebar\n const dynamicRadius =\n rounded !== undefined\n ? typeof rounded === \"number\"\n ? `${rounded}px`\n : rounded\n : \"var(--radius, 1rem)\";\n const containerRadius = dynamicRadius;\n const cardRadius = dynamicRadius;\n const buttonRadius = dynamicRadius;\n const pillRadius = dynamicRadius;\n const iconRadius = dynamicRadius;\n\n // Sync if external scrollProgress prop is passed\n useEffect(() => {\n if (scrollProgress !== undefined) {\n targetProgressRef.current = Math.max(0, Math.min(1, scrollProgress));\n }\n }, [scrollProgress]);\n\n // Dynamically calculate exact pixel distance from side column to center of stage\n useLayoutEffect(() => {\n const updateDelta = () => {\n if (stageRef.current && phoneColRef.current) {\n const stageRect = stageRef.current.getBoundingClientRect();\n const colRect = phoneColRef.current.getBoundingClientRect();\n const stageCenter = stageRect.left + stageRect.width / 2;\n const colCenter = colRect.left + colRect.width / 2;\n const isDesktop = window.innerWidth >= 1024;\n setShiftDeltaX(isDesktop ? Math.round(stageCenter - colCenter) : 0);\n }\n };\n\n updateDelta();\n const timer1 = setTimeout(updateDelta, 60);\n const timer2 = setTimeout(updateDelta, 240);\n window.addEventListener(\"resize\", updateDelta);\n return () => {\n clearTimeout(timer1);\n clearTimeout(timer2);\n window.removeEventListener(\"resize\", updateDelta);\n };\n }, [phonePosition]);\n\n // 60FPS RAF Spring Lerp loop for buttery-smooth transition\n useEffect(() => {\n let current = targetProgressRef.current;\n let active = true;\n let rafId: number | null = null;\n\n const tick = () => {\n if (!active) return;\n const target = targetProgressRef.current;\n const diff = target - current;\n if (Math.abs(diff) > 0.0006) {\n current += diff * 0.18;\n setProgress(current);\n } else if (current !== target) {\n current = target;\n setProgress(target);\n }\n rafId = requestAnimationFrame(tick);\n };\n rafId = requestAnimationFrame(tick);\n\n return () => {\n active = false;\n if (rafId) cancelAnimationFrame(rafId);\n };\n }, []);\n\n // 1. Direct Mouse Wheel listener with passive: false to drive the animation immediately\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const onWheel = (e: WheelEvent) => {\n if (Math.abs(e.deltaY) < 1) return;\n\n const current = targetProgressRef.current;\n // Smooth scrubbing sensitivity: ~3 gentle wheel notches transition fully\n const step = e.deltaY * 0.0022;\n const next = Math.max(0, Math.min(1, current + step));\n\n const isScrollingDown = step > 0;\n const isScrollingUp = step < 0;\n\n // While between 0 and 1, intercept wheel to animate transition smoothly\n if (\n (isScrollingDown && current < 0.99) ||\n (isScrollingUp && current > 0.01)\n ) {\n e.preventDefault();\n e.stopPropagation();\n targetProgressRef.current = next;\n }\n };\n\n container.addEventListener(\"wheel\", onWheel, { passive: false });\n return () => {\n container.removeEventListener(\"wheel\", onWheel);\n };\n }, []);\n\n // 2. Touch gesture listener for mobile and tablets\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n let touchStartY = 0;\n\n const onTouchStart = (e: TouchEvent) => {\n if (e.touches.length > 0) {\n touchStartY = e.touches[0].clientY;\n }\n };\n\n const onTouchMove = (e: TouchEvent) => {\n if (e.touches.length === 0) return;\n const currentY = e.touches[0].clientY;\n const deltaY = touchStartY - currentY;\n if (Math.abs(deltaY) < 4) return;\n\n const current = targetProgressRef.current;\n const step = deltaY * 0.0035;\n const next = Math.max(0, Math.min(1, current + step));\n\n const isScrollingDown = step > 0;\n const isScrollingUp = step < 0;\n\n if (\n (isScrollingDown && current < 0.99) ||\n (isScrollingUp && current > 0.01)\n ) {\n if (e.cancelable) e.preventDefault();\n targetProgressRef.current = next;\n touchStartY = currentY;\n }\n };\n\n container.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n container.addEventListener(\"touchmove\", onTouchMove, { passive: false });\n return () => {\n container.removeEventListener(\"touchstart\", onTouchStart);\n container.removeEventListener(\"touchmove\", onTouchMove);\n };\n }, []);\n\n // 3. Fallback: Page scroll observer when placed inside a standard tall website page\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const onScroll = () => {\n if (scrollProgress !== undefined) return;\n const rect = container.getBoundingClientRect();\n const vh = window.innerHeight;\n const triggerStart = vh * 0.8;\n const triggerEnd = vh * 0.2;\n const dist = triggerStart - triggerEnd;\n if (dist > 0 && rect.top <= triggerStart && rect.bottom >= triggerEnd) {\n const p = Math.max(0, Math.min(1, (triggerStart - rect.top) / dist));\n targetProgressRef.current = p;\n }\n };\n\n window.addEventListener(\"scroll\", onScroll, { passive: true });\n return () => {\n window.removeEventListener(\"scroll\", onScroll);\n };\n }, [scrollProgress]);\n\n // Easing computations\n const ease = 1 - Math.pow(1 - progress, 3);\n const phoneShiftX = Math.round(shiftDeltaX * (1 - ease));\n const phoneShiftY = 0; // Strictly vertically centered at all stages of motion\n\n // Section 2 card background & right content reveal\n const sec2Opacity = Math.max(0, Math.min(1, (progress - 0.12) / 0.88));\n const sec2Ease = 1 - Math.pow(1 - sec2Opacity, 3);\n const contentShiftX = Math.round((1 - sec2Ease) * (phonePosition === \"left\" ? 35 : -35));\n\n // Split heading into 2 clean lines: Upper line shorter width, Lower line wider width\n const heading2Lines = useMemo(() => {\n if (heading.includes(\"\\n\")) {\n const [l1, ...rest] = heading.split(\"\\n\");\n return { line1: l1.trim(), line2: rest.join(\" \").trim() };\n }\n if (heading.includes(\",\")) {\n const idx = heading.indexOf(\",\");\n return {\n line1: heading.slice(0, idx + 1).trim(),\n line2: heading.slice(idx + 1).trim(),\n };\n }\n const words = heading.split(\" \");\n const splitIndex = Math.max(1, Math.floor(words.length * 0.35));\n return {\n line1: words.slice(0, splitIndex).join(\" \"),\n line2: words.slice(splitIndex).join(\" \"),\n };\n }, [heading]);\n\n const isPhoneOnLeft = phonePosition === \"left\";\n\n return (\n \n {/* =========================================\n SECTION 2 (SHOWCASE PHASE: AUTHENTIC WELLNESS SAGE CARD)\n ========================================= */}\n \n {/* Dark mode overlay so custom colors blend smoothly in dark mode */}\n