{loading && (
-
-
+
+
Loading more courses...
)}
{!hasMore && (
-
You've reached the end of the list
+
You've reached the end of the list
)}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index ca2ca1d..97aab72 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,72 +1,82 @@
-
+import { Badge } from '@/src/components/ui/badge';
+import { Button } from '@/src/components/ui/button';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/src/components/ui/card';
+import { Input } from '@/src/components/ui/input';
+import { RainbowButton } from '@/src/components/ui/rainbow-button';
+import { ShineBorder } from '@/src/components/ui/shine-border';
import { Link, useNavigate } from '@tanstack/react-router';
import { AnimatePresence, motion } from 'framer-motion';
import {
- ArrowRight, BookOpen, Building2, CheckCircle2, ChevronLeft, ChevronRight,
- FileText, Globe2, MapPin, MessageCircle,
- Search, Send, TrendingUp,
+ ArrowRight,
+ BookOpen,
+ Building2,
+ CheckCircle2,
+ ChevronLeft,
+ ChevronRight,
+ FileText,
+ Globe2,
+ MapPin,
+ MessageCircle,
+ Search,
+ Send,
+ TrendingUp,
Trophy,
- X, Youtube
+ X,
+ Youtube,
} from 'lucide-react';
import type React from 'react';
-import { useEffect, useState, useRef } from 'react';
-import { Button } from '@/src/components/ui/button';
-import { Input } from '@/src/components/ui/input';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/src/components/ui/card';
-import { Badge } from '@/src/components/ui/badge';
-import { ShineBorder } from '@/src/components/ui/shine-border';
-import { RainbowButton } from '@/src/components/ui/rainbow-button';
+import { useEffect, useRef, useState } from 'react';
+import ColorBends from '../components/ColorBends';
import { CounselingModal } from '../components/CounselingModal';
+import { CourseCategoryIcon } from '../components/CourseCategoryIcon';
+import { ExploreProgramsSection } from '../components/ExploreProgramsSection';
+import { GoalSelectionModal } from '../components/GoalSelectionModal';
import { FlagIcon } from '../components/Icons/Flags';
-import { LeadForm } from '../components/LeadForm';
import { LaserFlow } from '../components/LaserFlow';
+import { LeadForm } from '../components/LeadForm';
import LightPillar from '../components/LightPillar';
-import ColorBends from '../components/ColorBends';
-import { ExploreProgramsSection } from '../components/ExploreProgramsSection';
import { COURSE_CATEGORIES } from '../constants/courseCategories';
-import { CourseCategoryIcon } from '../components/CourseCategoryIcon';
-import { GoalSelectionModal } from '../components/GoalSelectionModal';
+import { type College, getColleges } from '../services/collegeService';
// --- MOCK DATA ---
const HERO_IMAGES = [
- "https://images.unsplash.com/photo-1562774053-701939374585?q=80&w=1920&auto=format&fit=crop", // Modern Campus
- "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=1920&auto=format&fit=crop", // Graduation
- "https://images.unsplash.com/photo-1576091160550-2187d80aeff2?q=80&w=1920&auto=format&fit=crop", // Medical Lab
- "https://images.unsplash.com/photo-1599596372478-43d99433e387?q=80&w=1920&auto=format&fit=crop", // Stone Architecture (IIM Style)
- "https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1920&auto=format&fit=crop", // Group Studying
- "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=1920&auto=format&fit=crop", // Library
- "https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?q=80&w=1920&auto=format&fit=crop", // Convocation
- "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1920&auto=format&fit=crop", // Engineering Lab
- "https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?q=80&w=1920&auto=format&fit=crop", // Students Group
- "https://images.unsplash.com/photo-1590012314607-cda9d9b699ae?q=80&w=1920&auto=format&fit=crop", // Red Brick College
- "https://images.unsplash.com/photo-1532094349884-543bc11b234d?q=80&w=1920&auto=format&fit=crop", // Science Lab
- "https://images.unsplash.com/photo-1555436169-20e93ee0a713?q=80&w=1920&auto=format&fit=crop", // Campus Walkway
- "https://images.unsplash.com/photo-1606761568499-6d2451b23c66?q=80&w=1920&auto=format&fit=crop", // Students discussing
- "https://images.unsplash.com/photo-1592280771884-1d3972c9a198?q=80&w=1920&auto=format&fit=crop", // Green Campus
- "https://images.unsplash.com/photo-1427504743083-1911adb0bc8e?q=80&w=1920&auto=format&fit=crop" // Classroom
+ 'https://images.unsplash.com/photo-1562774053-701939374585?q=80&w=1920&auto=format&fit=crop', // Modern Campus
+ 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=1920&auto=format&fit=crop', // Graduation
+ 'https://images.unsplash.com/photo-1576091160550-2187d80aeff2?q=80&w=1920&auto=format&fit=crop', // Medical Lab
+ 'https://images.unsplash.com/photo-1599596372478-43d99433e387?q=80&w=1920&auto=format&fit=crop', // Stone Architecture (IIM Style)
+ 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1920&auto=format&fit=crop', // Group Studying
+ 'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=1920&auto=format&fit=crop', // Library
+ 'https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?q=80&w=1920&auto=format&fit=crop', // Convocation
+ 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1920&auto=format&fit=crop', // Engineering Lab
+ 'https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?q=80&w=1920&auto=format&fit=crop', // Students Group
+ 'https://images.unsplash.com/photo-1590012314607-cda9d9b699ae?q=80&w=1920&auto=format&fit=crop', // Red Brick College
+ 'https://images.unsplash.com/photo-1532094349884-543bc11b234d?q=80&w=1920&auto=format&fit=crop', // Science Lab
+ 'https://images.unsplash.com/photo-1555436169-20e93ee0a713?q=80&w=1920&auto=format&fit=crop', // Campus Walkway
+ 'https://images.unsplash.com/photo-1606761568499-6d2451b23c66?q=80&w=1920&auto=format&fit=crop', // Students discussing
+ 'https://images.unsplash.com/photo-1592280771884-1d3972c9a198?q=80&w=1920&auto=format&fit=crop', // Green Campus
+ 'https://images.unsplash.com/photo-1427504743083-1911adb0bc8e?q=80&w=1920&auto=format&fit=crop', // Classroom
];
const HERO_DYNAMIC_TEXTS = [
- "Dream College",
- "Perfect MBA",
- "Ideal Engineering",
- "Best Medical Seat",
- "Top University",
- "Dream Career"
+ 'Dream College',
+ 'Perfect MBA',
+ 'Ideal Engineering',
+ 'Best Medical Seat',
+ 'Top University',
+ 'Dream Career',
];
-// Mock data for search suggestions
-const MOCK_COLLEGES_SEARCH = [
- { id: '1', name: 'IIT Bombay', location: 'Mumbai' },
- { id: '2', name: 'IIT Delhi', location: 'New Delhi' },
- { id: '3', name: 'IIM Bangalore', location: 'Bangalore' },
- { id: '4', name: 'AIIMS New Delhi', location: 'New Delhi' },
- { id: '5', name: 'BITS Pilani', location: 'Pilani' },
- { id: '6', name: 'VIT Vellore', location: 'Vellore' },
- { id: '7', name: 'SRM University', location: 'Chennai' },
- { id: '8', name: 'Amity University', location: 'Noida' }
-];
+// Instead of static mock data for search suggestions, we'll fetch this from the service.
+// Initial placeholder empty array to prevent undefined issues on mount before fetch.
+// We'll update the filter logic in the component to use the fetched data.
+const INITIAL_SEARCH_DATA: College[] = [];
// College counts for each category (mock data)
const COLLEGE_COUNTS: Record
= {
@@ -94,12 +104,48 @@ const COLLEGE_COUNTS: Record = {
};
const PROGRAMS_FEATURES = [
- { title: 'Ranking', desc: 'College ranked based on real data', icon: Trophy, color: 'bg-blue-100 text-blue-600', link: '/colleges' },
- { title: 'Find Colleges', desc: 'Discover 19000+ colleges via preferences', icon: Building2, color: 'bg-green-100 text-green-600', link: '/colleges' },
- { title: 'Compare Colleges', desc: 'Compare on the basis of rank, fees, etc.', icon: CheckCircle2, color: 'bg-purple-100 text-purple-600', link: '/colleges' },
- { title: 'Exams', desc: 'Know more about your exams', icon: FileText, color: 'bg-orange-100 text-orange-600', link: '/exams' },
- { title: 'College Predictor', desc: 'Know your college admission chances', icon: TrendingUp, color: 'bg-indigo-100 text-indigo-600', link: '/colleges' },
- { title: 'Course Finder', desc: 'Discover top courses in Indian Colleges 2026', icon: BookOpen, color: 'bg-red-100 text-red-600', link: '/courses' },
+ {
+ title: 'Ranking',
+ desc: 'College ranked based on real data',
+ icon: Trophy,
+ color: 'bg-blue-100 text-blue-600',
+ link: '/colleges',
+ },
+ {
+ title: 'Find Colleges',
+ desc: 'Discover 19000+ colleges via preferences',
+ icon: Building2,
+ color: 'bg-green-100 text-green-600',
+ link: '/colleges',
+ },
+ {
+ title: 'Compare Colleges',
+ desc: 'Compare on the basis of rank, fees, etc.',
+ icon: CheckCircle2,
+ color: 'bg-purple-100 text-purple-600',
+ link: '/colleges',
+ },
+ {
+ title: 'Exams',
+ desc: 'Know more about your exams',
+ icon: FileText,
+ color: 'bg-orange-100 text-orange-600',
+ link: '/exams',
+ },
+ {
+ title: 'College Predictor',
+ desc: 'Know your college admission chances',
+ icon: TrendingUp,
+ color: 'bg-indigo-100 text-indigo-600',
+ link: '/colleges',
+ },
+ {
+ title: 'Course Finder',
+ desc: 'Discover top courses in Indian Colleges 2026',
+ icon: BookOpen,
+ color: 'bg-red-100 text-red-600',
+ link: '/courses',
+ },
];
const TOP_STUDY_PLACES = [
@@ -119,42 +165,120 @@ const TOP_STUDY_PLACES = [
const SUBSCRIBE_ALERTS = [
{ title: 'Exam Alerts', image: '/assets/prize-1.png', desc: 'Get notified about exam dates' },
- { title: 'Admission Alerts', image: '/assets/prize-2.png', desc: 'Never miss admission deadlines' },
+ {
+ title: 'Admission Alerts',
+ image: '/assets/prize-2.png',
+ desc: 'Never miss admission deadlines',
+ },
{ title: 'Result Alerts', image: '/assets/prize-3.png', desc: 'Be first to know your results' },
- { title: 'Scholarship Alerts', image: '/assets/prize-4.png', desc: 'Find scholarship opportunities' },
+ {
+ title: 'Scholarship Alerts',
+ image: '/assets/prize-4.png',
+ desc: 'Find scholarship opportunities',
+ },
{ title: 'College Alerts', image: '/assets/prize-5.png', desc: 'Stay updated on college news' },
{ title: 'Career Alerts', image: '/assets/prize-6.png', desc: 'Explore career opportunities' },
];
const TOP_10_COLLEGES = [
- { rank: '#1', name: 'IIMA - Indian Institute of Management', location: 'Ahmedabad, Gujarat', rating: '5/5', cutoff: 'CAT 2025 Cut off 99', deadline: '7 July - 08 Sept 2025', fees: '₹27,50,000' },
- { rank: '#2', name: 'IIT Bombay - Indian Institute of Technology', location: 'Mumbai, Maharashtra', rating: '5/5', cutoff: 'JEE-Advanced 2025 Cut off 66', deadline: '1 Oct - 05 Nov 2025', fees: '₹8,82,500' },
- { rank: '#3', name: 'All India Institute of Medical Sciences - [AIIMS]', location: 'New Delhi, Delhi NCR', rating: '4.9/5', cutoff: 'INI-CET 2026 Cut off 2412', deadline: '8 Apr - 07 May 2025', fees: '₹5,356' },
- { rank: '#4', name: 'National Law School of India University', location: 'Bangalore, Karnataka', rating: '4.9/5', cutoff: 'CLAT 2026 Cut off 108', deadline: '15 Nov - 23 Mar 2026', fees: '₹15,56,800' },
- { rank: '#5', name: 'Vardhman Mahavir Medical College - [VMMC]', location: 'New Delhi, Delhi NCR', rating: '4.9/5', cutoff: 'NEET 2025 Cut off 132', deadline: '1 Feb - 15 May 2024', fees: '₹2,65,000' },
+ {
+ rank: '#1',
+ name: 'IIMA - Indian Institute of Management',
+ location: 'Ahmedabad, Gujarat',
+ rating: '5/5',
+ cutoff: 'CAT 2025 Cut off 99',
+ deadline: '7 July - 08 Sept 2025',
+ fees: '₹27,50,000',
+ },
+ {
+ rank: '#2',
+ name: 'IIT Bombay - Indian Institute of Technology',
+ location: 'Mumbai, Maharashtra',
+ rating: '5/5',
+ cutoff: 'JEE-Advanced 2025 Cut off 66',
+ deadline: '1 Oct - 05 Nov 2025',
+ fees: '₹8,82,500',
+ },
+ {
+ rank: '#3',
+ name: 'All India Institute of Medical Sciences - [AIIMS]',
+ location: 'New Delhi, Delhi NCR',
+ rating: '4.9/5',
+ cutoff: 'INI-CET 2026 Cut off 2412',
+ deadline: '8 Apr - 07 May 2025',
+ fees: '₹5,356',
+ },
+ {
+ rank: '#4',
+ name: 'National Law School of India University',
+ location: 'Bangalore, Karnataka',
+ rating: '4.9/5',
+ cutoff: 'CLAT 2026 Cut off 108',
+ deadline: '15 Nov - 23 Mar 2026',
+ fees: '₹15,56,800',
+ },
+ {
+ rank: '#5',
+ name: 'Vardhman Mahavir Medical College - [VMMC]',
+ location: 'New Delhi, Delhi NCR',
+ rating: '4.9/5',
+ cutoff: 'NEET 2025 Cut off 132',
+ deadline: '1 Feb - 15 May 2024',
+ fees: '₹2,65,000',
+ },
];
const LATEST_NEWS = [
- { title: 'Assam HSLC 2026 Assamese Question Paper (Available)', date: 'Feb 10, 2026', content: 'The Assam Board HSLC 2026 Assamese Question Paper Is Available For Download Here.' },
- { title: 'JEE Main Session 1 Final Answer Key Live Updates', date: 'Feb 10, 2026', content: 'The JEE Main Session 1 Final Answer Key Is Expected To Be Released Anytime Soon.' },
- { title: 'IBSAT 2025 Selection Process to Be Held from February 14', date: 'Feb 10, 2026', content: 'The ICFAI Business School (IBS) Has Announced The Schedule For The IBSAT 2025.' },
+ {
+ title: 'Assam HSLC 2026 Assamese Question Paper (Available)',
+ date: 'Feb 10, 2026',
+ content: 'The Assam Board HSLC 2026 Assamese Question Paper Is Available For Download Here.',
+ },
+ {
+ title: 'JEE Main Session 1 Final Answer Key Live Updates',
+ date: 'Feb 10, 2026',
+ content: 'The JEE Main Session 1 Final Answer Key Is Expected To Be Released Anytime Soon.',
+ },
+ {
+ title: 'IBSAT 2025 Selection Process to Be Held from February 14',
+ date: 'Feb 10, 2026',
+ content: 'The ICFAI Business School (IBS) Has Announced The Schedule For The IBSAT 2025.',
+ },
];
const GLOBAL_PRESENCE = [
- 'usa', 'uk', 'canada', 'australia', 'germany', 'ireland', 'newzealand', 'france', 'sweden', 'singapore', 'malaysia', 'netherlands'
+ 'usa',
+ 'uk',
+ 'canada',
+ 'australia',
+ 'germany',
+ 'ireland',
+ 'newzealand',
+ 'france',
+ 'sweden',
+ 'singapore',
+ 'malaysia',
+ 'netherlands',
];
// --- COMPONENTS ---
-const SectionTitle: React.FC<{ title: string; linkText?: string; linkTo?: string }> = ({ title, linkText, linkTo }) => (
-
-
+const SectionTitle: React.FC<{ title: string; linkText?: string; linkTo?: string }> = ({
+ title,
+ linkText,
+ linkTo,
+}) => (
+
+
{title}
-
+
{linkText && linkTo && (
-
- {linkText}
+
+ {linkText}
)}
@@ -174,9 +298,21 @@ export const Home: React.FC = () => {
// Search State
const [searchTerm, setSearchTerm] = useState('');
const [showSuggestions, setShowSuggestions] = useState(false);
- const [filteredSuggestions, setFilteredSuggestions] = useState(MOCK_COLLEGES_SEARCH);
+ const [allSearchData, setAllSearchData] = useState(INITIAL_SEARCH_DATA);
+ const [filteredSuggestions, setFilteredSuggestions] = useState(INITIAL_SEARCH_DATA);
const revealImgRef = useRef(null);
+ // Fetch search data from Supabase/fallback service
+ useEffect(() => {
+ const fetchSearchData = async () => {
+ const data = await getColleges();
+ setAllSearchData(data);
+ // Pre-populate if you want, or leave empty
+ // setFilteredSuggestions(data);
+ };
+ fetchSearchData();
+ }, []);
+
// Top Study Places Slider State
const studyPlacesRef = useRef(null);
const [canScrollLeft, setCanScrollLeft] = useState(false);
@@ -209,8 +345,8 @@ export const Home: React.FC = () => {
const addToRecentVisits = (term: string) => {
if (!term.trim()) return;
- setRecentVisits(prev => {
- const filtered = prev.filter(item => item.toLowerCase() !== term.toLowerCase());
+ setRecentVisits((prev) => {
+ const filtered = prev.filter((item) => item.toLowerCase() !== term.toLowerCase());
const updated = [term, ...filtered].slice(0, 3);
saveToLocalStorage(updated);
return updated;
@@ -219,8 +355,8 @@ export const Home: React.FC = () => {
// Remove search term from recent visits
const removeFromRecentVisits = (term: string) => {
- setRecentVisits(prev => {
- const updated = prev.filter(item => item !== term);
+ setRecentVisits((prev) => {
+ const updated = prev.filter((item) => item !== term);
saveToLocalStorage(updated);
return updated;
});
@@ -253,12 +389,13 @@ export const Home: React.FC = () => {
setFilteredSuggestions([]);
return;
}
- const filtered = MOCK_COLLEGES_SEARCH.filter(c =>
- c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
- c.location.toLowerCase().includes(searchTerm.toLowerCase())
+ const filtered = allSearchData.filter(
+ (c) =>
+ c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ c.location.toLowerCase().includes(searchTerm.toLowerCase())
);
setFilteredSuggestions(filtered);
- }, [searchTerm]);
+ }, [searchTerm, allSearchData]);
const handleSearchSubmit = (e?: React.FormEvent) => {
if (e) e.preventDefault();
@@ -269,24 +406,25 @@ export const Home: React.FC = () => {
};
const handleSuggestionClick = (collegeId: string) => {
- const college = MOCK_COLLEGES_SEARCH.find(c => c.id === collegeId);
+ const college = allSearchData.find((c) => c.id === collegeId);
if (college) {
addToRecentVisits(college.name);
}
- navigate({ to: '/colleges/$id', params: { id: collegeId } as any });
+ navigate({ to: '/college/$id', params: { id: collegeId } as any });
};
// Top Study Places Scroll Functions
const scrollStudyPlaces = (direction: 'left' | 'right') => {
if (studyPlacesRef.current) {
const scrollAmount = 300;
- const newScrollLeft = direction === 'left'
- ? studyPlacesRef.current.scrollLeft - scrollAmount
- : studyPlacesRef.current.scrollLeft + scrollAmount;
+ const newScrollLeft =
+ direction === 'left'
+ ? studyPlacesRef.current.scrollLeft - scrollAmount
+ : studyPlacesRef.current.scrollLeft + scrollAmount;
studyPlacesRef.current.scrollTo({
left: newScrollLeft,
- behavior: 'smooth'
+ behavior: 'smooth',
});
}
};
@@ -312,13 +450,14 @@ export const Home: React.FC = () => {
const scrollSubscribeAlerts = (direction: 'left' | 'right') => {
if (subscribeAlertsRef.current) {
const scrollAmount = 300;
- const newScrollLeft = direction === 'left'
- ? subscribeAlertsRef.current.scrollLeft - scrollAmount
- : subscribeAlertsRef.current.scrollLeft + scrollAmount;
+ const newScrollLeft =
+ direction === 'left'
+ ? subscribeAlertsRef.current.scrollLeft - scrollAmount
+ : subscribeAlertsRef.current.scrollLeft + scrollAmount;
subscribeAlertsRef.current.scrollTo({
left: newScrollLeft,
- behavior: 'smooth'
+ behavior: 'smooth',
});
}
};
@@ -346,10 +485,9 @@ export const Home: React.FC = () => {
};
return (
-
+
{/* Hero Section with Slider */}
-
-
+
{/* Slider Background */}
{
animate={{ opacity: 0.6 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
- className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+ className='absolute inset-0 bg-cover bg-center bg-no-repeat'
style={{ backgroundImage: `url('${HERO_IMAGES[currentSlide]}')` }}
/>
{/* Dark Gradient Overlay for readability */}
-
+
{/* LaserFlow Effect - blended with background */}
{
const rect = e.currentTarget.getBoundingClientRect();
@@ -391,29 +529,27 @@ export const Home: React.FC = () => {
}
}}
>
-
+
-
+
{/*
{
quality="high"
/> */}
-
{/* Your content here */}
-
+
Find Your{' '}
-
+
{HERO_DYNAMIC_TEXTS[dynamicTextIndex]}
{/* Courses & Exams in India */}
-
-
-