92:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_88BdNyriwgU8uLgwmGxde9zGSLmk"],"SWRDataProvider"] 94:T331c1,[V0_FILE]typescriptreact:file="components/program-card.tsx" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Clock, Users } from "lucide-react" import Link from "next/link" import { Progress } from "@/components/ui/progress" import { WhatsAppShare } from "@/components/whatsapp-share" interface ProgramCardProps { title: string description: string duration: string seats: number availableSeats: number } export function ProgramCard({ title, description, duration, seats, availableSeats }: ProgramCardProps) { const percentageFilled = ((seats - availableSeats) / seats) * 100 const isLimited = availableSeats <= 5 return (

{title}

{isLimited && ( Only {availableSeats} seats left )}

{description}

Duration: {duration}

Total Seats: {seats}

Seat Availability {availableSeats} of {seats}

) } [V0_FILE]typescriptreact:file="components/faculty-card.tsx" import { Card, CardContent } from "@/components/ui/card" import Image from "next/image" interface FacultyCardProps { name: string position: string image: string specialization: string } export function FacultyCard({ name, position, image, specialization }: FacultyCardProps) { return (

{name}

{position}

Specialization: {specialization}

) } [V0_FILE]typescriptreact:file="components/testimonial-card.tsx" import { Card, CardContent } from "@/components/ui/card" import Image from "next/image" import { Quote } from "lucide-react" interface TestimonialCardProps { name: string program: string image: string testimonial: string } export function TestimonialCard({ name, program, image, testimonial }: TestimonialCardProps) { return (

{testimonial}

{name}

{program}

) } [V0_FILE]typescriptreact:file="components/news-card.tsx" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Calendar } from "lucide-react" import Image from "next/image" import Link from "next/link" import { WhatsAppShare } from "@/components/whatsapp-share" interface NewsCardProps { title: string date: string image: string excerpt: string category: "News" | "Event" } export function NewsCard({ title, date, image, excerpt, category }: NewsCardProps) { return (

{category}

{date}

{title}

{excerpt}

) } [V0_FILE]typescriptreact:file="components/stats-card.tsx" import { Card, CardContent } from "@/components/ui/card" import type { ReactNode } from "react" interface StatsCardProps { icon: ReactNode value: ReactNode label: string } export function StatsCard({ icon, value, label }: StatsCardProps) { return (

{icon}

{value}

{label}

) } [V0_FILE]typescriptreact:file="components/counter-animation.tsx" "use client" import { useEffect, useState, useRef } from "react" interface CounterAnimationProps { end: number duration?: number prefix?: string suffix?: string } export function CounterAnimation({ end, duration = 2, prefix = "", suffix = "" }: CounterAnimationProps) { const [count, setCount] = useState(0) const countRef = useRef(0) const [hasAnimated, setHasAnimated] = useState(false) const observerRef = useRef(null) const elementRef = useRef(null) useEffect(() => { if (hasAnimated) return observerRef.current = new IntersectionObserver( (entries) => { const [entry] = entries if (entry.isIntersecting) { animateCounter() setHasAnimated(true) if (observerRef.current && elementRef.current) { observerRef.current.unobserve(elementRef.current) } } }, { threshold: 0.1 }, ) if (elementRef.current) { observerRef.current.observe(elementRef.current) } return () => { if (observerRef.current && elementRef.current) { observerRef.current.unobserve(elementRef.current) } } }, []) const animateCounter = () => { const startTime = Date.now() const endTime = startTime + duration * 1000 const updateCounter = () => { const now = Date.now() const remaining = Math.max(endTime - now, 0) const progress = 1 - remaining / (duration * 1000) countRef.current = Math.floor(progress * end) setCount(countRef.current) if (now < endTime) { requestAnimationFrame(updateCounter) } else { setCount(end) } } requestAnimationFrame(updateCounter) } return ( {prefix} {count.toLocaleString()} {suffix} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { MainNav } from "@/components/main-nav" import { Footer } from "@/components/footer" import { WhatsAppFloat } from "@/components/whatsapp-float" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Horizon College - Empowering Futures, Building Leaders", description: "Horizon College is a prestigious institution offering a wide range of undergraduate and graduate programs with state-of-the-art facilities and distinguished faculty.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" "use client" import Link from "next/link" import { Facebook, Twitter, Instagram, Linkedin, Mail, Phone, MapPin, MessageCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function Footer() { const handleWhatsAppClick = () => { window.open( "https://wa.me/1234567890?text=Hello!%20I%27m%20interested%20in%20learning%20more%20about%20Horizon%20College.", "_blank", ) } return ( ) } [V0_FILE]typescriptreact:file="app/admission/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AdmissionForm } from "@/components/admission-form" import { CheckCircle, Clock, FileText, GraduationCap, HelpCircle, Mail, Phone } from "lucide-react" import Link from "next/link" import Image from "next/image" export default function AdmissionPage() { return (

{/* Hero Section */}

Apply for Admission

Take the first step towards your future. Apply now for the upcoming academic year.

{/* Main Content */}

Apply Now Requirements FAQ

Online Application

Complete the form below to submit your application. Fields marked with an asterisk (*) are required.

Admission Requirements

Please ensure you meet the following requirements before applying.

Undergraduate Programs

High school diploma or equivalent
Minimum GPA of 3.0 on a 4.0 scale
SAT/ACT scores (optional for 2025-26)
Two letters of recommendation
Personal statement

Graduate Programs

Bachelor's degree from an accredited institution
Minimum GPA of 3.2 on a 4.0 scale
GRE/GMAT scores (program-specific)
Three letters of recommendation
Statement of purpose
Resume/CV

Required Documents

The following documents must be submitted with your application:

Official transcripts from all previously attended institutions
Letters of recommendation
Personal statement/Statement of purpose
Standardized test scores (if applicable)
Proof of English proficiency (for international students)
Copy of passport or government-issued ID

Frequently Asked Questions

Find answers to common questions about our admission process.

What is the application deadline?

The priority application deadline for the Fall 2025 semester is March 1, 2025. Applications received after this date will be considered on a rolling basis, subject to availability.

Is there an application fee?

Yes, there is a non-refundable application fee of $50 for undergraduate programs and $75 for graduate programs. Fee waivers are available for eligible students.

How can I check my application status?

After submitting your application, you will receive login credentials to access our applicant portal, where you can track your application status, upload additional documents, and receive updates.

Are scholarships available?

Yes, we offer a variety of merit-based and need-based scholarships. All applicants are automatically considered for merit scholarships. For need-based aid, please complete the financial aid application.

When will I receive an admission decision?

Admission decisions are typically sent within 4-6 weeks after we receive your complete application package. Early applicants may receive decisions sooner.

Do you accept transfer students?

Yes, we welcome transfer students. Transfer applicants must have a minimum GPA of 3.0 from their previous institution. Credit transfer evaluations are conducted after admission.

Important Dates

Priority Deadline:
March 1, 2025
Regular Deadline:
May 15, 2025
Decision Notification:
4-6 weeks after submission
Enrollment Deposit Due:
June 1, 2025

Contact Admissions

(123) 456-7890
admissions@horizoncollege.edu

Available Programs

Undergraduate
25 programs
Graduate
18 programs
Doctoral
7 programs

Need Help?

Our admissions team is here to assist you throughout the application process.

) } [V0_FILE]typescriptreact:file="components/admission-form.tsx" "use client" import Link from "next/link" import { useState } from "react" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { toast } from "@/components/ui/use-toast" import { Loader2, CheckCircle2 } from "lucide-react" const formSchema = z.object({ firstName: z.string().min(2, { message: "First name must be at least 2 characters.", }), lastName: z.string().min(2, { message: "Last name must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), phone: z.string().min(10, { message: "Please enter a valid phone number.", }), address: z.string().min(5, { message: "Address must be at least 5 characters.", }), city: z.string().min(2, { message: "City must be at least 2 characters.", }), state: z.string().min(2, { message: "State must be at least 2 characters.", }), zipCode: z.string().min(5, { message: "Zip code must be at least 5 characters.", }), country: z.string().min(2, { message: "Country must be at least 2 characters.", }), programLevel: z.enum(["undergraduate", "graduate", "doctoral"]), programOfInterest: z.string().min(1, { message: "Please select a program of interest.", }), startTerm: z.enum(["fall2025", "spring2026", "summer2026"]), highSchool: z.string().min(2, { message: "High school name must be at least 2 characters.", }), graduationYear: z.string().min(4, { message: "Please enter a valid graduation year.", }), gpa: z.string().min(1, { message: "Please enter your GPA.", }), previousCollege: z.string().optional(), statement: z.string().min(100, { message: "Personal statement must be at least 100 characters.", }), termsAccepted: z.literal(true, { errorMap: () => ({ message: "You must accept the terms and conditions." }), }), }) type FormValues = z.infer export function AdmissionForm() { const [step, setStep] = useState(1) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { firstName: "", lastName: "", email: "", phone: "", address: "", city: "", state: "", zipCode: "", country: "", programLevel: "undergraduate", programOfInterest: "", startTerm: "fall2025", highSchool: "", graduationYear: "", gpa: "", previousCollege: "", statement: "", termsAccepted: false, }, }) const onSubmit = async (data: FormValues) => { setIsSubmitting(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) console.log(data) setIsSubmitting(false) setIsSubmitted(true) toast({ title: "Application Submitted", description: "Your application has been successfully submitted. You will receive a confirmation email shortly.", }) } const nextStep = async () => { let fieldsToValidate: (keyof FormValues)[] = [] if (step === 1) { fieldsToValidate = ["firstName", "lastName", "email", "phone", "address", "city", "state", "zipCode", "country"] } else if (step === 2) { fieldsToValidate = ["programLevel", "programOfInterest", "startTerm"] } else if (step === 3) { fieldsToValidate = ["highSchool", "graduationYear", "gpa"] } const isValid = await form.trigger(fieldsToValidate) if (isValid) { setStep(step + 1) window.scrollTo(0, 0) } } const prevStep = () => { setStep(step - 1) window.scrollTo(0, 0) } if (isSubmitted) { return (

Application Submitted Successfully!

Thank you for applying to Horizon College. Your application has been received and is being processed.

Application Reference: APP-{Math.floor(Math.random() * 1000000)}

Next Steps:

Check your email for a confirmation message
Log in to the applicant portal to track your application status
Submit any additional required documents
Prepare for a possible interview

) } return (

Step {step} of 4 {step === 1 ? "Personal Information" : step === 2 ? "Program Selection" : step === 3 ? "Educational Background" : "Statement & Review"}

{step === 1 && (

( First Name * )} /> ( Last Name * )} />

( Email * )} /> ( Phone Number * )} />

( Address * )} />

( City * )} /> ( State/Province * )} /> ( Zip/Postal Code * )} />

( Country * )} />

)} {step === 2 && (

( Program Level * Undergraduate (Bachelor's) Graduate (Master's) Doctoral (PhD) )} /> ( Program of Interest * )} /> ( Intended Start Term * )} />

)} {step === 3 && (

( High School/Secondary School * )} />

( Graduation Year * )} /> ( GPA * )} />

( Previous College/University (if applicable) Leave blank if you have not attended college before. )} />

Document Upload

You will be able to upload your documents after submitting this initial application.

Official transcripts
Standardized test scores (if applicable)
Letters of recommendation
Passport or government-issued ID

)} {step === 4 && (

( Personal Statement *

</FormControl>
                      <FormDescription>
                        Minimum 100 characters. This statement helps us understand your background, interests, and
                        goals.
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

<FormField
                  control={form.control}
                  name="termsAccepted"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                      <FormControl>
                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel>I certify that all information provided is accurate and complete *</FormLabel>
                        <FormDescription>
                          By checking this box, you agree to our{" "}
                          <Link href="/terms" className="text-primary underline">
                            Terms of Service
                          </Link>{" "}
                          and{" "}
                          <Link href="/privacy" className="text-primary underline">
                            Privacy Policy
                          </Link>
                          .
                        </FormDescription>
                      </div>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            )}

<div className="flex justify-between pt-4">
              {step > 1 && (
                <Button type="button" variant="outline" onClick={prevStep}>
                  Previous
                </Button>
              )}
              {step < 4 ? (
                <Button type="button" onClick={nextStep} className="ml-auto">
                  Next
                </Button>
              ) : (
                <Button type="submit" className="ml-auto" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Submitting...
                    </>
                  ) : (
                    "Submit Application"
                  )}
                </Button>
              )}
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { BarChart, LineChart, PieChart, ChartContainer, ChartTooltip, ChartLegend } from "@/components/ui/chart"
import {
  FileText,
  CheckCircle,
  Clock,
  XCircle,
  Search,
  Download,
  Filter,
  Mail,
  BarChart3,
  PieChartIcon,
  LineChartIcon,
} from "lucide-react"
import { AdminSidebar } from "@/components/admin-sidebar"

