`cypressaward/frontend/app/success-stories/page.tsx`

86 lines
'use client'

import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Trophy, DollarSign, Users, Target } from 'lucide-react'

export default function SuccessStoriesPage() {
  const stories = [
    {
      organization: 'National Consumer Law Center',
      amount: '$3,500,000',
      case: 'Wells Fargo Home Mortgage Settlement',
      impact: 'Funded free legal services for 10,000+ low-income families facing foreclosure',
      category: 'Consumer Protection'
    },
    {
      organization: 'Electronic Frontier Foundation',
      amount: '$2,750,000',
      case: 'Facebook Privacy Settlement',
      impact: 'Launched nationwide digital privacy education program reaching 500,000 students',
      category: 'Privacy'
    },
    {
      organization: 'Student Borrower Protection Center',
      amount: '$1,850,000',
      case: 'Navient Servicing Practices',
      impact: 'Created free debt counseling hotline serving 25,000 borrowers annually',
      category: 'Education'
    }
  ]

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-6xl mx-auto px-4">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Success Stories</h1>
          <p className="text-xl text-gray-600">Real impact from cy pres awards</p>
        </div>

        <div className="grid md:grid-cols-4 gap-4 mb-12">
          <Card className="p-4 text-center">
            <Trophy className="h-8 w-8 text-yellow-500 mx-auto mb-2" />
            <p className="text-2xl font-bold">150+</p>
            <p className="text-sm text-gray-600">Awards Distributed</p>
          </Card>
          <Card className="p-4 text-center">
            <DollarSign className="h-8 w-8 text-green-500 mx-auto mb-2" />
            <p className="text-2xl font-bold">$125M+</p>
            <p className="text-sm text-gray-600">Total Funding</p>
          </Card>
          <Card className="p-4 text-center">
            <Users className="h-8 w-8 text-blue-500 mx-auto mb-2" />
            <p className="text-2xl font-bold">2.5M+</p>
            <p className="text-sm text-gray-600">People Helped</p>
          </Card>
          <Card className="p-4 text-center">
            <Target className="h-8 w-8 text-purple-500 mx-auto mb-2" />
            <p className="text-2xl font-bold">45</p>
            <p className="text-sm text-gray-600">States Reached</p>
          </Card>
        </div>

        <div className="space-y-6">
          {stories.map((story, idx) => (
            <Card key={idx} className="p-6">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="text-xl font-bold">{story.organization}</h3>
                  <p className="text-gray-600">{story.case}</p>
                </div>
                <div className="text-right">
                  <p className="text-2xl font-bold text-green-600">{story.amount}</p>
                  <Badge>{story.category}</Badge>
                </div>
              </div>
              <div className="bg-blue-50 p-4 rounded-lg">
                <p className="font-medium mb-2">Impact:</p>
                <p className="text-gray-700">{story.impact}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}