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:Tb74,import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import { Badge } from "@/components/ui/8bit/badge"; import "@/components/ui/8bit/styles/retro.css"; export interface TimelineStep { badge?: string; description: string; icon: ReactNode; title: string; } interface Timeline1Props { className?: string; description?: string; steps?: TimelineStep[]; title?: string; } const defaultSteps: TimelineStep[] = [ { icon: "01", title: "Install", description: "One command. Components copied to your project. No runtime dependency.", }, { icon: "02", title: "Customize", description: "Change colors, borders, fonts. Everything is yours to modify.", badge: "EASY", }, { icon: "03", title: "Build", description: "Combine blocks into full pages. Hero, features, pricing — all ready.", }, { icon: "04", title: "Ship", description: "Deploy your retro masterpiece. Watch the compliments roll in.", }, ]; export default function Timeline1({ title = "How It Works", description = "From zero to retro in four steps", steps = defaultSteps, className, }: Timeline1Props) { return (

{(title || description) && (

{title && (

{title}

)} {description && (

{description}

)}

{/* Vertical line */}

{steps.map((step, idx) => (

{/* Step number */}

{step.icon}

{/* Content */}

{step.title}

{step.badge && ( {step.badge} )}

{step.description}

))}

); } 51:T88b,import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Badge as ShadcnBadge } from "@/components/ui/badge"; export const badgeVariants = cva("", { variants: { font: { normal: "", retro: "retro", }, variant: { default: "border-primary bg-primary", destructive: "border-destructive bg-destructive", outline: "border-background bg-background", secondary: "border-secondary bg-secondary", }, }, defaultVariants: { variant: "default", }, }); export interface BitButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } function Badge({ children, className = "", font, variant, ...props }: BitButtonProps) { const color = badgeVariants({ variant, font }); const classes = className.split(" "); // visual classes for badge and sidebars const visualClasses = classes.filter( (c) => c.startsWith("bg-") || c.startsWith("border-") || c.startsWith("text-") || c.startsWith("rounded-") ); // Container should accept all non-visual utility classes (e.g., size, spacing, layout) const containerClasses = classes.filter( (c) => !( c.startsWith("bg-") || c.startsWith("border-") || c.startsWith("text-") || c.startsWith("rounded-") ) ); return (

{children} {/* Left pixel bar */}

{/* Right pixel bar */}

); } export { Badge }; 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":[null,["$","$L4e",null,{"namespace":"@8bitcn","registryDependencies":["badge"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ui/8bit/blocks/timeline1.tsx","content":"$50","type":"registry:block","target":"components/ui/8bit/blocks/timeline1.tsx"},{"path":"components/ui/8bit/styles/retro.css","content":"@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n\n.pixelated {\n image-rendering: pixelated;\n image-rendering: crisp-edges;\n}","type":"registry:file","target":"components/ui/8bit/styles/retro.css"},{"path":"components/ui/8bit/badge.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]