export default function AdminDashboard() {
  const [searchQuery, setSearchQuery] = useState("")
  const [chartType, setChartType] = useState<"bar" | "line" | "pie">("bar")

// Mock data for applications
  const applications = [
    { id: "APP-1001", name: "John Smith", program: "Computer Science", status: "Pending Review", date: "2025-02-15" },
    {
      id: "APP-1002",
      name: "Emily Johnson",
      program: "Business Administration",
      status: "Approved",
      date: "2025-02-14",
    },
    {
      id: "APP-1003",
      name: "Michael Brown",
      program: "Mechanical Engineering",
      status: "Pending Documents",
      date: "2025-02-13",
    },
    { id: "APP-1004", name: "Sarah Davis", program: "Psychology", status: "Rejected", date: "2025-02-12" },
    { id: "APP-1005", name: "David Wilson", program: "Electrical Engineering", status: "Approved", date: "2025-02-11" },
  ]

// Filter applications based on search query
  const filteredApplications = applications.filter(
    (app) =>
      app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      app.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      app.program.toLowerCase().includes(searchQuery.toLowerCase()),
  )

// Mock data for charts
  const applicationsByProgram = [
    { name: "Computer Science", value: 45 },
    { name: "Business", value: 30 },
    { name: "Engineering", value: 25 },
    { name: "Psychology", value: 15 },
    { name: "Biology", value: 10 },
  ]

const applicationsByStatus = [
    { name: "Pending Review", value: 35 },
    { name: "Approved", value: 25 },
    { name: "Pending Documents", value: 20 },
    { name: "Rejected", value: 10 },
    { name: "Waitlisted", value: 10 },
  ]

const applicationsByMonth = [
    { name: "Jan", value: 10 },
    { name: "Feb", value: 15 },
    { name: "Mar", value: 25 },
    { name: "Apr", value: 30 },
    { name: "May", value: 40 },
    { name: "Jun", value: 35 },
  ]

return (
    <div className="flex min-h-screen bg-muted/30">
      <AdminSidebar />

<div className="flex-1 p-4 sm:p-6 md:p-8 w-full ml-0 md:ml-64">
        <div className="mb-6 md:mb-8">
          <h1 className="text-2xl sm:text-3xl font-bold mb-2">Admin Dashboard</h1>
          <p className="text-muted-foreground">Manage applications, programs, and monitor admissions metrics.</p>
        </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6 md:mb-8">
          <Card>
            <CardContent className="p-4 sm:p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Total Applications</p>
                  <h3 className="text-2xl sm:text-3xl font-bold">125</h3>
                </div>
                <div className="p-3 bg-primary/10 rounded-full">
                  <FileText className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
                </div>
              </div>
              <div className="mt-4">
                <Progress value={65} className="h-2" />
                <p className="text-xs text-muted-foreground mt-2">65% increase from last month</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Approved</p>
                  <h3 className="text-3xl font-bold">42</h3>
                </div>
                <div className="p-3 bg-green-100 rounded-full">
                  <CheckCircle className="h-6 w-6 text-green-600" />
                </div>
              </div>
              <div className="mt-4">
                <Progress value={35} className="h-2 bg-muted [&>div]:bg-green-600" />
                <p className="text-xs text-muted-foreground mt-2">35% of total applications</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Pending</p>
                  <h3 className="text-3xl font-bold">73</h3>
                </div>
                <div className="p-3 bg-yellow-100 rounded-full">
                  <Clock className="h-6 w-6 text-yellow-600" />
                </div>
              </div>
              <div className="mt-4">
                <Progress value={58} className="h-2 bg-muted [&>div]:bg-yellow-600" />
                <p className="text-xs text-muted-foreground mt-2">58% of total applications</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Rejected</p>
                  <h3 className="text-3xl font-bold">10</h3>
                </div>
                <div className="p-3 bg-red-100 rounded-full">
                  <XCircle className="h-6 w-6 text-red-600" />
                </div>
              </div>
              <div className="mt-4">
                <Progress value={7} className="h-2 bg-muted [&>div]:bg-red-600" />
                <p className="text-xs text-muted-foreground mt-2">7% of total applications</p>
              </div>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 mb-6 md:mb-8">
          <Card className="lg:col-span-2">
            <CardHeader className="pb-2">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                  <CardTitle>Application Analytics</CardTitle>
                  <CardDescription>Overview of application trends</CardDescription>
                </div>
                <div className="flex items-center gap-2">
                  <Button
                    variant={chartType === "bar" ? "default" : "outline"}
                    size="icon"
                    onClick={() => setChartType("bar")}
                  >
                    <BarChart3 className="h-4 w-4" />
                  </Button>
                  <Button
                    variant={chartType === "line" ? "default" : "outline"}
                    size="icon"
                    onClick={() => setChartType("line")}
                  >
                    <LineChartIcon className="h-4 w-4" />
                  </Button>
                  <Button
                    variant={chartType === "pie" ? "default" : "outline"}
                    size="icon"
                    onClick={() => setChartType("pie")}
                  >
                    <PieChartIcon className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent className="pt-4">
              <div className="h-[250px] sm:h-[300px]">
                {chartType === "bar" && (
                  <ChartContainer className="h-full" data={applicationsByProgram}>
                    <BarChart
                      showXAxis
                      showYAxis
                      showTooltip
                      showLegend={false}
                      showGridLines
                      xAxisKey="name"
                      yAxisKey="value"
                      dataKey="value"
                      colors={["hsl(var(--primary))"]}
                    />
                    <ChartTooltip />
                  </ChartContainer>
                )}

{chartType === "line" && (
                  <ChartContainer className="h-full" data={applicationsByMonth}>
                    <LineChart
                      showXAxis
                      showYAxis
                      showTooltip
                      showLegend={false}
                      showGridLines
                      xAxisKey="name"
                      yAxisKey="value"
                      dataKey="value"
                      colors={["hsl(var(--primary))"]}
                    />
                    <ChartTooltip />
                  </ChartContainer>
                )}

{chartType === "pie" && (
                  <ChartContainer className="h-full" data={applicationsByStatus}>
                    <PieChart
                      showTooltip
                      showLegend
                      dataKey="value"
                      nameKey="name"
                      colors={[
                        "hsl(var(--primary))",
                        "hsl(var(--primary) / 0.8)",
                        "hsl(var(--primary) / 0.6)",
                        "hsl(var(--primary) / 0.4)",
                        "hsl(var(--primary) / 0.2)",
                      ]}
                    />
                    <ChartTooltip />
                    <ChartLegend />
                  </ChartContainer>
                )}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Seat Availability</CardTitle>
              <CardDescription>Current program capacity</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Computer Science</span>
                    <span className="font-medium">5/30 seats left</span>
                  </div>
                  <Progress value={83} className="h-2" />
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Business Administration</span>
                    <span className="font-medium">12/40 seats left</span>
                  </div>
                  <Progress value={70} className="h-2" />
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Mechanical Engineering</span>
                    <span className="font-medium">8/35 seats left</span>
                  </div>
                  <Progress value={77} className="h-2" />
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Psychology</span>
                    <span className="font-medium">15/30 seats left</span>
                  </div>
                  <Progress value={50} className="h-2" />
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>MBA</span>
                    <span className="font-medium">3/25 seats left</span>
                  </div>
                  <Progress value={88} className="h-2" />
                </div>

<Button variant="outline" className="w-full">
                  Update Seat Availability
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>

<Card>
          <CardHeader>
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
              <div>
                <CardTitle>Recent Applications</CardTitle>
                <CardDescription>Manage and review applications</CardDescription>
              </div>
              <div className="flex flex-col sm:flex-row gap-2">
                <div className="relative w-full sm:w-auto">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Search applications..."
                    className="pl-8 w-full"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" size="icon">
                    <Filter className="h-4 w-4" />
                  </Button>
                  <Button variant="outline" size="icon">
                    <Download className="h-4 w-4" />
                  </Button>
                  <Button size="sm" className="flex-grow sm:flex-grow-0">
                    <Mail className="h-4 w-4 mr-2" />
                    Send Notifications
                  </Button>
                </div>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="all">
              <div className="overflow-x-auto">
                <TabsList className="mb-4 w-full sm:w-auto">
                  <TabsTrigger value="all">All</TabsTrigger>
                  <TabsTrigger value="pending">Pending</TabsTrigger>
                  <TabsTrigger value="approved">Approved</TabsTrigger>
                  <TabsTrigger value="rejected">Rejected</TabsTrigger>
                </TabsList>
              </div>

<div className="rounded-md border overflow-x-auto">
                <div className="min-w-[800px]">
                  <div className="grid grid-cols-12 p-4 bg-muted/50 text-sm font-medium">
                    <div className="col-span-3">Applicant</div>
                    <div className="col-span-3">Program</div>
                    <div className="col-span-2">Status</div>
                    <div className="col-span-2">Date</div>
                    <div className="col-span-2 text-right">Actions</div>
                  </div>

{filteredApplications.length > 0 ? (
                    filteredApplications.map((app) => (
                      <div key={app.id} className="grid grid-cols-12 p-4 border-t items-center">
                        <div className="col-span-3 flex items-center gap-3">
                          <Avatar className="h-8 w-8">
                            <AvatarImage src={`/placeholder.svg?height=32&width=32`} alt={app.name} />
                            <AvatarFallback>
                              {app.name
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <p className="font-medium">{app.name}</p>
                            <p className="text-xs text-muted-foreground">{app.id}</p>
                          </div>
                        </div>
                        <div className="col-span-3">{app.program}</div>
                        <div className="col-span-2">
                          <Badge
                            variant={
                              app.status === "Approved"
                                ? "success"
                                : app.status === "Rejected"
                                  ? "destructive"
                                  : "outline"
                            }
                          >
                            {app.status}
                          </Badge>
                        </div>
                        <div className="col-span-2 text-sm text-muted-foreground">{app.date}</div>
                        <div className="col-span-2 flex justify-end gap-2">
                          <Button variant="outline" size="sm" className="hidden sm:inline-flex">
                            View
                          </Button>
                          <Button size="sm">Review</Button>
                        </div>
                      </div>
                    ))
                  ) : (
                    <div className="p-8 text-center">
                      <p className="text-muted-foreground">No applications found</p>
                    </div>
                  )}
                </div>
              </div>
            </Tabs>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/dashboard/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="components/admin-sidebar.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import {
  LayoutDashboard,
  Users,
  GraduationCap,
  FileText,
  Settings,
  LogOut,
  Menu,
  X,
  ChevronDown,
  Mail,
  BarChart3,
  Calendar,
  Search,
  MessageCircle,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function AdminSidebar() {
  const [isOpen, setIsOpen] = useState(false)

const handleWhatsAppClick = () => {
    window.open("https://wa.me/1234567890?text=Hello!%20I%20need%20admin%20assistance.", "_blank")
  }

return (
    <>
      {/* Mobile Sidebar Toggle */}
      <Button
        variant="outline"
        size="icon"
        className="fixed top-4 left-4 z-50 md:hidden"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
      </Button>

{/* Sidebar */}
      <div
        className={`fixed inset-y-0 left-0 z-40 w-64 bg-background border-r transform transition-transform duration-200 ease-in-out md:translate-x-0 ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex flex-col h-full">
          {/* Sidebar Header */}
          <div className="p-4 border-b">
            <div className="flex items-center justify-between mb-4">
              <Link href="/admin/dashboard" className="flex items-center">
                <GraduationCap className="h-6 w-6 text-primary mr-2" />
                <span className="font-bold text-lg">Admin Portal</span>
              </Link>
            </div>
            <div className="relative">
              <Input placeholder="Search..." className="pl-8" />
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            </div>
          </div>

{/* Sidebar Content */}
          <div className="flex-1 overflow-auto py-4">
            <nav className="space-y-1 px-2">
              <Link
                href="/admin/dashboard"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium bg-primary/10 text-primary"
              >
                <LayoutDashboard className="h-5 w-5" />
                Dashboard
              </Link>
              <Link
                href="/admin/applications"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <FileText className="h-5 w-5" />
                Applications
                <Badge className="ml-auto">42</Badge>
              </Link>
              <Link
                href="/admin/students"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Users className="h-5 w-5" />
                Students
              </Link>
              <Link
                href="/admin/programs"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <GraduationCap className="h-5 w-5" />
                Programs
              </Link>
              <Link
                href="/admin/reports"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <BarChart3 className="h-5 w-5" />
                Reports
              </Link>
              <Link
                href="/admin/calendar"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Calendar className="h-5 w-5" />
                Calendar
              </Link>
              <Link
                href="/admin/messages"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Mail className="h-5 w-5" />
                Messages
                <Badge className="ml-auto">12</Badge>
              </Link>
              <Link
                href="/admin/settings"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Settings className="h-5 w-5" />
                Settings
              </Link>
              <button
                onClick={handleWhatsAppClick}
                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-green-600 hover:bg-green-50 hover:text-green-700"
              >
                <MessageCircle className="h-5 w-5" />
                WhatsApp Support
              </button>
            </nav>
          </div>

{/* Sidebar Footer */}
          <div className="p-4 border-t">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Avatar>
                  <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Admin User" />
                  <AvatarFallback>AU</AvatarFallback>
                </Avatar>
                <div>
                  <p className="text-sm font-medium">Admin User</p>
                  <p className="text-xs text-muted-foreground">admin@example.com</p>
                </div>
              </div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <ChevronDown className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>Profile</DropdownMenuItem>
                  <DropdownMenuItem>Settings</DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <LogOut className="h-4 w-4 mr-2" />
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </div>

{/* Overlay for mobile */}
      {isOpen && <div className="fixed inset-0 bg-black/50 z-30 md:hidden" onClick={() => setIsOpen(false)} />}
    </>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { FileText, Clock, CheckCircle, XCircle, Calendar, Bell, Download, ExternalLink } from "lucide-react"
import { StudentSidebar } from "@/components/student-sidebar"

export default function StudentDashboard() {
  const [activeTab, setActiveTab] = useState("overview")

return (
    <div className="flex min-h-screen bg-muted/30">
      <StudentSidebar />

<div className="flex-1 p-4 sm:p-6 md:p-8 w-full ml-0 md:ml-64">
        <div className="mb-6 md:mb-8">
          <h1 className="text-2xl sm:text-3xl font-bold mb-2">Student Dashboard</h1>
          <p className="text-muted-foreground">
            Welcome back, Alex! Track your application status and access important information.
          </p>
        </div>

<div className="overflow-x-auto pb-2">
          <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="space-y-8">
            <TabsList>
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="application">Application</TabsTrigger>
              <TabsTrigger value="documents">Documents</TabsTrigger>
              <TabsTrigger value="announcements">Announcements</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-8">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Application Status</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-col items-center py-4">
                      <div className="p-3 bg-yellow-100 rounded-full mb-4">
                        <Clock className="h-8 w-8 text-yellow-600" />
                      </div>
                      <h3 className="text-xl font-bold mb-1">Under Review</h3>
                      <p className="text-sm text-muted-foreground text-center">
                        Your application is currently being reviewed by our admissions team.
                      </p>
                    </div>
                    <div className="space-y-2 mt-2">
                      <div className="flex justify-between text-sm">
                        <span>Application Progress</span>
                        <span>75%</span>
                      </div>
                      <Progress value={75} className="h-2" />
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full" onClick={() => setActiveTab("application")}>
                      View Application Details
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Upcoming Deadlines</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-start gap-3">
                      <div className="p-2 bg-primary/10 rounded-md">
                        <Calendar className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <p className="font-medium">Document Submission</p>
                        <p className="text-sm text-muted-foreground">Due in 5 days</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="p-2 bg-primary/10 rounded-md">
                        <Calendar className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <p className="font-medium">Enrollment Deposit</p>
                        <p className="text-sm text-muted-foreground">Due in 14 days</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="p-2 bg-primary/10 rounded-md">
                        <Calendar className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <p className="font-medium">Housing Application</p>
                        <p className="text-sm text-muted-foreground">Due in 21 days</p>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      View All Deadlines
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Quick Actions</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <Button
                      variant="outline"
                      className="w-full justify-start"
                      onClick={() => setActiveTab("documents")}
                    >
                      <FileText className="mr-2 h-4 w-4" />
                      Upload Documents
                    </Button>
                    <Button variant="outline" className="w-full justify-start">
                      <Bell className="mr-2 h-4 w-4" />
                      Notification Settings
                    </Button>
                    <Button variant="outline" className="w-full justify-start">
                      <Download className="mr-2 h-4 w-4" />
                      Download Application
                    </Button>
                    <Button variant="outline" className="w-full justify-start">
                      <ExternalLink className="mr-2 h-4 w-4" />
                      Financial Aid Portal
                    </Button>
                  </CardContent>
                </Card>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Recent Announcements</CardTitle>
                  <CardDescription>Important updates from the admissions team</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="border rounded-lg p-4">
                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2 mb-2">
                      <h3 className="font-bold">Application Update Required</h3>
                      <Badge>Important</Badge>
                    </div>
                    <p className="text-sm text-muted-foreground mb-2">
                      Please submit your official transcripts by March 15, 2025 to complete your application.
                    </p>
                    <p className="text-xs text-muted-foreground">March 1, 2025</p>
                  </div>

<div className="border rounded-lg p-4">
                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2 mb-2">
                      <h3 className="font-bold">Virtual Information Session</h3>
                      <Badge variant="outline">Event</Badge>
                    </div>
                    <p className="text-sm text-muted-foreground mb-2">
                      Join our virtual information session on March 10, 2025 at 3:00 PM EST to learn more about our
                      programs.
                    </p>
                    <p className="text-xs text-muted-foreground">February 28, 2025</p>
                  </div>

<div className="border rounded-lg p-4">
                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2 mb-2">
                      <h3 className="font-bold">Scholarship Opportunity</h3>
                      <Badge variant="outline">Opportunity</Badge>
                    </div>
                    <p className="text-sm text-muted-foreground mb-2">
                      Applications for the Merit Scholarship are now open. Submit your application by April 1, 2025.
                    </p>
                    <p className="text-xs text-muted-foreground">February 25, 2025</p>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button variant="outline" className="w-full" onClick={() => setActiveTab("announcements")}>
                    View All Announcements
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="application" className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle>Application Details</CardTitle>
                  <CardDescription>Review your application information</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="flex items-center justify-between pb-4 border-b">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground">Application ID</p>
                      <p className="font-medium">APP-123456</p>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-muted-foreground">Submitted On</p>
                      <p className="font-medium">February 15, 2025</p>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-muted-foreground">Status</p>
                      <Badge variant="outline">Under Review</Badge>
                    </div>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-bold">Personal Information</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Full Name</p>
                        <p>Alex Thompson</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Email</p>
                        <p>alex.thompson@example.com</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Phone</p>
                        <p>(123) 456-7890</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Address</p>
                        <p>123 Main St, Anytown, ST 12345</p>
                      </div>
                    </div>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-bold">Program Information</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Program Level</p>
                        <p>Undergraduate</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Program of Interest</p>
                        <p>Computer Science</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Start Term</p>
                        <p>Fall 2025</p>
                      </div>
                    </div>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-bold">Educational Background</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">High School</p>
                        <p>Anytown High School</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Graduation Year</p>
                        <p>2024</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">GPA</p>
                        <p>3.8/4.0</p>
                      </div>
                    </div>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-bold">Application Timeline</h3>
                    <div className="space-y-4">
                      <div className="flex items-start gap-3">
                        <div className="p-2 bg-green-100 rounded-full">
                          <CheckCircle className="h-5 w-5 text-green-600" />
                        </div>
                        <div>
                          <p className="font-medium">Application Submitted</p>
                          <p className="text-sm text-muted-foreground">February 15, 2025</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3">
                        <div className="p-2 bg-green-100 rounded-full">
                          <CheckCircle className="h-5 w-5 text-green-600" />
                        </div>
                        <div>
                          <p className="font-medium">Application Fee Paid</p>
                          <p className="text-sm text-muted-foreground">February 15, 2025</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3">
                        <div className="p-2 bg-yellow-100 rounded-full">
                          <Clock className="h-5 w-5 text-yellow-600" />
                        </div>
                        <div>
                          <p className="font-medium">Application Under Review</p>
                          <p className="text-sm text-muted-foreground">February 20, 2025</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3">
                        <div className="p-2 bg-muted rounded-full">
                          <Clock className="h-5 w-5 text-muted-foreground" />
                        </div>
                        <div>
                          <p className="font-medium text-muted-foreground">Decision</p>
                          <p className="text-sm text-muted-foreground">Pending</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Button variant="outline">
                    <Download className="mr-2 h-4 w-4" />
                    Download PDF
                  </Button>
                  <Button>Contact Admissions</Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="documents" className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle>Required Documents</CardTitle>
                  <CardDescription>Upload and manage your application documents</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="border rounded-lg p-4 flex items-start gap-4">
                    <div className="p-2 bg-green-100 rounded-full">
                      <CheckCircle className="h-5 w-5 text-green-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between items-start mb-1">
                        <h3 className="font-bold">Official Transcripts</h3>
                        <Badge variant="outline" className="bg-green-100 text-green-600 hover:bg-green-100">
                          Submitted
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">
                        High school transcripts showing all coursework and grades.
                      </p>
                      <p className="text-xs text-muted-foreground">Uploaded on February 16, 2025</p>
                    </div>
                    <Button variant="outline" size="sm">
                      <Download className="h-4 w-4" />
                    </Button>
                  </div>

<div className="border rounded-lg p-4 flex items-start gap-4">
                    <div className="p-2 bg-yellow-100 rounded-full">
                      <Clock className="h-5 w-5 text-yellow-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between items-start mb-1">
                        <h3 className="font-bold">Letters of Recommendation</h3>
                        <Badge variant="outline" className="bg-yellow-100 text-yellow-600 hover:bg-yellow-100">
                          Partial
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">
                        Two letters of recommendation from teachers or counselors.
                      </p>
                      <p className="text-xs text-muted-foreground">1 of 2 received</p>
                    </div>
                    <Button variant="outline" size="sm">
                      <Download className="h-4 w-4" />
                    </Button>
                  </div>

<div className="border rounded-lg p-4 flex items-start gap-4">
                    <div className="p-2 bg-red-100 rounded-full">
                      <XCircle className="h-5 w-5 text-red-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between items-start mb-1">
                        <h3 className="font-bold">Standardized Test Scores</h3>
                        <Badge variant="outline" className="bg-red-100 text-red-600 hover:bg-red-100">
                          Missing
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">
                        SAT or ACT scores (optional for 2025-26 admission cycle).
                      </p>
                      <p className="text-xs text-muted-foreground">Due by March 15, 2025</p>
                    </div>
                    <Button variant="outline" size="sm">
                      Upload
                    </Button>
                  </div>

<div className="border rounded-lg p-4 flex items-start gap-4">
                    <div className="p-2 bg-green-100 rounded-full">
                      <CheckCircle className="h-5 w-5 text-green-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between items-start mb-1">
                        <h3 className="font-bold">Personal Statement</h3>
                        <Badge variant="outline" className="bg-green-100 text-green-600 hover:bg-green-100">
                          Submitted
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">
                        Essay describing your academic interests and goals.
                      </p>
                      <p className="text-xs text-muted-foreground">Uploaded on February 16, 2025</p>
                    </div>
                    <Button variant="outline" size="sm">
                      <Download className="h-4 w-4" />
                    </Button>
                  </div>

<div className="border rounded-lg p-4 flex items-start gap-4">
                    <div className="p-2 bg-red-100 rounded-full">
                      <XCircle className="h-5 w-5 text-red-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between items-start mb-1">
                        <h3 className="font-bold">ID/Passport Copy</h3>
                        <Badge variant="outline" className="bg-red-100 text-red-600 hover:bg-red-100">
                          Missing
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">Copy of government-issued ID or passport.</p>
                      <p className="text-xs text-muted-foreground">Due by March 15, 2025</p>
                    </div>
                    <Button variant="outline" size="sm">
                      Upload
                    </Button>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Upload New Document</Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="announcements" className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle>Announcements & Updates</CardTitle>
                  <CardDescription>Important information from the admissions team</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="border rounded-lg p-6">
                    <div className="flex justify-between items-start mb-4">
                      <h3 className="text-xl font-bold">Application Update Required</h3>
                      <Badge>Important</Badge>
                    </div>
                    <p className="text-muted-foreground mb-4">
                      Please submit your official transcripts by March 15, 2025 to complete your application. Missing
                      documents may delay the review of your application.
                    </p>
                    <p className="text-muted-foreground mb-6">
                      If you have any questions or need assistance, please contact the admissions office at
                      admissions@horizoncollege.edu or call (123) 456-7890.
                    </p>
                    <div className="flex justify-between items-center text-sm text-muted-foreground">
                      <p>March 1, 2025</p>
                      <Button variant="outline" size="sm">
                        Mark as Read
                      </Button>
                    </div>
                  </div>

<div className="border rounded-lg p-6">
                    <div className="flex justify-between items-start mb-4">
                      <h3 className="text-xl font-bold">Virtual Information Session</h3>
                      <Badge variant="outline">Event</Badge>
                    </div>
                    <p className="text-muted-foreground mb-4">
                      Join our virtual information session on March 10, 2025 at 3:00 PM EST to learn more about our
                      programs. The session will cover admission requirements, program details, campus life, and
                      financial aid opportunities.
                    </p>
                    <p className="text-muted-foreground mb-6">
                      To register for the session, please click the button below. You will receive a confirmation email
                      with the Zoom link and additional details.
                    </p>
                    <div className="flex justify-between items-center">
                      <p className="text-sm text-muted-foreground">February 28, 2025</p>
                      <div className="space-x-2">
                        <Button size="sm">Register Now</Button>
                        <Button variant="outline" size="sm">
                          Add to Calendar
                        </Button>
                      </div>
                    </div>
                  </div>

<div className="border rounded-lg p-6">
                    <div className="flex justify-between items-start mb-4">
                      <h3 className="text-xl font-bold">Scholarship Opportunity</h3>
                      <Badge variant="outline">Opportunity</Badge>
                    </div>
                    <p className="text-muted-foreground mb-4">
                      Applications for the Merit Scholarship are now open. This scholarship provides up to $10,000 per
                      year for outstanding academic achievement. To be eligible, you must have a minimum GPA of 3.5 and
                      demonstrate leadership qualities.
                    </p>
                    <p className="text-muted-foreground mb-6">
                      The application deadline is April 1, 2025. Please submit your scholarship application through the
                      financial aid portal.
                    </p>
                    <div className="flex justify-between items-center">
                      <p className="text-sm text-muted-foreground">February 25, 2025</p>
                      <Button variant="outline" size="sm">
                        Apply for Scholarship
                      </Button>
                    </div>
                  </div>

<div className="border rounded-lg p-6">
                    <div className="flex justify-between items-start mb-4">
                      <h3 className="text-xl font-bold">Campus Tour Schedule</h3>
                      <Badge variant="outline">Information</Badge>
                    </div>
                    <p className="text-muted-foreground mb-4">
                      We are pleased to announce that campus tours are now available for prospective students and their
                      families. Tours are conducted Monday through Friday at 10:00 AM and 2:00 PM, and on select
                      Saturdays at 11:00 AM.
                    </p>
                    <p className="text-muted-foreground mb-6">
                      During the tour, you will visit academic buildings, residence halls, dining facilities, and
                      recreational areas. You will also have the opportunity to meet with current students and faculty
                      members.
                    </p>
                    <div className="flex justify-between items-center">
                      <p className="text-sm text-muted-foreground">February 20, 2025</p>
                      <Button variant="outline" size="sm">
                        Schedule a Tour
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/student-sidebar.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import {
  LayoutDashboard,
  FileText,
  BookOpen,
  Calendar,
  Settings,
  LogOut,
  Menu,
  X,
  ChevronDown,
  Mail,
  CreditCard,
  GraduationCap,
  Home,
  MessageCircle,
  Search,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function StudentSidebar() {
  const [isOpen, setIsOpen] = useState(false)

const handleWhatsAppClick = () => {
    window.open("https://wa.me/1234567890?text=Hello!%20I%20need%20assistance%20with%20my%20application.", "_blank")
  }

{/* Sidebar */}
      <div
        className={`fixed inset-y-0 left-0 z-40 w-64 bg-background border-r transform transition-transform duration-200 ease-in-out md:translate-x-0 ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex flex-col h-full">
          {/* Sidebar Header */}
          <div className="p-4 border-b">
            <div className="flex items-center justify-between mb-4">
              <Link href="/dashboard" className="flex items-center">
                <GraduationCap className="h-6 w-6 text-primary mr-2" />
                <span className="font-bold text-lg">Student Portal</span>
              </Link>
            </div>
            <div className="relative">
              <Input placeholder="Search..." className="pl-8" />
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            </div>
          </div>

{/* Sidebar Content */}
          <div className="flex-1 overflow-auto py-4">
            <nav className="space-y-1 px-2">
              <Link
                href="/dashboard"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium bg-primary/10 text-primary"
              >
                <LayoutDashboard className="h-5 w-5" />
                Dashboard
              </Link>
              <Link
                href="/dashboard/application"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <FileText className="h-5 w-5" />
                My Application
              </Link>
              <Link
                href="/dashboard/documents"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <FileText className="h-5 w-5" />
                Documents
                <Badge className="ml-auto">2</Badge>
              </Link>
              <Link
                href="/dashboard/programs"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <BookOpen className="h-5 w-5" />
                Programs
              </Link>
              <Link
                href="/dashboard/housing"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Home className="h-5 w-5" />
                Housing
              </Link>
              <Link
                href="/dashboard/financial"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <CreditCard className="h-5 w-5" />
                Financial Aid
              </Link>
              <Link
                href="/dashboard/calendar"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Calendar className="h-5 w-5" />
                Calendar
              </Link>
              <Link
                href="/dashboard/messages"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Mail className="h-5 w-5" />
                Messages
                <Badge className="ml-auto">3</Badge>
              </Link>
              <Link
                href="/dashboard/settings"
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
              >
                <Settings className="h-5 w-5" />
                Settings
              </Link>
              <button
                onClick={handleWhatsAppClick}
                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-green-600 hover:bg-green-50 hover:text-green-700"
              >
                <MessageCircle className="h-5 w-5" />
                WhatsApp Support
              </button>
            </nav>
          </div>

{/* Sidebar Footer */}
          <div className="p-4 border-t">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Avatar>
                  <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Alex Thompson" />
                  <AvatarFallback>AT</AvatarFallback>
                </Avatar>
                <div>
                  <p className="text-sm font-medium">Alex Thompson</p>
                  <p className="text-xs text-muted-foreground">alex.t@example.com</p>
                </div>
              </div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <ChevronDown className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>Profile</DropdownMenuItem>
                  <DropdownMenuItem>Settings</DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <LogOut className="h-4 w-4 mr-2" />
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </div>

{/* Overlay for mobile */}
      {isOpen && <div className="fixed inset-0 bg-black/50 z-30 md:hidden" onClick={() => setIsOpen(false)} />}
    </>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isQuickEdit="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      screens: {
        xs: "480px",
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar, var(--background)))",
          foreground: "hsl(var(--sidebar-foreground, var(--foreground)))",
          border: "hsl(var(--sidebar-border, var(--border)))",
          accent: "hsl(var(--sidebar-accent, var(--muted)))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground, var(--muted-foreground)))",
          ring: "hsl(var(--sidebar-ring, var(--ring)))",
        },
        success: {
          DEFAULT: "hsl(142, 76%, 36%)",
          foreground: "hsl(0, 0%, 100%)",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { Bar, Line, Pie } from "recharts"
import { Tooltip, Legend, ResponsiveContainer, XAxis, YAxis, CartesianGrid } from "recharts"

interface ChartContainerProps {
  children: React.ReactNode
  className?: string
  data?: any[]
}

export function ChartContainer({ children, className, data }: ChartContainerProps) {
  return (
    <ResponsiveContainer width="100%" height="100%" className={className}>
      {children}
    </ResponsiveContainer>
  )
}

interface BarChartProps {
  data: any[]
  xAxisKey: string
  yAxisKey: string
  dataKey: string
  colors: string[]
  showXAxis?: boolean
  showYAxis?: boolean
  showTooltip?: boolean
  showLegend?: boolean
  showGridLines?: boolean
}

export function BarChart({
  data,
  xAxisKey,
  yAxisKey,
  dataKey,
  colors,
  showXAxis = true,
  showYAxis = true,
  showTooltip = true,
  showLegend = true,
  showGridLines = true,
}: BarChartProps) {
  return (
    <BarChartComponent
      data={data}
      xAxisKey={xAxisKey}
      yAxisKey={yAxisKey}
      dataKey={dataKey}
      colors={colors}
      chartType="bar"
      showXAxis={showXAxis}
      showYAxis={showYAxis}
      showTooltip={showTooltip}
      showLegend={showLegend}
      showGridLines={showGridLines}
    />
  )
}

interface LineChartProps {
  data: any[]
  xAxisKey: string
  yAxisKey: string
  dataKey: string
  colors: string[]
  showXAxis?: boolean
  showYAxis?: boolean
  showTooltip?: boolean
  showLegend?: boolean
  showGridLines?: boolean
}

export function LineChart({
  data,
  xAxisKey,
  yAxisKey,
  dataKey,
  colors,
  showXAxis = true,
  showYAxis = true,
  showTooltip = true,
  showLegend = true,
  showGridLines = true,
}: LineChartProps) {
  return (
    <BarChartComponent
      data={data}
      xAxisKey={xAxisKey}
      yAxisKey={yAxisKey}
      dataKey={dataKey}
      colors={colors}
      chartType="line"
      showXAxis={showXAxis}
      showYAxis={showYAxis}
      showTooltip={showTooltip}
      showLegend={showLegend}
      showGridLines={showGridLines}
    />
  )
}

interface PieChartProps {
  data: any[]
  dataKey: string
  nameKey: string
  colors: string[]
  showTooltip?: boolean
  showLegend?: boolean
}

export function PieChart({ data, dataKey, nameKey, colors, showTooltip = true, showLegend = true }: PieChartProps) {
  return (
    <BarChartComponent
      data={data}
      dataKey={dataKey}
      nameKey={nameKey}
      colors={colors}
      chartType="pie"
      showTooltip={showTooltip}
      showLegend={showLegend}
    />
  )
}

type ChartTooltipProps = {}

export function ChartTooltip(_props: ChartTooltipProps) {
  return <Tooltip />
}

type ChartLegendProps = {}

export function ChartLegend(_props: ChartLegendProps) {
  return <Legend />
}

interface BarChartComponentProps {
  data: any[]
  xAxisKey?: string
  yAxisKey?: string
  dataKey?: string
  nameKey?: string
  colors: string[]
  chartType: "bar" | "line" | "pie"
  showXAxis?: boolean
  showYAxis?: boolean
  showTooltip?: boolean
  showLegend?: boolean
  showGridLines?: boolean
}

function BarChartComponent({
  data,
  xAxisKey,
  yAxisKey,
  dataKey,
  nameKey,
  colors,
  chartType,
  showXAxis,
  showYAxis,
  showTooltip,
  showLegend,
  showGridLines,
}: BarChartComponentProps) {
  return (
    <>
      {chartType === "bar" && dataKey && xAxisKey && yAxisKey && (
        <>
          {showGridLines && <CartesianGrid strokeDasharray="3 3" />}
          {showXAxis && <XAxis dataKey={xAxisKey} />}
          {showYAxis && <YAxis />}
          {showTooltip && <Tooltip />}
          {showLegend && <Legend />}
          <Bar dataKey={dataKey} fill={colors[0]} />
        </>
      )}
      {chartType === "line" && dataKey && xAxisKey && yAxisKey && (
        <>
          {showGridLines && <CartesianGrid strokeDasharray="3 3" />}
          {showXAxis && <XAxis dataKey={xAxisKey} />}
          {showYAxis && <YAxis />}
          {showTooltip && <Tooltip />}
          {showLegend && <Legend />}
          <Line type="monotone" dataKey={dataKey} stroke={colors[0]} />
        </>
      )}
      {chartType === "pie" && dataKey && nameKey && (
        <>
          {showTooltip && <Tooltip />}
          {showLegend && <Legend />}
          <Pie
            data={data}
            dataKey={dataKey}
            nameKey={nameKey}
            cx="50%"
            cy="50%"
            outerRadius={80}
            fill={colors[0]}
            label
          />
        </>
      )}
    </>
  )
}

[V0_FILE]typescriptreact:file="components/whatsapp-float.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { MessageCircle, X } from "lucide-react"

interface WhatsAppFloatProps {
  phoneNumber: string
  welcomeMessage?: string
  position?: "right" | "left"
}

export function WhatsAppFloat({
  phoneNumber,
  welcomeMessage = "Hello! I'm interested in learning more about Horizon College.",
  position = "right",
}: WhatsAppFloatProps) {
  const [isOpen, setIsOpen] = useState(false)

const handleWhatsAppClick = () => {
    const encodedMessage = encodeURIComponent(welcomeMessage)
    window.open(`https://wa.me/${phoneNumber}?text=${encodedMessage}`, "_blank")
  }

return (
    <div className={`fixed bottom-6 ${position === "right" ? "right-6" : "left-6"} z-50`}>
      {isOpen && (
        <Card className="mb-4 w-[300px] shadow-lg animate-in fade-in slide-in-from-bottom-5 duration-300">
          <CardContent className="p-4">
            <div className="flex justify-between items-center mb-3">
              <h3 className="font-bold text-green-600 flex items-center">
                <MessageCircle className="h-5 w-5 mr-2 text-green-600 animate-pulse-slow" />
                WhatsApp Support
              </h3>
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7 transition-transform hover:rotate-90"
                onClick={() => setIsOpen(false)}
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
            <p className="text-sm text-muted-foreground mb-4">
              Chat with our admissions team for quick answers to your questions.
            </p>
            <Button
              className="w-full bg-green-600 hover:bg-green-700 text-white btn-hover-effect"
              onClick={handleWhatsAppClick}
            >
              Start Conversation
            </Button>
          </CardContent>
        </Card>
      )}

<Button
        size="lg"
        className={`rounded-full h-14 w-14 bg-green-600 hover:bg-green-700 shadow-lg transition-all duration-300 hover:scale-110 ${!isOpen && "animate-bounce"}`}
        onClick={() => setIsOpen(!isOpen)}
      >
        <MessageCircle className="h-6 w-6 text-white" />
        <span className="sr-only">WhatsApp Support</span>
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/whatsapp-share.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { MessageCircle } from "lucide-react"

interface WhatsAppShareProps {
  title: string
  text: string
  variant?: "default" | "outline" | "ghost"
  size?: "default" | "sm" | "lg" | "icon"
  className?: string
}

export function WhatsAppShare({ title, text, variant = "outline", size = "sm", className = "" }: WhatsAppShareProps) {
  const handleShare = () => {
    const message = `${title}: ${text}`
    const encodedMessage = encodeURIComponent(message)
    window.open(`https://wa.me/?text=${encodedMessage}`, "_blank")
  }

return (
    <Button
      variant={variant}
      size={size}
      className={`text-green-600 border-green-600 hover:bg-green-50 hover:text-green-700 ${className}`}
      onClick={handleShare}
    >
      <MessageCircle className="h-4 w-4 mr-2" />
      Share via WhatsApp
    </Button>
  )
}

[V0_FILE]typescriptreact:file="app/contact/page.tsx" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { MapPin, Phone, Mail, Clock, MessageCircle } from "lucide-react"

export default function ContactPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="bg-primary text-primary-foreground py-16 md:py-24">
        <div className="container mx-auto px-4 md:px-6 text-center">
          <h1 className="text-3xl md:text-5xl font-bold mb-6">Contact Us</h1>
          <p className="text-xl text-primary-foreground/90 max-w-2xl mx-auto">
            We're here to help. Reach out to us with any questions or inquiries.
          </p>
        </div>
      </section>

{/* Contact Information */}
      <section className="py-12 md:py-16">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <Card>
              <CardContent className="p-6 flex flex-col items-center text-center">
                <div className="p-3 bg-primary/10 rounded-full mb-4">
                  <MapPin className="h-6 w-6 text-primary" />
                </div>
                <h3 className="font-bold mb-2">Visit Us</h3>
                <p className="text-sm text-muted-foreground">
                  123 University Avenue
                  <br />
                  Cityville, State 12345
                  <br />
                  United States
                </p>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-6 flex flex-col items-center text-center">
                <div className="p-3 bg-primary/10 rounded-full mb-4">
                  <Phone className="h-6 w-6 text-primary" />
                </div>
                <h3 className="font-bold mb-2">Call Us</h3>
                <p className="text-sm text-muted-foreground mb-2">Main: (123) 456-7890</p>
                <p className="text-sm text-muted-foreground">Admissions: (123) 456-7891</p>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-6 flex flex-col items-center text-center">
                <div className="p-3 bg-primary/10 rounded-full mb-4">
                  <Mail className="h-6 w-6 text-primary" />
                </div>
                <h3 className="font-bold mb-2">Email Us</h3>
                <p className="text-sm text-muted-foreground mb-2">info@horizoncollege.edu</p>
                <p className="text-sm text-muted-foreground">admissions@horizoncollege.edu</p>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-6 flex flex-col items-center text-center">
                <div className="p-3 bg-green-100 rounded-full mb-4">
                  <MessageCircle className="h-6 w-6 text-green-600" />
                </div>
                <h3 className="font-bold mb-2">WhatsApp</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Chat with us directly via WhatsApp for quick responses.
                </p>
                <Button
                  className="bg-green-600 hover:bg-green-700 text-white w-full"
                  onClick={() =>
                    window.open(
                      "https://wa.me/1234567890?text=Hello!%20I%27m%20interested%20in%20learning%20more%20about%20Horizon%20College.",
                      "_blank",
                    )
                  }
                >
                  <MessageCircle className="h-4 w-4 mr-2" />
                  Start Chat
                </Button>
              </CardContent>
            </Card>
          </div>

<div className="grid md:grid-cols-2 gap-8 items-start">
            <Card>
              <CardHeader>
                <CardTitle>Send Us a Message</CardTitle>
                <CardDescription>
                  Fill out the form below and we'll get back to you as soon as possible.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label htmlFor="first-name" className="text-sm font-medium">
                        First Name
                      </label>
                      <Input id="first-name" placeholder="Enter your first name" />
                    </div>
                    <div className="space-y-2">
                      <label htmlFor="last-name" className="text-sm font-medium">
                        Last Name
                      </label>
                      <Input id="last-name" placeholder="Enter your last name" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="email" className="text-sm font-medium">
                      Email
                    </label>
                    <Input id="email" type="email" placeholder="Enter your email" />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="phone" className="text-sm font-medium">
                      Phone
                    </label>
                    <Input id="phone" placeholder="Enter your phone number" />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="subject" className="text-sm font-medium">
                      Subject
                    </label>
                    <Input id="subject" placeholder="Enter the subject" />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="message" className="text-sm font-medium">
                      Message
                    </label>
                    <Textarea id="message" placeholder="Enter your message" className="min-h-[120px]" />
                  </div>
                  <Button className="w-full">Send Message</Button>
                </form>
              </CardContent>
            </Card>

<div className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle>Office Hours</CardTitle>
                  <CardDescription>When you can visit us in person</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-start gap-3">
                    <Clock className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <p className="font-medium">Monday - Friday</p>
                      <p className="text-sm text-muted-foreground">8:00 AM - 5:00 PM</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <Clock className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <p className="font-medium">Saturday</p>
                      <p className="text-sm text-muted-foreground">9:00 AM - 1:00 PM</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <Clock className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <p className="font-medium">Sunday</p>
                      <p className="text-sm text-muted-foreground">Closed</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Admissions Office</CardTitle>
                  <CardDescription>For prospective students and application inquiries</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-start gap-3">
                    <Phone className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <p className="font-medium">Direct Line</p>
                      <p className="text-sm text-muted-foreground">(123) 456-7891</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <Mail className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <p className="font-medium">Email</p>
                      <p className="text-sm text-muted-foreground break-all">admissions@horizoncollege.edu</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <MessageCircle className="h-5 w-5 text-green-600 mt-0.5" />
                    <div>
                      <p className="font-medium">WhatsApp</p>
                      <p className="text-sm text-muted-foreground">+1 234-567-8901</p>
                      <Button
                        variant="outline"
                        size="sm"
                        className="mt-2 text-green-600 border-green-600 hover:bg-green-50 w-full sm:w-auto"
                        onClick={() =>
                          window.open(
                            "https://wa.me/1234567890?text=Hello!%20I%27m%20interested%20in%20admission%20information.",
                            "_blank",
                          )
                        }
                      >
                        <MessageCircle className="h-4 w-4 mr-2" />
                        Chat Now
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Map Section */}
      <section className="py-12 md:py-16 bg-muted/30">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold mb-2">Find Us</h2>
            <p className="text-muted-foreground">Visit our campus to experience Horizon College in person</p>
          </div>
          <div className="aspect-video w-full rounded-lg overflow-hidden border">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007%2C%20USA!5e0!3m2!1sen!2sus!4v1647544792018!5m2!1sen!2sus"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom breakpoint for extra small screens */
@media (min-width: 480px) {
  .xs\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xs\:flex-row {
    flex-direction: row;
  }
  .xs\:w-auto {
    width: auto;
  }
}

/* Responsive Styles */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }

/* Improve table responsiveness */
  table {
    @apply w-full block overflow-x-auto;
  }

/* Improve form responsiveness */
  input,
  select,
  textarea {
    @apply w-full;
  }
}

/* Animation for WhatsApp float */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* Slide in from bottom animation */
@keyframes slideInFromBottom {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-from-bottom-5 {
  animation: slideInFromBottom 0.3s ease-in-out;
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* Responsive typography */
@media (max-width: 640px) {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  p {
    @apply text-sm;
  }
}

/* Fix for long words and URLs */
.break-all {
  word-break: break-all;
}

/* Responsive padding and margins */
@media (max-width: 640px) {
  .p-6 {
    @apply p-4;
  }
  .px-6 {
    @apply px-4;
  }
  .py-6 {
    @apply py-4;
  }
  .m-6 {
    @apply m-4;
  }
  .mx-6 {
    @apply mx-4;
  }
  .my-6 {
    @apply my-4;
  }
  .gap-6 {
    @apply gap-4;
  }
}

/* Responsive sidebar */
@media (min-width: 768px) {
  .md\:ml-64 {
    margin-left: 16rem;
  }
}

/* NEW ANIMATIONS */

/* Bounce animation */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-1 * var(--bounce-height, 10px)));
  }
}

/* Pulse animation */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.animate-pulse-slow {
  animation: pulse 3s ease-in-out infinite;
}

/* Rotate animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-rotate {
  animation: rotate 20s linear infinite;
}

/* Float animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

/* Shimmer animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.2) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* 3D Flip animation */
.card-container {
  perspective: 1000px;
}

.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-container:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-back {
  transform: rotateY(180deg);
}

/* Button hover effects */
.btn-hover-effect {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-hover-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.btn-hover-effect:hover::before {
  left: 100%;
}

/* Staggered animation for lists */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-item-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Carousel animations */
.carousel-slide-enter {
  opacity: 0;
  transform: scale(0.9);
}

.carousel-slide-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.carousel-slide-exit {
  opacity: 1;
  transform: scale(1);
}

.carousel-slide-exit-active {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover card effect */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Text reveal animation */
.text-reveal {
  position: relative;
  overflow: hidden;
}

.text-reveal::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--primary);
  animation: revealText 1.5s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

@keyframes revealText {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/* Gradient text animation */
.gradient-text {
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--primary)));
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradientText 5s linear infinite;
}

