Untitled

import { useState } from "react"; import { motion } from "framer-motion"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Sun, Moon, Mail, Phone, MapPin } from "lucide-react";

export default function SchoolWebsite() { const [darkMode, setDarkMode] = useState(false);

const toggleDarkMode = () => setDarkMode(!darkMode);

const sections = [ { id: "about", label: "About" }, { id: "academics", label: "Academics" }, { id: "admissions", label: "Admissions" }, { id: "faculty", label: "Faculty" }, { id: "events", label: "Events" }, { id: "contact", label: "Contact" }, ];

return ( <div className={darkMode ? "dark bg-gray-900 text-white" : "bg-white text-gray-900"}> {/* Navbar */} <nav className="fixed top-0 left-0 w-full shadow-md bg-opacity-80 backdrop-blur z-50"> <div className="max-w-7xl mx-auto flex justify-between items-center p-4"> <h1 className="text-xl font-bold">My School</h1> <div className="flex gap-4 items-center"> {sections.map((s) => ( <a key={s.id} href={#${s.id}} className="hover:underline"> {s.label} </a> ))} <Button variant="ghost" size="icon" onClick={toggleDarkMode}> {darkMode ? <Sun /> : <Moon />} </Button> </div> </div> </nav>

{/* Hero Section */}
  <section id="hero" className="h-screen flex flex-col justify-center items-center text-center px-6">
      <motion.h2
            initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                        className="text-4xl md:text-6xl font-bold mb-4"
                            >
                                  Welcome to My School
                                      </motion.h2>
                                          <p className="max-w-2xl text-lg mb-6">Shaping bright futures with knowledge, values, and excellence.</p>
                                              <Button>Learn More</Button>
                                                </section>
                                                
                                                  {/* About */}
                                                    <section id="about" className="py-20 px-6 max-w-5xl mx-auto">
                                                        <h2 className="text-3xl font-bold mb-6 text-center">About Us</h2>
                                                            <p className="text-center">
                                                                  Our school provides quality education with a focus on character development, creativity, and leadership.
                                                                      </p>
                                                                        </section>
                                                                        
                                                                          {/* Academics */}
                                                                            <section id="academics" className="py-20 bg-gray-100 dark:bg-gray-800 px-6">
                                                                                <h2 className="text-3xl font-bold mb-10 text-center">Academics</h2>
                                                                                    <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
                                                                                          {["Science", "Arts", "Sports"].map((subj) => (
                                                                                                    <Card key={subj}>
                                                                                                              <CardContent className="p-6 text-center">
                                                                                                                          <h3 className="font-bold text-xl mb-2">{subj}</h3>
                                                                                                                                      <p>Comprehensive curriculum designed to nurture excellence in {subj}.</p>
                                                                                                                                                </CardContent>
                                                                                                                                                        </Card>
                                                                                          ))}
                                                                                              </div>
                                                                                                </section>

                                                                                                  {/* Admissions */}
                                                                                                    <section id="admissions" className="py-20 px-6 max-w-4xl mx-auto">
                                                                                                        <h2 className="text-3xl font-bold mb-6 text-center">Admissions</h2>
                                                                                                            <p className="text-center mb-8">Apply now to join our vibrant learning community.</p>
                                                                                                                <form className="grid gap-4 max-w-md mx-auto">
                                                                                                                      <Input placeholder="Full Name" />
                                                                                                                            <Input placeholder="Email" type="email" />
                                                                                                                                  <Input

                                                                                                                                  
                                                                                          ))})}