50: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"] 51: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"] 52:T1ea0,'use client'; import { useId, useState } from 'react'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { IconArrowRight, FooterBar, type FooterSocial } from './footer-kit'; export type SalesCtaFooterVariant = 'Split' | 'Stacked'; export interface SalesCtaFooterProps { links?: { label: string; href: string }[]; socials?: FooterSocial[]; brand: string; headline?: string; blurb?: string; groups?: { title: string; links: { label: string; href: string }[] }[]; minSeats?: number; maxSeats?: number; defaultSeats?: number; pricePerSeat?: number; currency?: string; ctaLabel?: string; onContact?: (seats: number) => void; copyright?: string; variant?: SalesCtaFooterVariant; className?: string; } const TIERS = [ { threshold: 0, name: 'Team', discount: 0 }, { threshold: 100, name: 'Business', discount: 0.1 }, { threshold: 400, name: 'Enterprise', discount: 0.22 }, { threshold: 1200, name: 'Enterprise+', discount: 0.34 }, ]; function tierFor(seats: number) { return [...TIERS].reverse().find((tier) => seats >= tier.threshold) ?? TIERS[0]; } export function SalesCtaFooter({ links, socials, brand, headline = 'Priced per seat until it should not be.', blurb = 'Move the slider for an indicative annual figure. Anything above four hundred seats is quoted, not listed.', groups = [], minSeats = 25, maxSeats = 2000, defaultSeats = 250, pricePerSeat = 38, currency = '$', ctaLabel = 'Talk to sales', onContact, copyright, variant = 'Split', className, }: SalesCtaFooterProps) { const [seats, setSeats] = useState(defaultSeats); const sliderId = useId(); const tier = tierFor(seats); const annual = Math.round(seats * pricePerSeat * 12 * (1 - tier.discount)); const progress = (seats - minSeats) / (maxSeats - minSeats); return ( ); } export default SalesCtaFooter; 53:T399a,/** * Everything the footer blocks share: the icon set, the brand lockup, the * social row and the bottom bar. * * The earlier blocks inlined their own glyphs so each file copied out whole. * That stopped scaling once every footer needed the same wordmark, the same * three social marks and the same bottom bar — eighteen copies of the same * markup drift within a week. This ships alongside each block instead: the * registry item for `x-footer` lists this file too, so `npx shadcn add` writes * both and the block still installs in one command. * * Two icon styles live here on purpose: * * - Utility icons — arrows, search, check, the rest — are **outline**. A * filled arrow beside 13px text reads as a blob, and a filled chevron in a * select looks like a warning triangle. * - Social and brand marks are **solid**, because a logo drawn in outline is * not that logo. These are the same paths the live site uses. */ import { cn } from '@/lib/utils'; type IconProps = React.SVGProps; /* ── Outline utility icons ────────────────────────────────── One family, one grid, one stroke weight. 1.75 sits between the 1.5 that reads correctly next to regular text and the 2 that a semibold label wants, which is the mix these footers run. */ function Outline({ children, ...props }: IconProps & { children: React.ReactNode }) { return ( ); } export function IconArrowRight(props: IconProps) { return ( ); } export function IconArrowUpRight(props: IconProps) { return ( ); } export function IconArrowUp(props: IconProps) { return ( ); } export function IconChevronDown(props: IconProps) { return ( ); } export function IconChevronRight(props: IconProps) { return ( ); } export function IconSearch(props: IconProps) { return ( ); } export function IconCheck(props: IconProps) { return ( ); } export function IconCopy(props: IconProps) { return ( ); } export function IconLocation(props: IconProps) { return ( ); } export function IconMail(props: IconProps) { return ( ); } export function IconPhone(props: IconProps) { return ( ); } export function IconClock(props: IconProps) { return ( ); } export function IconShield(props: IconProps) { return ( ); } export function IconStar(props: IconProps) { return ( ); } export function IconSparkle(props: IconProps) { return ( ); } export function IconEnter(props: IconProps) { return ( ); } /* ── Brand and social marks ───────────────────────────────── Solid, because a logo drawn in outline is not that logo. */ /** The Spectrum UI flag. Same two paths the site header uses. */ export function SpectrumLogo(props: IconProps) { return ( ); } export function IconGitHub(props: IconProps) { return ( ); } export function IconX(props: IconProps) { return ( ); } export function IconLinkedIn(props: IconProps) { return ( ); } /* ── Brand data ───────────────────────────────────────────── Real routes, so the previews link somewhere rather than to `#`. */ export const SPECTRUM = { name: 'Spectrum UI', tagline: 'Animation-ready React components and blocks, with the source on the page.', url: 'https://ui.spectrumhq.in', copyright: `© ${new Date().getFullYear()} Spectrum UI`, }; export interface FooterSocial { label: string; href: string; icon: React.ComponentType; } export const SPECTRUM_SOCIALS: FooterSocial[] = [ { label: 'GitHub', href: 'https://github.com/arihantcodes/spectrum-ui', icon: IconGitHub }, { label: 'X', href: 'https://x.com/arihantcodes', icon: IconX }, { label: 'LinkedIn', href: 'https://www.linkedin.com/in/arihantcodes', icon: IconLinkedIn }, ]; export interface FooterLinkGroup { title: string; links: { label: string; href: string; badge?: string }[]; } export const SPECTRUM_GROUPS: FooterLinkGroup[] = [ { title: 'Library', links: [ { label: 'Components', href: '/docs/components' }, { label: 'Blocks', href: '/blocks' }, { label: 'Charts', href: '/blocks/charts' }, { label: 'Tables', href: '/blocks/tables' }, { label: 'Footers', href: '/blocks/footers', badge: 'New' }, { label: 'Colors', href: '/colors' }, ], }, { title: 'Docs', links: [ { label: 'Introduction', href: '/docs' }, { label: 'Installation', href: '/docs/installation' }, { label: 'CLI', href: '/docs/cli' }, { label: 'MCP server', href: '/docs/mcp' }, { label: 'Theming', href: '/docs/theming' }, { label: 'Changelog', href: '/changelog' }, ], }, { title: 'Resources', links: [ { label: 'Blog', href: '/blog' }, { label: 'Guides', href: '/docs/guides' }, { label: 'Comparisons', href: '/compare' }, { label: 'Templates', href: '/templates' }, { label: 'Brand kit', href: '/brandkit' }, { label: 'llms.txt', href: '/llm-info' }, ], }, { title: 'Project', links: [ { label: 'GitHub', href: 'https://github.com/arihantcodes/spectrum-ui' }, { label: 'Sponsor', href: '/sponsor' }, { label: 'Pricing', href: '/pricing' }, { label: 'FAQs', href: '/faqs' }, { label: 'Founder story', href: '/founder-story' }, { label: 'Contact', href: 'https://x.com/arihantcodes' }, ], }, ]; export const SPECTRUM_LEGAL = [ { label: 'Privacy', href: '/privacy-policy' }, { label: 'Terms', href: '/tos' }, { label: 'License', href: '/docs/license' }, { label: 'Status', href: '/blocks/footers' }, ]; /* ── Shared pieces ────────────────────────────────────────── `tone="dark"` is for the blocks that are dark in both themes, where `dark:` variants never fire and the light palette would be unreadable. */ export type FooterTone = 'auto' | 'dark'; /** The mark and the wordmark, locked up. */ export function BrandLockup({ brand = SPECTRUM.name, href = '/', tone = 'auto', className, }: { brand?: string; href?: string; tone?: FooterTone; className?: string; }) { return ( {brand} ); } /** The social row. Solid marks, 32px hit area, one hover transition. */ export function FooterSocials({ socials = SPECTRUM_SOCIALS, tone = 'auto', className, }: { socials?: FooterSocial[]; tone?: FooterTone; className?: string; }) { if (socials.length === 0) return null; return (

); } /** * The bottom bar every footer ends on: lockup and copyright left, utility links * and social marks right. One component rather than eighteen hand-rolled * copies, which is the only way they stay identical. */ export function FooterBar({ brand = SPECTRUM.name, copyright, links = SPECTRUM_LEGAL, socials = SPECTRUM_SOCIALS, tone = 'auto', showLockup = true, className, }: { brand?: string; copyright?: string; links?: { label: string; href: string }[]; socials?: FooterSocial[]; tone?: FooterTone; showLockup?: boolean; className?: string; }) { const muted = tone === 'dark' ? 'text-neutral-400' : 'text-neutral-500 dark:text-neutral-400'; const hover = tone === 'dark' ? 'hover:text-neutral-100' : 'hover:text-neutral-900 dark:hover:text-neutral-100'; const rule = tone === 'dark' ? 'border-white/[0.08]' : 'border-black/[0.07] dark:border-white/[0.08]'; return (

{showLockup && }

{copyright ?? SPECTRUM.copyright}

{link.label}

); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/footers/sales-cta-footer.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/footers/sales-cta-footer.tsx"},{"path":"components/spectrumui/blocks/footers/footer-kit.tsx","content":"$53","type":"registry:block","target":"components/spectrumui/blocks/footers/footer-kit.tsx"}],"className":"h-[70svh] min-h-80"}]]}]