@keyframes gradientText {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* 3D tilt effect */
.tilt-effect {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt-effect:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

[V0_FILE]plaintext:file="public/images/classroom-banners.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7af01f02-e3c9-400b-9203-7ec920596096-1SRg33s4L8AfIQNCAzQZa5NwRZ48p4.png"

[V0_FILE]plaintext:file="public/images/modern-classroom.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f91559dc-26a7-4447-9ff5-932692d4cefd%20%281%29-VqvH88uVxjSl0lS2JcX2WJ67zcfqVw.png"

[V0_FILE]plaintext:file="public/images/collaborative-learning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5d0d6fbd-0c1f-4c1f-8783-e2505e3ae834-lFW3CyE56oUXfbJSIhsxe4f69N1Mvl.png"

[V0_FILE]plaintext:file="public/images/admission-celebration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/df4f7c2d-cda4-4f93-862e-572a16a7efd0-0tqrFEv25Opl0YYgSkQxuSTAZsWN75.png"

[V0_FILE]typescriptreact:file="components/animations/fade-in.tsx"
"use client"

import type React from "react"

import { useEffect, useRef, useState } from "react"
import { cn } from "@/lib/utils"

interface FadeInProps {
  children: React.ReactNode
  className?: string
  direction?: "up" | "down" | "left" | "right" | "none"
  delay?: number
  duration?: number
  threshold?: number
  once?: boolean
}

export function FadeIn({
  children,
  className,
  direction = "up",
  delay = 0,
  duration = 0.5,
  threshold = 0.1,
  once = true,
}: FadeInProps) {
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          if (once && ref.current) {
            observer.unobserve(ref.current)
          }
        } else if (!once) {
          setIsVisible(false)
        }
      },
      {
        threshold,
      },
    )

