@catalystsoftware/ui 1.0.4 → 1.0.5

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

@@ -0,0 +1,2597 @@
+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>
+  )
+}