setActive(null)} > {active.title}

{active.title} {active.description}

{active.ctaText}

{typeof active.content === "function" ? active.content() : active.content}

) : null}

setActive(card)} className="p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer" >

{card.title} {card.description}

{card.ctaText}

); } export const CloseIcon = () => { return ( ); }; const cards = [ { description: "Lana Del Rey", title: "Summertime Sadness", src: "https://assets.aceternity.com/demos/lana-del-rey.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

Lana Del Rey, an iconic American singer-songwriter, is celebrated for her melancholic and cinematic music style. Born Elizabeth Woolridge Grant in New York City, she has captivated audiences worldwide with her haunting voice and introspective lyrics.

Her songs often explore themes of tragic romance, glamour, and melancholia, drawing inspiration from both contemporary and vintage pop culture. With a career that has seen numerous critically acclaimed albums, Lana Del Rey has established herself as a unique and influential figure in the music industry, earning a dedicated fan base and numerous accolades.

); }, }, { description: "Babbu Maan", title: "Mitran Di Chhatri", src: "https://assets.aceternity.com/demos/babbu-maan.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

Babu Maan, a legendary Punjabi singer, is renowned for his soulful voice and profound lyrics that resonate deeply with his audience. Born in the village of Khant Maanpur in Punjab, India, he has become a cultural icon in the Punjabi music industry.

His songs often reflect the struggles and triumphs of everyday life, capturing the essence of Punjabi culture and traditions. With a career spanning over two decades, Babu Maan has released numerous hit albums and singles that have garnered him a massive fan following both in India and abroad.

); }, }, { description: "Metallica", title: "For Whom The Bell Tolls", src: "https://assets.aceternity.com/demos/metallica.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

Metallica, an iconic American heavy metal band, is renowned for their powerful sound and intense performances that resonate deeply with their audience. Formed in Los Angeles, California, they have become a cultural icon in the heavy metal music industry.

Their songs often reflect themes of aggression, social issues, and personal struggles, capturing the essence of the heavy metal genre. With a career spanning over four decades, Metallica has released numerous hit albums and singles that have garnered them a massive fan following both in the United States and abroad.

); }, }, { description: "Led Zeppelin", title: "Stairway To Heaven", src: "https://assets.aceternity.com/demos/led-zeppelin.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

Led Zeppelin, a legendary British rock band, is renowned for their innovative sound and profound impact on the music industry. Formed in London in 1968, they have become a cultural icon in the rock music world.

Their songs often reflect a blend of blues, hard rock, and folk music, capturing the essence of the 1970s rock era. With a career spanning over a decade, Led Zeppelin has released numerous hit albums and singles that have garnered them a massive fan following both in the United Kingdom and abroad.

); }, }, { description: "Mustafa Zahid", title: "Toh Phir Aao", src: "https://assets.aceternity.com/demos/toh-phir-aao.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

"Aawarapan", a Bollywood movie starring Emraan Hashmi, is renowned for its intense storyline and powerful performances. Directed by Mohit Suri, the film has become a significant work in the Indian film industry.

The movie explores themes of love, redemption, and sacrifice, capturing the essence of human emotions and relationships. With a gripping narrative and memorable music, "Aawarapan" has garnered a massive fan following both in India and abroad, solidifying Emraan Hashmi's status as a versatile actor.

); }, }, ]; `,__rawStringJsx__:`"use client"; import Image from "next/image"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { useOutsideClick } from "@/hooks/use-outside-click"; export function ExpandableCardDemo() { const [active, setActive] = useState(null); const ref = useRef(null); const id = useId(); useEffect(() => { function onKeyDown(event) { if (event.key === "Escape") { setActive(false); } } if (active && typeof active === "object") { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [active]); useOutsideClick(ref, () => setActive(null)); return (<> {active && typeof active === "object" && ( )} {active && typeof active === "object" ? (

setActive(null)}> {active.title}

{active.title} {active.description}

{active.ctaText}

{typeof active.content === "function" ? active.content() : active.content}

) : null}

setActive(card)} className="p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer">

{card.title} {card.description}

{card.ctaText}

); } export const CloseIcon = () => { return ( ( ) ); }; const cards = [ { description: "Lana Del Rey", title: "Summertime Sadness", src: "https://assets.aceternity.com/demos/lana-del-rey.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, { description: "Babbu Maan", title: "Mitran Di Chhatri", src: "https://assets.aceternity.com/demos/babbu-maan.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, { description: "Metallica", title: "For Whom The Bell Tolls", src: "https://assets.aceternity.com/demos/metallica.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, { description: "Led Zeppelin", title: "Stairway To Heaven", src: "https://assets.aceternity.com/demos/led-zeppelin.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, { description: "Mustafa Zahid", title: "Toh Phir Aao", src: "https://assets.aceternity.com/demos/toh-phir-aao.jpeg", ctaText: "Play", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, ]; `,__src__:"src/registry/default/blocks/expandable-card-demo-standard.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Image"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useId"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@/hooks/use-outside-click"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ExpandableCardDemo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<("}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] | "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useId"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"KeyboardEvent"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Escape"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"auto"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed inset-0 bg-black/20 h-full w-full z-10"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed inset-0 grid place-items-center z-[100]"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`button-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.05"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex absolute top-2 right-2 lg:hidden items-center justify-center bg-white rounded-full h-6 w-6"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full max-w-[500px] h-full md:h-fit md:max-h-[90%] flex flex-col bg-white dark:bg-neutral-900 sm:rounded-3xl overflow-hidden"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`image-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"priority"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"200"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"200"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full h-80 lg:h-80 sm:rounded-tr-lg sm:rounded-tl-lg object-cover object-top"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex justify-between items-start p-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.h3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`title-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"font-bold text-neutral-700 dark:text-neutral-200"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`description-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 dark:text-neutral-400"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.a"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`button-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"_blank"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-3 text-sm rounded-full font-bold bg-green-500 text-white"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"pt-4 relative px-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 text-xs md:text-sm lg:text-base h-40 md:h-fit pb-10 flex flex-col items-start gap-4 overflow-auto dark:text-neutral-400 [mask:linear-gradient(to_bottom,white,white,transparent)] [scrollbar-width:none] [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch]"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"function"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ul"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"max-w-2xl mx-auto w-full gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex gap-4 flex-col md:flex-row "'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`image-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-40 w-40 md:h-14 md:w-14 rounded-lg object-cover object-top"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.h3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`title-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"font-medium text-neutral-800 dark:text-neutral-200 text-center md:text-left"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`description-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 dark:text-neutral-400 text-center md:text-left"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`button-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-2 text-sm rounded-full font-bold bg-gray-100 hover:bg-green-500 hover:text-white text-black mt-4 md:mt-0"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.05"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M18 6l-12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M6 6l12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Lana Del Rey"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Summertime Sadness"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/lana-del-rey.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Lana Del Rey, an iconic American singer-songwriter, is celebrated for"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" her melancholic and cinematic music style. Born Elizabeth Woolridge"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Grant in New York City, she has captivated audiences worldwide with"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" her haunting voice and introspective lyrics. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Her songs"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" often explore themes of tragic romance, glamour, and melancholia,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" drawing inspiration from both contemporary and vintage pop culture."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" With a career that has seen numerous critically acclaimed albums, Lana"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Del Rey has established herself as a unique and influential figure in"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" the music industry, earning a dedicated fan base and numerous"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" accolades."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Babbu Maan"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Mitran Di Chhatri"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/babbu-maan.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Babu Maan, a legendary Punjabi singer, is renowned for his soulful"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" voice and profound lyrics that resonate deeply with his audience. Born"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" in the village of Khant Maanpur in Punjab, India, he has become a"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" cultural icon in the Punjabi music industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> His songs"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" often reflect the struggles and triumphs of everyday life, capturing"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" the essence of Punjabi culture and traditions. With a career spanning"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" over two decades, Babu Maan has released numerous hit albums and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" singles that have garnered him a massive fan following both in India"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Metallica"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"For Whom The Bell Tolls"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/metallica.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Metallica, an iconic American heavy metal band, is renowned for their"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" powerful sound and intense performances that resonate deeply with"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" their audience. Formed in Los Angeles, California, they have become a"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" cultural icon in the heavy metal music industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Their"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" songs often reflect themes of aggression, social issues, and personal"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" struggles, capturing the essence of the heavy metal genre. With a"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" career spanning over four decades, Metallica has released numerous hit"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" albums and singles that have garnered them a massive fan following"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" both in the United States and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Led Zeppelin"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Stairway To Heaven"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/led-zeppelin.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Led Zeppelin, a legendary British rock band, is renowned for their"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" innovative sound and profound impact on the music industry. Formed in"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" London in 1968, they have become a cultural icon in the rock music"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" world. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Their songs often reflect a blend of blues, hard"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" rock, and folk music, capturing the essence of the 1970s rock era."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" With a career spanning over a decade, Led Zeppelin has released"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" numerous hit albums and singles that have garnered them a massive fan"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" following both in the United Kingdom and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Mustafa Zahid"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Toh Phir Aao"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/toh-phir-aao.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"Aawarapan"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", a Bollywood movie starring Emraan Hashmi, is"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" renowned for its intense storyline and powerful performances. Directed"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" by Mohit Suri, the film has become a significant work in the Indian"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" film industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> The movie explores themes of love,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" redemption, and sacrifice, capturing the essence of human emotions and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" relationships. With a gripping narrative and memorable music,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"Aawarapan"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" has garnered a massive fan following both in"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" India and abroad, solidifying Emraan Hashmi"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"s status as a"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" versatile actor."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(a,{defaultValue:"manual",children:[(0,n.jsxs)(c,{children:[(0,n.jsx)(t,{value:"cli",children:"CLI"}),(0,n.jsx)(t,{value:"manual",children:"Manual"})]}),(0,n.jsx)(d,{value:"cli",children:(0,n.jsxs)(h,{children:[(0,n.jsx)(o,{children:"Run the following command"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx aceternity-ui@latest add expandable-card-demo-standard expandable-card-demo-grid `,__npmCommand__:`npx aceternity-ui@latest add expandable-card-demo-standard expandable-card-demo-grid `,__yarnCommand__:`npx aceternity-ui@latest add expandable-card-demo-standard expandable-card-demo-grid `,__pnpmCommand__:`pnpm dlx aceternity-ui@latest add expandable-card-demo-standard expandable-card-demo-grid `,__bunCommand__:`bunx --bun aceternity-ui@latest add expandable-card-demo-standard expandable-card-demo-grid `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"aceternity-ui@latest"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"expandable-card-demo-standard"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"expandable-card-demo-grid"})]})})})}),(0,n.jsxs)(o,{children:["Add ",(0,n.jsx)(l.code,{children:"useOutsideClick"})," hook"]}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"hooks/use-outside-click.ts"}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import React, { useEffect } from "react"; export const useOutsideClick = ( ref: React.RefObject, callback: Function ) => { useEffect(() => { const listener = (event: any) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,__rawStringJsx__:`import { useEffect } from "react"; export const useOutsideClick = ( ref, callback ) => { useEffect(() => { const listener = (event) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"RefObject"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Function"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"contains"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})]})]})}),(0,n.jsx)(d,{value:"manual",children:(0,n.jsxs)(h,{children:[(0,n.jsx)(o,{children:"Install dependencies"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"})]})})})}),(0,n.jsx)(o,{children:"Add util file"}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,n.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,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,n.jsxs)(o,{children:["Add ",(0,n.jsx)(l.code,{children:"useOutsideClick"})," hook"]}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"hooks/use-outside-click.ts"}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import React, { useEffect } from "react"; export const useOutsideClick = ( ref: React.RefObject, callback: Function ) => { useEffect(() => { const listener = (event: any) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,__rawStringJsx__:`import { useEffect } from "react"; export const useOutsideClick = ( ref, callback ) => { useEffect(() => { const listener = (event) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"RefObject"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Function"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"contains"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"listener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"callback"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})]})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"examples",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,n.jsxs)(l.h4,{id:"standard",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#standard",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Standard"]}),` `,(0,n.jsx)(s,{name:"expandable-card-demo-standard",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%] overflow-hidden relative",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import Image from "next/image"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { useOutsideClick } from "@/hooks/use-outside-click"; export function ExpandableCardDemo() { const [active, setActive] = useState<(typeof cards)[number] | boolean | null>( null ); const ref = useRef(null); const id = useId(); useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === "Escape") { setActive(false); } } if (active && typeof active === "object") { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [active]); useOutsideClick(ref, () => setActive(null)); return ( <> {active && typeof active === "object" && ( )} {active && typeof active === "object" ? (

setActive(null)} > {active.title}

{active.title} {active.description}

{active.ctaText}

{typeof active.content === "function" ? active.content() : active.content}

) : null}