const currentRef = ref.current
    if (currentRef) {
      observer.observe(currentRef)
    }

return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [once, threshold])

const directionClasses = {
    up: "translate-y-10",
    down: "-translate-y-10",
    left: "translate-x-10",
    right: "-translate-x-10",
    none: "opacity-0",
  }

return (
    <div
      ref={ref}
      className={cn(
        "transition-all",
        isVisible ? "opacity-100 transform-none" : `opacity-0 ${directionClasses[direction]}`,
        className,
      )}
      style={{
        transitionDuration: `${duration}s`,
        transitionDelay: `${delay}s`,
      }}
    >
      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/animations/bounce.tsx"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"
import { useEffect, useRef, useState } from "react"

interface BounceProps {
  children: React.ReactNode
  className?: string
  delay?: number
  duration?: number
  height?: number
  infinite?: boolean
  threshold?: number
}

export function Bounce({
  children,
  className,
  delay = 0,
  duration = 0.5,
  height = 10,
  infinite = false,
  threshold = 0.1,
}: BounceProps) {
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
        }
      },
      {
        threshold,
      },
    )

const currentRef = ref.current
    if (currentRef) {
      observer.observe(currentRef)
    }

return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [threshold])

return (
    <div
      ref={ref}
      className={cn("transition-all", isVisible && "animate-in", className)}
      style={
        {
          animationDelay: `${delay}s`,
          animationDuration: `${duration}s`,
          animationName: isVisible ? "bounce" : "none",
          animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
          animationIterationCount: infinite ? "infinite" : "1",
          "--bounce-height": `${height}px`,
        } as React.CSSProperties
      }
    >
      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/animations/rotate-in.tsx"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"
import { useEffect, useRef, useState } from "react"

interface RotateInProps {
  children: React.ReactNode
  className?: string
  delay?: number
  duration?: number
  degrees?: number
  threshold?: number
}

export function RotateIn({
  children,
  className,
  delay = 0,
  duration = 0.5,
  degrees = 10,
  threshold = 0.1,
}: RotateInProps) {
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          if (ref.current) {
            observer.unobserve(ref.current)
          }
        }
      },
      {
        threshold,
      },
    )

