Card

import { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter } from "@/components/jk/card"
import { Button } from "@/components/jk/button"

export const CardDemo = () => {
    return (
        <Card className="w-full max-w-md">
            <CardHeader className="border-b border-border">
                <CardTitle>Card Title</CardTitle>
                <CardDescription>Card description goes here</CardDescription>
            </CardHeader>
            <CardBody className="bg-bg-surface rounded-ui py-14 my-4">
                <span></span>
            </CardBody>
            <CardFooter className="flex gap-2 justify-end border-t border-border">
                <Button variant="outline" intent="outline-gray" size="sm">Cancel</Button>
                <Button size="sm">Save</Button>
            </CardFooter>
        </Card>
    )
}

import { Card, CardBody } from "@/components/jk/card"
import { Button } from "@/components/jk/button"

export const ProductCard = () => {
  return (
    <Card fill="gray" size="custom" className="[--card-padding:--spacing(1)] space-y-3 w-full max-w-xs">
      {/* Badge Section */}
      <div className="px-4 pt-2">
        <span className="text-fg-subtitle text-sm">
          Top Seller
        </span>
      </div>
      {/* Product Image */}
      <img
        src="/images/sports-shoe.webp"
        alt="Sport Shoe"
        width={1500} height={1020}
        className="w-full h-auto rounded-md object-cover"
      />

      <CardBody gap="2" className="px-4 pb-2 text-sm">
        <div className="flex justify-between items-start gap-2">
          <span className="flex-1 text-fg-title font-medium">Air Nike</span>
          <span className="text-fg-subtitle">$12</span>
        </div>
        <div className="flex justify-between items-start gap-2">
          <span className="flex-1 text-fg-muted text-xs">Colored</span>
          <Button size="xs" intent="solid-neutral">
            Add to cart
          </Button>
        </div>
      </CardBody>
    </Card>
  )
}

import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/jk/card"
import { Badge } from "@/components/jk/badge"
import { Button } from "@/components/jk/button"

const features = [
    'Advanced Analytics',
    'Custom Branding',
    'Priority Support',
    'API Integration',
    'Team Collaboration',
]

export const PricingCard = () => {
    return (
        <Card size="md" className="md:[--card-padding:--spacing(8)] max-w-sm [--gutter:--spacing(6)]">
            <CardHeader>
                <CardTitle>Enterprise Plan</CardTitle>
                <CardDescription>
                    Perfect for growing businesses that need powerful features and dedicated support.
                </CardDescription>
                <div className="flex items-end gap-4 py-4 border-y border-border-strong/50">
                    <span className="bg-clip-text text-transparent bg-linear-to-br from-primary-500 to-accent-400 font-bold text-4xl">
                        $999
                    </span>
                    <Badge variant="soft" intent="soft-primary">
                        annual
                    </Badge>
                </div>
            </CardHeader>
            <CardBody>
                {/* Features List */}
                <ul className="flex flex-col gap-y-3">
                    {features.map((feature) => (
                        <li key={feature} className="flex items-center gap-x-4">
                            <span
                                aria-hidden="true"
                                className="flex iconify ph--folder-open text-primary size-4 shrink-0"
                            />
                            <span className="text-sm">{feature}</span>
                        </li>
                    ))}
                </ul>
            </CardBody>
            <CardFooter className="flex">
                <Button className="w-full justify-center">
                    Start Free Trial
                </Button>
            </CardFooter>
        </Card>
    )
}