4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T11cc2,"use client"; import React, { useEffect, useRef } from "react"; import { Globe as GlobeIcon, Sparkles, ChevronRight, Heart, Layers, Cpu, Zap, } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; import { accentStyle } from "@/lib/accent"; import { SocialLinks, type SocialLink } from "./SocialLinksBlock"; export type FooterVariant = | "simple-centered" | "glass-dock" | "neon-glow-pulse" | "quantum-particle-beam" | "snapshot" | "modern-stack" | "snapshot-stack" | "wordmark-glow"; export interface WordmarkFooterColumnItem { title: string; link: string; } export interface WordmarkFooterColumn { title: string; children: WordmarkFooterColumnItem[]; } export interface WordmarkFooterContact { email?: string; location?: string; } export interface WordmarkFooterLabels { contact?: string; location?: string; social?: string; } export interface WordmarkFooterProps { logo?: React.ReactNode | string; logoDark?: string; logoHref?: string; tagline?: string; columns?: WordmarkFooterColumn[]; contact?: WordmarkFooterContact; social?: { title: string; link: string }[]; legal?: { title: string; link: string }[]; labels?: WordmarkFooterLabels; copyright?: string; bottomLine?: string; wordmark?: string; className?: string; } export interface FooterLinkSection { title: string; /** `badge` renders a small count pill next to the label (used by `snapshot`). */ links: { label: string; href: string; badge?: string | number }[]; } export interface SnapshotPhoto { src: string; caption: string; } export interface SnapshotCardData { dotColor?: string; tag: string; meta: string; title: string; lines: string[]; footerLabel?: string; footerValue?: string; stickerText?: string; /** Custom icon node for the circular sticker badge. */ stickerIcon?: React.ReactNode; /** Background color for modern stack card styling (e.g. "#F7C844"). */ bgColor?: string; /** Foreground/text color for modern stack card styling (e.g. "#2B1C06"). */ textColor?: string; } /** Content for the `snapshot` variant. Every field is optional. */ export interface SnapshotFooterContent { /** Headline, one entry per line. */ headingLines?: string[]; description?: string; /** Three-line tagline; the last line is rendered muted. */ taglineLines?: string[]; /** Interactive cards in the pocket pile. */ cards?: SnapshotCardData[]; /** Legacy support for photos if provided. */ photos?: SnapshotPhoto[]; /** Address lines for the studio card. */ address?: string[]; hours?: string; stickerText?: string; legalLinks?: { label: string; href: string }[]; } export interface FooterProps { variant?: FooterVariant; /** Active accent color from the theme or color picker (e.g. "lavender", "indigo", "rose", "emerald", hex). */ color?: string; brandName?: string; logo?: React.ReactNode; tagline?: string; copyrightText?: string; sections?: FooterLinkSection[]; /** The social row. Defaults to X, GitHub, LinkedIn, YouTube and Instagram pointing at `#`. */ socialLinks?: SocialLink[]; /** Copy, photos and note card for the `snapshot` variant. */ snapshot?: SnapshotFooterContent; /** Configuration and content for the `wordmark-glow` variant. */ wordmarkFooter?: WordmarkFooterProps; /** Giant wordmark text for the `wordmark-glow` variant (default: "Algorize"). */ wordmark?: string; className?: string; } const DEFAULT_SOCIAL_LINKS: SocialLink[] = [ { network: "x", href: "#" }, { network: "github", href: "#" }, { network: "linkedin", href: "#" }, { network: "youtube", href: "#" }, { network: "instagram", href: "#" }, ]; const DEFAULT_FOOTER_SECTIONS: FooterLinkSection[] = [ { title: "Product", links: [ { label: "Components", href: "#" }, { label: "Templates", href: "#" }, { label: "Documentation", href: "#" }, { label: "Changelog", href: "#" }, ], }, { title: "Resources", links: [ { label: "GitHub", href: "#" }, { label: "Discord", href: "#" }, { label: "Community", href: "#" }, { label: "Showcase", href: "#" }, ], }, { title: "Company", links: [ { label: "About Us", href: "#" }, { label: "Blog", href: "#" }, { label: "Careers", href: "#" }, { label: "Privacy Policy", href: "#" }, ], }, ]; /** * Per-variant default link columns. * * `sections` overrides these. Each variant keeps its own wording, so the * out-of-the-box look is unchanged when the prop is omitted. */ const DEFAULT_SECTIONS_BY_VARIANT: Record = { "simple-centered": DEFAULT_FOOTER_SECTIONS, "glass-dock": [ { title: "UI Library", links: [{ label: "Globe 3D", href: "#" }, { label: "Hero Showcase", href: "#" }, { label: "Marquee", href: "#" }, { label: "Scroll Stack", href: "#" }] }, { title: "Documentation", links: [{ label: "Quickstart", href: "#" }, { label: "Installation", href: "#" }, { label: "Tailwind Setup", href: "#" }, { label: "Changelog", href: "#" }] }, { title: "Community", links: [{ label: "GitHub Repo", href: "#" }, { label: "Discord Chat", href: "#" }, { label: "Twitter News", href: "#" }, { label: "YouTube", href: "#" }] }, { title: "Company", links: [{ label: "About Team", href: "#" }, { label: "Careers", href: "#" }, { label: "Privacy Policy", href: "#" }, { label: "Security", href: "#" }] }, ], "neon-glow-pulse": [ { title: "Cyber Blocks", links: [{ label: "3D Animated Globe", href: "#" }, { label: "Hero Showcase", href: "#" }, { label: "Infinite Marquee", href: "#" }, { label: "Scroll Stack", href: "#" }] }, { title: "Documentation", links: [{ label: "Quickstart Guide", href: "#" }, { label: "Framework Setup", href: "#" }, { label: "Tailwind v4", href: "#" }, { label: "CLI Reference", href: "#" }] }, { title: "Community", links: [{ label: "GitHub Repository", href: "#" }, { label: "Discord Server", href: "#" }, { label: "Twitter Feed", href: "#" }, { label: "YouTube Channel", href: "#" }] }, { title: "Trust & Legal", links: [{ label: "About Our Team", href: "#" }, { label: "Careers (Hiring)", href: "#" }, { label: "Privacy Policy", href: "#" }, { label: "Security Overview", href: "#" }] }, ], "quantum-particle-beam": [ { title: "UI Components", links: [{ label: "Globe 3D", href: "#" }, { label: "Hero Showcase", href: "#" }, { label: "Marquee", href: "#" }, { label: "Scroll Stack", href: "#" }] }, { title: "Documentation", links: [{ label: "Quickstart", href: "#" }, { label: "Installation", href: "#" }, { label: "Tailwind Setup", href: "#" }, { label: "Changelog", href: "#" }] }, { title: "Community", links: [{ label: "GitHub Repo", href: "#" }, { label: "Discord Chat", href: "#" }, { label: "Twitter News", href: "#" }, { label: "YouTube", href: "#" }] }, { title: "Company", links: [{ label: "About Team", href: "#" }, { label: "Careers", href: "#" }, { label: "Privacy Policy", href: "#" }, { label: "Security", href: "#" }] }, ], snapshot: [ { title: "Components", links: [ { label: "Buttons", href: "#" }, { label: "Bento Grid", href: "#" }, { label: "Dialog", href: "#" }, { label: "Carousel", href: "#" }, { label: "Navigation", href: "#" }, { label: "Footer", href: "#", badge: "New" }, { label: "All Catalog", href: "#" }, ], }, { title: "Resources", links: [ { label: "Documentation", href: "#" }, { label: "Templates", href: "#" }, { label: "Changelog", href: "#" }, { label: "Roadmap", href: "#" }, { label: "FAQ", href: "#" }, ], }, { title: "Community", links: [ { label: "GitHub", href: "#" }, { label: "Discord", href: "#" }, { label: "X / Twitter", href: "#" }, { label: "YouTube", href: "#" }, { label: "LinkedIn", href: "#" }, ], }, ], "modern-stack": [ { title: "Components", links: [ { label: "Buttons", href: "#" }, { label: "Bento Grid", href: "#" }, { label: "Dialog", href: "#" }, { label: "Carousel", href: "#" }, { label: "Navigation", href: "#" }, { label: "Footer", href: "#", badge: "New" }, { label: "All Catalog", href: "#" }, ], }, { title: "Resources", links: [ { label: "Documentation", href: "#" }, { label: "Templates", href: "#" }, { label: "Changelog", href: "#" }, { label: "Roadmap", href: "#" }, { label: "FAQ", href: "#" }, ], }, { title: "Community", links: [ { label: "GitHub", href: "#" }, { label: "Discord", href: "#" }, { label: "X / Twitter", href: "#" }, { label: "YouTube", href: "#" }, { label: "LinkedIn", href: "#" }, ], }, ], "snapshot-stack": [ { title: "Components", links: [ { label: "Buttons", href: "#" }, { label: "Bento Grid", href: "#" }, { label: "Dialog", href: "#" }, { label: "Carousel", href: "#" }, { label: "Navigation", href: "#" }, { label: "Footer", href: "#", badge: "New" }, { label: "All Catalog", href: "#" }, ], }, { title: "Resources", links: [ { label: "Documentation", href: "#" }, { label: "Templates", href: "#" }, { label: "Changelog", href: "#" }, { label: "Roadmap", href: "#" }, { label: "FAQ", href: "#" }, ], }, { title: "Community", links: [ { label: "GitHub", href: "#" }, { label: "Discord", href: "#" }, { label: "X / Twitter", href: "#" }, { label: "YouTube", href: "#" }, { label: "LinkedIn", href: "#" }, ], }, ], "wordmark-glow": DEFAULT_FOOTER_SECTIONS, }; const DEFAULT_WORDMARK_COLUMNS: WordmarkFooterColumn[] = [ { title: "Solutions", children: [ { title: "Enterprise", link: "#" }, { title: "Business Process Outsourcing (BPO)", link: "#" }, { title: "Staffing Agencies", link: "#" }, { title: "Customer Service", link: "#" }, { title: "Software Engineering", link: "#" }, { title: "Consulting", link: "#" }, { title: "Retail", link: "#" }, ], }, { title: "Product", children: [ { title: "Product", link: "#" }, { title: "Pricing", link: "#" }, { title: "Case Studies", link: "#" }, { title: "See Sample", link: "#" }, { title: "Become a Partner", link: "#" }, { title: "API", link: "#" }, ], }, ]; const DEFAULT_WORDMARK_CONTACT: WordmarkFooterContact = { email: "hello@example.com", location: "Remote-first team", }; const DEFAULT_WORDMARK_SOCIAL = [ { title: "Threads", link: "#" }, { title: "LinkedIn", link: "#" }, { title: "YouTube", link: "#" }, ]; const DEFAULT_WORDMARK_LEGAL = [ { title: "Legal Center", link: "#" }, ]; /* -------------------------------------------------------------------------- */ /* Snapshot variant */ /* -------------------------------------------------------------------------- */ const DEFAULT_SNAPSHOT_CARDS: SnapshotCardData[] = [ { dotColor: "bg-emerald-500", tag: "DESIGN SYSTEM", meta: "V4.2", title: "Precision Craft", lines: [ "Pixel-perfect tokens,", "Tailwind CSS v4 & React 19,", "accessible by default.", ], footerLabel: "STATUS", footerValue: "Production", }, { dotColor: "bg-blue-500", tag: "COMPONENTS", meta: "60+", title: "Modular Blocks", lines: [ "Copy-paste ready,", "zero bloat architecture,", "fluid spring physics.", ], footerLabel: "LIBRARY", footerValue: "TypeScript", }, { dotColor: "bg-primary", tag: "AVARA STUDIO", meta: "HQ • 2026", title: "Avara Studio", lines: [ "Level 4, Innovation Park", "Dhaka 1212, Bangladesh", "+880 1700 000 000", ], footerLabel: "HOURS", footerValue: "Mon–Fri, 9–6", stickerText: "say hi!", }, { dotColor: "bg-amber-500", tag: "PERFORMANCE", meta: "60 FPS", title: "Silky Motion", lines: [ "GPU accelerated,", "reduced-motion aware,", "smooth micro-interactions.", ], footerLabel: "ENGINE", footerValue: "Framer Motion", }, { dotColor: "bg-violet-500", tag: "OPEN SOURCE", meta: "FREE", title: "Community First", lines: [ "MIT licensed forever,", "built by developers,", "for ambitious creators.", ], footerLabel: "LICENSE", footerValue: "MIT Free", }, { dotColor: "bg-rose-500", tag: "ECOSYSTEM", meta: "24/7", title: "Active Support", lines: [ "Discord & GitHub community,", "regular monthly drops,", "developer-first docs.", ], footerLabel: "UPDATES", footerValue: "Weekly", }, ]; /** Multi-colored modern stack cards matching the vivid, lively palette of ModernScrollStackBlock with rounded badges on all cards. */ export const DEFAULT_MODERN_STACK_CARDS: SnapshotCardData[] = [ { bgColor: "#98E3AD", textColor: "#1A4325", dotColor: "bg-[#1A4325]", tag: "DESIGN SYSTEM", meta: "V4.2", title: "Precision Craft", lines: [ "Pixel-perfect tokens,", "Tailwind CSS v4 & React 19,", "accessible by default.", ], footerLabel: "STATUS", footerValue: "Production", stickerText: "craft!", stickerIcon: , }, { bgColor: "#EB5E30", textColor: "#FFFDF9", dotColor: "bg-white", tag: "COMPONENTS", meta: "60+", title: "Modular Blocks", lines: [ "Copy-paste ready,", "zero bloat architecture,", "fluid spring physics.", ], footerLabel: "LIBRARY", footerValue: "TypeScript", stickerText: "blocks!", stickerIcon: , }, { bgColor: "#F7C844", textColor: "#2B1C06", dotColor: "bg-[#2B1C06]", tag: "AVARA STUDIO", meta: "HQ • 2026", title: "Avara Studio", lines: [ "Level 4, Innovation Park", "Dhaka 1212, Bangladesh", "+880 1700 000 000", ], footerLabel: "HOURS", footerValue: "Mon–Fri, 9–6", stickerText: "say hi!", stickerIcon: , }, { bgColor: "#4086D6", textColor: "#FFFFFF", dotColor: "bg-white", tag: "PERFORMANCE", meta: "60 FPS", title: "Silky Motion", lines: [ "GPU accelerated,", "reduced-motion aware,", "smooth micro-interactions.", ], footerLabel: "ENGINE", footerValue: "Framer Motion", stickerText: "60 fps!", stickerIcon: , }, { bgColor: "#1E1B4B", textColor: "#EEF2FF", dotColor: "bg-indigo-300", tag: "OPEN SOURCE", meta: "FREE", title: "Community First", lines: [ "MIT licensed forever,", "built by developers,", "for ambitious creators.", ], footerLabel: "LICENSE", footerValue: "MIT Free", stickerText: "free!", stickerIcon: , }, { bgColor: "#065F46", textColor: "#ECFDF5", dotColor: "bg-emerald-300", tag: "ECOSYSTEM", meta: "24/7", title: "Active Support", lines: [ "Discord & GitHub community,", "regular monthly drops,", "developer-first docs.", ], footerLabel: "UPDATES", footerValue: "Weekly", stickerText: "join!", stickerIcon: , }, ]; function isDarkColor(hex?: string): boolean { if (!hex || !hex.startsWith("#")) return false; const c = hex.replace("#", ""); const r = parseInt(c.substring(0, 2), 16) || 0; const g = parseInt(c.substring(2, 4), 16) || 0; const b = parseInt(c.substring(4, 6), 16) || 0; return (r * 299 + g * 587 + b * 114) / 1000 < 140; } const SNAPSHOT_DEFAULTS: Required = { headingLines: ["Design freely.", "Ship extraordinary apps."], description: "Avara UI is an open collection of modern, production-ready React and Tailwind components. Built with precision craft, silky smooth animations, and clean ergonomics for ambitious developers and designers.", taglineLines: ["Modern components.", "Infinite creativity.", "Built for everyone."], cards: DEFAULT_SNAPSHOT_CARDS, photos: [], address: ["Avara Studio", "Level 4, Innovation Park", "Dhaka 1212, Bangladesh", "+880 1700 000 000"], hours: "Mon–Fri, 9–6", stickerText: "say hi!", legalLinks: [ { label: "Privacy", href: "#" }, { label: "Terms", href: "#" }, { label: "Cookies", href: "#" }, ], }; type SnapshotBreakpoint = "phone" | "tablet" | "desktop"; /** Mirrors the source's three layouts: <810px, 810–1199px and ≥1200px. */ function useSnapshotBreakpoint(): SnapshotBreakpoint { const [bp, setBp] = React.useState("desktop"); React.useEffect(() => { const tablet = window.matchMedia("(min-width: 810px)"); const desktop = window.matchMedia("(min-width: 1200px)"); const sync = () => setBp(desktop.matches ? "desktop" : tablet.matches ? "tablet" : "phone"); sync(); tablet.addEventListener("change", sync); desktop.addEventListener("change", sync); return () => { tablet.removeEventListener("change", sync); desktop.removeEventListener("change", sync); }; }, []); return bp; } const SNAPSHOT_HOVER_SPRING = { type: "spring", bounce: 0.22, duration: 0.45 } as const; const SNAPSHOT_EASE = [0.22, 1, 0.36, 1] as const; interface SnapshotPileItem { cardIndex: number; className: string; rest: number; hoverRotate: number; lift: Record; enterY: number; delay: number; isCenter?: boolean; } /** * Positions, tilts and lift coordinates matching the card pocket pile: * DOM Order: Card 0 -> Card 1 -> Studio Card 2 -> Card 3 -> Card 4 -> Card 5 */ const SNAPSHOT_PILE: SnapshotPileItem[] = [ { cardIndex: 0, className: "w-[145px] h-[220px] top-[90px] left-[17%] min-[810px]:w-[190px] min-[810px]:h-[285px] min-[810px]:top-[120px] min-[810px]:left-[12%] min-[1200px]:w-[215px] min-[1200px]:h-[295px] min-[1200px]:top-[130px] min-[1200px]:left-[11%]", rest: 4, hoverRotate: -3, lift: { phone: -82, tablet: -128, desktop: -158 }, enterY: 90, delay: 0, }, { cardIndex: 1, className: "hidden min-[810px]:block min-[810px]:w-[190px] min-[810px]:h-[285px] min-[810px]:top-[170px] min-[810px]:left-[25%] min-[1200px]:w-[215px] min-[1200px]:h-[295px] min-[1200px]:top-[182px] min-[1200px]:left-[22%]", rest: -11, hoverRotate: -4, lift: { phone: -178, tablet: -178, desktop: -205 }, enterY: 70, delay: 0.06, }, { cardIndex: 2, isCenter: true, className: "w-[160px] h-[220px] top-[60px] left-[calc(49%-80px)] min-[810px]:w-[220px] min-[810px]:h-[300px] min-[810px]:top-[65px] min-[810px]:left-[calc(42%-110px)] min-[1200px]:top-[78px] min-[1200px]:left-[calc(39.3%-110px)]", rest: -1, hoverRotate: -2, lift: { phone: -80, tablet: -112, desktop: -112 }, enterY: 90, delay: 0.12, }, { cardIndex: 3, className: "w-[145px] h-[220px] top-[80px] left-[87%] min-[810px]:w-[190px] min-[810px]:h-[285px] min-[810px]:top-[100px] min-[810px]:left-[78%] min-[1200px]:w-[215px] min-[1200px]:h-[295px] min-[1200px]:top-[112px] min-[1200px]:left-[71%]", rest: -4, hoverRotate: 5, lift: { phone: -72, tablet: -110, desktop: -140 }, enterY: 90, delay: 0.24, }, { cardIndex: 4, className: "hidden min-[810px]:block min-[810px]:w-[190px] min-[810px]:h-[285px] min-[810px]:top-[150px] min-[810px]:left-[65%] min-[1200px]:w-[215px] min-[1200px]:h-[295px] min-[1200px]:top-[162px] min-[1200px]:left-[56%]", rest: -5, hoverRotate: 4, lift: { phone: -158, tablet: -158, desktop: -188 }, enterY: 90, delay: 0.18, }, { cardIndex: 5, className: "hidden min-[810px]:block min-[810px]:w-[190px] min-[810px]:h-[285px] min-[810px]:top-[104px] min-[810px]:left-[91%] min-[1200px]:w-[215px] min-[1200px]:h-[295px] min-[1200px]:top-[118px] min-[1200px]:left-[89%]", rest: 9, hoverRotate: 12, lift: { phone: -112, tablet: -112, desktop: -140 }, enterY: 90, delay: 0.3, }, ]; /** Framer waving hand icon SVG */ function SnapshotWaveHandIcon() { return ( ); } /** Sleek modern studio card: clean hierarchy, active status, optional custom background/palette, and interactive animated "say hi!" sticker. */ function SnapshotStudioCard({ card, bp, isModernStack, }: { card: SnapshotCardData; bp: SnapshotBreakpoint; isModernStack?: boolean; }) { const isMobile = bp === "phone"; const isStudioHQ = Boolean(card.stickerText); const hasCustomBg = Boolean(card.bgColor); const isDarkCard = hasCustomBg ? isDarkColor(card.bgColor) : false; return (

{/* Sleek Modern Studio Card */}

{/* Top Header Row */}

{card.tag}

{card.meta}

{/* Details / Content */}

{card.title}

{card.lines.map((line, idx) => (

{line}

))}

{/* Operating / Metric Row */} {(card.footerLabel || card.footerValue) && (

{card.footerLabel ?? "Status"} {card.footerValue}

)}

{/* Floating Circular Sticker if card has stickerText */} {card.stickerText && ( {card.stickerIcon ?? } {card.stickerText} )}

); } /** * Studio footer with a pile of cards sunk behind the divider. Each card sits * mostly below the fold of the top section and rises on hover/press. */ function SnapshotFooter({ brandName, logo, copyrightText, sections, content, isModernStack, socialLinks = DEFAULT_SOCIAL_LINKS, }: { brandName: string; logo?: React.ReactNode; copyrightText?: string; sections: FooterLinkSection[]; content?: SnapshotFooterContent; isModernStack?: boolean; socialLinks?: SocialLink[]; }) { const c = { ...SNAPSHOT_DEFAULTS, ...content }; const bp = useSnapshotBreakpoint(); const reduceMotion = useReducedMotion(); const wordmark = brandName; const copyright = copyrightText ?? `© ${new Date().getFullYear()} ${brandName}. All rights reserved.`; const [line1, line2, line3] = c.taglineLines; let wordIndex = 0; const baseCards = content?.cards ?? (isModernStack ? DEFAULT_MODERN_STACK_CARDS : DEFAULT_SNAPSHOT_CARDS); return (

{/* Top: intro + photo pile, clipped at the divider */}

{isModernStack ? (

Curated Component Library

{c.headingLines.map((line, li) => ( {li > 0 &&
} {line} ))}

{c.description}

) : (

{c.headingLines.map((line, li) => ( {li > 0 &&
} {line.split(" ").map((word, wi) => { const i = wordIndex++; return ( {wi > 0 && " "} {word} ); })} ))}

{c.description}

)} {/* Card pocket pile */}

{SNAPSHOT_PILE.map((item, idx) => { const cardData = (content?.cards && content.cards[item.cardIndex]) ?? baseCards[item.cardIndex]; if (!cardData) return null; // Merge studio address/hours/sticker onto center card if customized const resolvedCard: SnapshotCardData = item.isCenter ? { ...cardData, lines: c.address && c.address.length > 0 ? c.address : cardData.lines, footerValue: c.hours ?? cardData.footerValue, stickerText: c.stickerText ?? cardData.stickerText, } : cardData; return ( ); })}

{/* Bottom section: conditioned on isModernStack */} {isModernStack ? ( /* Modern Stack enhanced bottom (Clean, Flat, Zero Shadow) */

{/* Left: Brand & bold tagline */}

{/* Brand without version badge */} e.preventDefault()} className="group flex w-fit items-center gap-3 no-underline cursor-pointer" > {logo ?? (

)} {wordmark} {/* Typographic Tagline with crisp contrast */}

{line1} {line2 && ( <>
{line2} )} {line3 && ( <>
{line3} )}

Crafted with precision tokens, silky micro-interactions, and zero-bloat architecture for ambitious builders.

{/* Right: Modern structured navigation columns with theme color hover effects */}

{/* Bottom Bar: Copyright, Social Icons & Legal with Theme Color Hover */}

{copyright}

{c.legalLinks.map((link) => ( { if (link.href === "#" || !link.href) e.preventDefault(); }} className="leading-none text-zinc-500 dark:text-zinc-400 no-underline transition-colors duration-150 hover:text-primary dark:hover:text-primary cursor-pointer text-xs font-medium" > {link.label} ))}

) : ( /* Original Snapshot variant bottom section */

e.preventDefault()} className="flex w-fit items-center gap-2.5 no-underline cursor-pointer" > {logo ?? (

)} {wordmark}

{line1} {line2 && ( <>
{line2} )} {line3 && ( <>
{line3} )}

{copyright}

{c.legalLinks.map((link) => ( { if (link.href === "#" || !link.href) e.preventDefault(); }} className="text-[13px] leading-none text-[#84827c] dark:text-zinc-400 no-underline transition-colors duration-200 hover:text-primary dark:hover:text-primary cursor-pointer" > {link.label} ))}

)}

); } /* -------------------------------------------------------------------------- */ /* Wordmark variant (Giant rising wordmark with pointer glow) */ /* -------------------------------------------------------------------------- */ const wordmarkHeadingClass = "mb-3 text-[0.8125rem] font-medium text-muted-foreground"; const wordmarkLinkClass = "text-[0.9375rem] text-foreground/80 hover:text-foreground transition-colors"; const wordmarkKeyframes = ` @keyframes footer-block-rise { from { transform: translateY(70%); } to { transform: none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .footer-block-letter { animation: footer-block-rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 4%) entry 100%; } } } `; export function WordmarkFooter({ logo, logoDark, logoHref = "/", tagline = "AI first-round screening for recruiters. Algorize checks every applicant and runs the first interview, day or night.", columns = DEFAULT_WORDMARK_COLUMNS, contact = DEFAULT_WORDMARK_CONTACT, social = DEFAULT_WORDMARK_SOCIAL, legal = DEFAULT_WORDMARK_LEGAL, labels = {}, copyright = "Avara UI", bottomLine = "A person makes every hiring decision.", wordmark = "Algorize", className = "", }: WordmarkFooterProps) { const { contact: contactLabel = "Talk to us", location: locationLabel = "Where we work", social: socialLabel = "Follow" } = labels; const wrapRef = useRef(null); // Writes the pointer position as --mx / --my for the glow, one write per frame. useEffect(() => { const node = wrapRef.current; if (!node || typeof window === "undefined" || !window.matchMedia("(hover: hover) and (pointer: fine)").matches) return undefined; let frame = 0; let x = 0; let y = 0; const onMove = (event: PointerEvent) => { const rect = node.getBoundingClientRect(); x = event.clientX - rect.left; y = event.clientY - rect.top; if (frame) return; frame = requestAnimationFrame(() => { frame = 0; node.style.setProperty("--mx", `${x}px`); node.style.setProperty("--my", `${y}px`); }); }; node.addEventListener("pointermove", onMove); return () => { node.removeEventListener("pointermove", onMove); cancelAnimationFrame(frame); }; }, []); const renderedLogo = logo ? ( typeof logo === "string" ? (

) : ( logo ) ) : (

Avara{" "} UI

); const yearStr = String(new Date().getFullYear()); const displayCopyright = copyright.startsWith(yearStr) ? copyright : `${yearStr} ${copyright}`; const charRatio = wordmark ? Math.max(wordmark.length * 0.56, 2.5) : 4.5; return ( ); } export { WordmarkFooter as FooterBlock }; /** The wordmark, or whatever `logo` was passed instead of it. */ function BrandLogo({ logo, brandName }: Pick) { const isAvara = !brandName || brandName === "Avara UI"; return (

{logo || (

)} {isAvara ? "Avara" : brandName}{" "} UI v1.0

); } export function Footer({ variant = "simple-centered", color, brandName = "Avara UI", logo, tagline = "Elevate your web applications with fluid, production-ready animated components.", copyrightText, sections, socialLinks = DEFAULT_SOCIAL_LINKS, snapshot, wordmarkFooter, wordmark, className, }: FooterProps) { const dynamicAccent = accentStyle(color); const linkSections = sections ?? DEFAULT_SECTIONS_BY_VARIANT[variant]; const copyright = copyrightText ?? `© ${new Date().getFullYear()} ${brandName}. All rights reserved.`; if (variant === "wordmark-glow") { return (

); } if (variant === "snapshot" || variant === "modern-stack" || variant === "snapshot-stack") { const isModernStack = variant === "modern-stack" || variant === "snapshot-stack"; return ( ); } return ( ); } 51:Tdc2,import type { CSSProperties } from "react"; /** * Bridging the docs colour picker into a preview. * * Most blocks are already written against the `--primary` token (`bg-primary`, * `ring-primary/30`, `text-primary-foreground`…). Rather than teaching each one a * bespoke `color` prop, a demo can repoint that token for its own subtree and * every one of those classes follows along. */ /** The swatches the picker offers, as concrete CSS colours. */ const PRESET_HEX: Record = { lavender: "#9b8afb", indigo: "#6366f1", rose: "#f43f5e", emerald: "#10b981", }; /** True when the picker sits on "Default" — the page theme should win. */ export function isDefaultAccent(color?: string): boolean { return !color || color === "primary" || color === "default"; } /** * Turns a picker value into a CSS colour, or null for "Default" — meaning * nothing should be overridden, so the theme (and the sidebar customizer) * keeps control. */ export function resolveAccent(color?: string): string | null { if (isDefaultAccent(color)) return null; return PRESET_HEX[color as string] ?? (color as string); } /** * The picker value in a form every block accepts. Blocks know the older swatch * names but not "lavender" — and since that is also a CSS named colour * (#e6e6fa), a block that passes unknown names straight through would paint * the wrong shade, while others fall back to a different palette. Demos that * hand the picker value to such a block run it through this first. Every * other value is returned untouched. */ export function toBlockColor(color: string): string; export function toBlockColor(color: string | undefined): string | undefined; export function toBlockColor(color?: string): string | undefined { return color === "lavender" ? PRESET_HEX.lavender : color; } function parseHex(input: string): [number, number, number] | null { const hex = input.trim().replace(/^#/, ""); if (/^[a-f\d]{3}$/i.test(hex)) { const [r, g, b] = hex.split(""); return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16)]; } if (/^[a-f\d]{6}$/i.test(hex)) { return [ parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16), ]; } return null; } /** Legible foreground for content sitting on a filled `color` swatch. */ export function accentForeground(color: string): string { const rgb = parseHex(color); if (!rgb) return "#ffffff"; const channel = (v: number) => { const c = v / 255; return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); }; const luminance = 0.2126 * channel(rgb[0]) + 0.7152 * channel(rgb[1]) + 0.0722 * channel(rgb[2]); return luminance > 0.45 ? "#09090b" : "#ffffff"; } /** The theme tokens a picked accent repoints, as `--name` → value. */ export function accentTokens(color?: string): Record { const resolved = resolveAccent(color); if (!resolved) return {}; return { "--primary": resolved, "--primary-foreground": accentForeground(resolved), "--ring": resolved, }; } /** * Inline style repointing `--primary` at the picked accent for one subtree. * `--primary-foreground` is derived alongside it, otherwise a light pick leaves * `text-primary-foreground` content unreadable on its own fill. Returns `{}` on * "Default" so the page theme still wins. */ export function accentStyle(color?: string): CSSProperties { return accentTokens(color) as CSSProperties; } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@avara-ui","registryDependencies":["https://avaraui.com/r/social-links.json","utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/custom/blocks/FooterBlock.tsx","content":"$50","type":"registry:component","target":"components/custom/blocks/FooterBlock.tsx"},{"path":"src/lib/accent.ts","content":"$51","type":"registry:component","target":"lib/accent.ts"}],"className":"h-[70svh] min-h-80"}]]}]

{card.title}

{c.headingLines.map((line, li) => ( {li > 0 && } {line} ))}

{c.headingLines.map((line, li) => ( {li > 0 && } {line.split(" ").map((word, wi) => { const i = wordIndex++; return ( {wi > 0 && " "} {word} ); })} ))}

{c.headingLines.map((line, li) => ( {li > 0 &&
} {line} ))}

{c.headingLines.map((line, li) => ( {li > 0 &&
} {line.split(" ").map((word, wi) => { const i = wordIndex++; return ( {wi > 0 && " "} {word} ); })} ))}