[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.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: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 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; } } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { GlobeIcon } from "lucide-react" import { FacebookIcon, LinkedinIcon, InstagramIcon, TwitterIcon } from "lucide-react" const Footer = () => { return ( ) } export default Footer [V0_FILE]typescriptreact:file="app/search/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { SearchIcon, FilterIcon, HeartIcon, StarIcon, MapPinIcon, DollarSignIcon, CalendarIcon, XIcon, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Card, CardTitle } from "@/components/ui/card" import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" import Link from "next/link" import Image from "next/image" import { useSearchParams, useRouter } from "next/navigation" // Mock data for universities const allUniversities = [ { id: 1, name: "Harvard University", country: "USA", ranking: 1, rating: 4.9, address: "Cambridge, Massachusetts, USA", ielts: 7.0, courses: ["Computer Science", "Business", "Law", "Medicine"], tuition: "$50,000/year", intake: "Fall 2024", image: "/placeholder.svg?height=200&width=300", }, { id: 2, name: "University of Oxford", country: "UK", ranking: 2, rating: 4.8, address: "Oxford, United Kingdom", ielts: 7.0, courses: ["English Literature", "Physics", "Philosophy", "Economics"], tuition: "£35,000/year", intake: "Fall 2024", image: "/placeholder.svg?height=200&width=300", }, { id: 3, name: "University of Toronto", country: "Canada", ranking: 18, rating: 4.7, address: "Toronto, Ontario, Canada", ielts: 6.5, courses: ["Engineering", "Computer Science", "Psychology", "Business"], tuition: "CAD$45,000/year", intake: "Fall 2024, Winter 2025", image: "/placeholder.svg?height=200&width=300", }, { id: 4, name: "University of Melbourne", country: "Australia", ranking: 33, rating: 4.6, address: "Melbourne, Victoria, Australia", ielts: 6.5, courses: ["Environmental Science", "Arts", "Medicine", "Engineering"], tuition: "AUD$40,000/year", intake: "February 2024, July 2024", image: "/placeholder.svg?height=200&width=300", }, { id: 5, name: "Technical University of Munich", country: "Germany", ranking: 50, rating: 4.5, address: "Munich, Germany", ielts: 6.0, courses: ["Engineering", "Computer Science", "Physics", "Chemistry"], tuition: "€1,500/semester", intake: "Winter 2024, Summer 2025", image: "/placeholder.svg?height=200&width=300", }, { id: 6, name: "National University of Singapore", country: "Singapore", ranking: 11, rating: 4.7, address: "Singapore", ielts: 6.5, courses: ["Business", "Computer Science", "Engineering", "Medicine"], tuition: "SGD$38,000/year", intake: "August 2024", image: "/placeholder.svg?height=200&width=300", }, { id: 7, name: "ETH Zurich", country: "Switzerland", ranking: 8, rating: 4.8, address: "Zurich, Switzerland", ielts: 6.5, courses: ["Engineering", "Computer Science", "Mathematics", "Physics"], tuition: "CHF 1,460/year", intake: "September 2024", image: "/placeholder.svg?height=200&width=300", }, { id: 8, name: "University of British Columbia", country: "Canada", ranking: 34, rating: 4.6, address: "Vancouver, British Columbia, Canada", ielts: 6.5, courses: ["Environmental Science", "Business", "Computer Science", "Medicine"], tuition: "CAD$42,000/year", intake: "September 2024, January 2025", image: "/placeholder.svg?height=200&width=300", }, { id: 9, name: "Imperial College London", country: "UK", ranking: 7, rating: 4.7, address: "London, United Kingdom", ielts: 7.0, courses: ["Engineering", "Medicine", "Science", "Business"], tuition: "£38,000/year", intake: "October 2024", image: "/placeholder.svg?height=200&width=300", }, { id: 10, name: "University of Sydney", country: "Australia", ranking: 40, rating: 4.5, address: "Sydney, Australia", ielts: 6.5, courses: ["Business", "Engineering", "Arts", "Medicine"], tuition: "AUD$45,000/year", intake: "February 2024, July 2024", image: "/placeholder.svg?height=200&width=300", }, { id: 11, name: "Ludwig Maximilian University of Munich", country: "Germany", ranking: 32, rating: 4.6, address: "Munich, Germany", ielts: 6.0, courses: ["Medicine", "Law", "Physics", "Business"], tuition: "€1,500/semester", intake: "Winter 2024, Summer 2025", image: "/placeholder.svg?height=200&width=300", }, { id: 12, name: "University of California, Berkeley", country: "USA", ranking: 13, rating: 4.7, address: "Berkeley, California, USA", ielts: 7.0, courses: ["Computer Science", "Engineering", "Business", "Environmental Science"], tuition: "$45,000/year", intake: "Fall 2024", image: "/placeholder.svg?height=200&width=300", }, ] export default function SearchPage() { const searchParams = useSearchParams() const router = useRouter() const [searchTerm, setSearchTerm] = useState("") const [favorites, setFavorites] = useState([]) const [currentPage, setCurrentPage] = useState(1) const [sortBy, setSortBy] = useState("relevance") const [filters, setFilters] = useState({ countries: [] as string[], studyLevels: [] as string[], ielts: [] as string[], rankings: [] as string[], }) const [mobileFilters, setMobileFilters] = useState({ countries: [] as string[], studyLevels: [] as string[], ielts: [] as string[], rankings: [] as string[], }) const [filteredUniversities, setFilteredUniversities] = useState(allUniversities) const [isSheetOpen, setIsSheetOpen] = useState(false) const itemsPerPage = 8 const totalPages = Math.ceil(filteredUniversities.length / itemsPerPage) const startIndex = (currentPage - 1) * itemsPerPage const endIndex = startIndex + itemsPerPage const currentUniversities = filteredUniversities.slice(startIndex, endIndex) // Initialize search and filters from URL params useEffect(() => { const course = searchParams.get("course") const countries = searchParams.get("countries")?.split(",") || [] const studyLevels = searchParams.get("studyLevel")?.split(",") || [] if (course) { setSearchTerm(course) } if (countries.length > 0) { setFilters((prev) => ({ ...prev, countries, })) setMobileFilters((prev) => ({ ...prev, countries, })) } if (studyLevels.length > 0) { setFilters((prev) => ({ ...prev, studyLevels, })) setMobileFilters((prev) => ({ ...prev, studyLevels, })) } }, [searchParams]) // Apply filters and search useEffect(() => { let results = [...allUniversities] // Apply search term if (searchTerm) { const term = searchTerm.toLowerCase() results = results.filter( (uni) => uni.name.toLowerCase().includes(term) || uni.country.toLowerCase().includes(term) || uni.address.toLowerCase().includes(term) || uni.courses.some((course) => course.toLowerCase().includes(term)), ) } // Apply country filters if (filters.countries.length > 0) { results = results.filter((uni) => filters.countries.includes(uni.country)) } // Apply IELTS filters if (filters.ielts.length > 0) { results = results.filter((uni) => { if (filters.ielts.includes("6.0 and below") && uni.ielts <= 6.0) return true if (filters.ielts.includes("6.5") && uni.ielts === 6.5) return true if (filters.ielts.includes("7.0 and above") && uni.ielts >= 7.0) return true return false }) } // Apply ranking filters if (filters.rankings.length > 0) { results = results.filter((uni) => { if (filters.rankings.includes("Top 10") && uni.ranking <= 10) return true if (filters.rankings.includes("Top 50") && uni.ranking <= 50 && uni.ranking > 10) return true if (filters.rankings.includes("Top 100") && uni.ranking <= 100 && uni.ranking > 50) return true return false }) } // Apply sorting if (sortBy === "ranking") { results.sort((a, b) => a.ranking - b.ranking) } else if (sortBy === "ranking-asc") { results.sort((a, b) => b.ranking - a.ranking) } else if (sortBy === "tuition") { // Simple sorting for demo purposes - in a real app, you'd parse the tuition values properly results.sort((a, b) => a.tuition.localeCompare(b.tuition)) } else if (sortBy === "tuition-desc") { results.sort((a, b) => b.tuition.localeCompare(a.tuition)) } setFilteredUniversities(results) setCurrentPage(1) // Reset to first page when filters change }, [searchTerm, filters, sortBy]) const toggleFavorite = (id: number) => { setFavorites((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id])) } const handleFilterChange = (category: keyof typeof filters, value: string) => { setFilters((prev) => { const updated = { ...prev } if (updated[category].includes(value)) { updated[category] = updated[category].filter((item) => item !== value) } else { updated[category] = [...updated[category], value] } return updated }) } const handleMobileFilterChange = (category: keyof typeof mobileFilters, value: string) => { setMobileFilters((prev) => { const updated = { ...prev } if (updated[category].includes(value)) { updated[category] = updated[category].filter((item) => item !== value) } else { updated[category] = [...updated[category], value] } return updated }) } const applyMobileFilters = () => { setFilters(mobileFilters) setIsSheetOpen(false) } const clearAllFilters = () => { setFilters({ countries: [], studyLevels: [], ielts: [], rankings: [], }) setMobileFilters({ countries: [], studyLevels: [], ielts: [], rankings: [], }) setSearchTerm("") setSortBy("relevance") } const handleSearch = () => { // The search is already applied via the useEffect // This function is for the search button click } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.05, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100, }, }, } return (

