diff --git a/app/globals.css b/app/globals.css index 13ecb95..fb28a5d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,27 @@ @import "tailwindcss"; @custom-variant dark (&:where(.dark, .dark *)); +@theme { + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); +} @layer base { :root { --background: 0 0% 100%; diff --git a/app/layout.tsx b/app/layout.tsx index e31831e..63aa535 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -108,7 +108,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + -
- {/* Header */} -
-
-
-
-
-
+
+ {/* Header */} +
+
+
-
- {/* Topic */} -
-

- Current Topic +

+

+ Hyper AI +

+
+
+

+ Online • Ready to Help

- -

- Complexity Analysis -

-
- - {/* User */} -
-
- Explain Big O notation with a real example. -
+
+
- {/* AI */} -
-
-
- - AI Tutor +
+
+ + + {/* Topic Badge */} +
+ + Topic: {topic} +
-

- Big O notation describes how an algorithm's execution time - grows as input size increases. For example, Linear Search has - O(n) complexity because it may need to check every element in - the list. -

-
-
+ {/* Messages */} +
+ {messages.map((msg, idx) => ( +
+ {msg.type === "user" ? ( +
+ {msg.text} +
+ ) : ( + <> +
+
+ +
+ + Hyper AI + +
+
+ {msg.text && ( +

+ {msg.text} +

+ )} - {/* User */} -
-
- How is it different from O(log n)? -
-
+ {/* Rich UI Components */} + {msg.uiComponent === "notes" && ( +
+
+
+ +
+
+

+ Deadlocks_Revision.pdf +

+

+ RGPV Syllabus Mapped • 2.4 MB +

+
+
+
+ +
+
+ )} - {/* AI */} -
-
-
- - AI Tutor -
+ {msg.uiComponent === "exam_structure" && ( +
+
+ + + 10-Mark Blueprint Guarantee + +
+
+ 1. Introduction & Definitions + + [2M] + +
+
+ 2. OSI 7-Layer Diagram + + [3M] + +
+
+ 3. Detailed Layer Functions + + [5M] + +
+
+ )} -

- O(log n) grows much slower than O(n). Binary Search uses O(log - n) because it repeatedly halves the search space, making it - significantly faster for large datasets. -

-
-
+ {msg.uiComponent === "tutor_code" && ( +
+
+ + + SQL Example - 3NF Fix + +
+
+ + CREATE TABLE + {" "} + Departments (
+   Dept_ID{" "} + + INT PRIMARY KEY + + ,
+   Dept_Name{" "} + + VARCHAR(50) + +
+ ); +
+
+ + CREATE TABLE + {" "} + Employees (
+   Emp_ID{" "} + + INT PRIMARY KEY + + ,
+   Dept_ID{" "} + INT, +
+    + + FOREIGN KEY + {" "} + (Dept_ID){" "} + + REFERENCES + {" "} + Departments(Dept_ID) +
+ ); +
+
+ )} +
+ + )} +
+ ))} +
- {/* Input */} -
-
- - Ask a follow-up question... - + {/* PYQs Block */} + {pyqs && pyqs.length > 0 && ( +
+
+
+

+ Related PYQs found +

+
+
+ {pyqs.map((pyq, idx) => ( +
+
+ + + {pyq} + +
+ +
+ ))} +
+
+ )} + + +
- -
+ {/* Input Footer */} +
+ + Ask Hyper AI anything... + +
+
- - {/* Floating Card */} -
-

Follow-up Questions

- -

3 / 3

-
); } diff --git a/features/landing/ai-demo.tsx b/features/landing/ai-demo.tsx index 498bcb9..71c46dc 100644 --- a/features/landing/ai-demo.tsx +++ b/features/landing/ai-demo.tsx @@ -1,124 +1,238 @@ "use client"; -import { motion } from "framer-motion"; +import { useState } from "react"; +import { motion, Variants } from "framer-motion"; import { BrainCircuit, BookOpen, Sparkles } from "lucide-react"; import ChatMockup from "@/components/ai/chat-mockup"; -export default function AIDemo() { - return ( -
- {/* Background Glows - No grid pattern */} -
-
-
-
+const aiFeatures = [ + { + title: "Topic-Based Learning", + description: + "Open any syllabus topic and instantly generate detailed explanations, examples, revision notes, and key concepts.", + icon: BookOpen, + color: "bg-[#3B82F6]", + shadow: "shadow-blue-500/20", + chatData: { + topic: "Module 2: Deadlocks", + messages: [ + { + type: "user" as const, + text: "Show me the most important questions for Deadlocks from RGPV previous years.", + }, + { + type: "ai" as const, + text: "I've scanned the syllabus. Here are the most frequently asked questions on Deadlocks, sorted by weightage. I also generated a quick revision PDF for you:", + uiComponent: "notes" as const, + }, + ], + pyqs: [ + "Explain the 4 Coffman conditions for deadlock. (10M)", + "What is Bankers Algorithm? Explain with example. (8M)", + "Differentiate between Deadlock Prevention and Avoidance. (6M)", + ], + }, + }, + { + title: "Interactive AI Tutor", + description: + "Ask follow-up questions and receive personalized answers based on the topic you're studying.", + icon: BrainCircuit, + color: "bg-[#8B5CF6]", + shadow: "shadow-purple-500/20", + chatData: { + topic: "Database Normalization", + messages: [ + { + type: "user" as const, + text: "I don't understand the difference between 2NF and 3NF. Explain it simply.", + }, + { + type: "ai" as const, + text: "Think of 2NF as 'the whole key' and 3NF as 'nothing but the key'.", + }, + { + type: "user" as const, + text: "Can you give me an example with a student database?", + }, + { + type: "ai" as const, + text: "Sure! If an Employee table has 'Department_ID' and 'Department_Name'. Department_Name depends on Department_ID, not the Employee_ID. You should split them like this:", + uiComponent: "tutor_code" as const, + }, + ], + }, + }, + { + title: "Exam Focused Answers", + description: + "AI-generated responses are optimized for engineering exam preparation and structured learning.", + icon: Sparkles, + color: "bg-[#10B981]", + shadow: "shadow-emerald-500/20", + chatData: { + topic: "Computer Networks", + messages: [ + { + type: "user" as const, + text: "Generate a 10-mark answer structure for 'OSI Reference Model'.", + }, + { + type: "ai" as const, + text: "Here is the optimal structure to score full marks in your exams:", + uiComponent: "exam_structure" as const, + }, + ], + pyqs: ["Explain the functions of all 7 layers of the OSI model. (10M)"], + }, + }, +]; -
- {/* Header */} - - - - AI Learning Assistant - +export default function AIDemo() { + const [activeIndex, setActiveIndex] = useState(0); -

- Learn Like You're Talking To A - - Personal Tutor - -

+ const containerVariants: Variants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.1, + }, + }, + }; -

