`cypressaward/frontend/components/home/hero-section.tsx`

74 lines
'use client'

import { Button } from '@/components/ui/button'
import { ArrowRight, Scale, Users, Building2 } from 'lucide-react'
import Link from 'next/link'

export function HeroSection() {
  return (
    <section className="bg-gradient-to-b from-blue-50 to-white py-20">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="text-5xl font-bold text-gray-900 mb-6">
            Connecting Nonprofits with Cy Pres Awards
          </h1>
          <p className="text-xl text-gray-600 mb-8">
            The comprehensive platform for tracking class action settlements and matching 
            eligible nonprofits with cy pres opportunities. Updated hourly with the latest cases.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Link href="/nonprofit/register">
              <Button size="lg" className="w-full sm:w-auto">
                <Users className="mr-2 h-5 w-5" />
                Register as Nonprofit
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
            <Link href="/law-firm/register">
              <Button size="lg" variant="outline" className="w-full sm:w-auto">
                <Building2 className="mr-2 h-5 w-5" />
                Register as Law Firm
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
            <div className="bg-white p-6 rounded-lg shadow-sm border">
              <Scale className="h-10 w-10 text-blue-600 mb-3" />
              <h3 className="font-semibold text-lg mb-2">Active Case Tracking</h3>
              <p className="text-gray-600 text-sm">
                We monitor court filings and settlements hourly to identify cy pres opportunities
              </p>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow-sm border">
              <Users className="h-10 w-10 text-blue-600 mb-3" />
              <h3 className="font-semibold text-lg mb-2">Smart Matching</h3>
              <p className="text-gray-600 text-sm">
                AI-powered matching connects nonprofits with relevant cases based on mission alignment
              </p>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow-sm border">
              <Building2 className="h-10 w-10 text-blue-600 mb-3" />
              <h3 className="font-semibold text-lg mb-2">Law Firm Network</h3>
              <p className="text-gray-600 text-sm">
                Connect directly with plaintiffs' attorneys seeking eligible recipient organizations
              </p>
            </div>
          </div>
          
          <div className="mt-8 p-4 bg-amber-50 border border-amber-200 rounded-lg">
            <p className="text-sm text-amber-800">
              <strong>Note:</strong> Since there is no centralized list of cy pres opportunities, 
              organizations must proactively seek nominations. Our platform automates discovery 
              and facilitates connections with plaintiffs' counsel.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}