{/* Filters - Desktop */}

Filters

Country

handleFilterChange("countries", "USA")} /> USA

handleFilterChange("countries", "UK")} /> UK

handleFilterChange("countries", "Canada")} /> Canada

handleFilterChange("countries", "Australia")} /> Australia

handleFilterChange("countries", "Germany")} /> Germany

handleFilterChange("countries", "Singapore")} /> Singapore

handleFilterChange("countries", "Switzerland")} /> Switzerland

Study Level

handleFilterChange("studyLevels", "Bachelor's")} /> Bachelor's

handleFilterChange("studyLevels", "Master's")} /> Master's

handleFilterChange("studyLevels", "PhD")} /> PhD

IELTS Score

handleFilterChange("ielts", "6.0 and below")} /> 6.0 and below

handleFilterChange("ielts", "6.5")} /> 6.5

handleFilterChange("ielts", "7.0 and above")} /> 7.0 and above

Ranking

handleFilterChange("rankings", "Top 10")} /> Top 10

handleFilterChange("rankings", "Top 50")} /> Top 50

handleFilterChange("rankings", "Top 100")} /> Top 100

{/* Main Content */}

{/* Search Bar */}

setSearchTerm(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSearch()} />

{/* Mobile Filter Button */} Filters Narrow down your university search

Country

handleMobileFilterChange("countries", "USA")} /> USA

handleMobileFilterChange("countries", "UK")} /> UK

handleMobileFilterChange("countries", "Canada")} /> Canada

handleMobileFilterChange("countries", "Australia")} /> Australia

handleMobileFilterChange("countries", "Germany")} /> Germany

{/* More mobile filters... */}

Study Level

handleMobileFilterChange("studyLevels", "Bachelor's")} /> Bachelor's

handleMobileFilterChange("studyLevels", "Master's")} /> Master's

handleMobileFilterChange("studyLevels", "PhD")} /> PhD

IELTS Score

handleMobileFilterChange("ielts", "6.0 and below")} /> 6.0 and below

handleMobileFilterChange("ielts", "6.5")} /> 6.5

handleMobileFilterChange("ielts", "7.0 and above")} /> 7.0 and above

Ranking

handleMobileFilterChange("rankings", "Top 10")} /> Top 10

handleMobileFilterChange("rankings", "Top 50")} /> Top 50

handleMobileFilterChange("rankings", "Top 100")} /> Top 100

{/* Results Count */}

Showing {filteredUniversities.length} results

{(filters.countries.length > 0 || filters.studyLevels.length > 0 || filters.ielts.length > 0 || filters.rankings.length > 0 || searchTerm) && ( )}

{/* University Cards */} {filteredUniversities.length > 0 ? ( {currentUniversities.map((university) => (

{university.name}

{university.address}

World Ranking

#{university.ranking}

Rating

{university.rating}

{[...Array(5)].map((_, i) => ( ))}

IELTS Requirement

{university.ielts}

Tuition Fees

{university.tuition}

Next Intake

{university.intake}

Popular Courses

{university.courses.map((course, index) => ( {course} ))}

))} ) : (

No universities found

Try adjusting your filters or search term

)} {/* Pagination */} {filteredUniversities.length > 0 && (

{ e.preventDefault() if (currentPage > 1) setCurrentPage(currentPage - 1) }} className={currentPage === 1 ? "pointer-events-none opacity-50" : ""} /> {[...Array(totalPages)].map((_, i) => ( { e.preventDefault() setCurrentPage(i + 1) }} > {i + 1} ))} {totalPages > 5 && currentPage < totalPages - 2 && ( )} { e.preventDefault() if (currentPage < totalPages) setCurrentPage(currentPage + 1) }} className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""} />

)}

) } [V0_FILE]typescriptreact:file="app/university/[id]/page.tsx" isMerged="true" "use client" import { useState } from "react" import { MapPinIcon, StarIcon, HeartIcon, GlobeIcon, BookOpenIcon, GraduationCapIcon, CheckCircleIcon, } from "lucide-react" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" import Image from "next/image" // Mock data for university details const universityData = { id: 1, name: "Harvard University", country: "USA", ranking: 1, rating: 4.9, address: "Cambridge, Massachusetts, USA", ielts: 7.0, courses: [ { id: 1, name: "Computer Science", degree: "Bachelor of Science", duration: "4 years", tuition: "$50,000/year", description: "A comprehensive program covering algorithms, programming languages, software engineering, and more.", }, { id: 2, name: "Business Administration", degree: "Master of Business Administration", duration: "2 years", tuition: "$60,000/year", description: "Develop leadership skills and business acumen through case studies, projects, and internships.", }, { id: 3, name: "Law", degree: "Juris Doctor", duration: "3 years", tuition: "$65,000/year", description: "Study constitutional law, criminal law, civil procedure, and legal writing.", }, ], admissionSteps: [ "Research programs and requirements", "Prepare for standardized tests (SAT/ACT for undergrad, GRE/GMAT for grad)", "Complete the online application", "Submit transcripts and test scores", "Write personal statement and essays", "Obtain letters of recommendation", "Complete an interview (if required)", "Apply for financial aid and scholarships", "Receive admission decision", "Accept offer and pay deposit", ], faqs: [ { question: "What is the tuition fee for international students?", answer: "Tuition fees for international students range from $50,000 to $65,000 per year depending on the program. Additional costs include housing ($15,000-$20,000), health insurance ($3,000), and other expenses.", }, { question: "How can I apply for scholarships?", answer: "Harvard offers need-based financial aid for international students. You can apply through the financial aid section of your application. Additionally, external scholarships are available through organizations like Fulbright and other country-specific programs.", }, { question: "What are the admission deadlines?", answer: "For undergraduate programs, the Regular Decision deadline is January 1, and Early Action is November 1. For graduate programs, deadlines vary by department but typically fall between December and January for fall admission.", }, { question: "Is on-campus housing guaranteed?", answer: "First-year undergraduate students are guaranteed on-campus housing. Graduate students can apply for university housing, but availability is limited and not guaranteed.", }, ], reviews: [ { id: 1, name: "Sarah J.", rating: 5, comment: "Incredible academic environment with world-class professors. The networking opportunities are unmatched.", date: "October 2023", }, { id: 2, name: "Michael T.", rating: 4, comment: "Rigorous curriculum that prepared me well for my career. Campus life is vibrant, though the cost of living is high.", date: "August 2023", }, { id: 3, name: "Priya K.", rating: 5, comment: "The diversity of thought and global perspective at Harvard is amazing. I've grown so much academically and personally.", date: "July 2023", }, ], website: "https://www.harvard.edu", image: "/placeholder.svg?height=400&width=800", gallery: [ "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", ], location: { lat: 42.377, lng: -71.1167, }, relatedUniversities: [ { id: 2, name: "Stanford University", country: "USA", ranking: 3, image: "/placeholder.svg?height=150&width=200", }, { id: 3, name: "MIT", country: "USA", ranking: 2, image: "/placeholder.svg?height=150&width=200", }, { id: 4, name: "Yale University", country: "USA", ranking: 8, image: "/placeholder.svg?height=150&width=200", }, ], } export default function UniversityDetailPage({ params }: { params: { id: string } }) { const [isFavorite, setIsFavorite] = useState(false) const toggleFavorite = () => { setIsFavorite(!isFavorite) } return (

{/* University Header */}

{universityData.name}

{universityData.address}

Ranking: #{universityData.ranking} Worldwide

Rating: {universityData.rating}

{[...Array(5)].map((_, i) => ( ))}

{/* Main Content */}

{/* Left Column - Main Content */}

Overview Courses Admission Reviews {/* Overview Tab */}

About {universityData.name}

Harvard University is a private Ivy League research university in Cambridge, Massachusetts. Established in 1636, Harvard is the oldest institution of higher learning in the United States and among the most prestigious in the world.

