import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";

export default function LoginForm() {
  return (
    <Card className="w-full max-w-sm mx-auto">
      <CardHeader className="text-center">
        <CardTitle className="text-2xl">Sign In</CardTitle>
        <CardDescription>
          Enter your credentials to access your account
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        
        <div>
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" placeholder="Enter your password" />
        </div>
        
        <Button className="w-full">Sign In</Button>
        
        <div className="text-center text-sm">
          <span className="text-muted-foreground">Don't have an account? </span>
          <a href="#" className="text-primary hover:underline">Sign up</a>
        </div>
      </CardContent>
    </Card>
  );
}

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Bell } from "lucide-react";

export default function NotificationCard() {
  return (
    <Card className="w-full max-w-md">
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
            <Bell className="w-4 h-4 text-primary" />
          </div>
          <div className="flex-1">
            <h3 className="font-medium">New Update Available</h3>
            <p className="text-sm text-muted-foreground mt-1">
              Version 2.1.0 includes new components and bug fixes.
            </p>
            <div className="flex gap-2 mt-3">
              <Button size="sm">Update Now</Button>
              <Button variant="ghost" size="sm">Later</Button>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

import { Card, CardContent } from "@/components/ui/card";
import { Zap, Palette, Shield } from "lucide-react";

const features = [
  {
    icon: Zap,
    title: "Fast Performance",
    description: "Optimized for speed with minimal bundle size.",
  },
  {
    icon: Palette,
    title: "Customizable",
    description: "Easily customize colors, fonts, and spacing.",
  },
  {
    icon: Shield,
    title: "Accessible",
    description: "Built with accessibility best practices.",
  },
];

export default function FeatureGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {features.map((feature, index) => (
        <Card key={index}>
          <CardContent className="p-4">
            <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-3">
              <feature.icon className="w-5 h-5 text-primary" />
            </div>
            <h3 className="font-medium mb-2">{feature.title}</h3>
            <p className="text-sm text-muted-foreground">
              {feature.description}
            </p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const stats = [
  { title: "Total Users", value: "12,483", change: "+12%", positive: true },
  { title: "Revenue", value: "$45,231", change: "+8%", positive: true },
  { title: "Orders", value: "1,234", change: "-2%", positive: false },
  { title: "Conversion", value: "3.24%", change: "+0.5%", positive: true },
];

export default function StatsDashboard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat, index) => (
        <Card key={index}>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              {stat.title}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stat.value}</div>
            <div className={`text-xs mt-1 ${stat.positive ? 'text-green-600' : 'text-red-600'}`}>
              {stat.change} from last month
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}