import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Instagram, Mail, MapPin, X } from "lucide-react"; import { motion } from "framer-motion"; export default function HomePage() { const [showJoinForm, setShowJoinForm] = useState(false); const [showSupportForm, setShowSupportForm] = useState(false); return ( <main className="min-h-screen bg-white text-gray-800"> {/* Hero Section /} <section className="bg-gradient-to-r from-blue-600 to-green-500 text-white py-20 px-6 text-center"> <motion.h1 className="text-4xl md:text-6xl font-bold mb-4" initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} > Never Again IGISUBIZO </motion.h1> <motion.p className="text-lg md:text-xl max-w-2xl mx-auto" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} > Youth for Peace. Youth for Change. </motion.p> <div className="mt-8 flex justify-center gap-4"> <Button className="rounded-2xl px-6 py-3 bg-white text-blue-600 font-bold" onClick={() => setShowJoinForm(true)} > Join the Family </Button> <Button className="rounded-2xl px-6 py-3 bg-yellow-400 text-black font-bold" onClick={() => setShowSupportForm(true)} > Support Our Work </Button> </div> {/ Join Form */} {showJoinForm