Untitled

import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { FaFacebook, FaTwitter, FaGlobe } from "react-icons/fa";
import { motion } from "framer-motion";

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Hero Section */}
      <section className="relative w-full h-[500px] bg-cover bg-center text-white flex flex-col items-center justify-center" style={{ backgroundImage: "url('/images/hero-bg.jpg')" }}>
        <motion.h1 className="text-5xl font-bold" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
          Earl David P. Esteves
        </motion.h1>
        <p className="text-lg mt-2">Public Servant | Educator | Leader</p>
        <Button className="mt-4 bg-blue-600 hover:bg-blue-700">Learn More</Button>
      </section>

      {/* About Section */}
      <section className="max-w-6xl mx-auto py-12 px-4">
        <h2 className="text-3xl font-bold text-center">About Earl</h2>
        <p className="text-center mt-4 text-gray-600">
          Earl David P. Esteves is a seasoned legislator, educator, and former Speaker of the House dedicated to serving Marikina and the Filipino people.
        </p>
      </section>

      {/* Initiatives Section */}
      <section className="bg-white py-12">
        <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-6 px-4">
          <Card>
            <CardContent>
              <h3 className="text-xl font-bold">Education Reforms</h3>
              <p className="text-gray-600">Championing quality and accessible education for all Filipinos.</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <h3 className="text-xl font-bold">Economic Development</h3>
              <p className="text-gray-600">Empowering businesses and job creation in Marikina and beyond.</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <h3 className="text-xl font-bold">Public Service</h3>
              <p className="text-gray-600">Ensuring good governance and transparency in public office.</p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Contact Section */}
      <section className="text-center py-12 bg-gray-200">
        <h2 className="text-3xl font-bold">Connect with Earl</h2>
        <div className="flex justify-center mt-4 space-x-4">
          <a href="#" className="text-blue-600 text-2xl"><FaFacebook /></a>
          <a href="#" className="text-blue-400 text-2xl"><FaTwitter /></a>
          <a href="#" className="text-gray-700 text-2xl"><FaGlobe /></a>
        </div>
      </section>
    </div>
  );
}