{dummyContent.map((item, index) => (

{item.badge}

{item.title}

{item?.image && ( blog thumbnail

)} {item.description}

))}

); } const dummyContent = [ { title: "Lorem Ipsum Dolor Sit Amet", description: ( <>

Sit duis est minim proident non nisi velit non consectetur. Esse adipisicing laboris consectetur enim ipsum reprehenderit eu deserunt Lorem ut aliqua anim do. Duis cupidatat qui irure cupidatat incididunt incididunt enim magna id est qui sunt fugiat. Laboris do duis pariatur fugiat Lorem aute sit ullamco. Qui deserunt non reprehenderit dolore nisi velit exercitation Lorem qui do enim culpa. Aliqua eiusmod in occaecat reprehenderit laborum nostrud fugiat voluptate do Lorem culpa officia sint labore. Tempor consectetur excepteur ut fugiat veniam commodo et labore dolore commodo pariatur.

Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad veniam in commodo id reprehenderit adipisicing. Proident duis exercitation ad quis ex cupidatat cupidatat occaecat adipisicing.

Tempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod reprehenderit deserunt amet laborum consequat adipisicing officia qui irure id sint adipisicing. Adipisicing fugiat aliqua nulla nostrud. Amet culpa officia aliquip deserunt veniam deserunt officia adipisicing aliquip proident officia sunt.

), badge: "React", image: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { title: "Lorem Ipsum Dolor Sit Amet", description: ( <>

Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.

In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse veniam fugiat esse qui sint ad sunt reprehenderit do qui proident reprehenderit. Laborum exercitation aliqua reprehenderit ea sint cillum ut mollit.

), badge: "Changelog", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { title: "Lorem Ipsum Dolor Sit Amet", description: ( <>

), badge: "Launch Week", image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, ]; `,__rawStringJsx__:`"use client"; import React from "react"; import { calsans } from "@/fonts/calsans"; import Image from "next/image"; import { twMerge } from "tailwind-merge"; import { TracingBeam } from "../ui/tracing-beam"; export function TracingBeamDemo() { return ( (

{dummyContent.map((item, index) => (

{item.badge}

{item.title}

{item?.image && ( blog thumbnail

)} {item.description}

))}

) ); } const dummyContent = [ { title: "Lorem Ipsum Dolor Sit Amet", description: ( <>

Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad veniam in commodo id reprehenderit adipisicing. Proident duis exercitation ad quis ex cupidatat cupidatat occaecat adipisicing.

), badge: "Launch Week", image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, ]; `,__src__:"/src/registry/default/example/tracing-beam-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"calsans"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"@/fonts/calsans"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Image"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"TracingBeam"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"../ui/tracing-beam"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"TracingBeamDemo"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"TracingBeam"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"px-6"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"max-w-2xl mx-auto antialiased pt-4 relative"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"dummyContent"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`content-"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"mb-10"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"h2"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"bg-black text-white rounded-full text-sm w-fit px-4 py-1 mb-4"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"badge"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"calsans"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"text-xl mb-4"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"text-sm prose prose-sm dark:prose-invert"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"image"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"image"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"blog thumbnail"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"1000"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"1000"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"rounded-lg mb-10 object-cover"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"dummyContent"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Lorem Ipsum Dolor Sit Amet"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Sit duis est minim proident non nisi velit non consectetur. Esse"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" adipisicing laboris consectetur enim ipsum reprehenderit eu deserunt"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Lorem ut aliqua anim do. Duis cupidatat qui irure cupidatat incididunt"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" incididunt enim magna id est qui sunt fugiat. Laboris do duis pariatur"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" fugiat Lorem aute sit ullamco. Qui deserunt non reprehenderit dolore"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" nisi velit exercitation Lorem qui do enim culpa. Aliqua eiusmod in"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" occaecat reprehenderit laborum nostrud fugiat voluptate do Lorem culpa"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" officia sint labore. Tempor consectetur excepteur ut fugiat veniam"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" commodo et labore dolore commodo pariatur."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" veniam in commodo id reprehenderit adipisicing. Proident duis"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" exercitation ad quis ex cupidatat cupidatat occaecat adipisicing."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Tempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" reprehenderit deserunt amet laborum consequat adipisicing officia qui"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" irure id sint adipisicing. Adipisicing fugiat aliqua nulla nostrud."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Amet culpa officia aliquip deserunt veniam deserunt officia"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" adipisicing aliquip proident officia sunt."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ),"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"badge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"React"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"image"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Lorem Ipsum Dolor Sit Amet"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" veniam fugiat esse qui sint ad sunt reprehenderit do qui proident"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" reprehenderit. Laborum exercitation aliqua reprehenderit ea sint"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" cillum ut mollit."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ),"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"badge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Changelog"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"image"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Lorem Ipsum Dolor Sit Amet"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ),"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"badge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Launch Week"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"image"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(a,{defaultValue:"manual",children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(d,{value:"cli",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(o,{children:"Run the following command"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/tracing-beam.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/tracing-beam.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/tracing-beam.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/tracing-beam.json `,__bunCommand__:`bunx --bun shadcn@latest add https://ui.aceternity.com/registry/tracing-beam.json `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"shadcn@latest"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"https://ui.aceternity.com/registry/tracing-beam.json"})]})})})}),(0,e.jsxs)(o,{children:["Add the following code in ",(0,e.jsx)(l.code,{children:"tailwind.config.js"})," file"]}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",__rawString__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code }, plugins: [ // rest of the code addVariablesForColors, ], }; // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200). function addVariablesForColors({ addBase, theme }: any) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val]) ); addBase({ ":root": newVars, }); } `,__rawStringJsx__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code }, plugins: [ // rest of the code addVariablesForColors, ], }; // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200). function addVariablesForColors({ addBase, theme }) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val])); addBase({ ":root": newVars, }); } `,children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"defaultTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/defaultTheme"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/** "}),(0,e.jsx)(l.span,{style:{color:"#C678DD",fontStyle:"italic"},children:"@type"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B",fontStyle:"italic"},children:"{import('tailwindcss').Config}"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" */"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"module"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"exports"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"./src/**/*.{ts,tsx}"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"darkMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"class"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ],"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200)."})}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"fromEntries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"entries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"((["}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`--"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"])"})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'":root"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})]})}),(0,e.jsx)(d,{value:"manual",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(o,{children:"Install dependencies"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"})]})})})}),(0,e.jsx)(o,{children:"Add util file"}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,e.jsxs)(o,{children:["Add the following code in ",(0,e.jsx)(l.code,{children:"tailwind.config.js"})," file"]}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",__rawString__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code }, plugins: [ // rest of the code addVariablesForColors, ], }; // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200). function addVariablesForColors({ addBase, theme }: any) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val]) ); addBase({ ":root": newVars, }); } `,__rawStringJsx__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code }, plugins: [ // rest of the code addVariablesForColors, ], }; // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200). function addVariablesForColors({ addBase, theme }) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val])); addBase({ ":root": newVars, }); } `,children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"defaultTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/defaultTheme"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/** "}),(0,e.jsx)(l.span,{style:{color:"#C678DD",fontStyle:"italic"},children:"@type"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B",fontStyle:"italic"},children:"{import('tailwindcss').Config}"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" */"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"module"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"exports"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"./src/**/*.{ts,tsx}"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"darkMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"class"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ],"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200)."})}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"fromEntries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"entries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"((["}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`--"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"])"})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'":root"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})}),(0,e.jsx)(o,{children:"Copy the source code"}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.code,{children:"components/ui/tracing-beam.tsx"})}),(0,e.jsx)(p,{name:"tracing-beam",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useTransform, useScroll, useVelocity, useSpring, } from "framer-motion"; import { cn } from "@/lib/utils"; export const TracingBeam = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }); const contentRef = useRef(null); const [svgHeight, setSvgHeight] = useState(0); useEffect(() => { if (contentRef.current) { setSvgHeight(contentRef.current.offsetHeight); } }, []); const y1 = useSpring( useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]), { stiffness: 500, damping: 90, } ); const y2 = useSpring( useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]), { stiffness: 500, damping: 90, } ); return (

0 ? "none" : "rgba(0, 0, 0, 0.24) 0px 3px 8px", }} className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center" > 0 ? "white" : "var(--emerald-500)", borderColor: scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)", }} className="h-2 w-2 rounded-full border border-neutral-300 bg-white" />

