Card Components

import { BasicCard, CardTitle, CardContent } from '~/components/ui';

function MyComponent() {
  return (
    <BasicCard>
      <CardTitle>Card Title</CardTitle>
      <CardContent>
        This is the card content with some descriptive text.
      </CardContent>
    </BasicCard>
  );
}

import { FeatureCard } from '~/components/ui';
import { FaRocket } from 'react-icons/fa';

function Features() {
  return (
    <FeatureCard
      icon={<FaRocket />}
      title="Fast Performance"
      description="Lightning-fast load times with optimized code."
    />
  );
}

import { StatCard } from '~/components/ui';

function Dashboard() {
  return (
    <StatCard
      label="Revenue"
      value="$45,231"
      trend="up"
      trendValue="+12.5% from last month"
      icon={<FaDollarSign />}
      variant="success"
    />
  );
}

import { ActionCard } from '~/components/ui';

function Actions() {
  return (
    <ActionCard
      title="Create Project"
      description="Start building something amazing"
      actionLabel="Get Started"
      onAction={() => console.log('Action triggered')}
      icon={<FaRocket />}
    />
  );
}