const currentRef = ref.current
    if (currentRef) {
      observer.observe(currentRef)
    }

return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [threshold])

return (
    <div
      ref={ref}
      className={cn(
        "transition-all",
        isVisible ? "opacity-100 transform-none" : `opacity-0 rotate-[${degrees}deg]`,
        className,
      )}
      style={{
        transitionDuration: `${duration}s`,
        transitionDelay: `${delay}s`,
        transform: isVisible ? "rotate(0deg)" : `rotate(${degrees}deg)`,
      }}
    >
      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/animations/slide-in.tsx"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"
import { useEffect, useRef, useState } from "react"

interface SlideInProps {
  children: React.ReactNode
  className?: string
  direction?: "left" | "right" | "up" | "down"
  delay?: number
  duration?: number
  distance?: number
  threshold?: number
}

export function SlideIn({
  children,
  className,
  direction = "left",
  delay = 0,
  duration = 0.5,
  distance = 100,
  threshold = 0.1,
}: SlideInProps) {
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

const currentRef = ref.current
    if (currentRef) {
      observer.observe(currentRef)
    }

return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [threshold])

const getInitialTransform = () => {
    switch (direction) {
      case "left":
        return `translateX(${distance}px)`
      case "right":
        return `translateX(-${distance}px)`
      case "up":
        return `translateY(${distance}px)`
      case "down":
        return `translateY(-${distance}px)`
      default:
        return "translateX(0)"
    }
  }

return (
    <div
      ref={ref}
      className={cn("transition-all", isVisible ? "opacity-100 transform-none" : "opacity-0", className)}
      style={{
        transitionDuration: `${duration}s`,
        transitionDelay: `${delay}s`,
        transform: isVisible ? "translate(0, 0)" : getInitialTransform(),
      }}
    >
      {children}
    </div>
  )
}