setActive(card)} className="p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer" >

{card.title} {card.description}

{card.ctaText}

setActive(null)}> {active.title}

{active.title} {active.description}

{active.ctaText}

{typeof active.content === "function" ? active.content() : active.content}

) : null}

setActive(card)} className="p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer">

{card.title} {card.description}

{card.ctaText}

) ); }, }, ]; `,__src__:"src/registry/default/blocks/expandable-card-demo-standard.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Image"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useId"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@/hooks/use-outside-click"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ExpandableCardDemo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<("}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] | "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useId"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"KeyboardEvent"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Escape"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"auto"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed inset-0 bg-black/20 h-full w-full z-10"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed inset-0 grid place-items-center z-[100]"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`button-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.05"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex absolute top-2 right-2 lg:hidden items-center justify-center bg-white rounded-full h-6 w-6"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full max-w-[500px] h-full md:h-fit md:max-h-[90%] flex flex-col bg-white dark:bg-neutral-900 sm:rounded-3xl overflow-hidden"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`image-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"priority"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"200"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"200"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full h-80 lg:h-80 sm:rounded-tr-lg sm:rounded-tl-lg object-cover object-top"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex justify-between items-start p-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.h3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`title-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"font-bold text-neutral-700 dark:text-neutral-200"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`description-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 dark:text-neutral-400"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.a"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`button-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"_blank"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-3 text-sm rounded-full font-bold bg-green-500 text-white"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"pt-4 relative px-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 text-xs md:text-sm lg:text-base h-40 md:h-fit pb-10 flex flex-col items-start gap-4 overflow-auto dark:text-neutral-400 [mask:linear-gradient(to_bottom,white,white,transparent)] [scrollbar-width:none] [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch]"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"function"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ul"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"max-w-2xl mx-auto w-full gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex gap-4 flex-col md:flex-row "'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`image-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-40 w-40 md:h-14 md:w-14 rounded-lg object-cover object-top"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.h3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`title-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"font-medium text-neutral-800 dark:text-neutral-200 text-center md:text-left"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`description-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 dark:text-neutral-400 text-center md:text-left"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`button-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-2 text-sm rounded-full font-bold bg-gray-100 hover:bg-green-500 hover:text-white text-black mt-4 md:mt-0"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.05"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M18 6l-12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M6 6l12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Lana Del Rey"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Summertime Sadness"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/lana-del-rey.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Lana Del Rey, an iconic American singer-songwriter, is celebrated for"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" her melancholic and cinematic music style. Born Elizabeth Woolridge"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Grant in New York City, she has captivated audiences worldwide with"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" her haunting voice and introspective lyrics. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Her songs"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" often explore themes of tragic romance, glamour, and melancholia,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" drawing inspiration from both contemporary and vintage pop culture."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" With a career that has seen numerous critically acclaimed albums, Lana"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Del Rey has established herself as a unique and influential figure in"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" the music industry, earning a dedicated fan base and numerous"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" accolades."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Babbu Maan"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Mitran Di Chhatri"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/babbu-maan.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Babu Maan, a legendary Punjabi singer, is renowned for his soulful"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" voice and profound lyrics that resonate deeply with his audience. Born"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" in the village of Khant Maanpur in Punjab, India, he has become a"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" cultural icon in the Punjabi music industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> His songs"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" often reflect the struggles and triumphs of everyday life, capturing"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" the essence of Punjabi culture and traditions. With a career spanning"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" over two decades, Babu Maan has released numerous hit albums and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" singles that have garnered him a massive fan following both in India"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Metallica"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"For Whom The Bell Tolls"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/metallica.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Metallica, an iconic American heavy metal band, is renowned for their"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" powerful sound and intense performances that resonate deeply with"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" their audience. Formed in Los Angeles, California, they have become a"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" cultural icon in the heavy metal music industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Their"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" songs often reflect themes of aggression, social issues, and personal"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" struggles, capturing the essence of the heavy metal genre. With a"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" career spanning over four decades, Metallica has released numerous hit"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" albums and singles that have garnered them a massive fan following"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" both in the United States and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Led Zeppelin"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Stairway To Heaven"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/led-zeppelin.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Led Zeppelin, a legendary British rock band, is renowned for their"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" innovative sound and profound impact on the music industry. Formed in"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" London in 1968, they have become a cultural icon in the rock music"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" world. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Their songs often reflect a blend of blues, hard"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" rock, and folk music, capturing the essence of the 1970s rock era."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" With a career spanning over a decade, Led Zeppelin has released"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" numerous hit albums and singles that have garnered them a massive fan"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" following both in the United Kingdom and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Mustafa Zahid"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Toh Phir Aao"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/toh-phir-aao.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Play"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"Aawarapan"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", a Bollywood movie starring Emraan Hashmi, is"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" renowned for its intense storyline and powerful performances. Directed"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" by Mohit Suri, the film has become a significant work in the Indian"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" film industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> The movie explores themes of love,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" redemption, and sacrifice, capturing the essence of human emotions and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" relationships. With a gripping narrative and memorable music,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"Aawarapan"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"""}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" has garnered a massive fan following both in"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" India and abroad, solidifying Emraan Hashmi"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"s status as a"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" versatile actor."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})})]})})})}),` `,(0,n.jsxs)(l.h4,{id:"grid",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#grid",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Grid"]}),` `,(0,n.jsx)(s,{name:"expandable-card-demo-grid",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%] overflow-hidden relative",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import Image from "next/image"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { useOutsideClick } from "@/hooks/use-outside-click"; export function ExpandableCardDemo() { const [active, setActive] = useState<(typeof cards)[number] | boolean | null>( null ); const id = useId(); const ref = useRef(null); useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === "Escape") { setActive(false); } } if (active && typeof active === "object") { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [active]); useOutsideClick(ref, () => setActive(null)); return ( <> {active && typeof active === "object" && ( )} {active && typeof active === "object" ? (

setActive(null)} > {active.title}

{active.title} {active.description}

{active.ctaText}

{typeof active.content === "function" ? active.content() : active.content}

) : null}

setActive(card)} className="p-4 flex flex-col hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer" >

{card.title} {card.description}

); } export const CloseIcon = () => { return ( ); }; const cards = [ { description: "Lana Del Rey", title: "Summertime Sadness", src: "https://assets.aceternity.com/demos/lana-del-rey.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

); }, }, { description: "Babbu Maan", title: "Mitran Di Chhatri", src: "https://assets.aceternity.com/demos/babbu-maan.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

); }, }, { description: "Metallica", title: "For Whom The Bell Tolls", src: "https://assets.aceternity.com/demos/metallica.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

); }, }, { description: "Lord Himesh", title: "Aap Ka Suroor", src: "https://assets.aceternity.com/demos/aap-ka-suroor.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return (

Himesh Reshammiya, a renowned Indian music composer, singer, and actor, is celebrated for his distinctive voice and innovative compositions. Born in Mumbai, India, he has become a prominent figure in the Bollywood music industry.

His songs often feature a blend of contemporary and traditional Indian music, capturing the essence of modern Bollywood soundtracks. With a career spanning over two decades, Himesh Reshammiya has released numerous hit albums and singles that have garnered him a massive fan following both in India and abroad.

); }, }, ]; `,__rawStringJsx__:`"use client"; import Image from "next/image"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { useOutsideClick } from "@/hooks/use-outside-click"; export function ExpandableCardDemo() { const [active, setActive] = useState(null); const id = useId(); const ref = useRef(null); useEffect(() => { function onKeyDown(event) { if (event.key === "Escape") { setActive(false); } } if (active && typeof active === "object") { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [active]); useOutsideClick(ref, () => setActive(null)); return (<> {active && typeof active === "object" && ( )} {active && typeof active === "object" ? (

setActive(null)}> {active.title}

{active.title} {active.description}

{active.ctaText}

{typeof active.content === "function" ? active.content() : active.content}

) : null}

setActive(card)} className="p-4 flex flex-col hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer">

{card.title} {card.description}

); } export const CloseIcon = () => { return ( ( ) ); }; const cards = [ { description: "Lana Del Rey", title: "Summertime Sadness", src: "https://assets.aceternity.com/demos/lana-del-rey.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, { description: "Babbu Maan", title: "Mitran Di Chhatri", src: "https://assets.aceternity.com/demos/babbu-maan.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, { description: "Metallica", title: "For Whom The Bell Tolls", src: "https://assets.aceternity.com/demos/metallica.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, { description: "Lord Himesh", title: "Aap Ka Suroor", src: "https://assets.aceternity.com/demos/aap-ka-suroor.jpeg", ctaText: "Visit", ctaLink: "https://ui.aceternity.com/templates", content: () => { return ( (

) ); }, }, ]; `,__src__:"src/registry/default/blocks/expandable-card-demo-grid.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Image"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useId"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@/hooks/use-outside-click"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"ExpandableCardDemo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<("}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] | "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useId"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"KeyboardEvent"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Escape"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"overflow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"auto"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed inset-0 bg-black/20 h-full w-full z-10"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"object"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed inset-0 grid place-items-center z-[100]"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`button-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.05"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex absolute top-2 right-2 lg:hidden items-center justify-center bg-white rounded-full h-6 w-6"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full max-w-[500px] h-full md:h-fit md:max-h-[90%] flex flex-col bg-white dark:bg-neutral-900 sm:rounded-3xl overflow-hidden"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`image-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"priority"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"200"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"200"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full h-80 lg:h-80 sm:rounded-tr-lg sm:rounded-tl-lg object-cover object-top"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex justify-between items-start p-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.h3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`title-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"font-medium text-neutral-700 dark:text-neutral-200 text-base"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`description-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 dark:text-neutral-400 text-base"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.a"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"_blank"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-3 text-sm rounded-full font-bold bg-green-500 text-white"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"pt-4 relative px-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 text-xs md:text-sm lg:text-base h-40 md:h-fit pb-10 flex flex-col items-start gap-4 overflow-auto dark:text-neutral-400 [mask:linear-gradient(to_bottom,white,white,transparent)] [scrollbar-width:none] [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch]"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{typeof"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"function"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ul"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"max-w-2xl mx-auto w-full grid grid-cols-1 md:grid-cols-2 items-start gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`card-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"p-4 flex flex-col hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex gap-4 flex-col w-full"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`image-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-60 w-full rounded-lg object-cover object-top"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex justify-center items-center flex-col"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.h3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`title-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"font-medium text-neutral-800 dark:text-neutral-200 text-center md:text-left text-base"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`description-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-600 dark:text-neutral-400 text-center md:text-left text-base"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"CloseIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.05"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M0 0h24v24H0z"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M18 6l-12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"M6 6l12 12"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Lana Del Rey"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Summertime Sadness"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/lana-del-rey.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Visit"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Lana Del Rey, an iconic American singer-songwriter, is celebrated for"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" her melancholic and cinematic music style. Born Elizabeth Woolridge"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Grant in New York City, she has captivated audiences worldwide with"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" her haunting voice and introspective lyrics. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Her songs"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" often explore themes of tragic romance, glamour, and melancholia,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" drawing inspiration from both contemporary and vintage pop culture."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" With a career that has seen numerous critically acclaimed albums, Lana"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Del Rey has established herself as a unique and influential figure in"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" the music industry, earning a dedicated fan base and numerous"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" accolades."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Babbu Maan"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Mitran Di Chhatri"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/babbu-maan.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Visit"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Babu Maan, a legendary Punjabi singer, is renowned for his soulful"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" voice and profound lyrics that resonate deeply with his audience. Born"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" in the village of Khant Maanpur in Punjab, India, he has become a"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" cultural icon in the Punjabi music industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> His songs"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" often reflect the struggles and triumphs of everyday life, capturing"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" the essence of Punjabi culture and traditions. With a career spanning"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" over two decades, Babu Maan has released numerous hit albums and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" singles that have garnered him a massive fan following both in India"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Metallica"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"For Whom The Bell Tolls"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/metallica.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Visit"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Metallica, an iconic American heavy metal band, is renowned for their"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" powerful sound and intense performances that resonate deeply with"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" their audience. Formed in Los Angeles, California, they have become a"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" cultural icon in the heavy metal music industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> Their"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" songs often reflect themes of aggression, social issues, and personal"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" struggles, capturing the essence of the heavy metal genre. With a"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" career spanning over four decades, Metallica has released numerous hit"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" albums and singles that have garnered them a massive fan following"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" both in the United States and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Lord Himesh"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Aap Ka Suroor"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/aap-ka-suroor.jpeg"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaText"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Visit"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctaLink"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"https://ui.aceternity.com/templates"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Himesh Reshammiya, a renowned Indian music composer, singer, and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" actor, is celebrated for his distinctive voice and innovative"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" compositions. Born in Mumbai, India, he has become a prominent figure"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" in the Bollywood music industry. <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"br"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" /> His songs often feature"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" a blend of contemporary and traditional Indian music, capturing the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" essence of modern Bollywood soundtracks. With a career spanning over"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" two decades, Himesh Reshammiya has released numerous hit albums and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" singles that have garnered him a massive fan following both in India"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" and abroad."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})})]})})})})]})}function b(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var x=b;function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return E(w);})(); ;return Component;

Aceternity UI