The university is composed of ten academic faculties plus the Radcliffe Institute for Advanced Study. Arts and Sciences offers study in a wide range of academic disciplines for undergraduates and for graduates, while the other faculties offer only graduate degrees, mostly professional.

{universityData.gallery.map((image, index) => (

))}

Key Information

Country

{universityData.country}

IELTS Requirement

{universityData.ielts}

World Ranking

#{universityData.ranking}

Acceptance Rate

Student Population

~23,000

International Students

~5,000

Location

{/* Map placeholder - would be replaced with actual map component */}

Map of {universityData.name}

{/* Courses Tab */}

Available Courses

Harvard University offers a wide range of undergraduate and graduate programs across various disciplines. Below are some of the popular courses chosen by international students.

{universityData.courses.map((course) => ( {course.name} {course.degree}

Duration

{course.duration}

Tuition

{course.tuition}

{course.description}

))}

{/* Admission Tab */}

Admission Process

The admission process at Harvard University is highly competitive and thorough. Follow these steps to apply for your desired program.

Application Steps

{universityData.admissionSteps.map((step, index) => (

{index + 1}

{step}

))}

Required Documents

Completed application form

Academic transcripts

Standardized test scores (SAT/ACT for undergrad, GRE/GMAT for grad)

English proficiency test scores (TOEFL/IELTS)

Letters of recommendation

Personal statement and essays

Resume/CV

Application fee

Important Dates

Undergraduate Programs

Early Action

November 1

Regular Decision

January 1

Graduate Programs

Deadlines vary by program, typically between December and January for fall admission.

{/* Reviews Tab */}

Student Reviews

{universityData.rating}

{[...Array(5)].map((_, i) => ( ))}

Read reviews from current and former students about their experience at {universityData.name}.

{universityData.reviews.map((review) => (

{review.name}

{[...Array(5)].map((_, i) => ( ))}

{review.date}

{review.comment}

))}

{/* Right Column - Sidebar */}

{/* Quick Actions */} Quick Actions {/* FAQ Section */} Frequently Asked Questions {universityData.faqs.map((faq, index) => ( {faq.question} {faq.answer} ))} {/* Related Universities */} Similar Universities