{children}

); }; `,__rawStringJsx__:`"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useTransform, useScroll, useSpring } from "framer-motion"; import { cn } from "@/lib/utils"; export const TracingBeam = ({ children, className }) => { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }); const contentRef = useRef(null); const [svgHeight, setSvgHeight] = useState(0); useEffect(() => { if (contentRef.current) { setSvgHeight(contentRef.current.offsetHeight); } }, []); const y1 = useSpring(useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]), { stiffness: 500, damping: 90, }); const y2 = useSpring(useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]), { stiffness: 500, damping: 90, }); return ( (

0 ? "none" : "rgba(0, 0, 0, 0.24) 0px 3px 8px", }} className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center"> 0 ? "white" : "var(--emerald-500)", borderColor: scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)", }} className="h-2 w-2 rounded-full border border-neutral-300 bg-white" />

{children}

) ); }; `,__src__:"/src/registry/default/ui/tracing-beam.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useTransform"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useScroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useVelocity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useSpring"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"TracingBeam"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollYProgress"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useScroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"offset"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"start start"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"end start"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"contentRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"setSvgHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"contentRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setSvgHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"contentRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"offsetHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"y1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useSpring"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useTransform"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scrollYProgress"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", ["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"], ["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"50"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"stiffness"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"500"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"damping"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"90"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"y2"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useSpring"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useTransform"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scrollYProgress"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", ["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"], ["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"50"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"200"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"stiffness"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"500"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"damping"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"90"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative w-full max-w-4xl mx-auto h-full"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"absolute -left-4 md:-left-20 top-3"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"delay"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"boxShadow"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollYProgress"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"get"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"rgba(0, 0, 0, 0.24) 0px 3px 8px"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"delay"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"backgroundColor"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollYProgress"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"get"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"var(--emerald-500)"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"borderColor"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollYProgress"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"get"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"var(--emerald-600)"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-2 w-2 rounded-full border border-neutral-300 bg-white"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`0 0 20 "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"20"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Set the SVG height"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'" ml-4 block"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"aria-hidden"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"true"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.path"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`M 1 0V -36 l 18 24 V "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" l -18 24V "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"#9091A0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeOpacity"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0.16"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.path"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`M 1 0V -36 l 18 24 V "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" l -18 24V "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"svgHeight"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"url(#gradient)"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"1.25"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"motion-reduce:hidden"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"defs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.linearGradient"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"gradient"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"gradientUnits"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"userSpaceOnUse"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"x1"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"x2"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"y1"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y1"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// set y1 for gradient"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"y2"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y2"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// set y2 for gradient"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"#18CCFC"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopOpacity"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"#18CCFC"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"offset"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0.325"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"#6344F5"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"offset"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"1"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"#AE48FF"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopOpacity"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"contentRef"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})})})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"props",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:"Prop name"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Description"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"className"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"string"})}),(0,e.jsx)(l.td,{children:"The class name of the child component."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"children"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"React.ReactNode"})}),(0,e.jsx)(l.td,{children:"The contents of your page"})]})]})]})]})}function v(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(A,n)})):A(n)}var w=v;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(S);})(); ;return Component;

Aceternity UI