[V0_FILE]plaintext:file="public/images/faculty-classroom.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5d0d6fbd-0c1f-4c1f-8783-e2505e3ae834-8jYL4baZH4CqZ2tdaxTGPwMjdbnsGT.png"

[V0_FILE]plaintext:file="public/images/faculty-teaching.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f91559dc-26a7-4447-9ff5-932692d4cefd%20%281%29%20-%20Copy-OxJCQ5vfh3cJlwvlQHfl1H4lTeAhMC.png"

[V0_FILE]plaintext:file="public/images/students-celebration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/df4f7c2d-cda4-4f93-862e-572a16a7efd0-tnVw1RXbwYa043YEZL2PIVpIf9Mmv2.png"

[V0_FILE]plaintext:file="public/images/professor-teaching.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f91559dc-26a7-4447-9ff5-932692d4cefd%20%281%29%20-%20Copy-BFMEF3gXhmcnGVlY66lr513UnU7gG7.png"

[V0_FILE]plaintext:file="public/images/professor-teaching-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f91559dc-26a7-4447-9ff5-932692d4cefd-OSNSYOT4tTPqo5olJqxbGfiPFN45tH.png"

[V0_FILE]plaintext:file="public/images/classroom-university-banners.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7af01f02-e3c9-400b-9203-7ec920596096-8ziNVjUMOFENWX6NhxQEpcXDUvZLaP.png"

[V0_FILE]plaintext:file="public/images/professor-teaching-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f91559dc-26a7-4447-9ff5-932692d4cefd%20-%20Copy-Nz9lLEpJDTDZbjJl5VvSd2IzOwUWV4.png"

[V0_FILE]plaintext:file="public/images/students-collaborative.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5d0d6fbd-0c1f-4c1f-8783-e2505e3ae834-xV3VmZiYSLulmT1NxaPaW5JXqCGWkY.png"

[V0_FILE]plaintext:file="public/images/professor-teaching-4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f91559dc-26a7-4447-9ff5-932692d4cefd%20%281%29-rNtUfplNJDJ6hhYZBiP0zsCh2DxsFe.png"

[V0_FILE]plaintext:file="public/images/students-admission-celebration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/df4f7c2d-cda4-4f93-862e-572a16a7efd0-0044tkiEpkU7OIQ2ko071wHVTmIRiS.png"