{universityData.relatedUniversities.map((uni) => (

{uni.name}

{uni.country} • Rank #{uni.ranking}

))}

) } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { 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))", }, }, 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")], } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import Image from "next/image" import { Button } from "@/components/ui/button" import { Users2Icon, GlobeIcon, TrendingUpIcon } from "lucide-react" export default function AboutPage() { return (

{/* Hero Section */}

About FindMyUniAbroad

We're on a mission to simplify the study abroad journey for students worldwide. Our platform connects aspiring international students with universities that match their academic goals, preferences, and requirements.

{/* Our Story Section */}

Our Story

How FindMyUniAbroad became the leading platform for international education

FindMyUniAbroad was founded in 2018 by a group of former international students who experienced firsthand the challenges of finding the right university abroad. What started as a small blog sharing tips and experiences has grown into a comprehensive platform serving thousands of students from over 150 countries.

Our founders, having studied across the USA, UK, Australia, and Canada, understood the complexities of navigating different education systems, visa requirements, and cultural adjustments. They combined their expertise to create a solution that simplifies this journey for future generations of international students.

Today, FindMyUniAbroad partners with over 500 universities worldwide and has helped more than 50,000 students find their perfect academic match abroad. Our team has grown to include education consultants, tech experts, and former admissions officers who are passionate about international education.

{/* Stats Section */}

500+

Partner Universities

50,000+

Students Helped

150+

Countries Served

95%

Satisfaction Rate

{/* Our Values Section */}

Our Values

The principles that guide everything we do

Student-Centered

We put students' needs first, providing personalized guidance and support throughout their journey.

Global Perspective

We embrace diversity and promote cross-cultural understanding in international education.

Continuous Improvement

We constantly evolve our platform and services based on student feedback and industry trends.

{/* Team Section */}

Meet Our Team

The passionate individuals behind FindMyUniAbroad

{[ { name: "Sarah Johnson", role: "Founder & CEO", bio: "Former international student with 10+ years in education consulting", image: "/placeholder.svg?height=400&width=400", }, { name: "Michael Chen", role: "Chief Technology Officer", bio: "Tech expert passionate about improving education through innovation", image: "/placeholder.svg?height=400&width=400", }, { name: "Priya Sharma", role: "Head of University Relations", bio: "Former admissions officer with extensive network in higher education", image: "/placeholder.svg?height=400&width=400", }, { name: "James Wilson", role: "Student Success Manager", bio: "Dedicated to ensuring students find their perfect academic match", image: "/placeholder.svg?height=400&width=400", }, { name: "Maria Rodriguez", role: "Content Director", bio: "Creates comprehensive guides on studying abroad and university life", image: "/placeholder.svg?height=400&width=400", }, { name: "David Kim", role: "Marketing Lead", bio: "Helps students discover opportunities through strategic outreach", image: "/placeholder.svg?height=400&width=400", }, { name: "Olivia Nguyen", role: "Visa & Immigration Specialist", bio: "Expert in navigating complex international student visa processes", image: "/placeholder.svg?height=400&width=400", }, { name: "Thomas Müller", role: "Regional Director, Europe", bio: "Specializes in European university admissions and requirements", image: "/placeholder.svg?height=400&width=400", }, ].map((member, index) => (

{member.name}

{member.role}

{member.bio}

))}

{/* Partners Section */}

Our Partners

We collaborate with leading universities and organizations worldwide

{[...Array(12)].map((_, index) => (

))}

{/* CTA Section */}

Ready to Start Your Study Abroad Journey?

Join thousands of students who have found their perfect university match with FindMyUniAbroad.

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { MapPinIcon, PhoneIcon, MailIcon, ClockIcon, SendIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" export default function ContactPage() { const [formData, setFormData] = useState({ name: "", email: "", phone: "", subject: "", message: "", inquiryType: "", preferredContact: "email", subscribe: true, }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleRadioChange = (value: string) => { setFormData((prev) => ({ ...prev, preferredContact: value })) } const handleCheckboxChange = (checked: boolean) => { setFormData((prev) => ({ ...prev, subscribe: checked })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate API call setTimeout(() => { setIsSubmitting(false) setIsSubmitted(true) // Reset form after 3 seconds setTimeout(() => { setIsSubmitted(false) setFormData({ name: "", email: "", phone: "", subject: "", message: "", inquiryType: "", preferredContact: "email", subscribe: true, }) }, 3000) }, 1500) } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100, }, }, } return (

Contact Us

Have questions about studying abroad? Our team is here to help you navigate your international education journey.

{/* Contact Information */}

Get in Touch

Our Office

123 Education Street, Suite 456
San Francisco, CA 94105
United States

Phone

+1 (555) 123-4567
Monday to Friday, 9am - 6pm

Email

info@findmyuniabroad.com
support@findmyuniabroad.com

Hours

Monday - Friday: 9:00 AM - 6:00 PM
Saturday: 10:00 AM - 2:00 PM
Sunday: Closed

Regional Offices

London, UK

45 Education Lane, London, W1T 4JG
+44 20 1234 5678
uk@findmyuniabroad.com

Sydney, Australia

78 Study Avenue, Sydney, NSW 2000
+61 2 9876 5432
australia@findmyuniabroad.com

Toronto, Canada

123 University Drive, Toronto, ON M5V 2L7
+1 416 123 4567
canada@findmyuniabroad.com

{/* Contact Form */}

Send Us a Message

{isSubmitted ? (

Message Sent!

Thank you for contacting us. We'll get back to you shortly.

) : (

Full Name

Phone (Optional)

Inquiry Type

Subject

Message

</div>

<div className="space-y-2">
                      <Label>Preferred Contact Method</Label>
                      <RadioGroup
                        value={formData.preferredContact}
                        onValueChange={handleRadioChange}
                        className="flex flex-col space-y-1"
                      >
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="email" id="contact-email" />
                          <Label htmlFor="contact-email">Email</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="phone" id="contact-phone" />
                          <Label htmlFor="contact-phone">Phone</Label>
                        </div>
                      </RadioGroup>
                    </div>

<div className="flex items-center space-x-2">
                      <Checkbox id="subscribe" checked={formData.subscribe} onCheckedChange={handleCheckboxChange} />
                      <label
                        htmlFor="subscribe"
                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                      >
                        Subscribe to our newsletter for updates on universities and courses
                      </label>
                    </div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
                      {isSubmitting ? (
                        <>
                          <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
                          Sending...
                        </>
                      ) : (
                        <>
                          <SendIcon className="mr-2 h-4 w-4" />
                          Send Message
                        </>
                      )}
                    </Button>
                  </form>
                )}
              </div>
            </motion.div>
          </div>

{/* Map Section */}
          <motion.div variants={itemVariants} className="mt-16">
            <h2 className="text-2xl font-bold mb-6">Find Us</h2>
            <div className="h-96 bg-muted rounded-xl relative overflow-hidden">
              {/* Map placeholder - would be replaced with actual map component */}
              <div className="absolute inset-0 flex items-center justify-center">
                <MapPinIcon className="h-12 w-12 text-muted-foreground/50" />
                <span className="sr-only">Map of FindMyUniAbroad office</span>
              </div>
            </div>
          </motion.div>

{/* FAQ Section */}
          <motion.div variants={itemVariants} className="mt-16">
            <div className="text-center mb-8">
              <h2 className="text-2xl font-bold">Frequently Asked Questions</h2>
              <p className="text-muted-foreground">Quick answers to common questions about contacting us</p>
            </div>

<div className="grid md:grid-cols-2 gap-6">
              <div className="bg-card border rounded-lg p-6">
                <h3 className="font-medium mb-2">What is the typical response time?</h3>
                <p className="text-muted-foreground text-sm">
                  We aim to respond to all inquiries within 24-48 hours during business days.
                </p>
              </div>

<div className="bg-card border rounded-lg p-6">
                <h3 className="font-medium mb-2">Do you offer in-person consultations?</h3>
                <p className="text-muted-foreground text-sm">
                  Yes, we offer in-person consultations at our offices. Please schedule an appointment in advance.
                </p>
              </div>

<div className="bg-card border rounded-lg p-6">
                <h3 className="font-medium mb-2">Can I get help with my visa application?</h3>
                <p className="text-muted-foreground text-sm">
                  Yes, our visa specialists can provide guidance on the visa application process for different
                  countries.
                </p>
              </div>

<div className="bg-card border rounded-lg p-6">
                <h3 className="font-medium mb-2">Is there a fee for your consultation services?</h3>
                <p className="text-muted-foreground text-sm">
                  Initial consultations are free. Specialized services may have associated fees which will be discussed
                  upfront.
                </p>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </div>
  )
}

// Icons for success and loading states
const CheckIcon = ({ className }: { className?: string }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M20 6L9 17l-5-5" />
  </svg>
)

const LoaderIcon = ({ className }: { className?: string }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M21 12a9 9 0 11-6.219-8.56" />
  </svg>
)

[V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true"
import Link from "next/link"
import { ChevronRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function FAQPage() {
  // FAQ data organized by categories
  const faqData = {
    general: [
      {
        question: "What is FindMyUniAbroad?",
        answer:
          "FindMyUniAbroad is a comprehensive platform that helps students find and apply to universities abroad. We provide detailed information about universities, courses, admission requirements, and visa processes to simplify your study abroad journey.",
      },
      {
        question: "Is FindMyUniAbroad a free service?",
        answer:
          "Yes, our basic search and information services are completely free for students. We offer premium services for personalized guidance and application assistance, which have associated fees that are clearly communicated upfront.",
      },
      {
        question: "How do I get started with FindMyUniAbroad?",
        answer:
          "You can start by using our search tool on the homepage to find universities based on your preferred course, study level, and country. You can also browse through our study guides and resources to learn more about the study abroad process.",
      },
      {
        question: "Does FindMyUniAbroad guarantee admission to universities?",
        answer:
          "While we provide comprehensive guidance and support to maximize your chances of admission, we cannot guarantee acceptance as final decisions are made by the universities based on their admission criteria and the competitiveness of the applicant pool.",
      },
      {
        question: "How accurate is the information on FindMyUniAbroad?",
        answer:
          "We strive to maintain the most up-to-date and accurate information by working directly with universities and regularly updating our database. However, we recommend verifying critical information like application deadlines and requirements directly with the university's official website.",
      },
    ],
    application: [
      {
        question: "What documents do I need to apply to universities abroad?",
        answer:
          "Common documents include academic transcripts, standardized test scores (SAT, ACT, GRE, GMAT), English proficiency test results (IELTS, TOEFL), personal statement/essays, letters of recommendation, CV/resume, and a copy of your passport. Specific requirements vary by university and program.",
      },
      {
        question: "When should I start my application process?",
        answer:
          "We recommend starting at least 12-18 months before your intended start date. This gives you enough time for research, standardized tests, document preparation, and meeting application deadlines, which can be as early as a year before the program starts.",
      },
      {
        question: "How many universities should I apply to?",
        answer:
          "We typically recommend applying to 6-8 universities: 2-3 'reach' schools (competitive for your profile), 2-3 'match' schools (align well with your qualifications), and 2 'safety' schools (where your qualifications exceed requirements). This balanced approach maximizes your chances of admission.",
      },
      {
        question: "Can FindMyUniAbroad help me with my personal statement or essays?",
        answer:
          "Yes, our premium services include personal statement and essay review by experienced counselors who can provide feedback and suggestions to strengthen your application materials.",
      },
      {
        question: "What if I miss an application deadline?",
        answer:
          "Some universities offer rolling admissions or multiple intake periods. If you miss a deadline, check if the university has alternative application periods or consider applying for the next intake. Our platform can help you identify universities with upcoming deadlines.",
      },
    ],
    visa: [
      {
        question: "When should I apply for a student visa?",
        answer:
          "You should apply for your student visa after receiving an acceptance letter from your university and paying any required deposits. Visa processing times vary by country, but we recommend applying 2-3 months before your program start date.",
      },
      {
        question: "What documents are typically required for a student visa?",
        answer:
          "Common requirements include a valid passport, acceptance letter from the university, proof of financial support (bank statements or scholarship letters), health insurance, visa application forms, visa application fee, and sometimes proof of intent to return to your home country after studies.",
      },
      {
        question: "Can I work while studying abroad on a student visa?",
        answer:
          "Work regulations for international students vary by country. For example, the US allows up to 20 hours per week on-campus during semesters, the UK allows up to 20 hours per week during term time, and Canada allows up to 20 hours per week off-campus. Check specific regulations for your destination country.",
      },
      {
        question: "What is the cost of a student visa?",
        answer:
          "Visa application fees vary by country: US (SEVIS fee: $350, visa fee: $160), UK (Tier 4: £348), Canada (study permit: CAD$150), Australia (student visa: AUD$630), and Germany (national visa: €75). Additional costs may include health checks and biometric fees.",
      },
      {
        question: "What happens if my visa application is rejected?",
        answer:
          "If your visa is rejected, you can either appeal the decision (if the country allows it), reapply with stronger documentation addressing the reasons for rejection, or consider alternative study destinations. Our visa specialists can provide guidance based on your specific situation.",
      },
    ],
    financial: [
      {
        question: "What are the average tuition fees for studying abroad?",
        answer:
          "Tuition fees vary widely by country and institution: US ($20,000-$50,000/year), UK (£10,000-£20,000/year), Canada (CAD$15,000-$35,000/year), Australia (AUD$20,000-$45,000/year), and Germany (mostly free with semester fees of €250-€500). Private universities typically charge more than public institutions.",
      },
      {
        question: "What is the cost of living in different study destinations?",
        answer:
          "Monthly living expenses (accommodation, food, transportation, utilities) average around $1,200-$1,800 in the US, £1,000-£1,500 in the UK, CAD$1,000-$1,500 in Canada, AUD$1,200-$1,800 in Australia, and €800-€1,000 in Germany. Costs are higher in major cities.",
      },
      {
        question: "Are there scholarships available for international students?",
        answer:
          "Yes, many universities and governments offer scholarships for international students. These can be merit-based, need-based, or country-specific. Our platform lists various scholarship opportunities and can help you identify those you're eligible for.",
      },
      {
        question: "How can I prove financial capability for my visa application?",
        answer:
          "You typically need to show bank statements covering tuition and living expenses for at least one year of study. Some countries have specific requirements: the US requires an I-20 form showing financial resources, the UK requires proof of funds held for 28 consecutive days, and Canada requires a Guaranteed Investment Certificate (GIC) of CAD$10,000.",
      },
      {
        question: "Can I get a loan to study abroad?",
        answer:
          "Yes, there are various loan options for international students, including loans from your home country, host country financial institutions that offer international student loans, and organizations like Prodigy Finance that specialize in loans for international students. Loan eligibility and terms vary based on your nationality and chosen program.",
      },
    ],
    postGraduation: [
      {
        question: "Can I stay and work after graduation?",
        answer:
          "Many countries offer post-study work options: the US offers Optional Practical Training (OPT) for 12 months (STEM fields get 24 additional months), the UK offers a Graduate Route visa for 2 years, Canada offers a Post-Graduation Work Permit for up to 3 years, and Australia offers a Temporary Graduate visa for 2-4 years. Germany allows 18 months to find employment.",
      },
      {
        question: "What are the pathways to permanent residency after studying abroad?",
        answer:
          "Many countries have pathways to permanent residency for international graduates. Canada's Express Entry system favors Canadian education and work experience. Australia's points-based system gives points for Australian qualifications. The UK allows switching to skilled worker visas, and Germany offers settlement permits after working for a certain period.",
      },
      {
        question: "How can I find a job in a foreign country after graduation?",
        answer:
          "Utilize your university's career services, attend job fairs, build a professional network through internships and industry events, join alumni associations, use country-specific job portals, and consider working with recruiters who specialize in placing international graduates.",
      },
      {
        question: "Will my degree be recognized when I return to my home country?",
        answer:
          "Most countries recognize degrees from accredited foreign institutions, but some professions (medicine, law, teaching) may require additional certification or examinations. Check with the relevant professional body or education ministry in your home country regarding degree recognition and any additional requirements.",
      },
      {
        question: "What support does FindMyUniAbroad offer for post-graduation planning?",
        answer:
          "We provide resources on post-study work options, career planning, and immigration pathways. Our premium services include career counseling, resume/CV review, interview preparation, and guidance on work visa applications to help you transition successfully from student to professional.",
      },
    ],
  }

return (
    <div className="min-h-screen py-12">
      <div className="container">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Frequently Asked Questions</h1>
            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
              Find answers to common questions about studying abroad, university applications, visas, and more.
            </p>
          </div>

<Tabs defaultValue="general" className="w-full">
            <TabsList className="grid w-full grid-cols-5">
              <TabsTrigger value="general">General</TabsTrigger>
              <TabsTrigger value="application">Application</TabsTrigger>
              <TabsTrigger value="visa">Visa</TabsTrigger>
              <TabsTrigger value="financial">Financial</TabsTrigger>
              <TabsTrigger value="postGraduation">Post-Graduation</TabsTrigger>
            </TabsList>

{Object.entries(faqData).map(([category, questions]) => (
              <TabsContent key={category} value={category} className="mt-6">
                <Accordion type="single" collapsible className="w-full">
                  {questions.map((faq, index) => (
                    <AccordionItem key={index} value={`item-${index}`}>
                      <AccordionTrigger className="text-left">{faq.question}</AccordionTrigger>
                      <AccordionContent>
                        <p className="text-muted-foreground">{faq.answer}</p>
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </TabsContent>
            ))}
          </Tabs>

{/* Search and Additional Questions */}
          <div className="mt-16 space-y-8">
            <div className="text-center">
              <h2 className="text-2xl font-bold mb-4">Didn't Find Your Answer?</h2>
              <p className="text-muted-foreground mb-6">
                Browse our additional resources or contact our support team for personalized assistance.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg">Contact Support</Button>
                <Button size="lg" variant="outline">
                  Browse Study Guides
                </Button>
              </div>
            </div>

<div className="bg-muted/50 rounded-xl p-8">
              <h2 className="text-xl font-bold mb-4">Popular Questions</h2>
              <div className="grid md:grid-cols-2 gap-4">
                <Link
                  href="/faq/cost-of-living"
                  className="flex items-center p-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <ChevronRightIcon className="h-5 w-5 text-primary mr-2 flex-shrink-0" />
                  <span>What is the cost of living in different study destinations?</span>
                </Link>
                <Link
                  href="/faq/part-time-work"
                  className="flex items-center p-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <ChevronRightIcon className="h-5 w-5 text-primary mr-2 flex-shrink-0" />
                  <span>Can I work part-time while studying abroad?</span>
                </Link>
                <Link
                  href="/faq/scholarship-eligibility"
                  className="flex items-center p-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <ChevronRightIcon className="h-5 w-5 text-primary mr-2 flex-shrink-0" />
                  <span>How do I find scholarships I'm eligible for?</span>
                </Link>
                <Link
                  href="/faq/application-timeline"
                  className="flex items-center p-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <ChevronRightIcon className="h-5 w-5 text-primary mr-2 flex-shrink-0" />
                  <span>What is the timeline for applying to universities abroad?</span>
                </Link>
                <Link
                  href="/faq/language-requirements"
                  className="flex items-center p-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <ChevronRightIcon className="h-5 w-5 text-primary mr-2 flex-shrink-0" />
                  <span>What English language tests are accepted by universities?</span>
                </Link>
                <Link
                  href="/faq/accommodation-options"
                  className="flex items-center p-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <ChevronRightIcon className="h-5 w-5 text-primary mr-2 flex-shrink-0" />
                  <span>What accommodation options are available for international students?</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/steps/research/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircleIcon, BookOpenIcon, GlobeIcon, SearchIcon, ListChecksIcon } from "lucide-react"
import Link from "next/link"

export default function ResearchPage() {
  return (
    <div className="container py-12">
      <h1 className="text-4xl font-bold mb-6">Research Programs</h1>
      <p className="text-xl text-muted-foreground mb-8">
        The first step in your study abroad journey is thorough research. Here's how to get started:
      </p>

<div className="grid md:grid-cols-2 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <GlobeIcon className="h-5 w-5" />
              Define Your Goals
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Identify your academic interests and career aspirations</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Consider the type of experience you want (e.g., language immersion, cultural exposure)</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Determine your budget and funding options</span>
              </li>
            </ul>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <SearchIcon className="h-5 w-5" />
              Explore Options
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Research countries and their education systems</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Look into specific universities and their program offerings</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Consider factors like ranking, location, and campus culture</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>

<h2 className="text-2xl font-bold mb-4">Research Tools</h2>
      <div className="grid md:grid-cols-3 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle>University Search</CardTitle>
            <CardDescription>Find the perfect university match</CardDescription>
          </CardHeader>
          <CardContent>
            <Link href="/search">
              <Button className="w-full">
                <SearchIcon className="mr-2 h-4 w-4" />
                Search Universities
              </Button>
            </Link>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Program Comparison</CardTitle>
            <CardDescription>Compare different programs side by side</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <ListChecksIcon className="mr-2 h-4 w-4" />
              Compare Programs
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Study Guides</CardTitle>
            <CardDescription>In-depth guides on studying abroad</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <BookOpenIcon className="mr-2 h-4 w-4" />
              Browse Guides
            </Button>
          </CardContent>
        </Card>
      </div>

<div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Ready for the next step?</h2>
        <Link href="/steps/application">
          <Button size="lg">Continue to Application Process</Button>
        </Link>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/steps/application/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircleIcon, FileTextIcon, CalendarIcon, UserIcon, MailIcon } from "lucide-react"
import Link from "next/link"

export default function ApplicationPage() {
  return (
    <div className="container py-12">
      <h1 className="text-4xl font-bold mb-6">Application Process</h1>
      <p className="text-xl text-muted-foreground mb-8">
        Now that you've researched your options, it's time to start the application process. Here's what you need to do:
      </p>

<div className="grid md:grid-cols-2 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileTextIcon className="h-5 w-5" />
              Prepare Documents
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Gather academic transcripts and diplomas</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Prepare standardized test scores (SAT, ACT, GRE, GMAT)</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Write your personal statement and essays</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Obtain letters of recommendation</span>
              </li>
            </ul>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CalendarIcon className="h-5 w-5" />
              Application Timeline
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Research application deadlines for each university</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Create a timeline for completing each application</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Submit applications well before the deadlines</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>

<h2 className="text-2xl font-bold mb-4">Application Resources</h2>
      <div className="grid md:grid-cols-3 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle>Essay Writing Tips</CardTitle>
            <CardDescription>Craft compelling personal statements</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <FileTextIcon className="mr-2 h-4 w-4" />
              View Essay Guide
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Recommendation Letters</CardTitle>
            <CardDescription>How to request and manage recommendations</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <UserIcon className="mr-2 h-4 w-4" />
              Recommendation Tips
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Application Review</CardTitle>
            <CardDescription>Get expert feedback on your application</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full">
              <MailIcon className="mr-2 h-4 w-4" />
              Request Review
            </Button>
          </CardContent>
        </Card>
      </div>

<div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Moving forward</h2>
        <Link href="/steps/visa">
          <Button size="lg">Continue to Visa Requirements</Button>
        </Link>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/steps/visa/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircleIcon, PocketIcon as PassportIcon, DollarSignIcon, CalendarIcon, FileTextIcon } from "lucide-react"
import Link from "next/link"

export default function VisaPage() {
  return (
    <div className="container py-12">
      <h1 className="text-4xl font-bold mb-6">Visa Requirements</h1>
      <p className="text-xl text-muted-foreground mb-8">
        Once you've been accepted to a university, the next crucial step is obtaining your student visa. Here's what you
        need to know:
      </p>

<div className="grid md:grid-cols-2 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <PassportIcon className="h-5 w-5" />
              Visa Application Process
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Receive acceptance letter and I-20 form from your university</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Pay the SEVIS fee</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Complete the DS-160 form online</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Schedule and attend your visa interview</span>
              </li>
            </ul>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileTextIcon className="h-5 w-5" />
              Required Documents
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Valid passport</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Acceptance letter and I-20 form</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Proof of financial support</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Passport-sized photographs</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Academic transcripts and test scores</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>

<h2 className="text-2xl font-bold mb-4">Visa Resources</h2>
      <div className="grid md:grid-cols-3 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle>Visa Fee Calculator</CardTitle>
            <CardDescription>Estimate your visa application costs</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <DollarSignIcon className="mr-2 h-4 w-4" />
              Calculate Fees
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Interview Preparation</CardTitle>
            <CardDescription>Tips for your visa interview</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <CalendarIcon className="mr-2 h-4 w-4" />
              Interview Guide
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Document Checklist</CardTitle>
            <CardDescription>Ensure you have all required documents</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full">
              <FileTextIcon className="mr-2 h-4 w-4" />
              View Checklist
            </Button>
          </CardContent>
        </Card>
      </div>

<div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Final step</h2>
        <Link href="/steps/preparation">
          <Button size="lg">Continue to Pre-Departure Preparation</Button>
        </Link>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/steps/preparation/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircleIcon, PlaneIcon, HomeIcon, BookIcon, ShieldIcon } from "lucide-react"
import Link from "next/link"

export default function PreparationPage() {
  return (
    <div className="container py-12">
      <h1 className="text-4xl font-bold mb-6">Pre-Departure Preparation</h1>
      <p className="text-xl text-muted-foreground mb-8">
        You're almost ready to embark on your study abroad journey! Here's what you need to do before you leave:
      </p>

<div className="grid md:grid-cols-2 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <PlaneIcon className="h-5 w-5" />
              Travel Arrangements
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Book your flight tickets</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Arrange airport pickup or transportation to your accommodation</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Check baggage allowances and pack accordingly</span>
              </li>
            </ul>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <HomeIcon className="h-5 w-5" />
              Accommodation
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Confirm your housing arrangements (on-campus or off-campus)</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Pay any required deposits or fees</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircleIcon className="h-5 w-5 text-green-500 mt-1 flex-shrink-0" />
                <span>Familiarize yourself with the local area and campus map</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>

<h2 className="text-2xl font-bold mb-4">Essential Preparations</h2>
      <div className="grid md:grid-cols-3 gap-6 mb-12">
        <Card>
          <CardHeader>
            <CardTitle>Health Insurance</CardTitle>
            <CardDescription>Ensure you're covered during your stay</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <ShieldIcon className="mr-2 h-4 w-4" />
              Insurance Guide
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Packing List</CardTitle>
            <CardDescription>What to bring for your study abroad experience</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full" variant="outline">
              <BookIcon className="mr-2 h-4 w-4" />
              View Packing List
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Orientation Information</CardTitle>
            <CardDescription>Prepare for your arrival and orientation</CardDescription>
          </CardHeader>
          <CardContent>
            <Button className="w-full">
              <PlaneIcon className="mr-2 h-4 w-4" />
              Orientation Guide
            </Button>
          </CardContent>
        </Card>
      </div>

<div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Ready for your adventure?</h2>
        <Link href="/">
          <Button size="lg">Return to Homepage</Button>
        </Link>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"
import {
  GlobeIcon,
  BookOpenIcon,
  InfoIcon,
  PhoneIcon,
  SearchIcon,
  MenuIcon,
  XIcon,
  SunIcon,
  MoonIcon,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useTheme } from "next-themes"
import { useRouter } from "next/navigation"

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false)
  const { setTheme, theme } = useTheme()
  const router = useRouter()

const toggleMenu = () => setIsOpen(!isOpen)

const handleSearch = () => {
    router.push("/search")
  }

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between">
        <div className="flex items-center gap-2">
          <Link href="/" className="flex items-center gap-2">
            <GlobeIcon className="h-6 w-6 text-primary" />
            <span className="hidden font-bold text-xl sm:inline-block">FindMyUniAbroad</span>
          </Link>
        </div>

{/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-6">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="flex items-center gap-1">
                <BookOpenIcon className="h-4 w-4" />
                <span>Study Course Steps</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Link href="/steps/research" className="w-full">
                  Research Programs
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/steps/application" className="w-full">
                  Application Process
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/steps/visa" className="w-full">
                  Visa Requirements
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/steps/preparation" className="w-full">
                  Pre-Departure Preparation
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="flex items-center gap-1">
                <GlobeIcon className="h-4 w-4" />
                <span>Study Destination</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Link href="/destinations/usa" className="w-full">
                  USA
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/destinations/uk" className="w-full">
                  UK
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/destinations/canada" className="w-full">
                  Canada
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/destinations/australia" className="w-full">
                  Australia
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/destinations/germany" className="w-full">
                  Germany
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

<Link href="/about" className="flex items-center gap-1">
            <InfoIcon className="h-4 w-4" />
            <span>About Us</span>
          </Link>

<Link href="/contact" className="flex items-center gap-1">
            <PhoneIcon className="h-4 w-4" />
            <span>Contact Us</span>
          </Link>

<div className="flex items-center gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                {theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
                <span className="sr-only">Toggle theme</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
              <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
              <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

{/* Mobile Menu Button */}
          <Button variant="ghost" size="icon" className="md:hidden" onClick={toggleMenu}>
            {isOpen ? <XIcon className="h-5 w-5" /> : <MenuIcon className="h-5 w-5" />}
          </Button>
        </div>
      </div>

{/* Mobile Navigation */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden border-t"
          >
            <div className="container py-4 space-y-4">
              <div className="space-y-2">
                <p className="text-sm font-medium">Study Course Steps</p>
                <div className="pl-4 space-y-2 border-l">
                  <Link href="/steps/research" className="block text-sm">
                    Research Programs
                  </Link>
                  <Link href="/steps/application" className="block text-sm">
                    Application Process
                  </Link>
                  <Link href="/steps/visa" className="block text-sm">
                    Visa Requirements
                  </Link>
                  <Link href="/steps/preparation" className="block text-sm">
                    Pre-Departure Preparation
                  </Link>
                </div>
              </div>

<div className="space-y-2">
                <p className="text-sm font-medium">Study Destination</p>
                <div className="pl-4 space-y-2 border-l">
                  <Link href="/destinations/usa" className="block text-sm">
                    USA
                  </Link>
                  <Link href="/destinations/uk" className="block text-sm">
                    UK
                  </Link>
                  <Link href="/destinations/canada" className="block text-sm">
                    Canada
                  </Link>
                  <Link href="/destinations/australia" className="block text-sm">
                    Australia
                  </Link>
                  <Link href="/destinations/germany" className="block text-sm">
                    Germany
                  </Link>
                </div>
              </div>

<div className="space-y-2">
                <Link href="/about" className="block text-sm font-medium">
                  About Us
                </Link>
                <Link href="/contact" className="block text-sm font-medium">
                  Contact Us
                </Link>
              </div>

<Button variant="outline" className="w-full" onClick={handleSearch}>
                <SearchIcon className="mr-2 h-4 w-4" />
                Search Universities
              </Button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}

export default Navbar

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

import { useState } from "react"
import { motion } from "framer-motion"
import { SearchIcon, GraduationCapIcon, BookOpenIcon, GlobeIcon, ChevronRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import Image from "next/image"
import { useRouter } from "next/navigation"

export default function Home() {
  const [studyLevel, setStudyLevel] = useState<string[]>([])
  const [countries, setCountries] = useState<string[]>([])
  const [course, setCourse] = useState("")
  const router = useRouter()

const handleStudyLevelChange = (level: string) => {
    setStudyLevel((prev) => (prev.includes(level) ? prev.filter((item) => item !== level) : [...prev, level]))
  }

const handleCountryChange = (country: string) => {
    setCountries((prev) => (prev.includes(country) ? prev.filter((item) => item !== country) : [...prev, country]))
  }

const handleSearch = () => {
    const searchParams = new URLSearchParams()
    if (course) searchParams.append("course", course)
    if (studyLevel.length) searchParams.append("studyLevel", studyLevel.join(","))
    if (countries.length) searchParams.append("countries", countries.join(","))
    router.push(`/search?${searchParams.toString()}`)
  }

const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 100,
      },
    },
  }

return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative py-20 md:py-32 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image
            src="/placeholder.svg?height=1080&width=1920"
            alt="Students studying abroad"
            fill
            className="object-cover opacity-10"
            priority
          />
        </div>
        <div className="container relative z-10">
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            className="max-w-4xl mx-auto text-center space-y-8"
          >
            <motion.h1 variants={itemVariants} className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
              Find Your Perfect University Abroad
            </motion.h1>
            <motion.p variants={itemVariants} className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
              Discover and compare universities worldwide for your study abroad journey. Get detailed information on
              courses, admissions, and more.
            </motion.p>

{/* Search Section */}
            <motion.div variants={itemVariants} className="bg-card border rounded-xl shadow-lg p-6 mt-8">
              <div className="grid gap-4 md:grid-cols-4">
                <div className="space-y-2">
                  <Label htmlFor="course">Select Course</Label>
                  <Select value={course} onValueChange={setCourse}>
                    <SelectTrigger id="course">
                      <SelectValue placeholder="Select course" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="computer-science">Computer Science</SelectItem>
                      <SelectItem value="business">Business Administration</SelectItem>
                      <SelectItem value="engineering">Engineering</SelectItem>
                      <SelectItem value="medicine">Medicine</SelectItem>
                      <SelectItem value="arts">Arts & Humanities</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label>Study Level</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Study level" />
                    </SelectTrigger>
                    <SelectContent>
                      <div className="p-2 space-y-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="bachelor"
                            checked={studyLevel.includes("bachelor")}
                            onCheckedChange={() => handleStudyLevelChange("bachelor")}
                          />
                          <label htmlFor="bachelor" className="text-sm">
                            Bachelor's
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="master"
                            checked={studyLevel.includes("master")}
                            onCheckedChange={() => handleStudyLevelChange("master")}
                          />
                          <label htmlFor="master" className="text-sm">
                            Master's
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="phd"
                            checked={studyLevel.includes("phd")}
                            onCheckedChange={() => handleStudyLevelChange("phd")}
                          />
                          <label htmlFor="phd" className="text-sm">
                            PhD
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="diploma"
                            checked={studyLevel.includes("diploma")}
                            onCheckedChange={() => handleStudyLevelChange("diploma")}
                          />
                          <label htmlFor="diploma" className="text-sm">
                            Diploma
                          </label>
                        </div>
                      </div>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label>Country</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select country" />
                    </SelectTrigger>
                    <SelectContent>
                      <div className="p-2 space-y-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="usa"
                            checked={countries.includes("usa")}
                            onCheckedChange={() => handleCountryChange("usa")}
                          />
                          <label htmlFor="usa" className="text-sm">
                            USA
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="uk"
                            checked={countries.includes("uk")}
                            onCheckedChange={() => handleCountryChange("uk")}
                          />
                          <label htmlFor="uk" className="text-sm">
                            UK
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="canada"
                            checked={countries.includes("canada")}
                            onCheckedChange={() => handleCountryChange("canada")}
                          />
                          <label htmlFor="canada" className="text-sm">
                            Canada
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="australia"
                            checked={countries.includes("australia")}
                            onCheckedChange={() => handleCountryChange("australia")}
                          />
                          <label htmlFor="australia" className="text-sm">
                            Australia
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="germany"
                            checked={countries.includes("germany")}
                            onCheckedChange={() => handleCountryChange("germany")}
                          />
                          <label htmlFor="germany" className="text-sm">
                            Germany
                          </label>
                        </div>
                      </div>
                    </SelectContent>
                  </Select>
                </div>

<div className="flex items-end">
                  <Button className="w-full gap-2" onClick={handleSearch}>
                    <SearchIcon className="h-4 w-4" />
                    Search Universities
                  </Button>
                </div>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </section>

{/* Features Section */}
      <section className="py-16 bg-muted/50">
        <div className="container">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold">Why Choose FindMyUniAbroad?</h2>
            <p className="text-muted-foreground mt-2">We make your study abroad journey simple and stress-free</p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <motion.div whileHover={{ y: -5 }} className="bg-card border rounded-lg p-6 shadow-sm">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                <GraduationCapIcon className="h-6 w-6 text-primary" />
              </div>
              <h3 className="text-xl font-medium mb-2">Comprehensive Database</h3>
              <p className="text-muted-foreground">
                Access information on thousands of universities and courses worldwide, all in one place.
              </p>
            </motion.div>

<motion.div whileHover={{ y: -5 }} className="bg-card border rounded-lg p-6 shadow-sm">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                <BookOpenIcon className="h-6 w-6 text-primary" />
              </div>
              <h3 className="text-xl font-medium mb-2">Detailed Admission Guides</h3>
              <p className="text-muted-foreground">
                Step-by-step guidance on application processes, visa requirements, and pre-departure preparations.
              </p>
            </motion.div>

<motion.div whileHover={{ y: -5 }} className="bg-card border rounded-lg p-6 shadow-sm">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                <GlobeIcon className="h-6 w-6 text-primary" />
              </div>
              <h3 className="text-xl font-medium mb-2">Global Destinations</h3>
              <p className="text-muted-foreground">
                Explore study opportunities across multiple countries and find the perfect fit for your academic goals.
              </p>
            </motion.div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-16">
        <div className="container">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold">Frequently Asked Questions</h2>
            <p className="text-muted-foreground mt-2">Find answers to common questions about studying abroad</p>
          </div>

<div className="max-w-3xl mx-auto">
            <Accordion type="single" collapsible className="w-full">
              <AccordionItem value="item-1">
                <AccordionTrigger>How do I apply to universities abroad?</AccordionTrigger>
                <AccordionContent>
                  The application process varies by country and university. Generally, you'll need to submit academic
                  transcripts, language proficiency test scores (like IELTS or TOEFL), a personal statement,
                  recommendation letters, and sometimes a CV. Our detailed guides provide country-specific application
                  processes.
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="item-2">
                <AccordionTrigger>What are the language requirements?</AccordionTrigger>
                <AccordionContent>
                  Most English-speaking countries require proof of language proficiency. For English-speaking countries,
                  IELTS (typically 6.0-7.0) or TOEFL (typically 80-100) scores are required. Some countries like Germany
                  might require German language proficiency for certain programs.
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="item-3">
                <AccordionTrigger>How do I get a student visa?</AccordionTrigger>
                <AccordionContent>
                  After receiving an acceptance letter, you'll need to apply for a student visa. Requirements typically
                  include proof of acceptance, financial stability, health insurance, and sometimes an interview.
                  Processing times vary by country, so apply well in advance of your program start date.
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="item-4">
                <AccordionTrigger>What are the average tuition fees for different countries?</AccordionTrigger>
                <AccordionContent>
                  Tuition fees vary widely: USA ($20,000-$50,000/year), UK (£10,000-£20,000/year), Canada
                  (CAD$15,000-$35,000/year), Australia (AUD$20,000-$45,000/year), and Germany (mostly free with semester
                  fees of €250-€500). Many countries offer scholarships and financial aid options for international
                  students.
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="item-5">
                <AccordionTrigger>Are there scholarships available for international students?</AccordionTrigger>
                <AccordionContent>
                  Yes, many universities and governments offer scholarships specifically for international students.
                  These can be merit-based, need-based, or country-specific. Additionally, there are external
                  organizations and foundations that provide funding opportunities. Check university websites and our
                  scholarship database for more information.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>

{/* Popular Destinations Section */}
      <section className="py-16 bg-muted/50">
        <div className="container">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold">Popular Study Destinations</h2>
            <p className="text-muted-foreground mt-2">Explore top countries for international education</p>
          </div>

<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            {[
              { name: "USA", image: "/placeholder.svg?height=200&width=200", path: "/destinations/usa" },
              { name: "UK", image: "/placeholder.svg?height=200&width=200", path: "/destinations/uk" },
              { name: "Canada", image: "/placeholder.svg?height=200&width=200", path: "/destinations/canada" },
              { name: "Australia", image: "/placeholder.svg?height=200&width=200", path: "/destinations/australia" },
              { name: "Germany", image: "/placeholder.svg?height=200&width=200", path: "/destinations/germany" },
            ].map((destination, index) => (
              <Link href={destination.path} key={index}>
                <motion.div
                  whileHover={{ y: -5 }}
                  className="bg-card border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all"
                >
                  <div className="relative h-32">
                    <Image
                      src={destination.image || "/placeholder.svg"}
                      alt={`${destination.name} universities`}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div className="p-3 text-center">
                    <h3 className="font-medium">{destination.name}</h3>
                  </div>
                </motion.div>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16">
        <div className="container">
          <div className="bg-primary text-primary-foreground rounded-xl p-8 md:p-12">
            <div className="max-w-3xl mx-auto text-center space-y-6">
              <h2 className="text-3xl md:text-4xl font-bold">Ready to Start Your Study Abroad Journey?</h2>
              <p className="text-primary-foreground/90 text-lg">
                Let us help you find the perfect university match and guide you through the application process.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
                <Button size="lg" variant="secondary" onClick={handleSearch}>
                  Search Universities
                </Button>
                <Link href="/steps/research">
                  <Button
                    size="lg"
                    variant="outline"
                    className="bg-transparent text-primary-foreground border-primary-foreground hover:bg-primary-foreground hover:text-primary"
                  >
                    Step-by-Step Guide
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import "./globals.css"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "FindMyUniAbroad - Find Your Perfect University Abroad",
  description: "Discover and compare universities worldwide for your study abroad journey",
  generator: "v0.dev",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <div className="flex min-h-screen flex-col">
            <Navbar />
            <main className="flex-1">{children}</main>
            <Footer />
          </div>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/search/loading.tsx" isEdit="true" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="min-h-screen py-8">
      <div className="container">
        <div className="flex flex-col md:flex-row justify-between items-start gap-8">
          {/* Filters Skeleton */}
          <div className="w-full md:w-64 lg:w-72 space-y-6 hidden md:block">
            <div className="bg-card border rounded-lg p-4 shadow-sm">
              <Skeleton className="h-6 w-32 mb-4" />
              <div className="space-y-4">
                {[...Array(4)].map((_, i) => (
                  <div key={i} className="space-y-2">
                    <Skeleton className="h-4 w-24" />
                    <div className="space-y-2">
                      {[...Array(4)].map((_, j) => (
                        <div key={j} className="flex items-center space-x-2">
                          <Skeleton className="h-4 w-4" />
                          <Skeleton className="h-4 w-20" />
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

{/* Main Content Skeleton */}
          <div className="flex-1">
            {/* Search Bar Skeleton */}
            <div className="flex flex-col md:flex-row gap-4 mb-6">
              <Skeleton className="h-10 flex-1" />
              <div className="flex gap-2">
                <Skeleton className="h-10 w-[180px]" />
                <Skeleton className="h-10 w-[100px] md:hidden" />
              </div>
            </div>

{/* Results Count Skeleton */}
            <div className="flex justify-between items-center mb-6">
              <Skeleton className="h-4 w-32" />
            </div>

{/* University Cards Skeleton */}
            <div className="space-y-6">
              {[...Array(3)].map((_, i) => (
                <div key={i} className="border rounded-lg overflow-hidden">
                  <div className="flex flex-col md:flex-row">
                    <Skeleton className="h-48 md:w-1/3 lg:w-1/4" />
                    <div className="flex-1 p-6">
                      <div className="space-y-4">
                        <Skeleton className="h-6 w-3/4" />
                        <Skeleton className="h-4 w-1/2" />
                        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                          {[...Array(5)].map((_, j) => (
                            <div key={j}>
                              <Skeleton className="h-3 w-16 mb-1" />
                              <Skeleton className="h-4 w-24" />
                            </div>
                          ))}
                        </div>
                        <div>
                          <Skeleton className="h-3 w-24 mb-2" />
                          <div className="flex flex-wrap gap-2">
                            {[...Array(4)].map((_, k) => (
                              <Skeleton key={k} className="h-6 w-20" />
                            ))}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
}

export { Skeleton }

[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="app/destinations/usa/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { GraduationCapIcon, MapPinIcon } from "lucide-react"

// Top universities in the USA
const topUniversities = [
  {
    id: 1,
    name: "Harvard University",
    location: "Cambridge, Massachusetts",
    ranking: 1,
    image: "/placeholder.svg?height=200&width=300",
    description: "One of the world's most prestigious universities, known for excellence across disciplines.",
  },
  {
    id: 2,
    name: "Stanford University",
    location: "Stanford, California",
    ranking: 3,
    image: "/placeholder.svg?height=200&width=300",
    description: "A leading research university known for entrepreneurship and innovation.",
  },
  {
    id: 3,
    name: "Massachusetts Institute of Technology (MIT)",
    location: "Cambridge, Massachusetts",
    ranking: 2,
    image: "/placeholder.svg?height=200&width=300",
    description: "World-renowned for engineering, computer science, and technological innovation.",
  },
  {
    id: 4,
    name: "California Institute of Technology (Caltech)",
    location: "Pasadena, California",
    ranking: 4,
    image: "/placeholder.svg?height=200&width=300",
    description: "A small but elite institution focused on science and engineering.",
  },
  {
    id: 5,
    name: "University of Chicago",
    location: "Chicago, Illinois",
    ranking: 6,
    image: "/placeholder.svg?height=200&width=300",
    description: "Known for rigorous academics and influential research across disciplines.",
  },
  {
    id: 6,
    name: "Columbia University",
    location: "New York City, New York",
    ranking: 7,
    image: "/placeholder.svg?height=200&width=300",
    description: "An Ivy League university with strengths in journalism, business, and the arts.",
  },
]

export default function USADestinationPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative py-20 md:py-28">
        <div className="absolute inset-0 z-0">
          <Image
            src="/placeholder.svg?height=1080&width=1920"
            alt="USA university campus"
            fill
            className="object-cover opacity-20"
            priority
          />
        </div>
        <div className="container relative z-10">
          <div className="max-w-3xl mx-auto text-center space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">Study in the USA</h1>
            <p className="text-lg md:text-xl text-muted-foreground">
              Discover world-class education, cutting-edge research, and diverse cultural experiences at top
              universities across the United States.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
              <Button size="lg">Explore Universities</Button>
              <Button size="lg" variant="outline">
                Admission Requirements
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* Quick Facts Section */}
      <section className="py-12 bg-muted/50">
        <div className="container">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold">USA at a Glance</h2>
            <p className="text-muted-foreground mt-2">Key facts about studying in the United States</p>
          </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">4,000+</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>Universities and Colleges</CardDescription>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">1M+</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>International Students</CardDescription>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">$20K-$50K</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>Average Annual Tuition</CardDescription>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">12-36</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>Months Post-Study Work (OPT)</CardDescription>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Top Universities Section */}
      <section className="py-16 md:py-24 bg-muted/50">
        <div className="container">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold">Top Universities in the USA</h2>
            <p className="text-muted-foreground mt-2">
              Explore some of America's most prestigious educational institutions
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {topUniversities.map((university) => (
              <Card key={university.id} className="overflow-hidden">
                <div className="h-48 relative">
                  <Image
                    src={university.image || "/placeholder.svg"}
                    alt={university.name}
                    fill
                    className="object-cover"
                  />
                </div>
                <CardHeader>
                  <CardTitle>{university.name}</CardTitle>
                  <CardDescription className="flex items-center">
                    <MapPinIcon className="h-4 w-4 mr-1" />
                    {university.location}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground mb-2">{university.description}</p>
                  <div className="flex items-center text-sm">
                    <GraduationCapIcon className="h-4 w-4 mr-1 text-primary" />
                    <span>World Ranking: #{university.ranking}</span>
                  </div>
                </CardContent>
                <CardFooter>
                  <Link href={`/university/${university.id}`} className="w-full">
                    <Button variant="outline" className="w-full">
                      View Details
                    </Button>
                  </Link>
                </CardFooter>
              </Card>
            ))}
          </div>

<div className="text-center mt-8">
            <Button>View All USA Universities</Button>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 md:py-24 bg-primary text-primary-foreground">
        <div className="container">
          <div className="max-w-3xl mx-auto text-center space-y-6">
            <h2 className="text-3xl md:text-4xl font-bold">Ready to Start Your Study Abroad Journey?</h2>
            <p className="text-primary-foreground/80 text-lg">
              Join thousands of students who have found their perfect university match with FindMyUniAbroad.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
              <Button size="lg" variant="secondary">
                Search Universities
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="bg-transparent text-primary-foreground border-primary-foreground hover:bg-primary-foreground hover:text-primary"
              >
                Contact Our Team
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
</article></body></html>