Design a fully responsive, modern, animated website for a global education-tech company called NEXGRAD. The website should feel like a mix of Apple (futuristic, clean UI), Coursera/Udemy (courses), Naukri.com (jobs), and TCS Careers (internships).
Use an international design system with animations (Framer Motion / GSAP-style), modular cards, box layout UI, hover effects, and smooth transitions.
🟦 Brand Identity:
- Name: NEXGRAD
- Colors: Electric Blue (
#0070f3), Space Gray (#1f1f1f), Sky White (#f8f9fa), Tech Purple (#6C63FF)
- Fonts: Inter, Poppins, or Satoshi
- Style: Futuristic tech, glassmorphism, animated transitions
📦 Design the following 12 key pages (with reusable components):
1. 🏠 Home Page
- Hero Banner with animation: “Your Next Graduation Starts Here”
- Quick links: Courses | Internships | Jobs | Hire from NEXGRAD
- Highlight Programs: Full Stack Dev, Machine Learning, Data Science
- Internship Carousel (1/3/6 months)
- Partner Companies Logos (auto-scroll)
- Testimonials (animated)
- Newsletter + Footer
2. 🧑🏫 Courses Overview Page
- Filters: Duration, Skill Level, Category
- Course Cards (Image, Title, Duration, Level)
- Tabs: Full Stack | ML | DS | AI | Cloud | Blockchain
- CTA: Enroll Now
3. 📘 Course Detail Page
- Course Banner: Name, Duration, Tags
- Syllabus Accordion
- Tech Stack Badges
- Instructor Section
- Certificate Preview
- Reviews + Rating System
- Pricing Table (1/3/6 month)
4. 💼 Internship Page
- Internship Banner
- Filters: Domain, Location, Duration, Stipend
- Cards: Role, Company, Apply Button
- How It Works (Timeline)
- Testimonials from interns
- CTA: Apply for Internship
5. 👨🔧 Job Portal
- Hero Search Bar (Job Title + Location)
- Filters: Industry, Experience, Salary
- Job Cards: Role, Company, Location, Apply
- Featured Employers Strip
- Resume Builder Section
- Email Alerts Signup
6. 🏢 Hire From Us (Employer Page)
- Why Hire NEXGRAD Talent?
- Talent Pool by Skill
- Industry Readiness Guarantee
- Post Internship or Job Form
- Pricing for Hiring Access
7. 🧍♂️ Student Dashboard (Private)
- Tabs: My Courses | My Internships | My Jobs
- Certificate Download
- Resume Upload
- Progress Cards
- Notifications Panel
8. 🧑💼 Employer Dashboard
- Tabs: Posted Jobs | Applications | Talent Filters
- Form: Post Job / Internship
- Analytics Panel
- Company Profile Management
9. 👨💻 About Us
- Mission + Vision
- Timeline: Our Journey
- Team Grid
- Culture Gallery
- Office Location (Map)
10. 📰 Blog / Resources
- Filters: Category, Tags
- Featured Articles
- Blog Cards: Title, Snippet, Read More
- Sidebar: Search + Recent Posts
11. 📞 Contact Page
- Address: 402, L & T Business Park, Chandivali, Powai, Mumbai
- Phone: 9146905710
- Email: info@NEXGRAD.net
- Google Maps Embed
- Contact Form
12. 📄 Legal Pages (in footer)
- Privacy Policy
- Terms & Conditions
- Refund Policy
- Certificate Validation Page
🧩 Components to Include Across All Pages:
- Header: Logo, Nav (Home, Courses, Internships, Jobs, Blog, Contact), Login
- Sticky Navbar with Scroll Animation
- Footer: Social Links, Quick Links, Newsletter
- Floating Chat Widget Button
- Responsive for mobile, tablet, desktop
✨ Animations:
- Page transitions
- Hover reveal on cards
- Scroll-based section reveals
- Testimonials auto-play
- Popups for course previews
Design a futuristic, responsive, and animated enterprise website for "NEXGRAD" — a global education-tech platform that offers:
- Online courses
- Internships
- Job placements
- Career resources
- B2B employer services
🟦 Brand Identity:
- Company Name: NEXGRAD
- Style: Apple-level UI, animated transitions, floating glassmorphism boxes, modern neumorphism
- Colors: Electric Blue (
#0070f3), Space Gray (#1f1f1f), Sky White (#f8f9fa), Tech Purple (#6C63FF)
- Typography: Inter, Poppins, Satoshi
- Layout: Grid/Box layout with hover cards, filters, tabs, animated page transitions
- Components: Tabs, Carousels, Cards, Accordions, Modals, Tables, Progress Bars, CTAs, Multi-step forms
- Animation Library: Use Framer Motion, GSAP, and hover transitions
🎯 DESIGN THE FOLLOWING 50+ PAGES:
🔹 [Core Pages]
- Home Page — Hero with animations, feature blocks (Courses, Internships, Jobs, Hire), testimonials, logos, newsletter
- About Us — Vision, Mission, Timeline, Founders, Team Grid, Gallery
- Contact Us — Address, phone, email, map, contact form
- Help Center — FAQ accordion, category filter, contact button
- Terms of Use
- Privacy Policy
- Refund Policy
- Accessibility Statement
- Sitemap
- Press & Media Page
🔹 [Courses Section] – Like Coursera/Udemy
- All Courses Overview — Filter by Category, Level, Duration
- Course Detail – Full Stack Development
- Course Detail – Machine Learning
- Course Detail – Data Science
- Course Detail – AI/Deep Learning
- Course Detail – Cloud Computing
- Course Detail – Web Development
- Course Detail – Android/iOS
- Course Detail – Cybersecurity
- Course Detail – UI/UX Design
- Course Detail – Blockchain
- Enroll Now Checkout Page
- Certificate Preview & Download Page
- Course Feedback/Rating Page
🔹 [Internships Section] – Like Internshala, TCS
- Internships Overview — Tabs (Tech, Non-tech, Remote), filters, duration/stipend
- Internship Detail Page
- Apply for Internship Page
- Internship Onboarding Flow (Multi-step)
- Internship Experience Gallery
- Internship Certificate Page
- Mentor Introduction Page
- Project Showcase Page
🔹 [Jobs Platform] – Like Naukri.com
- Job Portal Main — Filters: Role, Location, Salary, Skill, Industry
- Job Detail Page
- Apply for Job Form
- Resume Builder Tool
- Job Alerts Subscription Page
- Saved Jobs Dashboard
- Companies Hiring From NEXGRAD
- Interview Prep Resource Page
🔹 [Hire From Us] – Employer Side
- Why Hire From NEXGRAD – Talent pool, portfolio, stats
- Post a Job/Internship Form
- Employer Pricing Plans Page
- Employer Signup / Login
- Talent Filter & Search Tool
- Download Resume Dashboard
🔹 [Dashboards]
- Student Dashboard – Courses, internships, jobs, resume upload, certificate downloads
- Instructor Dashboard – Course creation, earnings, student feedback
- Employer Dashboard – Posted jobs, applicants, search/filter
- Admin Panel – Full CMS management dashboard for NEXGRAD
- Transactions History Page
🔹 [Blog & Resources]
- Blog Home Page — Filter by tags/categories
- Blog Detail Page — SEO optimized
- Career Guide Page
- Roadmaps (DS, Web Dev, ML) Page
- Tools & Tutorials (Git, Docker, TensorFlow)
- Downloadables / Ebooks Page
- Free Resources & Templates Page
- Community Forum Page (Threads, Replies)
- Interview Experience Stories Page
🔧 Cross-Page Features:
- Header with sticky navigation: Home, Courses, Internships, Jobs, Hire, Blog, Login
- Footer: Company Info, Newsletter, Policies, Social Media
- Chatbot floating widget
- Scroll-triggered animations
- Mobile-first responsive layout
- All pages should support dark/light mode toggle