@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/x/card-x.tsx

@@ -1,2597 +0,0 @@
-import React, { useState, useEffect, useRef, createContext } from 'react'
-import { cn } from '~/components/catalyst-ui'
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardAction,
-  CardImage,
-  CardHeart,
-  CardProduct,
-  cardVariants,
-  cardHeaderVariants,
-  cardTitleVariants,
-  cardDescriptionVariants,
-  cardContentVariants,
-  cardFooterVariants,
-  cardActionVariants,
-} from '~/components/catalyst-ui/primitives/card'
-import { Avatar, AvatarImage, AvatarFallback } from '~/components/catalyst-ui'
-import { Button } from '~/components/catalyst-ui'
-import { Badge } from '~/components/catalyst-ui'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '~/components/catalyst-ui'
-import type { LucideIcon } from 'lucide-react'
-import {
-  XIcon,
-  HeartIcon,
-  MessageCircleIcon,
-  RepeatIcon,
-  SendIcon,
-  BadgeCheckIcon,
-  UserPlusIcon,
-  EllipsisIcon,
-  StarIcon,
-  CircleFadingPlusIcon
-} from 'lucide-react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '~/components/catalyst-ui'
-
- /**
-* ★ ━━━━ ☆ ━━━━ CardX ━━━━ ☆ ━━━━ ★
-* type CardXType = 
-*   | 'default' | 'spotlight' | '3d' | 'closable' | 'tweet' | 'product'      // Interactive & Social
-*   | 'productTop' | 'productBottom' | 'productLeft' | 'productRight'        // Product Layouts
-*   | 'testimonial' | 'overlay' | 'horizontal' | 'topImage' | 'bottomImage'  // Content Display
-*   | 'meeting' | 'invite'                                                   // Functional
-* 
-* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
-* 
-* ★ ━━━━━━━━━ Default Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX className="max-w-md">
-*   <CardXHeader>
-*     <CardXTitle>Card Title</CardXTitle>
-*     <CardXDescription>Card description goes here</CardXDescription>
-*   </CardXHeader>
-*   <CardXContent>
-*     This is the default card content. You can put any content here.
-*   </CardXContent>
-*   <CardXFooter>
-*     <Button>Action</Button>
-*   </CardXFooter>
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Spotlight Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="spotlight">
-*   <CardXHeader>
-*     <CardXTitle>Spotlight Card</CardXTitle>
-*     <CardXDescription>Hover to see the effect</CardXDescription>
-*   </CardXHeader>
-*   <CardXContent>
-*     This card has a beautiful spotlight effect that follows your cursor.
-*   </CardXContent>
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ 3D Card ━━━━━━━━━ ★
-* ```jsx
-* <div className="card-3d-wrapper">
-*   <CardX card="3d" className="max-w-md">
-*     <CardXHeader>
-*       <CardXTitle>3D Interactive Card</CardXTitle>
-*       <CardXDescription>Hover to see 3D effect</CardXDescription>
-*     </CardXHeader>
-*     <CardXContent image="https://example.com/image.jpg">
-*       This card tilts in 3D when you hover over it.
-*     </CardXContent>
-*   </CardX>
-* </div>
-* ```
-* 
-* ★ ━━━━━━━━━ Closable Card ━━━━━━━━━ ★
-* ```jsx
-* {closableActive && (
-*   <CardX card="closable" className="max-w-md">
-*     <CardXHeader onClose={() => setClosableActive(false)}>
-*       Important Notice
-*     </CardXHeader>
-*     <CardXContent actionText="Got it">
-*       This is an important message that can be dismissed.
-*     </CardXContent>
-*   </CardX>
-* )}
-* ```
-* 
-* ★ ━━━━━━━━━ Tweet Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="tweet" className="max-w-md">
-*   <CardXHeader
-*     avatar="https://example.com/avatar.jpg"
-*     name="John Doe"
-*     handle="johndoe"
-*     verified={true}
-*   />
-*   <CardXContent image="https://example.com/image.jpg">
-*     Just shipped a new feature! Check it out and let me know what you think. 🚀
-*   </CardXContent>
-*   <CardXFooter
-*     state={tweetState}
-*     setState={setTweetState}
-*     likes="124"
-*     comments="32"
-*     retweets="18"
-*     shares="7"
-*   />
-* </CardX>
-* 
-* // Tweet state management
-* const [tweetState, setTweetState] = useState({
-*   liked: false,
-*   commented: false,
-*   retweeted: false,
-*   shared: false
-* });
-* ```
-* 
-* ★ ━━━━━━━━━ Product Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="product" className="max-w-md border-none">
-*   <CardXProduct src="https://example.com/product.jpg" liked={productLiked} setLiked={setProductLiked}>
-*     <Card className="border-none">
-*       <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-*       <CardXContent>
-*         Crossing hardwood comfort with off-court flair.
-*       </CardXContent>
-*       <CardXFooter price1="Price" price2="$129.99" buttonLabel="Add to cart" onAddToCart={() => console.log('Added')} />
-*     </Card>
-*   </CardXProduct>
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Product Card Layouts ━━━━━━━━━ ★
-* ```jsx
-* // Product Top Image
-* <CardX card="productTop" className="border-none">
-*   <CardXProduct src="https://example.com/product.jpg" liked={productLiked} setLiked={setProductLiked}>
-*     <Card className="border-none">
-*       <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-*       <CardXContent>Premium materials and timeless design.</CardXContent>
-*       <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-*     </Card>
-*   </CardXProduct>
-* </CardX>
-* 
-* // Product Bottom Image
-* <CardX card="productBottom" className="border-none">
-*   <CardXProduct src="https://example.com/product.jpg" liked={productLiked} setLiked={setProductLiked}>
-*     <Card className="border-none">
-*       <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-*       <CardXContent>Premium materials and timeless design.</CardXContent>
-*       <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-*     </Card>
-*   </CardXProduct>
-* </CardX>
-* 
-* // Product Left Image
-* <CardX card="productLeft" className="border-none">
-*   <CardXProduct src="https://example.com/product.jpg" liked={productLiked} setLiked={setProductLiked}>
-*     <Card className="border-none">
-*       <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-*       <CardXContent>Premium materials and timeless design.</CardXContent>
-*       <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-*     </Card>
-*   </CardXProduct>
-* </CardX>
-* 
-* // Product Right Image
-* <CardX card="productRight" className="border-none">
-*   <CardXProduct src="https://example.com/product.jpg" liked={productLiked} setLiked={setProductLiked}>
-*     <Card className="border-none">
-*       <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-*       <CardXContent>Premium materials and timeless design.</CardXContent>
-*       <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-*     </Card>
-*   </CardXProduct>
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Testimonial Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="testimonial" className="max-w-md">
-*   <CardXContent>
-*     "This product has completely transformed how I work. The attention to detail is incredible!"
-*   </CardXContent>
-*   <CardXFooter
-*     avatar="https://example.com/avatar.jpg"
-*     name="Sarah Johnson"
-*     handle="sarahj"
-*     rating={5}
-*   />
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Overlay Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="overlay">
-*   <CardXHeader>Stunning Destination</CardXHeader>
-*   <CardXContent image="https://example.com/image.jpg">
-*     Discover the beauty of nature in this breathtaking location.
-*   </CardXContent>
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Horizontal Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="horizontal" className="max-w-2xl">
-*   <CardXContent
-*     title="Featured Article"
-*     description="Learn about the latest trends"
-*     actionText="Read More"
-*   >
-*     <img
-*       src="https://example.com/image.jpg"
-*       alt="Article"
-*       className="h-full w-full rounded-l-xl object-cover"
-*     />
-*   </CardXContent>
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Top Image Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="topImage" className="max-w-md">
-*   <CardXContent image="https://example.com/image.jpg" />
-*   <CardXHeader>
-*     <CardXTitle>Beautiful Landscape</CardXTitle>
-*     <CardXDescription>Explore the wonders of nature</CardXDescription>
-*   </CardXHeader>
-*   <CardXFooter showActions onClick={() => console.log('explore')} onClick2={() => console.log('download')} />
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Bottom Image Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="bottomImage" className="max-w-md">
-*   <CardXHeader>
-*     <CardXTitle>Amazing View</CardXTitle>
-*     <CardXDescription>Experience the beauty</CardXDescription>
-*   </CardXHeader>
-*   <CardXContent image="https://example.com/image.jpg" />
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Meeting Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="meeting" className="max-w-md">
-*   <CardXHeader>
-*     <CardXTitle>Team Meeting</CardXTitle>
-*     <CardXDescription>Wednesday, 2:00 PM</CardXDescription>
-*   </CardXHeader>
-*   <CardXContent
-*     items={[
-*       'Review Q4 goals',
-*       'Discuss new project timeline',
-*       'Team feedback session'
-*     ]}
-*   >
-*     Join us for our weekly sync to align on priorities.
-*   </CardXContent>
-*   <CardXFooter
-*     avatars={[
-*       { src: 'https://example.com/avatar1.jpg', name: 'John', fallback: 'JD' },
-*       { src: 'https://example.com/avatar2.jpg', name: 'Sarah', fallback: 'SJ' }
-*     ]}
-*   />
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Invite Card ━━━━━━━━━ ★
-* ```jsx
-* <CardX card="invite" className="max-w-md">
-*   <CardXHeader>
-*     <CardXTitle>Team Members</CardXTitle>
-*     <CardXDescription>Manage your team</CardXDescription>
-*   </CardXHeader>
-*   <CardXContent
-*     showInvite
-*     members={[
-*       { avatar: 'https://example.com/avatar1.jpg', name: 'John Doe', role: 'Developer', fallback: 'JD' },
-*       { avatar: 'https://example.com/avatar2.jpg', name: 'Sarah Smith', role: 'Designer', fallback: 'SS' }
-*     ]}
-*   />
-* </CardX>
-* ```
-* 
-* ★ ━━━━━━━━━ Card Groups ━━━━━━━━━ ★
-* ```jsx
-* // Horizontal Card Group (Default)
-* <CardXGroup>
-*   <CardX>
-*     <CardXHeader>
-*       <CardXTitle>Card 1</CardXTitle>
-*     </CardXHeader>
-*     <CardXContent>First card content</CardXContent>
-*   </CardX>
-*   <CardX>
-*     <CardXHeader>
-*       <CardXTitle>Card 2</CardXTitle>
-*     </CardXHeader>
-*     <CardXContent>Second card content</CardXContent>
-*   </CardX>
-*   <CardX>
-*     <CardXHeader>
-*       <CardXTitle>Card 3</CardXTitle>
-*     </CardXHeader>
-*     <CardXContent>Third card content</CardXContent>
-*   </CardX>
-* </CardXGroup>
-* 
-* // Vertical Card Group
-* <CardXGroup variant="vertical" className="max-w-md">
-*   <CardX>
-*     <CardXHeader>
-*       <CardXTitle>First Card</CardXTitle>
-*     </CardXHeader>
-*     <CardXContent>Content for first card</CardXContent>
-*   </CardX>
-*   <CardX>
-*     <CardXHeader>
-*       <CardXTitle>Second Card</CardXTitle>
-*     </CardXHeader>
-*     <CardXContent>Content for second card</CardXContent>
-*   </CardX>
-*   <CardX>
-*     <CardXHeader>
-*       <CardXTitle>Third Card</CardXTitle>
-*     </CardXHeader>
-*     <CardXContent>Content for third card</CardXContent>
-*   </CardX>
-* </CardXGroup>
-* ```
-* 
-* ★ ━━━━━━━━━ Props ━━━━━━━━━ ★
-* 
-* CardX Props:
-* - `card`: CardXType - Specifies which variant to use
-* - `className`: string - Additional CSS classes
-* 
-* CardXHeader Props (for tweet variant):
-* - `avatar`: string - Avatar image URL
-* - `name`: string - Display name
-* - `handle`: string - Twitter handle
-* - `verified`: boolean - Show verified badge
-* 
-* CardXHeader Props (for product variant):
-* - `title`: string - Product title
-* - `info1`: string - Product info 1 (e.g., size)
-* - `info2`: string - Product info 2 (e.g., color)
-* 
-* CardXContent Props:
-* - `image`: string - Image URL to display
-* - `actionText`: string - Call to action text (for closable card)
-* - `items`: string[] - Bullet point items (for meeting card)
-* - `showInvite`: boolean - Show invite UI (for invite card)
-* - `members`: Array<{ avatar: string, name: string, role: string, fallback: string }> - Team members
-* 
-* CardXFooter Props (for tweet variant):
-* - `state`: { liked: boolean, commented: boolean, retweeted: boolean, shared: boolean }
-* - `setState`: (state) => void - State update function
-* - `likes`: string - Number of likes
-* - `comments`: string - Number of comments
-* - `retweets`: string - Number of retweets
-* - `shares`: string - Number of shares
-* 
-* CardXFooter Props (for testimonial variant):
-* - `avatar`: string - Reviewer avatar
-* - `name`: string - Reviewer name
-* - `handle`: string - Reviewer handle
-* - `rating`: number - Star rating 1-5
-* 
-* CardXFooter Props (for product variant):
-* - `price1`: string - Price label
-* - `price2`: string - Price amount
-* - `buttonLabel`: string - Button text
-* - `onAddToCart`: () => void - Add to cart callback
-* 
-* CardXFooter Props (for meeting variant):
-* - `avatars`: Array<{ src: string, name: string, fallback: string }> - Avatar list
-* 
-* CardXFooter Props (for general use):
-* - `showActions`: boolean - Show action buttons
-* - `onClick`: () => void - Primary action callback
-* - `onClick2`: () => void - Secondary action callback
-* 
-* CardXProduct Props:
-* - `src`: string - Product image URL
-* - `liked`: boolean - Whether product is liked
-* - `setLiked`: (liked: boolean) => void - Like state update
-* - `children`: ReactNode - Product content card
-* 
-* CardXGroup Props:
-* - `variant`: 'horizontal' | 'vertical' - Group layout direction
-* - `className`: string - Additional CSS classes
-* - `children`: ReactNode - CardX components
-* 
-*/
-
-
-// #endregion ===========================================================================
-// TYPE DEFINITIONS
-// #region  ===========================================================================
-type CardType =
-  | 'default'
-  | 'spotlight'
-  | '3d'
-  | 'closable'
-  | 'tweet'
-  | 'product'
-  | 'productTop'
-  | 'productBottom'
-  | 'productLeft'
-  | 'productRight'
-  | 'testimonial'
-  | 'overlay'
-  | 'horizontal'
-  | 'topImage'
-  | 'bottomImage'
-  | 'meeting'
-  | 'invite'
-
-
-interface CardContextValue {
-  variant?: string
-  size?: string
-  align?: string
-  card?: CardType
-  padding?: string
-  spacing?: string
-  position?: string
-  weight?: string
-  interactive?: boolean
-}
-
-const CardContext = createContext<CardContextValue>({})
-
-const useCardContext = () => useContext(CardContext)
-
-
-// #endregion ===========================================================================
-// CONTEXT
-// #region  ===========================================================================
-const CardXContext = React.createContext<CardType>('default')
-
-
-interface CardContextValue {
-  variant?: string
-  size?: string
-  interactive?: boolean
-}
-
-
-// #endregion ===========================================================================
-// CARDX PARENT WRAPPER
-// #region  ===========================================================================
-export function CardX({ card = 'default', variant, size, interactive, align, weight, spacing, padding, layout, justify,  gap, className, children, ...props }: any) {
-  const contextValue: CardContextValue = { card, variant, size, interactive, align, weight, spacing, padding, position, layout, justify,  gap, }
-  switch (card) {
-    case 'spotlight':
-      return (
-        <CardXContext.Provider value={card}>
-          <CardContext.Provider value={contextValue}>
-            <div className='h-max w-max'>
-              <div className='spotlight-card group bg-border relative overflow-hidden rounded-xl p-px transition-all duration-300 ease-in-out'>
-                <Card className={cn(cardVariants({ variant, size, interactive, align }), 'group-hover:bg-card/90 max-w-80 border-none transition-all duration-300 ease-in-out group-hover:backdrop-blur-[20px]', className)} {...props} >
-                  {children}
-                </Card>
-                <div className='blob absolute top-0 left-0 size-20 rounded-full bg-sky-600/60 opacity-0 blur-2xl transition-all duration-300 ease-in-out dark:bg-sky-400/60' />
-                <div className='fake-blob absolute top-0 left-0 size-20 rounded-full' />
-              </div>
-            </div>
-          </CardContext.Provider>
-        </CardXContext.Provider>
-      )
-
-    case 'overlay':
-      return (
-        <CardXContext.Provider value={card}>
-          <CardContext.Provider value={contextValue}>
-            <Card className={cn(cardVariants({ variant, size, interactive, align }), 'before:bg-primary/70 relative max-w-md py-0 before:absolute before:size-full before:rounded-xl', className)} {...props} >
-              {children}
-            </Card>
-          </CardContext.Provider>
-        </CardXContext.Provider>
-      )
-
-    default:
-      return (
-        <CardXContext.Provider value={card}>
-          <CardContext.Provider value={contextValue}>
-            <Card className={cn(cardVariants({ variant, size, interactive, align }), className)} {...props} >
-              {children}
-            </Card>
-          </CardContext.Provider>
-        </CardXContext.Provider>
-      )
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX HEADER - STRUCTURAL VARIANTS
-// #region  ===========================================================================
-export function CardXHeader({ children, ...props }: any) {
-  const { card, spacing, align } = useCardContext()
-
-  switch (card) {
-     case 'product':
-    case 'productTop':
-    case 'productBottom':
-    case 'productLeft':
-    case 'productRight':
-      return (
-        <CardHeader className={cn(cardHeaderVariants({ spacing, align }), props.className)}>
-          <CardTitle>{props.title}</CardTitle>
-          <CardDescription className='flex items-center gap-2'>
-            {props.info1 && <Badge variant='outline' className='rounded-sm'>{props.info1}</Badge>}
-            {props.info2 && <Badge variant='outline' className='rounded-sm'>{props.info2}</Badge>}
-            {children}
-          </CardDescription>
-        </CardHeader>
-      )
-    case 'tweet':
-      return (
-        <CardHeader className={cn(cardHeaderVariants({ spacing, align, }), 'flex-row items-center justify-between gap-3', props.className)}>
-          <div className='flex items-center gap-3'>
-            <Avatar className='ring-ring ring-2'>
-              <AvatarImage src={props.avatar} alt={props.name} />
-              <AvatarFallback className='text-xs'>{props.name?.[0]}</AvatarFallback>
-            </Avatar>
-            <div className='flex flex-col gap-0.5'>
-              <CardTitle className='flex items-center gap-1 text-sm'>
-                {props.name} {props.verified && <BadgeCheckIcon className='size-4 fill-sky-600 stroke-white dark:fill-sky-400' />}
-              </CardTitle>
-              <CardDescription>@{props.handle}</CardDescription>
-            </div>
-          </div>
-          <CardXAction />
-        </CardHeader>
-      )
-
-    case 'closable':
-      return (
-        <CardHeader className={cn(cardHeaderVariants({ spacing, align, }), 'relative', props.className)}>
-          <Button
-            variant='ghost'
-            size='icon'
-            onClick={props.onClose}
-            className='absolute top-2 right-2 rounded-full'
-          >
-            <XIcon />
-            <span className='sr-only'>Close</span>
-          </Button>
-          <CardTitle className='text-center'>{children}</CardTitle>
-        </CardHeader>
-      )
-
-    case 'overlay':
-      return (
-        <CardHeader className={cn(cardHeaderVariants({ spacing, align, }), 'text-primary-foreground w-full pt-6 absolute', props.className)}>
-          <CardTitle>{children}</CardTitle>
-        </CardHeader>
-      )
-
-    default:
-      return (
-        <CardHeader
-          className={cn(
-            cardHeaderVariants({
-              spacing,
-              align: align || (context.variant === 'default' ? 'left' : undefined)
-            }),
-            props.className
-          )}
-          {...props}
-        />
-      )
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX TITLE - PASSTHROUGH
-// #region  ===========================================================================
-export function CardXTitle({ ...props }: any) {
-  const { card, size, weight } = useCardContext()
-  switch (card) {
-    default:
-      return (
-        <CardTitle
-          className={cn(cardTitleVariants({ size, weight }), className)}
-          {...props}
-        />
-      )
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX DESCRIPTION - PASSTHROUGH
-// #region  ===========================================================================
-export function CardXDescription({ ...props }: any) {
-  const { card, size, } = useCardContext()
-
-  switch (card) {
-    default:
-      return (
-        <CardDescription
-          className={cn(cardDescriptionVariants({ size }), props.className)}
-          {...props}
-        />
-      )
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX ACTION - PASSTHROUGH
-// #region  ===========================================================================
-export function CardXAction({ onClick, items, ...props }: any) {
-  const { card, position } = useCardContext()
-  switch (card) {
-    case 'tweet':
-      return (
-        <div className='flex items-center gap-2'>
-          <Button variant='outline' size='sm' onClick={onClick}>
-            <UserPlusIcon />
-            Follow
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant='ghost' size='icon' aria-label='Toggle menu'>
-                <EllipsisIcon />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56" align="start">
-              <DropdownMenuGroup>
-                {items?.map((item: any, index: number) => (
-                  <DropdownMenuItem key={index} onSelect={item.onSelect}>
-                    {item.name}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )
-    default:
-      return (
-        <CardAction
-          data-slot="card-action"
-          className={cn(cardActionVariants({ position }), props.className)}
-          {...props}
-        />
-      )
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX CONTENT - STRUCTURAL VARIANTS
-// #region  ===========================================================================
-export function CardXContent({ children, ...props }: any) {
-  const { card, padding, spacing } = useCardContext()
-  const cardRef = useRef<HTMLDivElement>(null)
-  const imageRef = useRef<HTMLImageElement>(null)
-  const animationFrameRef = useRef<number | undefined>(undefined)
-  const lastMousePosition = useRef({ x: 0, y: 0 })
-  // Spotlight effect
-  useEffect(() => {
-    if (card !== 'spotlight') return
-
-    const all = document.querySelectorAll('.spotlight-card')
-
-    const handleMouseMove = (ev: MouseEvent) => {
-      all.forEach(e => {
-        const blob = e.querySelector('.blob') as HTMLElement
-        const fblob = e.querySelector('.fake-blob') as HTMLElement
-
-        if (!blob || !fblob) return
-
-        const rec = fblob.getBoundingClientRect()
-        blob.style.opacity = '1'
-
-        blob.animate(
-          [
-            {
-              transform: `translate(${ev.clientX - rec.left - rec.width / 2
-                }px, ${ev.clientY - rec.top - rec.height / 2}px)`
-            }
-          ],
-          {
-            duration: 300,
-            fill: 'forwards'
-          }
-        )
-      })
-    }
-
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [card])
-
-  // 3D effect
-  useEffect(() => {
-    if (card !== '3d') return
-
-    const card = cardRef.current?.closest('.card-3d-wrapper') as HTMLElement
-    const image = imageRef.current
-
-    if (!card || !image) return
-
-    let rect: DOMRect
-    let centerX: number
-    let centerY: number
-
-    const updateCardTransform = (mouseX: number, mouseY: number) => {
-      if (!rect) {
-        rect = card.getBoundingClientRect()
-        centerX = rect.left + rect.width / 2
-        centerY = rect.top + rect.height / 2
-      }
-
-      const relativeX = mouseX - centerX
-      const relativeY = mouseY - centerY
-
-      const cardTransform: CardTransform = {
-        rotateX: -relativeY * 0.035,
-        rotateY: relativeX * 0.035,
-        scale: 1.025
-      }
-
-      const imageTransform: CardTransform = {
-        rotateX: -relativeY * 0.025,
-        rotateY: relativeX * 0.025,
-        scale: 1.05
-      }
-
-      return { cardTransform, imageTransform }
-    }
-
-    const animate = () => {
-      const { cardTransform, imageTransform } = updateCardTransform(
-        lastMousePosition.current.x,
-        lastMousePosition.current.y
-      )
-
-      card.style.transform = `perspective(1000px) rotateX(${cardTransform.rotateX}deg) rotateY(${cardTransform.rotateY}deg) scale3d(${cardTransform.scale}, ${cardTransform.scale}, ${cardTransform.scale})`
-      card.style.boxShadow = '0 10px 35px rgba(0, 0, 0, 0.2)'
-
-      image.style.transform = `perspective(1000px) rotateX(${imageTransform.rotateX}deg) rotateY(${imageTransform.rotateY}deg) scale3d(${imageTransform.scale}, ${imageTransform.scale}, ${imageTransform.scale})`
-
-      animationFrameRef.current = requestAnimationFrame(animate)
-    }
-
-    const handleMouseMove = (e: MouseEvent) => {
-      lastMousePosition.current = { x: e.clientX, y: e.clientY }
-    }
-
-    const handleMouseEnter = () => {
-      card.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease'
-      image.style.transition = 'transform 0.2s ease'
-      animate()
-    }
-
-    const handleMouseLeave = () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current)
-      }
-
-      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
-      card.style.boxShadow = 'none'
-      card.style.transition = 'transform 0.5s ease, box-shadow 0.5s ease'
-
-      image.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
-      image.style.transition = 'transform 0.5s ease'
-    }
-
-    card.addEventListener('mouseenter', handleMouseEnter)
-    card.addEventListener('mousemove', handleMouseMove)
-    card.addEventListener('mouseleave', handleMouseLeave)
-
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current)
-      }
-      card.removeEventListener('mouseenter', handleMouseEnter)
-      card.removeEventListener('mousemove', handleMouseMove)
-      card.removeEventListener('mouseleave', handleMouseLeave)
-    }
-  }, [card])
-
-  switch (card) {
-    case '3d':
-      return (
-        <CardContent ref={cardRef} className={cn(cardContentVariants({ padding, spacing: 'loose' }), props.className)}>
-          <img
-            ref={imageRef}
-            src={props.image}
-            alt={props.imageAlt || 'Banner'}
-            className='aspect-video w-full rounded-md object-cover'
-            width={500}
-            height={500}
-          />
-          {children}
-        </CardContent>
-      )
-
-    case 'tweet':
-      return (
-        <CardContent className={cn(cardContentVariants({ padding, spacing: 'loose' }), 'text-sm', props.className)}>
-          {props.image && (
-            <img
-              src={props.image}
-              alt='Banner'
-              className='aspect-video w-full rounded-md object-cover'
-            />
-          )}
-          {children}
-        </CardContent>
-      )
-
-    case 'closable':
-      return (
-        <CardContent className={cn(cardContentVariants({ padding, spacing }), 'flex flex-col gap-4 text-center', props.className)}>
-          {children}
-          {props.actionText && <Button>{props.actionText}</Button>}
-        </CardContent>
-      )
-
-    case 'testimonial':
-      return (
-        <CardContent className={cn(cardContentVariants({ padding, spacing }), props.className)}>
-          {children}
-        </CardContent>
-      )
-
-    case 'overlay':
-      return (
-        <>
-          <CardContent className='px-0' >
-            <img
-              src={props.image}
-              alt='Banner'
-              className='h-70 w-112 rounded-xl'
-            />
-          </CardContent>
-          <CardContent className={cn(cardContentVariants({ padding, spacing }), 'text-primary-foreground/80 absolute', props.className)}>
-            {children}
-          </CardContent>
-        </>
-      )
-
-    case 'horizontal':
-      return (
-        <div className='flex items-center'>
-          <CardContent className={cn(cardContentVariants({ padding, spacing }), 'grow-1 px-0', props.className)}  >
-            {children}
-          </CardContent>
-          <div className='sm:min-w-54'>
-            <CardHeader className='pt-6'>
-              <CardTitle>{props.title}</CardTitle>
-              <CardDescription>{props.description}</CardDescription>
-            </CardHeader>
-            {props.actionText && (
-              <CardFooter className='gap-3 py-6'>
-                <Button className='bg-transparent bg-gradient-to-br from-purple-500 to-pink-500 text-white focus-visible:ring-pink-600/20'>
-                  {props.actionText}
-                </Button>
-              </CardFooter>
-            )}
-          </div>
-        </div>
-      )
-
-    case 'topImage':
-      return (
-        <CardContent className={cn(cardContentVariants({ padding, spacing }), 'px-0', props.className)} {...props}  >
-          <img
-            src={props.image}
-            alt='Banner'
-            className='aspect-video h-70 rounded-t-xl object-cover'
-          />
-        </CardContent>
-      )
-
-    case 'bottomImage':
-      return (
-        <CardContent className={cn(cardContentVariants({ padding, spacing }), 'px-0', props.className)} {...props}  >
-          <img
-            src={props.image}
-            alt='Banner'
-            className='aspect-video h-70 rounded-b-xl object-cover'
-          />
-        </CardContent>
-      )
-
-    case 'meeting':
-      return (
-        <CardContent className={cn(cardContentVariants({ padding, spacing }), 'text-sm', props.className)}>
-          <p>{props.children}</p>
-          {props.items && (
-            <ol className='mt-4 flex list-decimal flex-col gap-2 pl-6'>
-              {props.items.map((item: string, i: number) => (
-                <li key={i}>{item}</li>
-              ))}
-            </ol>
-          )}
-        </CardContent>
-      )
-
-    case 'invite':
-      return (
-        <CardContent className={cn(cardContentVariants({ padding, spacing }), 'grid gap-4 sm:grid-cols-2', props.className)}>
-          {props.showInvite && (
-            <div className='flex items-center gap-4'>
-              <CircleFadingPlusIcon />
-              <span className='text-sm font-semibold'>Invite Member</span>
-            </div>
-          )}
-          {props.members?.map((member: any, i: number) => (
-            <div key={i} className='flex items-center gap-4'>
-              <Avatar>
-                <AvatarImage src={member.avatar} alt={member.name} />
-                <AvatarFallback className='text-xs'>{member.fallback}</AvatarFallback>
-              </Avatar>
-              <div className='flex flex-col'>
-                <span className='text-sm font-semibold'>{member.name}</span>
-                <span className='text-muted-foreground text-sm'>{member.role}</span>
-              </div>
-            </div>
-          ))}
-        </CardContent>
-      )
-
-    default:
-      return <CardContent className={cn(cardContentVariants({ padding, spacing }), props.className)} {...props} />
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX FOOTER - STRUCTURAL VARIANTS
-// #region  ===========================================================================
-export function CardXFooter({ state = {
-  liked: false,
-  commented: false,
-  retweeted: false,
-  shared: false
-},
-  setState,
-  className,
-children,
-  ...props
-}: any) {
-  const { card, layout, justify, align, gap, } = useCardContext()
-  /**const [state, setState] = useState({
-    liked: false,
-    commented: false,
-    retweeted: false,
-    shared: false
-  })
-  
-  // Pass to CardXFooter
-  <CardXFooter 
-    state={tweetState}
-    setState={setTweetState}
-  /> */
-  switch (card) {
-     case 'product':
-    case 'productTop':
-    case 'productBottom':
-    case 'productLeft':
-    case 'productRight':
-      return (
-        <CardFooter className={cn(cardFooterVariants({ layout, justify: justify || 'between', align, gap: gap || 'md' }), 'max-sm:flex-col max-sm:items-stretch', props.className)}>
-          <div className='flex flex-col'>
-            <span className='text-sm font-medium uppercase'>{props.price1 || 'Price'}</span>
-            <span className='text-xl font-semibold'>{props.price2}</span>
-          </div>
-          {children}
-          {props.buttonLabel && <Button size='lg' onClick={props.onAddToCart}>{props.buttonLabel}</Button>}
-        </CardFooter>
-      )
-    case 'tweet':
-      return (
-        <CardFooter className={cn(cardFooterVariants({ layout, justify, align, gap: gap || 'sm' }), props.className)}>
-          <Button variant='ghost' size='sm' onClick={() => setState((prev) => ({
-            ...prev,
-            liked: !prev.liked
-          }))}>
-            <HeartIcon className={cn(props.state?.liked && 'fill-destructive stroke-destructive')} />
-            {state.likes || '0'}
-          </Button>
-          <Button variant='ghost' size='sm' onClick={() => setState((prev) => ({
-            ...prev,
-            commented: !prev.commented
-          }))}>
-            <MessageCircleIcon />
-            {state.comments || '0'}
-          </Button>
-          <Button variant='ghost' size='sm' onClick={() => setState((prev) => ({
-            ...prev,
-            retweeted: !prev.retweeted
-          }))}>
-            <RepeatIcon />
-            {state.retweets || '0'}
-          </Button>
-          <Button variant='ghost' size='sm' onClick={() => setState((prev) => ({
-            ...prev,
-            shared: !prev.shared
-          }))}>
-            <SendIcon />
-            {state.shares || '0'}
-          </Button>
-        </CardFooter>
-      )
-
-    case 'testimonial':
-      return (
-        <CardFooter className={cn(cardFooterVariants({ layout, justify: justify || 'between',  align, gap }), 'max-sm:flex-col max-sm:items-stretch', props.className)}>
-          <div className='flex items-center gap-3'>
-            <Avatar className='ring-ring ring-2'>
-              <AvatarImage src={props.avatar} alt={props.name} />
-              <AvatarFallback className='text-xs'>{props.name?.[0]}</AvatarFallback>
-            </Avatar>
-            <div className='flex flex-col gap-0.5'>
-              <CardTitle className='flex items-center gap-1 text-sm'>{props.name}</CardTitle>
-              <CardDescription>@{props.handle}</CardDescription>
-            </div>
-          </div>
-          <div className='flex items-center gap-1'>
-            {[...Array(5)].map((_, i) => (
-              <StarIcon
-                key={i}
-                className={cn(
-                  'size-5',
-                  i < (props.rating || 5)
-                    ? 'fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400'
-                    : 'stroke-amber-500 dark:stroke-amber-400'
-                )}
-              />
-            ))}
-          </div>
-        </CardFooter>
-      )
-
-    case 'topImage':
-      if (!props.showActions) return null
-      return (
-        <CardFooter className={cn(cardFooterVariants({ layout, justify, align, gap }), 'max-sm:flex-col max-sm:items-stretch', props.className)}>
-          <Button onClick={props.onClick}>Explore More</Button>
-          <Button onClick={props.onClick2} variant='outline'>Download Now</Button>
-        </CardFooter>
-      )
-
-    case 'meeting':
-      if (!props.avatars) return null
-      return (
-        <CardFooter className={cn(cardFooterVariants({ layout, justify, align, gap }), props.className)}>
-          <div className='flex -space-x-2 hover:space-x-1'>
-            {props.avatars.map((avatar: any, index: number) => (
-              <Avatar key={index} className='ring-background ring-2 transition-all duration-300 ease-in-out'>
-                <AvatarImage src={avatar.src} alt={avatar.name} />
-                <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-              </Avatar>
-            ))}
-          </div>
-        </CardFooter>
-      )
-case 'product':
-case 'productTop':
-case 'productBottom':
-case 'productLeft':
-case 'productRight':
-  break;
-    default:
-      return <CardFooter className={cn(cardFooterVariants({ layout, justify, align, gap }), className)}      {...props} />
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX IMAGE - STRUCTURAL VARIANTS
-// #region  ===========================================================================
-export function CardXImage({ ...props }: any) {
-  const { card,  } = useCardContext()
-
-  switch (card) {
-    default:
-      return <CardImage {...props} />
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX HEART - STRUCTURAL VARIANTS
-// #region  ===========================================================================
-export function CardXHeart({ filled, ...props }: any) {
-  const [liked, setLiked] = useState(filled || false)
-  const { card,  } = useCardContext()
-
-  switch (card) {
-    case 'product':
-      return (
-        <Button
-          size='icon'
-          onClick={() => setLiked(!liked)}
-          className='bg-primary/10 hover:bg-primary/20 absolute top-4 right-4 rounded-full'
-        >
-          <CardHeart filled={liked} className={cn('h-4 w-4', liked ? 'fill-destructive stroke-destructive' : 'stroke-white')} />
-          <span className='sr-only'>Like</span>
-        </Button>
-      )
-
-    default:
-      return <CardHeart {...props} />
-  }
-}
-
-// #endregion ===========================================================================
-// CARDX PRODUCT - STRUCTURAL VARIANTS
-// #region  ===========================================================================
-export function CardXProduct({ variant, filled, ...props }: any) {
-  const { card,  } = useCardContext()
-  switch (card) {
-    case 'productTop':
-      return (
-        <div className='relative max-w-md rounded-xl bg-gradient-to-r from-neutral-600 to-violet-300 pt-0 shadow-lg'>
-          <div className='flex h-60 items-center justify-center'>
-            <img src={props.src} alt='product' className='w-75' />
-          </div>
-          <Button
-            size='icon'
-            onClick={() => props.setLiked(!props.liked)}
-            className='bg-primary/10 hover:bg-primary/20 absolute top-4 right-4 rounded-full'
-          >
-            <HeartIcon className={cn(props.liked ? 'fill-destructive stroke-destructive' : 'stroke-white')} />
-            <span className='sr-only'>Like</span>
-          </Button>
-          {props.children}
-        </div>
-      )
-    case 'productBottom':
-      return (
-        <div className='relative max-w-md rounded-xl bg-gradient-to-r from-neutral-600 to-violet-300 pt-0 shadow-lg'>
-          {props.children}
-          <div className='flex h-60 items-center justify-center'>
-            <img src={props.src} alt='product' className='w-75' />
-          </div>
-          <Button
-            size='icon'
-            onClick={() => props.setLiked(!props.liked)}
-            className='bg-primary/10 hover:bg-primary/20 absolute top-4 right-4 rounded-full'
-          >
-            <HeartIcon className={cn(props.liked ? 'fill-destructive stroke-destructive' : 'stroke-white')} />
-            <span className='sr-only'>Like</span>
-          </Button>
-        </div>
-      )
-    case 'productLeft':
-      return (
-        <div className='relative flex items-center max-w-md rounded-xl bg-gradient-to-r from-neutral-600 to-violet-300 pt-0 shadow-lg'>
-
-          <div className='flex h-60 items-center justify-center'>
-            <img src={props.src} alt='product' className='w-75' />
-          </div>
-          <Button
-            size='icon'
-            onClick={() => props.setLiked(!props.liked)}
-            className='bg-primary/10 hover:bg-primary/20 absolute top-4 right-4 rounded-full'
-          >
-            <HeartIcon className={cn(props.liked ? 'fill-destructive stroke-destructive' : 'stroke-white')} />
-            <span className='sr-only'>Like</span>
-          </Button>
-          {props.children}
-        </div>
-      )
-    case 'productRight':
-      return (
-        <div className='relative flex items-center max-w-md rounded-xl bg-gradient-to-r from-neutral-600 to-violet-300 pt-0 shadow-lg'>
-          {props.children}
-          <div className='flex h-60 items-center justify-center'>
-            <img src={props.src} alt='product' className='w-75' />
-          </div>
-          <Button
-            size='icon'
-            onClick={() => props.setLiked(!props.liked)}
-            className='bg-primary/10 hover:bg-primary/20 absolute top-4 right-4 rounded-full'
-          >
-            <HeartIcon className={cn(props.liked ? 'fill-destructive stroke-destructive' : 'stroke-white')} />
-            <span className='sr-only'>Like</span>
-          </Button>
-        </div>
-      )
-    default:
-      return <CardHeart {...props} />
-  }
-}
-
-
-export function CardXGroup({ variant, className, children }: any) {
-  switch (variant) {
-    case 'vertical':
-      return (
-        <div className={cn('flex flex-col *:rounded-none *:shadow-none *:not-last:border-b-0 *:first:rounded-t-xl *:last:rounded-b-xl', className)}>
-          {children}
-        </div>
-      )
-    default:
-      return (
-        <div className={cn('flex *:rounded-none *:shadow-none max-xl:flex-col max-xl:*:not-last:border-b-0 max-xl:*:first:rounded-t-xl max-xl:*:last:rounded-b-xl xl:*:not-last:border-r-0 xl:*:first:rounded-l-xl xl:*:last:rounded-r-xl', className)}>
-          {children}
-        </div>
-      )
-  }
-}
-
-// #endregion ===========================================================================
-// DEMO COMPONENT
-// #region  ===========================================================================
-export function CardXDemo() {
-  const [closableActive, setClosableActive] = useState(true)
-  const [tweetState, setTweetState] = useState({
-    liked: false,
-    commented: false,
-    retweeted: false,
-    shared: false
-  })
-  const [productLiked, setProductLiked] = useState(false)
-
-  return (
-    <div className="space-y-12 p-6 max-w-5xl mx-auto">
-      {/* Default */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Default</h3>
-        <CardX className="max-w-md">
-          <CardXHeader>
-            <CardXTitle>Card Title</CardXTitle>
-            <CardXDescription>Card description goes here</CardXDescription>
-          </CardXHeader>
-          <CardXContent>
-            This is the default card content. You can put any content here.
-          </CardXContent>
-          <CardXFooter>
-            <Button>Action</Button>
-          </CardXFooter>
-        </CardX>
-      </div>
-
-      {/* Spotlight */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Spotlight</h3>
-        <CardX card="spotlight">
-          <CardXHeader>
-            <CardXTitle>Spotlight Card</CardXTitle>
-            <CardXDescription>Hover to see the effect</CardXDescription>
-          </CardXHeader>
-          <CardXContent>
-            This card has a beautiful spotlight effect that follows your cursor.
-          </CardXContent>
-        </CardX>
-      </div>
-
-      {/* 3D */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">3D Card</h3>
-        <div className="card-3d-wrapper">
-          <CardX card="3d" className="max-w-md">
-            <CardXHeader>
-              <CardXTitle>3D Interactive Card</CardXTitle>
-              <CardXDescription>Hover to see 3D effect</CardXDescription>
-            </CardXHeader>
-            <CardXContent image="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=500&h=300&fit=crop">
-              This card tilts in 3D when you hover over it.
-            </CardXContent>
-          </CardX>
-        </div>
-      </div>
-
-      {/* Closable */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Closable</h3>
-        {closableActive && (
-          <CardX card="closable" className="max-w-md">
-            <CardXHeader onClose={() => setClosableActive(false)}>
-              Important Notice
-            </CardXHeader>
-            <CardXContent actionText="Got it">
-              This is an important message that can be dismissed.
-            </CardXContent>
-          </CardX>
-        )}
-      </div>
-
-      {/* Tweet */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Tweet Card</h3>
-        <CardX card="tweet" className="max-w-md">
-          <CardXHeader
-            avatar="https://avatar.vercel.sh/john"
-            name="John Doe"
-            handle="johndoe"
-            verified={true}
-          />
-          <CardXContent image="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=500&h=300&fit=crop">
-            Just shipped a new feature! Check it out and let me know what you think. 🚀
-          </CardXContent>
-          <CardXFooter
-            state={tweetState}
-            setState={setTweetState}
-            likes="124"
-            comments="32"
-            retweets="18"
-            shares="7"
-          />
-        </CardX>
-      </div>
-
-      {/* Product */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Product Card</h3>
-        <CardX card="product" className="max-w-md border-none">
-          <CardXProduct src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&fit=crop" liked={productLiked} setLiked={setProductLiked}>
-            <Card className="border-none">
-              <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-              <CardXContent>
-                Crossing hardwood comfort with off-court flair. '80s-Inspired construction, bold details and nothin'-but-net style.
-              </CardXContent>
-              <CardXFooter price1="Price" price2="$129.99" buttonLabel="Add to cart" onAddToCart={() => console.log('Added')} />
-            </Card>
-          </CardXProduct>
-        </CardX>
-      </div>
-
-      {/* Product Top */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Product Top</h3>
-        <CardX card="productTop" className="border-none">
-          <CardXProduct src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&fit=crop" liked={productLiked} setLiked={setProductLiked}>
-            <Card className="border-none">
-              <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-              <CardXContent>
-                Premium materials and timeless design.
-              </CardXContent>
-              <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-            </Card>
-          </CardXProduct>
-        </CardX>
-      </div>
-
-      {/* Product Bottom */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Product Bottom</h3>
-        <CardX card="productBottom" className="border-none">
-          <CardXProduct src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&fit=crop" liked={productLiked} setLiked={setProductLiked}>
-            <Card className="border-none">
-              <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-              <CardXContent>
-                Premium materials and timeless design.
-              </CardXContent>
-              <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-            </Card>
-          </CardXProduct>
-        </CardX>
-      </div>
-
-      {/* Product Left */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Product Left</h3>
-        <CardX card="productLeft" className="border-none">
-          <CardXProduct src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&fit=crop" liked={productLiked} setLiked={setProductLiked}>
-            <Card className="border-none">
-              <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-              <CardXContent>
-                Premium materials and timeless design.
-              </CardXContent>
-              <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-            </Card>
-          </CardXProduct>
-        </CardX>
-      </div>
-
-      {/* Product Right */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Product Right</h3>
-        <CardX card="productRight" className="border-none">
-          <CardXProduct src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&fit=crop" liked={productLiked} setLiked={setProductLiked}>
-            <Card className="border-none">
-              <CardXHeader title="Nike Air Max" info1="EU42" info2="Black/White" />
-              <CardXContent>
-                Premium materials and timeless design.
-              </CardXContent>
-              <CardXFooter price2="$129.99" buttonLabel="Buy Now" />
-            </Card>
-          </CardXProduct>
-        </CardX>
-      </div>
-
-      {/* Testimonial */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Testimonial</h3>
-        <CardX card="testimonial" className="max-w-md">
-          <CardXContent>
-            "This product has completely transformed how I work. The attention to detail is incredible!"
-          </CardXContent>
-          <CardXFooter
-            avatar="https://avatar.vercel.sh/sarah"
-            name="Sarah Johnson"
-            handle="sarahj"
-            rating={5}
-          />
-        </CardX>
-      </div>
-
-      {/* Overlay */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Overlay</h3>
-        <CardX card="overlay">
-          <CardXHeader>Stunning Destination</CardXHeader>
-          <CardXContent image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop">
-            Discover the beauty of nature in this breathtaking location.
-          </CardXContent>
-        </CardX>
-      </div>
-
-      {/* Horizontal */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Horizontal</h3>
-        <CardX card="horizontal" className="max-w-2xl">
-          <CardXContent
-            title="Featured Article"
-            description="Learn about the latest trends"
-            actionText="Read More"
-          >
-            <img
-              src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=300&h=200&fit=crop"
-              alt="Article"
-              className="h-full w-full rounded-l-xl object-cover"
-            />
-          </CardXContent>
-        </CardX>
-      </div>
-
-      {/* Top Image */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Top Image</h3>
-        <CardX card="topImage" className="max-w-md">
-          <CardXContent image="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=500&h=300&fit=crop" />
-          <CardXHeader>
-            <CardXTitle>Beautiful Landscape</CardXTitle>
-            <CardXDescription>Explore the wonders of nature</CardXDescription>
-          </CardXHeader>
-          <CardXFooter showActions onClick={() => console.log('explore')} onClick2={() => console.log('download')} />
-        </CardX>
-      </div>
-
-      {/* Bottom Image */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Bottom Image</h3>
-        <CardX card="bottomImage" className="max-w-md">
-          <CardXHeader>
-            <CardXTitle>Amazing View</CardXTitle>
-            <CardXDescription>Experience the beauty</CardXDescription>
-          </CardXHeader>
-          <CardXContent image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop" />
-        </CardX>
-      </div>
-
-      {/* Meeting */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Meeting</h3>
-        <CardX card="meeting" className="max-w-md">
-          <CardXHeader>
-            <CardXTitle>Team Meeting</CardXTitle>
-            <CardXDescription>Wednesday, 2:00 PM</CardXDescription>
-          </CardXHeader>
-          <CardXContent
-            items={[
-              'Review Q4 goals',
-              'Discuss new project timeline',
-              'Team feedback session'
-            ]}
-          >
-            Join us for our weekly sync to align on priorities.
-          </CardXContent>
-          <CardXFooter
-            avatars={[
-              { src: 'https://avatar.vercel.sh/john', name: 'John', fallback: 'JD' },
-              { src: 'https://avatar.vercel.sh/sarah', name: 'Sarah', fallback: 'SJ' },
-              { src: 'https://avatar.vercel.sh/mike', name: 'Mike', fallback: 'MW' }
-            ]}
-          />
-        </CardX>
-      </div>
-
-      {/* Invite */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Invite</h3>
-        <CardX card="invite" className="max-w-md">
-          <CardXHeader>
-            <CardXTitle>Team Members</CardXTitle>
-            <CardXDescription>Manage your team</CardXDescription>
-          </CardXHeader>
-          <CardXContent
-            showInvite
-            members={[
-              { avatar: 'https://avatar.vercel.sh/john', name: 'John Doe', role: 'Developer', fallback: 'JD' },
-              { avatar: 'https://avatar.vercel.sh/sarah', name: 'Sarah Smith', role: 'Designer', fallback: 'SS' },
-              { avatar: 'https://avatar.vercel.sh/mike', name: 'Mike Wilson', role: 'Manager', fallback: 'MW' }
-            ]}
-          />
-        </CardX>
-      </div>
-
-      {/* Card Group Vertical */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Card Group - Vertical</h3>
-        <CardXGroup variant="vertical" className="max-w-md">
-          <CardX>
-            <CardXHeader>
-              <CardXTitle>First Card</CardXTitle>
-            </CardXHeader>
-            <CardXContent>Content for first card</CardXContent>
-          </CardX>
-          <CardX>
-            <CardXHeader>
-              <CardXTitle>Second Card</CardXTitle>
-            </CardXHeader>
-            <CardXContent>Content for second card</CardXContent>
-          </CardX>
-          <CardX>
-            <CardXHeader>
-              <CardXTitle>Third Card</CardXTitle>
-            </CardXHeader>
-            <CardXContent>Content for third card</CardXContent>
-          </CardX>
-        </CardXGroup>
-      </div>
-
-      {/* Card Group Horizontal */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Card Group - Horizontal</h3>
-        <CardXGroup>
-          <CardX>
-            <CardXHeader>
-              <CardXTitle>Card 1</CardXTitle>
-            </CardXHeader>
-            <CardXContent>First card content</CardXContent>
-          </CardX>
-          <CardX>
-            <CardXHeader>
-              <CardXTitle>Card 2</CardXTitle>
-            </CardXHeader>
-            <CardXContent>Second card content</CardXContent>
-          </CardX>
-          <CardX>
-            <CardXHeader>
-              <CardXTitle>Card 3</CardXTitle>
-            </CardXHeader>
-            <CardXContent>Third card content</CardXContent>
-          </CardX>
-        </CardXGroup>
-      </div>
-    </div>
-  )
-}
-export function CardXDemo1() {
-  const [closableVisible, setClosableVisible] = useState(true)
-
-  const avatars = [
-    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png', name: 'User 1', fallback: 'U1' },
-    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png', name: 'User 2', fallback: 'U2' },
-    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', name: 'User 3', fallback: 'U3' },
-  ]
-
-  const members = [
-    { name: 'Jimmy Anderson', role: 'UI Designer', avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png', fallback: 'JA' },
-    { name: 'Dean Ambrose', role: 'UX Designer', avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png', fallback: 'DA' },
-    { name: 'Anita John', role: 'Branding', avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', fallback: 'AJ' },
-  ]
-
-  const dropdownItems = [
-    { name: 'View Profile', onSelect: () => console.log('View Profile') },
-    { name: 'Mute', onSelect: () => console.log('Mute') },
-    { name: 'Block', onSelect: () => console.log('Block') },
-    { name: 'Report', onSelect: () => console.log('Report') },
-  ]
-
-  return (
-    <div className='space-y-12 p-6 max-w-4xl mx-auto'>
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Default Card</h3>
-        <CardX className='max-w-md'>
-          <CardXHeader>
-            <CardXTitle>Default Card</CardXTitle>
-            <CardXDescription>This is the standard card layout</CardXDescription>
-          </CardXHeader>
-          <CardXContent>
-            Basic card content goes here with no special variants applied.
-          </CardXContent>
-          <CardXFooter>
-            <Button>Action</Button>
-          </CardXFooter>
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Spotlight Card</h3>
-        <CardX card='spotlight'>
-          <CardXHeader>
-            <CardXTitle>Hover for the Glow-Up</CardXTitle>
-          </CardXHeader>
-          <CardXContent>
-            Glide your cursor here and watch magic unfold — an experience designed just for you.
-          </CardXContent>
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>3D Hover Card</h3>
-        <div className='card-3d-wrapper'>
-          <CardX card='3d' className='max-w-md'>
-            <CardXHeader>
-              <CardXTitle>Dynamic 3D Hover Card</CardXTitle>
-            </CardXHeader>
-            <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-10.png?width=350&format=auto'>
-              Experience interactive depth and motion with this sleek 3D hover effect.
-            </CardXContent>
-          </CardX>
-        </div>
-      </div>
-
-      {closableVisible && (
-        <div>
-          <h3 className='text-lg font-semibold mb-4'>Closable Card</h3>
-          <CardX card='closable' className='max-w-lg shadow-none'>
-            <CardXHeader onClose={() => setClosableVisible(false)}>
-              Have a project in mind
-            </CardXHeader>
-            <CardXContent actionText='Contact Our Team'>
-              Let's discuss! Our Assistant team is excited to hear about your projects, ideas and questions.
-            </CardXContent>
-          </CardX>
-        </div>
-      )}
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Tweet Card</h3>
-        <CardX card='tweet' className='max-w-md'>
-          <CardXHeader
-            name='Philip George'
-            handle='philip20'
-            verified
-            showFollow
-            avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'
-          />
-          <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-6.png?width=350&format=auto'>
-            Lost in the colors of the night 🌌✨ Sometimes the blur reveals more than clarity. #AbstractVibes #Dreamscape
-          </CardXContent>
-          <CardXFooter likes='2.1K' comments='1.4K' retweets='669' shares='1.1K' />
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Product Card</h3>
-        <CardX card='product' className='max-w-md border-none'>
-          <div className='relative rounded-xl bg-gradient-to-r from-neutral-600 to-violet-300 shadow-lg'>
-            <div className='flex h-60 items-center justify-center'>
-              <img
-                src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-11.png?width=300&format=auto'
-                alt='Nike Jordan Air Rev'
-                className='w-75'
-              />
-            </div>
-            <CardXHeart />
-            <Card className='border-none'>
-              <CardXHeader>
-                <CardXTitle>Nike Jordan Air Rev</CardXTitle>
-                <CardXDescription className='flex items-center gap-2'>
-                  <Badge variant='outline' className='rounded-sm'>EU38</Badge> 
-                  <Badge variant='outline' className='rounded-sm'>Black and White</Badge> 
-                </CardXDescription>
-              </CardXHeader>
-              <CardXContent>
-                Crossing hardwood comfort with off-court flair. '80s-Inspired construction, bold details and nothin'-but-net style.
-              </CardXContent>
-              <CardXFooter className='justify-between gap-3 max-sm:flex-col max-sm:items-stretch'>
-                <div className='flex flex-col'>
-                  <span className='text-sm font-medium uppercase'>Price</span>
-                  <span className='text-xl font-semibold'>$69.99</span>
-                </div>
-                <Button size='lg'>Add to cart</Button>
-              </CardXFooter>
-            </Card>
-          </div>
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Product Card - Top Image</h3>
-        <CardXProduct card='productTop' src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-11.png?width=300&format=auto'>
-          <Card className='border-none'>
-            <CardXHeader>
-              <CardXTitle>Premium Sneakers</CardXTitle>
-              <CardXDescription>Limited Edition</CardXDescription>
-            </CardXHeader>
-            <CardXContent>
-              Top-quality materials and craftsmanship.
-            </CardXContent>
-            <CardXFooter className='justify-between'>
-              <span className='text-xl font-semibold'>$129.99</span>
-              <Button>Buy Now</Button>
-            </CardXFooter>
-          </Card>
-        </CardXProduct>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Product Card - Bottom Image</h3>
-        <CardXProduct card='productBottom' src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-11.png?width=300&format=auto'>
-          <Card className='border-none'>
-            <CardXHeader>
-              <CardXTitle>Sport Edition</CardXTitle>
-              <CardXDescription>Performance Ready</CardXDescription>
-            </CardXHeader>
-            <CardXContent>
-              Designed for maximum comfort and style.
-            </CardXContent>
-            <CardXFooter className='justify-between'>
-              <span className='text-xl font-semibold'>$99.99</span>
-              <Button>Add to Cart</Button>
-            </CardXFooter>
-          </Card>
-        </CardXProduct>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Product Card - Left Image</h3>
-        <CardXProduct card='productLeft' src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-11.png?width=300&format=auto'>
-          <Card className='border-none'>
-            <CardXHeader>
-              <CardXTitle>Classic Style</CardXTitle>
-              <CardXDescription>Timeless Design</CardXDescription>
-            </CardXHeader>
-            <CardXContent>
-              Perfect for everyday wear.
-            </CardXContent>
-            <CardXFooter className='justify-between'>
-              <span className='text-xl font-semibold'>$89.99</span>
-              <Button>Shop Now</Button>
-            </CardXFooter>
-          </Card>
-        </CardXProduct>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Product Card - Right Image</h3>
-        <CardXProduct card='productRight' src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-11.png?width=300&format=auto'>
-          <Card className='border-none'>
-            <CardXHeader>
-              <CardXTitle>Modern Collection</CardXTitle>
-              <CardXDescription>Latest Release</CardXDescription>
-            </CardXHeader>
-            <CardXContent>
-              Contemporary design meets comfort.
-            </CardXContent>
-            <CardXFooter className='justify-between'>
-              <span className='text-xl font-semibold'>$119.99</span>
-              <Button>Purchase</Button>
-            </CardXFooter>
-          </Card>
-        </CardXProduct>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Testimonial Card</h3>
-        <CardX card='testimonial' className='max-w-md border-none'>
-          <CardXContent>
-            Incredible time-saver! shadcn/studio has made UI development a breeze. The pre build components are not only visually appealing but also highly customizable.
-          </CardXContent>
-          <CardXFooter
-            name='Sam Green'
-            handle='SamG11'
-            avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'
-            rating={4}
-          />
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Overlay Card</h3>
-        <CardX card='overlay'>
-          <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-8.png?widht=448&height=280&format=auto'>
-            Step into a world where imagination takes the lead and every pixel tells a story.
-          </CardXContent>
-          <CardXHeader>Creative Catalyst</CardXHeader>
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Horizontal Card</h3>
-        <CardX card='horizontal' className='max-w-lg py-0 sm:flex-row sm:gap-0'>
-          <CardXContent
-            title='Dreamy Colorwave Gradient'
-            description='A smooth blend of vibrant pinks, purples, and blues for a magical touch.'
-            image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-3.png'
-            actionText='Explore More'
-          >
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-3.png'
-              alt='Banner'
-              className='size-full rounded-l-xl'
-            />
-          </CardXContent>
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Top Image Card</h3>
-        <CardX card='topImage' className='max-w-md pt-0'>
-          <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-2.png?height=280&format=auto' />
-          <CardXHeader>
-            <CardXTitle>Ethereal Swirl Gradient</CardXTitle>
-            <CardXDescription>Smooth, flowing gradients blending rich reds and blues in an abstract swirl.</CardXDescription>
-          </CardXHeader>
-          <CardXFooter showActions />
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Bottom Image Card</h3>
-        <CardX card='bottomImage' className='max-w-md pb-0'>
-          <CardXHeader>
-            <CardXTitle>Fluid Gradient Flow</CardXTitle>
-            <CardXDescription>A vibrant and abstract background with smooth gradient curves.</CardXDescription>
-          </CardXHeader>
-          <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-1.png?height=280&format=auto' />
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Meeting Notes Card</h3>
-        <CardX card='meeting' className='max-w-md'>
-          <CardXHeader>
-            <CardXTitle>Meeting Notes</CardXTitle>
-            <CardXDescription>Transcript from the meeting with the client.</CardXDescription>
-          </CardXHeader>
-          <CardXContent items={[
-            'New analytics widgets for daily/weekly metrics',
-            'Simplified navigation menu',
-            'Dark mode support',
-            'Timeline: 6 weeks',
-            'Follow-up meeting scheduled for next Tuesday'
-          ]}>
-            Client requested dashboard redesign with focus on mobile responsiveness.
-          </CardXContent>
-          <CardXFooter avatars={avatars} />
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Invite Card</h3>
-        <CardX card='invite' className='w-full max-w-lg'>
-          <CardXHeader>
-            <CardXTitle>Team Members</CardXTitle>
-          </CardXHeader>
-          <CardXContent showInvite members={members} />
-        </CardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Card Group - Horizontal (Default)</h3>
-        <CardXGroup>
-          <CardX card='topImage' className='overflow-hidden pt-0'>
-            <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-7.png?width=368&format=auto' />
-            <CardXHeader>
-              <CardXTitle>Mystical Blue Swirl</CardXTitle>
-              <CardXDescription>
-                Dive into the depths of an enchanting swirl where vibrant blues and soft pinks merge seamlessly.
-              </CardXDescription>
-            </CardXHeader>
-            <CardXFooter showActions />
-          </CardX>
-          <CardX card='topImage' className='overflow-hidden pt-0'>
-            <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-4.png?width=368&format=auto' />
-            <CardXHeader>
-              <CardXTitle>Fiery Sunset Gradient</CardXTitle>
-              <CardXDescription>
-                Experience the warmth of a radiant sunset with flowing gradients of red, orange, and yellow.
-              </CardXDescription>
-            </CardXHeader>
-            <CardXFooter showActions />
-          </CardX>
-          <CardX card='topImage' className='overflow-hidden pt-0'>
-            <CardXContent image='https://cdn.shadcnstudio.com/ss-assets/components/card/image-5.png?width=368&format=auto' />
-            <CardXHeader>
-              <CardXTitle>Cosmic Blue Waves</CardXTitle>
-              <CardXDescription>
-                Explore the mysteries of the cosmos with deep, swirling waves of blue and purple.
-              </CardXDescription>
-            </CardXHeader>
-            <CardXFooter showActions />
-          </CardX>
-        </CardXGroup>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Card Group - Vertical</h3>
-        <CardXGroup variant='vertical'>
-          <CardX className='max-w-md'>
-            <CardXHeader>
-              <CardXTitle>First Card</CardXTitle>
-              <CardXDescription>First item in vertical stack</CardXDescription>
-            </CardXHeader>
-            <CardXContent>Content for the first card</CardXContent>
-          </CardX>
-          <CardX className='max-w-md'>
-            <CardXHeader>
-              <CardXTitle>Second Card</CardXTitle>
-              <CardXDescription>Second item in vertical stack</CardXDescription>
-            </CardXHeader>
-            <CardXContent>Content for the second card</CardXContent>
-          </CardX>
-          <CardX className='max-w-md'>
-            <CardXHeader>
-              <CardXTitle>Third Card</CardXTitle>
-              <CardXDescription>Third item in vertical stack</CardXDescription>
-            </CardXHeader>
-            <CardXContent>Content for the third card</CardXContent>
-          </CardX>
-        </CardXGroup>
-      </div>
-    </div>
-  )
-}
-
-
-
-const CardMeetingNotesDemo = () => {
-  return (
-    <Card className='max-w-md'>
-      <CardHeader>
-        <CardTitle>Meeting Notes</CardTitle>
-        <CardDescription>Transcript from the meeting with the client.</CardDescription>
-      </CardHeader>
-      <CardContent className='text-sm'>
-        <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
-        <ol className='mt-4 flex list-decimal flex-col gap-2 pl-6'>
-          <li>New analytics widgets for daily/weekly metrics</li>
-          <li>Simplified navigation menu</li>
-          <li>Dark mode support</li>
-          <li>Timeline: 6 weeks</li>
-          <li>Follow-up meeting scheduled for next Tuesday</li>
-        </ol>
-      </CardContent>
-      <CardFooter>
-        <div className='flex -space-x-2 hover:space-x-1'>
-          {avatars.map((avatar, index) => (
-            <Avatar key={index} className='ring-background ring-2 transition-all duration-300 ease-in-out'>
-              <AvatarImage src={avatar.src} alt={avatar.name} />
-              <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-            </Avatar>
-          ))}
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
-
-const CardInviteCardDemo = () => {
-  return (
-    <Card className='w-full max-w-lg'>
-      <CardHeader>
-        <CardTitle>Meeting Notes</CardTitle>
-      </CardHeader>
-      <CardContent className='grid gap-4 sm:grid-cols-2'>
-        <div className='flex items-center gap-4'>
-          <CircleFadingPlusIcon />
-          <span className='text-sm font-semibold'>Invite Member </span>
-        </div>
-        <div className='flex items-center gap-4'>
-          <Avatar>
-            <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-            <AvatarFallback className='text-xs'>JA</AvatarFallback>
-          </Avatar>
-          <div className='flex flex-col'>
-            <span className='text-sm font-semibold'>Jimmy Androson </span>
-            <span className='text-muted-foreground text-sm'>UI Designer</span>
-          </div>
-        </div>
-        <div className='flex items-center gap-4'>
-          <Avatar>
-            <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png' alt='Hallie Richards' />
-            <AvatarFallback className='text-xs'>DA</AvatarFallback>
-          </Avatar>
-          <div className='flex flex-col'>
-            <span className='text-sm font-semibold'>Dean Ambrose </span>
-            <span className='text-muted-foreground text-sm'>UX Designer</span>
-          </div>
-        </div>
-        <div className='flex items-center gap-4'>
-          <Avatar>
-            <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png' alt='Hallie Richards' />
-            <AvatarFallback className='text-xs'>HR</AvatarFallback>
-          </Avatar>
-          <div className='flex flex-col'>
-            <span className='text-sm font-semibold'>Anita John</span>
-            <span className='text-muted-foreground text-sm'>Branding</span>
-          </div>
-        </div>
-        <div></div>
-        <div></div>
-      </CardContent>
-    </Card>
-  )
-}
-
-const CardBottomImageDemo = () => {
-  return (
-    <Card className='max-w-md pb-0'>
-      <CardHeader>
-        <CardTitle>Fluid Gradient Flow</CardTitle>
-        <CardDescription>A vibrant and abstract background with smooth gradient curves.</CardDescription>
-      </CardHeader>
-      <CardContent className='px-0'>
-        <img
-          src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-1.png?height=280&format=auto'
-          alt='Banner'
-          className='aspect-video h-70 rounded-b-xl object-cover'
-        />
-      </CardContent>
-    </Card>
-  )
-}
-
-const CardTopImageDemo = () => {
-  return (
-    <Card className='max-w-md pt-0'>
-      <CardContent className='px-0'>
-        <img
-          src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-2.png?height=280&format=auto'
-          alt='Banner'
-          className='aspect-video h-70 rounded-t-xl object-cover'
-        />
-      </CardContent>
-      <CardHeader>
-        <CardTitle>Ethereal Swirl Gradient</CardTitle>
-        <CardDescription>Smooth, flowing gradients blending rich reds and blues in an abstract swirl.</CardDescription>
-      </CardHeader>
-      <CardFooter className='gap-3 max-sm:flex-col max-sm:items-stretch'>
-        <Button>Explore More</Button>
-        <Button variant={'outline'}>Download Now</Button>
-      </CardFooter>
-    </Card>
-  )
-}
-
-const CardHorizontalDemo = () => {
-  return (
-    <Card className='max-w-lg py-0 sm:flex-row sm:gap-0'>
-      <CardContent className='grow-1 px-0'>
-        <img
-          src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-3.png'
-          alt='Banner'
-          className='size-full rounded-l-xl'
-        />
-      </CardContent>
-      <div className='sm:min-w-54'>
-        <CardHeader className='pt-6'>
-          <CardTitle>Dreamy Colorwave Gradient</CardTitle>
-          <CardDescription>A smooth blend of vibrant pinks, purples, and blues for a magical touch.</CardDescription>
-        </CardHeader>
-        <CardFooter className='gap-3 py-6'>
-          <Button className='bg-transparent bg-gradient-to-br from-purple-500 to-pink-500 text-white focus-visible:ring-pink-600/20'>
-            Explore More
-          </Button>
-        </CardFooter>
-      </div>
-    </Card>
-  )
-}
-
-const CardOverlayDemo = () => {
-  return (
-    <Card className='before:bg-primary/70 relative max-w-md py-0 before:absolute before:size-full before:rounded-xl'>
-      <CardContent className='px-0'>
-        <img
-          src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-8.png?widht=448&height=280&format=auto'
-          alt='Banner'
-          className='h-70 w-112 rounded-xl'
-        />
-      </CardContent>
-      <div className='absolute'>
-        <CardHeader className='text-primary-foreground w-full pt-6'>
-          <CardTitle>Creative Catalyst</CardTitle>
-        </CardHeader>
-        <CardContent className='text-primary-foreground/80'>
-          Step into a world where imagination takes the lead and every pixel tells a story. This is a space designed to
-          unleash your creative potential without boundaries or time constraints. Explore bold ideas, experiment with
-          vibrant concepts, and craft visuals that inspire and captivate.
-        </CardContent>
-      </div>
-    </Card>
-  )
-}
-
-const CardSoftDemo = () => {
-  return (
-    <Card className='bg-primary/20 max-w-md gap-0'>
-      <CardHeader>
-        <CardTitle>Design Throwdown</CardTitle>
-      </CardHeader>
-      <CardContent>
-        Where passion, pressure, and pixels collide—push your creativity to the edge and show what you are made of.
-      </CardContent>
-    </Card>
-  )
-}
-
-const CardOutlineDemo = () => {
-  return (
-    <Card className='border-primary max-w-md gap-0 bg-transparent shadow-none'>
-      <CardHeader>
-        <CardTitle>Creative Clash</CardTitle>
-      </CardHeader>
-      <CardContent>
-        Step into a space where design skills are tested, ideas come alive, and only the boldest concepts win the
-        spotlight.
-      </CardContent>
-    </Card>
-  )
-}
-
-const CardWithTabsDemo = () => {
-  return (
-    <Card className='w-max'>
-      <CardContent>
-        <Tabs defaultValue={tabs[0].value} className='w-full max-w-sm'>
-          <TabsList className='bg-background w-full justify-start rounded-none border-b p-0'>
-            {tabs.map(tab => (
-              <TabsTrigger
-                key={tab.value}
-                value={tab.value}
-                className='bg-background data-[state=active]:border-b-primary h-full rounded-none border-b-2 border-transparent data-[state=active]:shadow-none'
-              >
-                {tab.name}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-          {tabs.map(tab => (
-            <TabsContent key={tab.value} value={tab.value}>
-              <p className='text-muted-foreground p-4 text-sm'>{tab.content}</p>
-            </TabsContent>
-          ))}
-        </Tabs>
-      </CardContent>
-    </Card>
-  )
-}
-
-const CardTweetDemo = () => {
-  const [liked, setLiked] = useState<boolean>(true)
-
-  return (
-    <Card className='max-w-md'>
-      <CardHeader className='flex items-center justify-between gap-3'>
-        <div className='flex items-center gap-3'>
-          <Avatar className='ring-ring ring-2'>
-            <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-            <AvatarFallback className='text-xs'>PG</AvatarFallback>
-          </Avatar>
-          <div className='flex flex-col gap-0.5'>
-            <CardTitle className='flex items-center gap-1 text-sm'>
-              Philip George <BadgeCheckIcon className='size-4 fill-sky-600 stroke-white dark:fill-sky-400' />
-            </CardTitle>
-            <CardDescription>@philip20</CardDescription>
-          </div>
-        </div>
-        <div className='flex items-center gap-2'>
-          <Button variant='outline' size='sm'>
-            <UserPlusIcon />
-            Follow
-          </Button>
-          <Button variant='ghost' size='icon' aria-label='Toggle menu'>
-            <EllipsisIcon />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent className='space-y-6 text-sm'>
-        <img
-          src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-6.png?width=350&format=auto'
-          alt='Banner'
-          className='aspect-video w-full rounded-md object-cover'
-        />
-        <p>
-          Lost in the colors of the night 🌌✨ Sometimes the blur reveals more than clarity.{' '}
-          <a href='#' className='text-sky-600 dark:text-sky-400'>
-            #AbstractVibes
-          </a>{' '}
-          <a href='#' className='text-sky-600 dark:text-sky-400'>
-            #Dreamscape
-          </a>{' '}
-          <a href='#' className='text-sky-600 dark:text-sky-400'>
-            #VisualPoetry
-          </a>
-        </p>
-      </CardContent>
-      <CardFooter className='flex items-center gap-1'>
-        <Button variant='ghost' size='sm' onClick={() => setLiked(!liked)}>
-          <HeartIcon className={cn(liked && 'fill-destructive stroke-destructive')} />
-          2.1K
-        </Button>
-        <Button variant='ghost' size='sm'>
-          <MessageCircleIcon />
-          1.4K
-        </Button>
-        <Button variant='ghost' size='sm'>
-          <RepeatIcon />
-          669
-        </Button>
-        <Button variant='ghost' size='sm'>
-          <SendIcon />
-          1.1K
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
-
-const CardProductDemo = () => {
-  const [liked, setLiked] = useState<boolean>(false)
-
-  return (
-    <div className='relative max-w-md rounded-xl bg-gradient-to-r from-neutral-600 to-violet-300 pt-0 shadow-lg'>
-      <div className='flex h-60 items-center justify-center'>
-        <img
-          src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-11.png?width=300&format=auto'
-          alt='Shoes'
-          className='w-75'
-        />
-      </div>
-      <Button
-        size='icon'
-        onClick={() => setLiked(!liked)}
-        className='bg-primary/10 hover:bg-primary/20 absolute top-4 right-4 rounded-full'
-      >
-        <HeartIcon className={cn(liked ? 'fill-destructive stroke-destructive' : 'stroke-white')} />
-        <span className='sr-only'>Like</span>
-      </Button>
-      <Card className='border-none'>
-        <CardHeader>
-          <CardTitle>Nike Jordan Air Rev</CardTitle>
-          <CardDescription className='flex items-center gap-2'>
-            <Badge variant='outline' className='rounded-sm'>
-              EU38
-            </Badge>
-            <Badge variant='outline' className='rounded-sm'>
-              Black and White
-            </Badge>
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>
-            Crossing hardwood comfort with off-court flair. &apos;80s-Inspired construction, bold details and
-            nothin&apos;-but-net style.
-          </p>
-        </CardContent>
-        <CardFooter className='justify-between gap-3 max-sm:flex-col max-sm:items-stretch'>
-          <div className='flex flex-col'>
-            <span className='text-sm font-medium uppercase'>Price</span>
-            <span className='text-xl font-semibold'>$69.99</span>
-          </div>
-          <Button size='lg'>Add to cart</Button>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}
-
-const CardTestimonialDemo = () => {
-  return (
-    <Card className='max-w-md border-none'>
-      <CardContent>
-        <p>
-          Incredible time-saver! shadcn/studio has made UI development a breeze. The pre build components are not only{' '}
-          <span className='bg-primary/10'>visually appealing but also highly customizable</span>, fitting seamlessly
-          into my projects. With a wide array of options to choose from, I can easily match.
-        </p>
-      </CardContent>
-      <CardFooter className='justify-between gap-3 max-sm:flex-col max-sm:items-stretch'>
-        <div className='flex items-center gap-3'>
-          <Avatar className='ring-ring ring-2'>
-            <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-            <AvatarFallback className='text-xs'>SG</AvatarFallback>
-          </Avatar>
-          <div className='flex flex-col gap-0.5'>
-            <CardTitle className='flex items-center gap-1 text-sm'>Sam Green</CardTitle>
-            <CardDescription>@SamG11</CardDescription>
-          </div>
-        </div>
-        <div className='flex items-center gap-1'>
-          <StarIcon className='size-5 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400'></StarIcon>
-          <StarIcon className='size-5 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400'></StarIcon>
-          <StarIcon className='size-5 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400'></StarIcon>
-          <StarIcon className='size-5 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400'></StarIcon>
-          <StarIcon className='size-5 stroke-amber-500 dark:stroke-amber-400'></StarIcon>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
-
-const CardActionDemo = () => {
-  const [isActive, setIsActive] = useState(true)
-
-  if (!isActive) return null
-
-  return (
-    <Card className='relative max-w-lg shadow-none'>
-      <Button
-        variant='ghost'
-        size='icon'
-        onClick={() => setIsActive(false)}
-        className='absolute top-2 right-2 rounded-full'
-      >
-        <XIcon />
-        <span className='sr-only'>Close</span>
-      </Button>
-      <CardHeader>
-        <CardTitle className='text-center'>Have a project in mind</CardTitle>
-      </CardHeader>
-      <CardContent className='flex flex-col gap-4 text-center'>
-        <p>Let&apos;s discuss! Our Assistant team is excited to hear about your projects, ideas and questions. </p>
-        <Button>Contact Our Team</Button>
-      </CardContent>
-    </Card>
-  )
-}
-
-const CardGroupDemo = () => {
-  return (
-    <div className='flex *:rounded-none *:shadow-none max-xl:flex-col max-xl:*:not-last:border-b-0 max-xl:*:first:rounded-t-xl max-xl:*:last:rounded-b-xl xl:*:not-last:border-r-0 xl:*:first:rounded-l-xl xl:*:last:rounded-r-xl'>
-      <Card className='overflow-hidden pt-0'>
-        <CardContent className='px-0'>
-          <img
-            src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-7.png?width=368&format=auto'
-            alt='Banner'
-            className='aspect-video w-92 object-cover'
-          />
-        </CardContent>
-        <CardHeader>
-          <CardTitle>Mystical Blue Swirl</CardTitle>
-          <CardDescription>
-            Dive into the depths of an enchanting swirl where vibrant blues and soft pinks merge seamlessly, creating a
-            mesmerizing flow of colors.
-          </CardDescription>
-        </CardHeader>
-        <CardFooter className='gap-3 max-sm:flex-col max-sm:items-stretch'>
-          <Button>Explore More</Button>
-          <Button variant={'outline'}>Download Now</Button>
-        </CardFooter>
-      </Card>
-      <Card className='overflow-hidden pt-0'>
-        <CardContent className='px-0'>
-          <img
-            src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-4.png?width=368&format=auto'
-            alt='Banner'
-            className='aspect-video w-92 object-cover'
-          />
-        </CardContent>
-        <CardHeader>
-          <CardTitle>Fiery Sunset Gradient</CardTitle>
-          <CardDescription>
-            Experience the warmth of a radiant sunset with flowing gradients of red, orange, and yellow blending
-            effortlessly in an abstract glow.
-          </CardDescription>
-        </CardHeader>
-        <CardFooter className='gap-3 max-sm:flex-col max-sm:items-stretch'>
-          <Button>Explore More</Button>
-          <Button variant={'outline'}>Download Now</Button>
-        </CardFooter>
-      </Card>
-      <Card className='overflow-hidden pt-0'>
-        <CardContent className='px-0'>
-          <img
-            src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-5.png?width=368&format=auto'
-            alt='Banner'
-            className='aspect-video w-92 object-cover'
-          />
-        </CardContent>
-        <CardHeader>
-          <CardTitle>Cosmic Blue Waves</CardTitle>
-          <CardDescription>
-            Explore the mysteries of the cosmos with deep, swirling waves of blue and purple, evoking a sense of depth
-            and infinite space.
-          </CardDescription>
-        </CardHeader>
-        <CardFooter className='gap-3 max-sm:flex-col max-sm:items-stretch'>
-          <Button>Explore More</Button>
-          <Button variant={'outline'}>Download Now</Button>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}
-
-const CardSpotlightDemo = () => {
-  useEffect(() => {
-    const all = document.querySelectorAll('.spotlight-card')
-
-    const handleMouseMove = (ev: MouseEvent) => {
-      all.forEach(e => {
-        const blob = e.querySelector('.blob') as HTMLElement
-        const fblob = e.querySelector('.fake-blob') as HTMLElement
-
-        if (!blob || !fblob) return
-
-        const rec = fblob.getBoundingClientRect()
-
-        blob.style.opacity = '1'
-
-        blob.animate(
-          [
-            {
-              transform: `translate(${ev.clientX - rec.left - rec.width / 2
-                }px, ${ev.clientY - rec.top - rec.height / 2}px)`
-            }
-          ],
-          {
-            duration: 300,
-            fill: 'forwards'
-          }
-        )
-      })
-    }
-
-    window.addEventListener('mousemove', handleMouseMove)
-
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
-
-  return (
-    <div className='h-max w-max'>
-      <div className='spotlight-card group bg-border relative overflow-hidden rounded-xl p-px transition-all duration-300 ease-in-out'>
-        <Card className='group-hover:bg-card/90 max-w-80 border-none transition-all duration-300 ease-in-out group-hover:backdrop-blur-[20px]'>
-          <CardHeader>
-            <CardTitle>Hover for the Glow-Up</CardTitle>
-          </CardHeader>
-          <CardContent>
-            Glide your cursor here and watch magic unfold — an experience designed just for you.
-          </CardContent>
-        </Card>
-        <div className='blob absolute top-0 left-0 size-20 rounded-full bg-sky-600/60 opacity-0 blur-2xl transition-all duration-300 ease-in-out dark:bg-sky-400/60' />
-        <div className='fake-blob absolute top-0 left-0 size-20 rounded-full' />
-      </div>
-    </div>
-  )
-}
-
-const Card3dDemo = () => {
-  const cardRef = useRef<HTMLDivElement>(null)
-  const imageRef = useRef<HTMLImageElement>(null)
-  const animationFrameRef = useRef<number | undefined>(undefined)
-  const lastMousePosition = useRef({ x: 0, y: 0 })
-
-  useEffect(() => {
-    const card = cardRef.current
-    const image = imageRef.current
-
-    if (!card || !image) return
-
-    let rect: DOMRect
-    let centerX: number
-    let centerY: number
-
-    const updateCardTransform = (mouseX: number, mouseY: number) => {
-      if (!rect) {
-        rect = card.getBoundingClientRect()
-        centerX = rect.left + rect.width / 2
-        centerY = rect.top + rect.height / 2
-      }
-
-      const relativeX = mouseX - centerX
-      const relativeY = mouseY - centerY
-
-      const cardTransform: CardTransform = {
-        rotateX: -relativeY * 0.035,
-        rotateY: relativeX * 0.035,
-        scale: 1.025
-      }
-
-      const imageTransform: CardTransform = {
-        rotateX: -relativeY * 0.025,
-        rotateY: relativeX * 0.025,
-        scale: 1.05
-      }
-
-      return { cardTransform, imageTransform }
-    }
-
-    const animate = () => {
-      const { cardTransform, imageTransform } = updateCardTransform(
-        lastMousePosition.current.x,
-        lastMousePosition.current.y
-      )
-
-      card.style.transform = `perspective(1000px) rotateX(${cardTransform.rotateX}deg) rotateY(${cardTransform.rotateY}deg) scale3d(${cardTransform.scale}, ${cardTransform.scale}, ${cardTransform.scale})`
-      card.style.boxShadow = '0 10px 35px rgba(0, 0, 0, 0.2)'
-
-      image.style.transform = `perspective(1000px) rotateX(${imageTransform.rotateX}deg) rotateY(${imageTransform.rotateY}deg) scale3d(${imageTransform.scale}, ${imageTransform.scale}, ${imageTransform.scale})`
-
-      animationFrameRef.current = requestAnimationFrame(animate)
-    }
-
-    const handleMouseMove = (e: MouseEvent) => {
-      lastMousePosition.current = { x: e.clientX, y: e.clientY }
-    }
-
-    const handleMouseEnter = () => {
-      card.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease'
-      image.style.transition = 'transform 0.2s ease'
-      animate()
-    }
-
-    const handleMouseLeave = () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current)
-      }
-
-      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
-      card.style.boxShadow = 'none'
-      card.style.transition = 'transform 0.5s ease, box-shadow 0.5s ease'
-
-      image.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
-      image.style.transition = 'transform 0.5s ease'
-    }
-
-    card.addEventListener('mouseenter', handleMouseEnter)
-    card.addEventListener('mousemove', handleMouseMove)
-    card.addEventListener('mouseleave', handleMouseLeave)
-
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current)
-      }
-
-      card.removeEventListener('mouseenter', handleMouseEnter)
-      card.removeEventListener('mousemove', handleMouseMove)
-      card.removeEventListener('mouseleave', handleMouseLeave)
-    }
-  }, [])
-
-  return (
-    <Card ref={cardRef} className='max-w-md'>
-      <CardHeader>
-        <CardTitle>Dynamic 3D Hover Card</CardTitle>
-      </CardHeader>
-      <CardContent className='space-y-6 text-sm'>
-        <img
-          ref={imageRef}
-          src='https://cdn.shadcnstudio.com/ss-assets/components/card/image-10.png?width=350&format=auto'
-          alt='Banner'
-          className='aspect-video w-full rounded-md object-cover'
-          width={500}
-          height={500}
-        />
-        <p>
-          Experience interactive depth and motion with this sleek 3D hover effect. Move your cursor to see it come
-          alive!
-        </p>
-      </CardContent>
-    </Card>
-  )
-}