Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '@codeconnect-llc/design-system'

export function ServiceCards() {
  const services = [
    {
      title: 'Webアプリ開発',
      description: 'モダンなWebアプリケーション',
      content: 'React, TypeScript, Tailwind CSSを使用した高品質な開発',
    },
    {
      title: 'UIデザイン',
      description: 'ユーザー体験を重視',
      content: 'Figmaを使用したプロトタイプ作成から実装まで',
    },
    {
      title: 'コンサルティング',
      description: '技術戦略の立案',
      content: 'アーキテクチャ設計からチーム育成まで',
    },
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {services.map((service) => (
        <Card key={service.title}>
          <CardHeader>
            <CardTitle>{service.title}</CardTitle>
            <CardDescription>{service.description}</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-text-secondary">{service.content}</p>
          </CardContent>
          <CardFooter>
            <Button variant="outline" size="sm">
              詳しく見る
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}