- Ask questions, understand difficult concepts, explore topic-wise - notes, and prepare for exams with AI-powered guidance. -

- + const itemVariants: Variants = { + hidden: { opacity: 0, y: 25, scale: 0.9, filter: "blur(8px)" }, + visible: { + opacity: 1, + y: 0, + scale: 1, + filter: "blur(0px)", + transition: { + duration: 0.7, + ease: [0.22, 1, 0.36, 1], + }, + }, + }; -
- {/* Left Side */} - -
-
-
-
- -
+ return ( +
+ {/* Premium High-Contrast Background Elements */} +
+ {/* Light Mode Blobs */} +
+
-
-

- Topic-Based Learning -

+ {/* Dark Mode Blobs */} +
+
+
-

- Open any syllabus topic and instantly generate detailed - explanations, examples, revision notes, and key concepts. -

-
-
+
+ + {/* Header */} +
+ +
+ + + AI Learning Assistant +
+ -
-
-
- -
- -
-

- Interactive AI Tutor -

+ + Learn Like You're Talking To A +
+ + Personal Tutor + + -

- Ask follow-up questions and receive personalized answers - based on the topic you're studying. -

-
-
-
- -
-
-
- -
+ + Ask questions, understand difficult concepts, explore topic-wise + notes, and prepare for exams with AI-powered guidance. + +
-
-

- Exam Focused Answers -

+
+ {/* Left Side (Features) */} + + {aiFeatures.map((feature, idx) => { + const isActive = activeIndex === idx; + const Icon = feature.icon; -

- AI-generated responses are optimized for engineering exam - preparation and structured learning. -

-
-
-
-
- + return ( + setActiveIndex(idx)} + variants={itemVariants} + className={`group relative text-left overflow-hidden rounded-[16px] sm:rounded-[20px] p-4 sm:p-5 transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] min-w-[280px] w-[85vw] sm:w-auto lg:w-full snap-center flex-shrink-0 lg:flex-shrink ${ + isActive + ? "border border-indigo-400/50 bg-white shadow-[0_20px_40px_-12px_rgba(99,102,241,0.2)] lg:scale-[1.02] lg:-translate-y-2 dark:border-indigo-500/[0.4] dark:bg-[#1e293b]/90 dark:shadow-[0_15px_30px_-10px_rgba(99,102,241,0.2)]" + : "border border-slate-100 sm:border-transparent bg-white shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:scale-[1.01] sm:hover:scale-[1.02] hover:-translate-y-1 sm:hover:-translate-y-2 hover:border-indigo-400/50 hover:bg-white hover:shadow-[0_30px_60px_-12px_rgba(99,102,241,0.25)] dark:border-white/[0.08] dark:bg-[#0f172a]/60 dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] dark:hover:border-indigo-500/[0.2] dark:hover:bg-[#1e293b]/80" + }`} + > +
+
+
+
+
+ +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+
+ + ); + })} + - {/* Right Side Chat Demo */} - - - -
+ {/* Right Side Chat Demo */} + +
+ + +
+
); diff --git a/features/landing/faq.tsx b/features/landing/faq.tsx index 67c0853..46fc776 100644 --- a/features/landing/faq.tsx +++ b/features/landing/faq.tsx @@ -1,167 +1,191 @@ "use client"; import { useState } from "react"; -import { motion, AnimatePresence } from "framer-motion"; -import { ChevronDown } from "lucide-react"; - -import { landingFaqs } from "@/lib/data/landing"; - -function FAQItem({ - question, - answer, - isOpen, - onClick, -}: { - question: string; - answer: string; - isOpen: boolean; - onClick: () => void; -}) { - return ( -
- - - - {isOpen && ( - -
-

{answer}

-
- - )} - -
- ); -} +import { motion, Variants, AnimatePresence } from "framer-motion"; +import { + ChevronDown, + Sparkles, + ArrowRight, + MessageCircleQuestion, +} from "lucide-react"; +import { landingFaqs as faqs } from "@/lib/data/landing"; +import Link from "next/link"; export default function FAQ() { const [openIndex, setOpenIndex] = useState(0); + const containerVariants: Variants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.1, + }, + }, + }; + + const itemVariants: Variants = { + hidden: { opacity: 0, y: 30 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.8, + ease: [0.22, 1, 0.36, 1], + }, + }, + }; + return ( -
- {/* Background Glows - No grid pattern */} -
-
-
+
+ {/* Premium High-Contrast Background Elements */} +
+ {/* Light Mode Blobs - Premium prominent pastel mesh */} +
+
+ + {/* Dark Mode Blobs */} +
-
- {/* Header */} +
- - Frequently Asked Questions - - -

- Got Questions? -

+ {/* Header */} +
+ +
+ + + Common Questions + +
+ -

- Everything you need to know about Hyper Learning, AI-powered - learning, syllabus mapping, and exam preparation. -

- + + Everything You Need +
+ + To Know + + - {/* FAQ List */} -
- {landingFaqs.map((faq, index) => ( - - setOpenIndex(openIndex === index ? null : index)} - /> - - ))} -
+ Have questions about how Hyper Learning works? Check out our most + frequently asked questions below. + +
- {/* Bottom CTA */} - -