[V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isQuickEdit="true"
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
// Remove this line:
// import { useCarousel } from "@/components/ui/carousel"

interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {}

const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(({ className, ...props }, ref) => {
  return <div className={cn("relative", className)} ref={ref} {...props} />
})
Carousel.displayName = "Carousel"

interface CarouselContentProps extends React.HTMLAttributes<HTMLDivElement> {}

const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(({ className, ...props }, ref) => {
  return (
    <div
      className={cn(
        "relative flex snap-x snap-mandatory overflow-hidden scroll-smooth touch-pan-x will-change-[scroll-position,transform]",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
CarouselContent.displayName = "CarouselContent"

interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {}

const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(({ className, ...props }, ref) => {
  return <div className={cn("relative w-full shrink-0 snap-center px-4", className)} ref={ref} {...props} />
})
CarouselItem.displayName = "CarouselItem"

interface CarouselPreviousProps extends React.HTMLAttributes<HTMLButtonElement> {}

const CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselPreviousProps>(({ className, ...props }, ref) => {
  return (
    <button
      className={cn(
        "absolute left-2 top-1/2 z-10 h-8 w-8 -translate-y-1/2 rounded-full bg-background/75 opacity-50 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-25",
        className,
      )}
      ref={ref}
      {...props}
    >
      <span className="sr-only">Go to previous slide</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
        <path
          fillRule="evenodd"
          d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-2.47-2.47H15a.75.75 0 0 0 0-1.5H6.51l2.47-2.47a.75.75 0 0 0-1.06-1.06l-3 3Z"
          clipRule="evenodd"
        />
      </svg>
    </button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

interface CarouselNextProps extends React.HTMLAttributes<HTMLButtonElement> {}

const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselNextProps>(({ className, ...props }, ref) => {
  return (
    <button
      className={cn(
        "absolute right-2 top-1/2 z-10 h-8 w-8 -translate-y-1/2 rounded-full bg-background/75 opacity-50 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-25",
        className,
      )}
      ref={ref}
      {...props}
    >
      <span className="sr-only">Go to next slide</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
        <path
          fillRule="evenodd"
          d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm3.53 8.47a.75.75 0 0 0-1.06-1.06l-3 3a.75.75 0 0 0 1.06 1.06l2.47-2.47H9a.75.75 0 0 0 0 1.5h6.49l-2.47 2.47a.75.75 0 0 0 1.06 1.06l3-3Z"
          clipRule="evenodd"
        />
      </svg>
    </button>
  )
})
CarouselNext.displayName = "CarouselNext"

export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { ArrowRight, BookOpen, GraduationCap, Users, Award, ChevronRight, MessageCircle } from "lucide-react"
import { useEffect, useRef } from "react"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import { NewsCard } from "@/components/news-card"
import { TestimonialCard } from "@/components/testimonial-card"
import { ProgramCard } from "@/components/program-card"
import { StatsCard } from "@/components/stats-card"
import { FacultyCard } from "@/components/faculty-card"
import { CounterAnimation } from "@/components/counter-animation"
import { FadeIn } from "@/components/animations/fade-in"
import { SlideIn } from "@/components/animations/slide-in"
import { Bounce } from "@/components/animations/bounce"
import { RotateIn } from "@/components/animations/rotate-in"

export default function Home() {
  // Reference to the carousel next button
  const carouselNextRef = useRef<HTMLButtonElement>(null)

// Auto-play effect
  useEffect(() => {
    // Set up auto-play interval
    const interval = setInterval(() => {
      // Programmatically click the next button
      if (carouselNextRef.current) {
        carouselNextRef.current.click()
      }
    }, 5000) // Change slide every 5 seconds

// Clean up interval on component unmount
    return () => clearInterval(interval)
  }, [])

return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section with Carousel */}
      <section className="relative w-full h-[80vh] min-h-[500px] overflow-hidden">
        <Carousel className="w-full h-full">
          <CarouselContent className="h-full">
            {/* First Carousel Item */}
            <CarouselItem className="h-full relative carousel-slide-enter carousel-slide-enter-active">
              <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary-foreground/20 z-10" />
              <Image
                src="/images/students-admission-celebration.png"
                alt="Students celebrating admission"
                fill
                className="object-cover animate-pulse-slow"
                priority
              />
              <div className="relative z-20 container mx-auto h-full flex flex-col justify-center items-start px-4 md:px-6">
                <div className="max-w-3xl space-y-4">
                  <FadeIn direction="down" delay={0.2}>
                    <Badge className="mb-4 text-sm">Admissions Open for 2025-26</Badge>
                  </FadeIn>
                  <FadeIn direction="left" delay={0.4}>
                    <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight text-reveal">
                      Begin Your Journey to Success
                    </h1>
                  </FadeIn>
                  <FadeIn direction="left" delay={0.6}>
                    <p className="text-base sm:text-lg md:text-xl text-white/90 max-w-xl">
                      Join our vibrant community of learners and leaders at Horizon College.
                    </p>
                  </FadeIn>
                  <FadeIn direction="up" delay={0.8}>
                    <div className="flex flex-col sm:flex-row gap-4 pt-4 w-full sm:w-auto">
                      <Button size="lg" className="w-full sm:w-auto btn-hover-effect" asChild>
                        <Link href="/admission">
                          Apply Now <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                      <Button
                        size="lg"
                        variant="outline"
                        className="w-full sm:w-auto bg-white/10 text-white border-white/20 hover:bg-white/20 btn-hover-effect"
                      >
                        <Link href="/programs">Explore Programs</Link>
                      </Button>
                    </div>
                  </FadeIn>
                </div>
              </div>
            </CarouselItem>

{/* Second Carousel Item */}
            <CarouselItem className="h-full relative carousel-slide-enter carousel-slide-enter-active">
              <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary-foreground/20 z-10" />
              <Image
                src="/images/professor-teaching.png"
                alt="Professor teaching students"
                fill
                className="object-cover animate-pulse-slow"
                priority
              />
              <div className="relative z-20 container mx-auto h-full flex flex-col justify-center items-start px-4 md:px-6">
                <div className="max-w-3xl space-y-4">
                  <SlideIn direction="down" delay={0.2}>
                    <Badge className="mb-4 text-sm">Excellence in Education</Badge>
                  </SlideIn>
                  <SlideIn direction="left" delay={0.4}>
                    <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight text-reveal">
                      Learn from Industry Experts
                    </h1>
                  </SlideIn>
                  <SlideIn direction="left" delay={0.6}>
                    <p className="text-base sm:text-lg md:text-xl text-white/90 max-w-xl">
                      Our distinguished faculty brings real-world experience to the classroom.
                    </p>
                  </SlideIn>
                  <SlideIn direction="up" delay={0.8}>
                    <div className="flex flex-col sm:flex-row gap-4 pt-4 w-full sm:w-auto">
                      <Button size="lg" className="w-full sm:w-auto btn-hover-effect" asChild>
                        <Link href="/faculty">
                          Meet Our Faculty <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                      <Button
                        size="lg"
                        variant="outline"
                        className="w-full sm:w-auto bg-green-600/90 text-white border-green-500 hover:bg-green-700 btn-hover-effect"
                        onClick={() =>
                          window.open(
                            "https://wa.me/1234567890?text=Hello!%20I%27m%20interested%20in%20learning%20more%20about%20Horizon%20College.",
                            "_blank",
                          )
                        }
                      >
                        <MessageCircle className="mr-2 h-4 w-4" />
                        WhatsApp Us
                      </Button>
                    </div>
                  </SlideIn>
                </div>
              </div>
            </CarouselItem>

{/* Third Carousel Item */}
            <CarouselItem className="h-full relative carousel-slide-enter carousel-slide-enter-active">
              <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary-foreground/20 z-10" />
              <Image
                src="/images/students-collaborative.png"
                alt="Collaborative learning environment"
                fill
                className="object-cover animate-pulse-slow"
                priority
              />
              <div className="relative z-20 container mx-auto h-full flex flex-col justify-center items-start px-4 md:px-6">
                <div className="max-w-3xl space-y-4">
                  <RotateIn delay={0.2} degrees={-5}>
                    <Badge className="mb-4 text-sm">Innovative Learning</Badge>
                  </RotateIn>
                  <RotateIn delay={0.4} degrees={5}>
                    <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight text-reveal">
                      Collaborative Education
                    </h1>
                  </RotateIn>
                  <RotateIn delay={0.6} degrees={-5}>
                    <p className="text-base sm:text-lg md:text-xl text-white/90 max-w-xl">
                      Experience our modern facilities and collaborative learning environments.
                    </p>
                  </RotateIn>
                  <RotateIn delay={0.8} degrees={5}>
                    <div className="flex flex-col sm:flex-row gap-4 pt-4 w-full sm:w-auto">
                      <Button size="lg" className="w-full sm:w-auto btn-hover-effect" asChild>
                        <Link href="/campus">
                          Tour Our Campus <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                      <Button
                        size="lg"
                        variant="outline"
                        className="w-full sm:w-auto bg-white/10 text-white border-white/20 hover:bg-white/20 btn-hover-effect"
                      >
                        <Link href="/programs">View Programs</Link>
                      </Button>
                    </div>
                  </RotateIn>
                </div>
              </div>
            </CarouselItem>

{/* Fourth Carousel Item */}
            <CarouselItem className="h-full relative carousel-slide-enter carousel-slide-enter-active">
              <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary-foreground/20 z-10" />
              <Image
                src="/images/classroom-university-banners.png"
                alt="Classroom with university banners"
                fill
                className="object-cover animate-pulse-slow"
                priority
              />
              <div className="relative z-20 container mx-auto h-full flex flex-col justify-center items-start px-4 md:px-6">
                <div className="max-w-3xl space-y-4">
                  <FadeIn direction="down" delay={0.2}>
                    <Badge className="mb-4 text-sm">Academic Excellence</Badge>
                  </FadeIn>
                  <FadeIn direction="left" delay={0.4}>
                    <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight text-reveal">
                      Tradition of Excellence
                    </h1>
                  </FadeIn>
                  <FadeIn direction="left" delay={0.6}>
                    <p className="text-base sm:text-lg md:text-xl text-white/90 max-w-xl">
                      Join a prestigious institution with a rich history of academic achievement.
                    </p>
                  </FadeIn>
                  <FadeIn direction="up" delay={0.8}>
                    <div className="flex flex-col sm:flex-row gap-4 pt-4 w-full sm:w-auto">
                      <Button size="lg" className="w-full sm:w-auto btn-hover-effect" asChild>
                        <Link href="/about">
                          Our History <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                      <Button
                        size="lg"
                        variant="outline"
                        className="w-full sm:w-auto bg-white/10 text-white border-white/20 hover:bg-white/20 btn-hover-effect"
                      >
                        <Link href="/programs">Explore Programs</Link>
                      </Button>
                    </div>
                  </FadeIn>
                </div>
              </div>
            </CarouselItem>
          </CarouselContent>
          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 flex gap-2">
            <CarouselPrevious className="relative static translate-y-0 h-8 w-8 animate-float" />
            <CarouselNext ref={carouselNextRef} className="relative static translate-y-0 h-8 w-8 animate-float" />
          </div>
        </Carousel>
      </section>

{/* Stats Section */}
      <section className="py-12 md:py-16 bg-muted/50">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
            <FadeIn delay={0.1}>
              <StatsCard
                icon={<Users className="h-6 w-6 text-primary animate-float" />}
                value={<CounterAnimation end={15000} duration={2} />}
                label="Students"
              />
            </FadeIn>
            <FadeIn delay={0.2}>
              <StatsCard
                icon={<GraduationCap className="h-6 w-6 text-primary animate-float" />}
                value={<CounterAnimation end={50} duration={2} />}
                label="Programs"
              />
            </FadeIn>
            <FadeIn delay={0.3}>
              <StatsCard
                icon={<BookOpen className="h-6 w-6 text-primary animate-float" />}
                value={<CounterAnimation end={500} duration={2} />}
                label="Faculty Members"
              />
            </FadeIn>
            <FadeIn delay={0.4}>
              <StatsCard
                icon={<Award className="h-6 w-6 text-primary animate-float" />}
                value={<CounterAnimation end={95} duration={2} suffix="%" />}
                label="Placement Rate"
              />
            </FadeIn>
          </div>
        </div>
      </section>

{/* About Section */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <SlideIn direction="right">
              <div className="space-y-6">
                <div>
                  <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 gradient-text">
                    About Our College
                  </h2>
                  <div className="w-20 h-1 bg-primary mb-6 animate-shimmer"></div>
                </div>
                <p className="text-muted-foreground">
                  Founded in 1985, our institution has been at the forefront of academic excellence and innovation. We
                  are committed to providing a holistic education that prepares students for the challenges of the
                  modern world.
                </p>
                <p className="text-muted-foreground">
                  Our state-of-the-art facilities, distinguished faculty, and industry partnerships create an
                  environment where students can thrive and realize their full potential.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 pt-4">
                  <Button variant="outline" className="btn-hover-effect" asChild>
                    <Link href="/about">
                      Learn More <ChevronRight className="ml-1 h-4 w-4" />
                    </Link>
                  </Button>
                  <Button
                    variant="outline"
                    className="text-green-600 border-green-600 hover:bg-green-50 btn-hover-effect"
                    onClick={() =>
                      window.open(
                        "https://wa.me/1234567890?text=Hello!%20I%27d%20like%20to%20know%20more%20about%20Horizon%20College.",
                        "_blank",
                      )
                    }
                  >
                    <MessageCircle className="mr-2 h-4 w-4" />
                    Chat with Us
                  </Button>
                </div>
              </div>
            </SlideIn>
            <SlideIn direction="left">
              <div className="relative h-[300px] sm:h-[400px] rounded-lg overflow-hidden tilt-effect">
                <Image
                  src="/images/classroom-university-banners.png"
                  alt="College classroom with university banners"
                  fill
                  className="object-cover rounded-lg hover-card"
                />
              </div>
            </SlideIn>
          </div>
        </div>
      </section>

{/* Programs Section */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4 md:px-6">
          <FadeIn>
            <div className="text-center max-w-3xl mx-auto mb-12">
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 gradient-text">Academic Programs</h2>
              <div className="w-20 h-1 bg-primary mx-auto mb-6 animate-shimmer"></div>
              <p className="text-muted-foreground">
                Discover our diverse range of undergraduate and graduate programs designed to prepare you for success in
                your chosen field.
              </p>
            </div>
          </FadeIn>

<Tabs defaultValue="undergraduate" className="w-full">
            <div className="flex justify-center mb-8 overflow-x-auto pb-2">
              <TabsList>
                <TabsTrigger value="undergraduate" className="transition-all hover:scale-105">
                  Undergraduate
                </TabsTrigger>
                <TabsTrigger value="graduate" className="transition-all hover:scale-105">
                  Graduate
                </TabsTrigger>
                <TabsTrigger value="doctoral" className="transition-all hover:scale-105">
                  Doctoral
                </TabsTrigger>
              </TabsList>
            </div>

<TabsContent value="undergraduate" className="space-y-8">
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <FadeIn delay={0.1}>
                  <div className="card-container">
                    <ProgramCard
                      title="Computer Science"
                      description="Learn programming, algorithms, and software development"
                      duration="4 years"
                      seats={30}
                      availableSeats={5}
                    />
                  </div>
                </FadeIn>
                <FadeIn delay={0.2}>
                  <div className="card-container">
                    <ProgramCard
                      title="Business Administration"
                      description="Study management, marketing, and entrepreneurship"
                      duration="4 years"
                      seats={40}
                      availableSeats={12}
                    />
                  </div>
                </FadeIn>
                <FadeIn delay={0.3}>
                  <div className="card-container">
                    <ProgramCard
                      title="Mechanical Engineering"
                      description="Design and analyze mechanical systems and processes"
                      duration="4 years"
                      seats={35}
                      availableSeats={8}
                    />
                  </div>
                </FadeIn>
              </div>
              <div className="text-center mt-8">
                <Bounce height={5}>
                  <Button variant="outline" className="btn-hover-effect" asChild>
                    <Link href="/programs">View All Programs</Link>
                  </Button>
                </Bounce>
              </div>
            </TabsContent>

<TabsContent value="graduate" className="space-y-8">
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <FadeIn delay={0.1}>
                  <div className="card-container">
                    <ProgramCard
                      title="MBA"
                      description="Advanced business management and leadership skills"
                      duration="2 years"
                      seats={25}
                      availableSeats={3}
                    />
                  </div>
                </FadeIn>
                <FadeIn delay={0.2}>
                  <div className="card-container">
                    <ProgramCard
                      title="Data Science"
                      description="Machine learning, statistics, and big data analytics"
                      duration="2 years"
                      seats={20}
                      availableSeats={7}
                    />
                  </div>
                </FadeIn>
                <FadeIn delay={0.3}>
                  <div className="card-container">
                    <ProgramCard
                      title="Electrical Engineering"
                      description="Advanced electrical systems and power electronics"
                      duration="2 years"
                      seats={30}
                      availableSeats={10}
                    />
                  </div>
                </FadeIn>
              </div>
              <div className="text-center mt-8">
                <Bounce height={5}>
                  <Button variant="outline" className="btn-hover-effect" asChild>
                    <Link href="/programs">View All Programs</Link>
                  </Button>
                </Bounce>
              </div>
            </TabsContent>

<TabsContent value="doctoral" className="space-y-8">
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <FadeIn delay={0.1}>
                  <div className="card-container">
                    <ProgramCard
                      title="PhD in Computer Science"
                      description="Research in artificial intelligence and machine learning"
                      duration="4-5 years"
                      seats={10}
                      availableSeats={2}
                    />
                  </div>
                </FadeIn>
                <FadeIn delay={0.2}>
                  <div className="card-container">
                    <ProgramCard
                      title="PhD in Business"
                      description="Advanced research in business strategy and innovation"
                      duration="4-5 years"
                      seats={8}
                      availableSeats={3}
                    />
                  </div>
                </FadeIn>
                <FadeIn delay={0.3}>
                  <div className="card-container">
                    <ProgramCard
                      title="PhD in Engineering"
                      description="Cutting-edge research in engineering disciplines"
                      duration="4-5 years"
                      seats={12}
                      availableSeats={4}
                    />
                  </div>
                </FadeIn>
              </div>
              <div className="text-center mt-8">
                <Bounce height={5}>
                  <Button variant="outline" className="btn-hover-effect" asChild>
                    <Link href="/programs">View All Programs</Link>
                  </Button>
                </Bounce>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </section>

{/* Faculty Section */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4 md:px-6">
          <FadeIn>
            <div className="text-center max-w-3xl mx-auto mb-12">
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 gradient-text">
                Our Distinguished Faculty
              </h2>
              <div className="w-20 h-1 bg-primary mx-auto mb-6 animate-shimmer"></div>
              <p className="text-muted-foreground">
                Learn from industry experts and renowned academics who are leaders in their fields.
              </p>
            </div>
          </FadeIn>

{/* Testimonials Section */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4 md:px-6">
          <FadeIn>
            <div className="text-center max-w-3xl mx-auto mb-12">
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 gradient-text">Student Testimonials</h2>
              <div className="w-20 h-1 bg-primary mx-auto mb-6 animate-shimmer"></div>
              <p className="text-muted-foreground">
                Hear what our students and alumni have to say about their experience at our institution.
              </p>
            </div>
          </FadeIn>

{/* News & Events Section */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4 md:px-6">
          <FadeIn>
            <div className="text-center max-w-3xl mx-auto mb-12">
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 gradient-text">News & Events</h2>
              <div className="w-20 h-1 bg-primary mx-auto mb-6 animate-shimmer"></div>
              <p className="text-muted-foreground">
                Stay updated with the latest happenings, events, and achievements at our college.
              </p>
            </div>
          </FadeIn>

<div className="text-center mt-10">
            <Bounce height={5}>
              <Button variant="outline" className="btn-hover-effect" asChild>
                <Link href="/news">View All News & Events</Link>
              </Button>
            </Bounce>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 md:py-24 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center max-w-3xl mx-auto">
            <SlideIn direction="down">
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-6">
                Ready to Begin Your Journey?
              </h2>
            </SlideIn>
            <SlideIn direction="up" delay={0.2}>
              <p className="text-primary-foreground/90 mb-8 text-base sm:text-lg">
                Applications for the 2025-26 academic year are now open. Limited seats available.
              </p>
            </SlideIn>
            <SlideIn direction="up" delay={0.4}>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" className="w-full sm:w-auto btn-hover-effect" variant="secondary" asChild>
                  <Link href="/admission">
                    Apply Now <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
                <Button
                  size="lg"
                  className="w-full sm:w-auto btn-hover-effect border-primary-foreground/20 hover:bg-primary-foreground/10"
                  variant="outline"
                  asChild
                >
                  <Link href="/contact">Contact Admissions</Link>
                </Button>
                <Button
                  size="lg"
                  className="w-full sm:w-auto btn-hover-effect bg-green-600/90 text-white border-green-500 hover:bg-green-700"
                  variant="outline"
                  onClick={() =>
                    window.open(
                      "https://wa.me/1234567890?text=Hello!%20I%27m%20interested%20in%20applying%20to%20Horizon%20College.",
                      "_blank",
                    )
                  }
                >
                  <MessageCircle className="mr-2 h-4 w-4" />
                  WhatsApp Admissions
                </Button>
              </div>
            </SlideIn>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/main-nav.tsx" isQuickEdit="true"
"use client"

import Link from "next/link"
import { useState, useEffect } from "react"
import { Menu, X, ChevronDown, Search, Phone, Mail, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"

export function MainNav() {
  const [isOpen, setIsOpen] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const handleWhatsAppClick = () => {
    window.open(
      "https://wa.me/1234567890?text=Hello!%20I%27m%20interested%20in%20learning%20more%20about%20Horizon%20College.",
      "_blank",
    )
  }

return (
    <header
      className={cn(
        "sticky top-0 z-50 w-full transition-all duration-200",
        isScrolled ? "bg-background/95 backdrop-blur-sm shadow-sm" : "bg-transparent",
      )}
    >
      <div className="container mx-auto px-4 md:px-6">
        {/* Top Bar with Contact Info */}
        <div className="hidden md:flex justify-between items-center py-2 text-xs border-b">
          <div className="flex items-center space-x-4">
            <a href="tel:+1234567890" className="flex items-center hover:text-primary">
              <Phone className="h-3 w-3 mr-1" />
              (123) 456-7890
            </a>
            <a href="mailto:info@horizoncollege.edu" className="flex items-center hover:text-primary">
              <Mail className="h-3 w-3 mr-1" />
              info@horizoncollege.edu
            </a>
          </div>
          <div className="flex items-center space-x-4">
            <button onClick={handleWhatsAppClick} className="flex items-center hover:text-green-600">
              <MessageCircle className="h-3 w-3 mr-1" />
              WhatsApp Support
            </button>
            <Link href="/contact" className="hover:text-primary">
              Contact Us
            </Link>
            <Link href="/dashboard" className="hover:text-primary">
              Student Portal
            </Link>
            <Link href="/admin/dashboard" className="hover:text-primary">
              Admin Portal
            </Link>
          </div>
        </div>

<div className="flex h-16 items-center justify-between">
          <div className="flex items-center">
            <Link href="/" className="text-xl font-bold relative group overflow-hidden">
              <span className="gradient-text inline-block transition-all duration-300 animate-float hover:scale-105">
                Evergreen College
              </span>
              <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
            </Link>
          </div>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-6 perspective-[1000px]">
            <Link
              href="/"
              className="text-sm font-medium relative group overflow-hidden transition-all duration-300 hover:text-primary animate-float"
              style={{ animationDelay: "0ms", animationDuration: "3s" }}
            >
              <span className="inline-block transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3">
                Home
              </span>
              <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
            </Link>

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  className="flex items-center text-sm font-medium relative group overflow-hidden transition-all duration-300 hover:text-primary animate-float"
                  style={{ animationDelay: "100ms", animationDuration: "3.2s" }}
                >
                  <span className="inline-block transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3">
                    About
                  </span>
                  <ChevronDown className="ml-1 h-4 w-4 transition-transform duration-300 group-hover:rotate-180" />
                  <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="animate-in fade-in slide-in-from-top-5 duration-300">
                <DropdownMenuItem asChild>
                  <Link href="/about" className="group">
                    <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
                      About Us
                    </span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <Link href="/about/history" className="group">
                    <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
                      Our History
                    </span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <Link href="/about/campus" className="group">
                    <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
                      Campus
                    </span>
                  </Link>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  className="flex items-center text-sm font-medium relative group overflow-hidden transition-all duration-300 hover:text-primary animate-float"
                  style={{ animationDelay: "200ms", animationDuration: "3.4s" }}
                >
                  <span className="inline-block transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3">
                    Programs
                  </span>
                  <ChevronDown className="ml-1 h-4 w-4 transition-transform duration-300 group-hover:rotate-180" />
                  <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="animate-in fade-in slide-in-from-top-5 duration-300">
                <DropdownMenuItem asChild>
                  <Link href="/programs/undergraduate" className="group">
                    <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
                      Undergraduate
                    </span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <Link href="/programs/graduate" className="group">
                    <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
                      Graduate
                    </span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <Link href="/programs/doctoral" className="group">
                    <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
                      Doctoral
                    </span>
                  </Link>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

<Link
              href="/faculty"
              className="text-sm font-medium relative group overflow-hidden transition-all duration-300 hover:text-primary animate-float"
              style={{ animationDelay: "300ms", animationDuration: "3.6s" }}
            >
              <span className="inline-block transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3">
                Faculty
              </span>
              <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
            </Link>

<Link
              href="/news"
              className="text-sm font-medium relative group overflow-hidden transition-all duration-300 hover:text-primary animate-float"
              style={{ animationDelay: "400ms", animationDuration: "3.8s" }}
            >
              <span className="inline-block transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3">
                News & Events
              </span>
              <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
            </Link>

<Link
              href="/contact"
              className="text-sm font-medium relative group overflow-hidden transition-all duration-300 hover:text-primary animate-float"
              style={{ animationDelay: "500ms", animationDuration: "4s" }}
            >
              <span className="inline-block transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3">
                Contact
              </span>
              <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
            </Link>
          </nav>

<div className="hidden md:flex items-center space-x-4">
            <Button variant="ghost" size="icon">
              <Search className="h-5 w-5" />
            </Button>
            <Button asChild>
              <Link href="/admission">Apply Now</Link>
            </Button>
          </div>

{/* Mobile Navigation Toggle */}
          <button className="md:hidden" onClick={() => setIsOpen(!isOpen)} aria-label="Toggle Menu">
            {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>
      </div>

{/* Mobile Navigation Menu */}
      {isOpen && (
        <div className="md:hidden bg-background border-t">
          <div className="container mx-auto px-4 py-4 space-y-4">
            <div className="flex flex-col space-y-2 mb-4">
              <a href="tel:+1234567890" className="flex items-center text-sm py-1 hover:text-primary">
                <Phone className="h-4 w-4 mr-2" />
                (123) 456-7890
              </a>
              <a href="mailto:info@horizoncollege.edu" className="flex items-center text-sm py-1 hover:text-primary">
                <Mail className="h-4 w-4 mr-2" />
                info@horizoncollege.edu
              </a>
              <button onClick={handleWhatsAppClick} className="flex items-center text-sm py-1 hover:text-green-600">
                <MessageCircle className="h-4 w-4 mr-2" />
                WhatsApp Support
              </button>
            </div>

<Link
              href="/"
              className="block py-2 text-sm font-medium hover:text-primary"
              onClick={() => setIsOpen(false)}
            >
              Home
            </Link>
            <div className="py-2">
              <div className="flex justify-between items-center">
                <span className="text-sm font-medium">About</span>
                <ChevronDown className="h-4 w-4" />
              </div>
              <div className="pl-4 mt-2 space-y-2">
                <Link href="/about" className="block py-1 text-sm hover:text-primary" onClick={() => setIsOpen(false)}>
                  About Us
                </Link>
                <Link
                  href="/about/history"
                  className="block py-1 text-sm hover:text-primary"
                  onClick={() => setIsOpen(false)}
                >
                  Our History
                </Link>
                <Link
                  href="/about/campus"
                  className="block py-1 text-sm hover:text-primary"
                  onClick={() => setIsOpen(false)}
                >
                  Campus
                </Link>
              </div>
            </div>
            <div className="py-2">
              <div className="flex justify-between items-center">
                <span className="text-sm font-medium">Programs</span>
                <ChevronDown className="h-4 w-4" />
              </div>
              <div className="pl-4 mt-2 space-y-2">
                <Link
                  href="/programs/undergraduate"
                  className="block py-1 text-sm hover:text-primary"
                  onClick={() => setIsOpen(false)}
                >
                  Undergraduate
                </Link>
                <Link
                  href="/programs/graduate"
                  className="block py-1 text-sm hover:text-primary"
                  onClick={() => setIsOpen(false)}
                >
                  Graduate
                </Link>
                <Link
                  href="/programs/doctoral"
                  className="block py-1 text-sm hover:text-primary"
                  onClick={() => setIsOpen(false)}
                >
                  Doctoral
                </Link>
              </div>
            </div>
            <Link
              href="/faculty"
              className="block py-2 text-sm font-medium hover:text-primary"
              onClick={() => setIsOpen(false)}
            >
              Faculty
            </Link>
            <Link
              href="/news"
              className="block py-2 text-sm font-medium hover:text-primary"
              onClick={() => setIsOpen(false)}
            >
              News & Events
            </Link>
            <Link
              href="/contact"
              className="block py-2 text-sm font-medium hover:text-primary"
              onClick={() => setIsOpen(false)}
            >
              Contact
            </Link>
            <div className="pt-2 space-y-2">
              <Link
                href="/dashboard"
                className="block py-2 text-sm font-medium hover:text-primary"
                onClick={() => setIsOpen(false)}
              >
                Student Portal
              </Link>
              <Link
                href="/admin/dashboard"
                className="block py-2 text-sm font-medium hover:text-primary"
                onClick={() => setIsOpen(false)}
              >
                Admin Portal
              </Link>
            </div>
            <Button className="w-full mt-2" asChild>
              <Link href="/admission" onClick={() => setIsOpen(false)}>
                Apply Now
              </Link>
            </Button>
          </div>
        </div>
      )}
    </header>
  )
}
8a:["$","$L92",null,{"chatId":"VZQJuKUfkBm","children":["$","$L93",null,{"data":{"@\"active-block\",\"VZQJuKUfkBm\",":{"id":"eQYmeRq85tw","messageId":"eBmGSCRr7UrEVVPpsL0hfVDgCGUu21aQ","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"college-website","type":"code-project","project":"college-website"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"VZQJuKUfkBm\",":false,"":null},"children":"$L95"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from lumiotools-8139

More Templates Like This