- Still Have Questions? -

+ {/* FAQ Accordions - Ultra Premium Unified Card */} + + {/* Soft backdrop glow */} +
-

- Reach out through our contact page or use the AI assistant to get - help with your learning journey. -

+
+
+ {faqs.map((faq, index) => { + const isOpen = openIndex === index; + return ( +
+ -
- We're continuously improving Hyper Learning based on student - feedback. -
+ + {isOpen && ( + +
+ {faq.answer} +
+ + )} + +
+ ); + })} +
+
+ + + {/* Still Have Questions CTA */} + +
+ +
+

+ Still have questions? +

+

+ Can't find the answer you're looking for? Please chat to + our friendly team. +

+
+ + + + + + +
+
diff --git a/features/landing/features.tsx b/features/landing/features.tsx index 4a6d9aa..eb632c5 100644 --- a/features/landing/features.tsx +++ b/features/landing/features.tsx @@ -1,84 +1,177 @@ "use client"; -import { motion } from "framer-motion"; +import { motion, Variants } from "framer-motion"; import { Sparkles } from "lucide-react"; import { landingFeatures } from "@/lib/data/landing"; export default function Features() { + const containerVariants: Variants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.1, + }, + }, + }; + + const itemVariants: Variants = { + hidden: { opacity: 0, y: 25, scale: 0.9, filter: "blur(8px)" }, + visible: { + opacity: 1, + y: 0, + scale: 1, + filter: "blur(0px)", + transition: { + duration: 0.7, + ease: [0.22, 1, 0.36, 1], + }, + }, + }; + return ( -
- {/* Background Glows - No grid pattern */} -
-
-
+
+ {/* Premium High-Contrast Background Elements */} +
+ {/* Light Mode Blobs - Premium prominent pastel mesh */} +
+
+ + {/* Dark Mode Blobs */} +
+
-
- {/* Header */} +
- - - Platform Features - + {/* Eyebrow Pill */} + +
+ + + Platform Features + +
+ -

+ {/* Headline */} + Designed For Focused
- + Academic Learning -

+ -

+ A modern educational platform built around organization, accessibility, and a distraction-free learning experience. -

- + - {/* Feature Cards */} -
- {landingFeatures.map((feature, index) => { - const Icon = feature.icon; + {/* Feature Cards Grid */} + + {landingFeatures.map((feature, i) => { + const Icon = feature.icon; - return ( - -
-
-
+ const theme = [ + { + id: "purple", + bg: "bg-purple-100 dark:bg-purple-500/10", + border: "border-purple-200 dark:border-purple-500/20", + text: "text-purple-600 dark:text-purple-400", + glow: "bg-purple-500/20", + }, + { + id: "pink", + bg: "bg-pink-100 dark:bg-pink-500/10", + border: "border-pink-200 dark:border-pink-500/20", + text: "text-pink-600 dark:text-pink-400", + glow: "bg-pink-500/20", + }, + { + id: "cyan", + bg: "bg-cyan-100 dark:bg-cyan-500/10", + border: "border-cyan-200 dark:border-cyan-500/20", + text: "text-cyan-600 dark:text-cyan-400", + glow: "bg-cyan-500/20", + }, + { + id: "emerald", + bg: "bg-emerald-100 dark:bg-emerald-500/10", + border: "border-emerald-200 dark:border-emerald-500/20", + text: "text-emerald-600 dark:text-emerald-400", + glow: "bg-emerald-500/20", + }, + { + id: "orange", + bg: "bg-orange-100 dark:bg-orange-500/10", + border: "border-orange-200 dark:border-orange-500/20", + text: "text-orange-600 dark:text-orange-400", + glow: "bg-orange-500/20", + }, + { + id: "blue", + bg: "bg-blue-100 dark:bg-blue-500/10", + border: "border-blue-200 dark:border-blue-500/20", + text: "text-blue-600 dark:text-blue-400", + glow: "bg-blue-500/20", + }, + ]; + const t = theme[i % 6]; -
- -
- -

- {feature.title} -

+ return ( +
+ {/* Subtle hover glow behind icon (hidden on mobile to keep list clean) */} +
+
+
-

- {feature.description} -

+
+
+ +
-
- - ); - })} -
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+
+ ); + })} + +
); diff --git a/features/landing/hero.tsx b/features/landing/hero.tsx index 9e981c2..58c30dc 100644 --- a/features/landing/hero.tsx +++ b/features/landing/hero.tsx @@ -90,13 +90,12 @@ export default function Hero() { {/* Light Mode: Refined Gradient Blobs */}
-
-
-
+
+
{/* Light Mode: Central Radial Glow */} -
+
{/* Dark mode glows — hidden on mobile to prevent GPU texture exhaustion */}
diff --git a/features/landing/stats.tsx b/features/landing/stats.tsx index eb622dd..3e6b7bf 100644 --- a/features/landing/stats.tsx +++ b/features/landing/stats.tsx @@ -1,160 +1,237 @@ "use client"; -import { motion, Variants } from "framer-motion"; - +import { useEffect, useRef } from "react"; +import { motion, Variants, animate, useInView } from "framer-motion"; import { BrainCircuit, FileText, Sparkles, CheckCircle2 } from "lucide-react"; import { landingStats } from "@/lib/data/landing"; +function Counter({ + from = 0, + to, + suffix = "", + prefix = "", +}: { + from?: number; + to: number; + suffix?: string; + prefix?: string; +}) { + const ref = useRef(null); + const inView = useInView(ref, { once: true, margin: "-50px" }); + + useEffect(() => { + if (inView && ref.current) { + animate(from, to, { + duration: 2, + ease: [0.22, 1, 0.36, 1], + onUpdate: (value) => { + if (ref.current) { + ref.current.textContent = `${prefix}${Math.round(value)}${suffix}`; + } + }, + }); + } + }, [inView, from, to, prefix, suffix]); + + return ( + + {prefix} + {from} + {suffix} + + ); +} + export default function Stats() { - const containerVariants = { + const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { - staggerChildren: 0.15, + staggerChildren: 0.1, delayChildren: 0.1, }, }, }; const itemVariants: Variants = { - hidden: { - opacity: 0, - y: 20, - }, + hidden: { opacity: 0, y: 25, scale: 0.9, filter: "blur(8px)" }, visible: { opacity: 1, y: 0, + scale: 1, + filter: "blur(0px)", transition: { - duration: 0.6, - ease: [0.25, 0.1, 0.25, 1], + duration: 0.7, + ease: [0.22, 1, 0.36, 1], }, }, }; + // Convert string to number for animation. We handle "500+", "200+", "24/7", "100%" + const getNumberInfo = (title: string) => { + if (title.includes("+")) { + return { num: parseInt(title), suffix: "+" }; + } + if (title.includes("%")) { + return { num: parseInt(title), suffix: "%" }; + } + if (title === "24/7") { + return { num: 24, suffix: "/7" }; + } + return { num: parseInt(title) || 0, suffix: "" }; + }; + return ( -
- {/* Background Glows - No grid pattern */} -
-
-
+
+ {/* Premium High-Contrast Background Elements */} +
+ {/* Light Mode Blobs - Premium prominent pastel mesh */} +
+
+ + {/* Dark Mode Blobs */} +
+
-
+
- {/* Header */} -
- - - + {/* Eyebrow Pill */} + +
+ + Platform Statistics - - - - Everything You Need -
- - To Learn With Clarity - - - - - Hyper Learning brings together previous year questions, AI-powered - explanations, syllabus mapping, and smart revision tools in one - focused learning platform. - -
- - {/* Stats Cards */} -
- {landingStats.map((stat) => { +
+ + + {/* Headline */} + + Everything You Need +
+ + To Learn With Clarity + + + + {/* Subheadline */} + + Hyper Learning brings together previous year questions, AI-powered + explanations, syllabus mapping, and smart revision tools. + + + {/* Enhanced Stats Cards */} + + {landingStats.map((stat, i) => { const Icon = stat.icon; + const { num, suffix } = getNumberInfo(stat.title); + + const solidColors = [ + "bg-[#3B82F6] shadow-blue-500/20", // Solid Blue + "bg-[#EC4899] shadow-pink-500/20", // Solid Pink + "bg-[#06B6D4] shadow-cyan-500/20", // Solid Cyan + "bg-[#8B5CF6] shadow-purple-500/20", // Solid Purple + ]; return ( - -
-
+
+
-
- +
+
-

- {stat.title} -

- -

- {stat.subtitle} -

- +
+

+ +

+

+ {stat.subtitle} +

+
+
); })} -
+ - {/* Bottom Feature Strip */} + {/* Bottom Premium Feature Strip */} -
-
-
- -
+ {/* Subtle glow inside the strip */} +
-

AI Tutor

- -

- Interactive learning with topic-based explanations, follow-up - questions, and instant concept clarification. -

+
+
+
+ +
+
+

+ AI Tutor +

+

+ Interactive learning with topic-based explanations, + follow-up questions, and concept clarification. +

+
-
-
- +
+
+ +
+
+

+ Mapped PYQs +

+

+ Previous year questions connected directly with syllabus + topics, saving your valuable time. +

- -

- Mapped PYQs -

- -

- Previous year questions connected directly with syllabus - topics, reducing unnecessary searching and saving time. -

-
-
- +
+
+ +
+
+

+ Smart Revision +

+

+ Learn faster through structured notes, concise summaries, + and targeted exam-focused content. +

- -

- Smart Revision -

- -

- Learn faster through structured notes, concise summaries, and - highly targeted exam-focused content. -

diff --git a/features/landing/testimonials.tsx b/features/landing/testimonials.tsx index 61f4803..6251220 100644 --- a/features/landing/testimonials.tsx +++ b/features/landing/testimonials.tsx @@ -2,149 +2,224 @@ import { useState, useEffect } from "react"; import { motion, useAnimation, useReducedMotion } from "framer-motion"; -import { Quote, Star, Pause, Play } from "lucide-react"; +import { Quote, Star, Pause, Play, Sparkles } from "lucide-react"; import { landingTestimonials } from "@/lib/data/landing"; export default function Testimonials() { const [isPaused, setIsPaused] = useState(false); const shouldReduceMotion = useReducedMotion(); - const controls = useAnimation(); - - useEffect(() => { - if (shouldReduceMotion) return; - if (isPaused) { - controls.stop(); - } else { - controls.start({ - x: ["0%", "-50%"], - transition: { - duration: 40, - repeat: Infinity, - ease: "linear", - }, - }); - } - }, [isPaused, shouldReduceMotion, controls]); return ( -
- {/* Background Glows - No grid pattern */} -
-
-
+
+ + + {/* Premium High-Contrast Background Elements */} +
+ {/* Light Mode Blobs - Premium prominent pastel mesh */} +
+
+ + {/* Dark Mode Blobs */} +
+
-
+
{/* Header */} - - Student Feedback - + {/* Eyebrow Pill */} +
+ + + Student Feedback + +
-

- Loved By Students +

+ Loved By Thousands Of +
+ + Engineering Students +

-

+

Hyper Learning is designed to simplify engineering education through - AI-powered learning, syllabus mapping, and smarter exam preparation. + AI-powered learning and smarter exam preparation.

- {/* Testimonials */} -
-
+ {/* Testimonials Marquee */} +
+
- setIsPaused(true)} + onMouseLeave={() => setIsPaused(false)} > {[...landingTestimonials, ...landingTestimonials].map( (testimonial, index) => (
- {/* Hover Glow */} -
-
+ {/* Premium Hover Glow */} +
+
- {/* Quote */} -
-
- - {/* Rating */} -
- {[...Array(5)].map((_, idx) => ( - + {/* Quote Icon */} +
+
+ + {/* Rating */} +
+ {[...Array(5)].map((_, idx) => ( +
{/* Review */} -

- '{testimonial.review}' +

+ "{testimonial.review}"

- {/* User */} -
-

+ {/* User Area */} +
+

{testimonial.name}

- -

+

{testimonial.role}

- -

+

{testimonial.university}

) )} - +
- {/* Bottom Stats */} + {/* Ultra Premium Glassmorphism Social Proof Badge */} -
-

500+

-

Happy Learners

+ {/* Ambient Glow Behind Badge */} +
+
+
+
+ +
+ {/* Avatar Cluster */} +
+
+ avatar +
+
+ avatar +
+
+ avatar +
+
+ avatar +
+
+ 500+ +
+
+ + {/* Separator line */} +
+ + {/* Stars and Text */} +
+
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+ + 4.9/5 Rating + +
+

+ Join{" "} + + 500+ + {" "} + engineers already learning +

+