From d3d74b07d5e3ca4cbb077dfee1e98573e8d3cddc Mon Sep 17 00:00:00 2001
From: nitin mohan <mohannitin494@gmail.com>
Date: Thu, 9 Jul 2026 17:51:04 +0530
Subject: [PATCH 1/3] featured target cgpa in about section and improveed light
 mode colouring and structure

---
 app/(public)/about/page.tsx           |   4 +
 app/(public)/cgpa-calculator/page.tsx | 228 +++++++++++++++++---------
 app/globals.css                       |   9 +
 app/layout.tsx                        |   9 +-
 features/landing/cgpa-feature.tsx     | 217 ++++++++++++++++++++++++
 5 files changed, 389 insertions(+), 78 deletions(-)
 create mode 100644 features/landing/cgpa-feature.tsx

diff --git a/app/(public)/about/page.tsx b/app/(public)/about/page.tsx
index af06421..dbcb391 100644
--- a/app/(public)/about/page.tsx
+++ b/app/(public)/about/page.tsx
@@ -3,6 +3,7 @@ import Features from "@/features/landing/features";
 import AIDemo from "@/features/landing/ai-demo";
 import Testimonials from "@/features/landing/testimonials";
 import FAQ from "@/features/landing/faq";
+import CgpaFeature from "@/features/landing/cgpa-feature";
 import { Suspense } from "react";
 
 export default function AboutPage() {
@@ -11,6 +12,9 @@ export default function AboutPage() {
       <Suspense fallback={<div className="h-40" />}>
         <Stats />
       </Suspense>
+      <Suspense fallback={<div className="h-96" />}>
+        <CgpaFeature />
+      </Suspense>
       <Suspense fallback={<div className="h-96" />}>
         <Features />
       </Suspense>
diff --git a/app/(public)/cgpa-calculator/page.tsx b/app/(public)/cgpa-calculator/page.tsx
index 328120c..a3ec630 100644
--- a/app/(public)/cgpa-calculator/page.tsx
+++ b/app/(public)/cgpa-calculator/page.tsx
@@ -70,13 +70,12 @@ export default function CgpaCalculatorPage() {
   }, [calculateRequiredSgpa]);
 
   return (
-    <main className="relative min-h-screen pt-24 pb-20 overflow-hidden bg-slate-50/80 dark:bg-[#040814]">
-      {/* Premium Background Effects */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute top-0 w-full h-[600px] bg-gradient-to-b from-[#E2E8F0]/30 to-transparent dark:from-[#0B132B] dark:to-transparent" />
-        <div className="absolute top-20 left-[15%] w-[600px] h-[600px] bg-blue-500/10 dark:bg-blue-600/15 blur-[120px] rounded-full mix-blend-multiply dark:mix-blend-screen" />
-        <div className="absolute top-40 right-[15%] w-[500px] h-[500px] bg-indigo-500/10 dark:bg-indigo-600/15 blur-[100px] rounded-full mix-blend-multiply dark:mix-blend-screen" />
-        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] dark:opacity-[0.05] mix-blend-overlay" />
+    <main className="relative min-h-screen pt-28 pb-24 overflow-hidden bg-slate-50 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-50/40 via-white to-slate-50 dark:bg-none dark:bg-[#020617]">
+      {/* Ultra-Premium Ambient Background */}
+      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-[10%] left-[20%] h-[700px] w-[700px] rounded-full bg-gradient-to-br from-blue-500/10 via-indigo-500/5 to-transparent dark:from-blue-600/20 dark:via-indigo-900/10 blur-[120px] mix-blend-multiply dark:mix-blend-screen" />
+        <div className="absolute bottom-[20%] right-[10%] h-[600px] w-[600px] rounded-full bg-gradient-to-bl from-indigo-500/10 via-purple-500/5 to-transparent dark:from-indigo-600/20 dark:via-purple-900/10 blur-[150px] mix-blend-multiply dark:mix-blend-screen" />
+        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.02] dark:opacity-[0.04] mix-blend-overlay" />
       </div>
 
       <div className="relative z-10 mx-auto max-w-[1200px] px-6 lg:px-8">
@@ -114,97 +113,113 @@ export default function CgpaCalculatorPage() {
         </div>
 
         {/* Calculator Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 mb-20">
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-10 mb-24 relative z-10">
           {/* Input Section */}
           <motion.div
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.5, delay: 0.3 }}
-            className="lg:col-span-3 p-8 md:p-10 rounded-[32px] border border-slate-200/60 dark:border-white/10 bg-white dark:bg-[#0B1528]/60 backdrop-blur-2xl shadow-[0_8px_30px_rgb(0,0,0,0.06)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)] relative"
+            className="lg:col-span-3 p-8 md:p-12 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-br from-white/90 to-blue-50/60 dark:bg-none dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] relative overflow-hidden"
           >
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-10">
               {/* Total Semesters */}
               <div className="space-y-3">
-                <label className="text-[13px] font-bold tracking-wider uppercase text-slate-600 dark:text-slate-400">
+                <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400">
                   Total Semesters
                 </label>
                 <div className="relative group">
-                  <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <GraduationCap className="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <div className="w-8 h-8 rounded-lg bg-slate-100 dark:bg-white/[0.06] flex items-center justify-center group-focus-within:bg-blue-50 dark:group-focus-within:bg-blue-500/20 transition-colors">
+                      <GraduationCap className="w-4 h-4 text-slate-500 dark:text-slate-400 group-focus-within:text-blue-600 dark:group-focus-within:text-blue-400 transition-colors" />
+                    </div>
                   </div>
                   <input
                     type="number"
+                    min="1"
+                    max="12"
                     value={totalSemesters}
                     onChange={(e) => setTotalSemesters(Number(e.target.value))}
-                    className="w-full pl-12 pr-4 py-3.5 rounded-2xl border border-slate-200/80 dark:border-white/10 bg-slate-50/50 hover:bg-slate-50 dark:bg-black/20 dark:hover:bg-white/[0.02] text-slate-900 dark:text-white font-semibold text-lg focus:bg-white dark:focus:bg-black/40 focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 outline-none transition-all shadow-sm"
+                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md"
                   />
                 </div>
               </div>
 
               {/* Current Semester */}
               <div className="space-y-3">
-                <label className="text-[13px] font-bold tracking-wider uppercase text-slate-600 dark:text-slate-400">
+                <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400">
                   Completed Sems
                 </label>
                 <div className="relative group">
-                  <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <History className="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <div className="w-8 h-8 rounded-lg bg-slate-100 dark:bg-white/[0.06] flex items-center justify-center group-focus-within:bg-blue-50 dark:group-focus-within:bg-blue-500/20 transition-colors">
+                      <History className="w-4 h-4 text-slate-500 dark:text-slate-400 group-focus-within:text-blue-600 dark:group-focus-within:text-blue-400 transition-colors" />
+                    </div>
                   </div>
                   <input
                     type="number"
+                    min="0"
+                    max="12"
                     value={currentSemester}
                     onChange={(e) => setCurrentSemester(Number(e.target.value))}
-                    className="w-full pl-12 pr-4 py-3.5 rounded-2xl border border-slate-200/80 dark:border-white/10 bg-slate-50/50 hover:bg-slate-50 dark:bg-black/20 dark:hover:bg-white/[0.02] text-slate-900 dark:text-white font-semibold text-lg focus:bg-white dark:focus:bg-black/40 focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 outline-none transition-all shadow-sm"
+                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md"
                   />
                 </div>
               </div>
 
               {/* Current CGPA */}
               <div className="space-y-3">
-                <label className="text-[13px] font-bold tracking-wider uppercase text-slate-600 dark:text-slate-400">
+                <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400">
                   Current CGPA
                 </label>
                 <div className="relative group">
-                  <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <BarChart className="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <div className="w-8 h-8 rounded-lg bg-slate-100 dark:bg-white/[0.06] flex items-center justify-center group-focus-within:bg-blue-50 dark:group-focus-within:bg-blue-500/20 transition-colors">
+                      <BarChart className="w-4 h-4 text-slate-500 dark:text-slate-400 group-focus-within:text-blue-600 dark:group-focus-within:text-blue-400 transition-colors" />
+                    </div>
                   </div>
                   <input
                     type="number"
+                    min="0"
+                    max="10"
                     step="0.01"
-                    placeholder="e.g. 7.5"
+                    placeholder="0.00"
                     value={currentCgpa}
                     onChange={(e) => setCurrentCgpa(e.target.value)}
-                    className="w-full pl-12 pr-4 py-3.5 rounded-2xl border border-slate-200/80 dark:border-white/10 bg-slate-50/50 hover:bg-slate-50 dark:bg-black/20 dark:hover:bg-white/[0.02] text-slate-900 dark:text-white font-semibold text-lg focus:bg-white dark:focus:bg-black/40 focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 outline-none transition-all shadow-sm"
+                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md placeholder:font-medium placeholder:text-slate-300 dark:placeholder:text-slate-600"
                   />
                 </div>
               </div>
 
               {/* Target CGPA */}
               <div className="space-y-3">
-                <label className="text-[13px] font-bold tracking-wider uppercase text-indigo-600 dark:text-indigo-400 flex items-center gap-2">
+                <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400 flex items-center gap-2">
                   Target CGPA
                 </label>
                 <div className="relative group">
-                  <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <Target className="w-5 h-5 text-indigo-400 group-focus-within:text-indigo-600 dark:group-focus-within:text-indigo-400 transition-colors" />
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <div className="w-8 h-8 rounded-lg bg-slate-100 dark:bg-white/[0.06] flex items-center justify-center group-focus-within:bg-blue-50 dark:group-focus-within:bg-blue-500/20 transition-colors">
+                      <Target className="w-4 h-4 text-slate-500 dark:text-slate-400 group-focus-within:text-blue-600 dark:group-focus-within:text-blue-400 transition-colors" />
+                    </div>
                   </div>
                   <input
                     type="number"
+                    min="0"
+                    max="10"
                     step="0.01"
-                    placeholder="e.g. 8.5"
+                    placeholder="0.00"
                     value={targetCgpa}
                     onChange={(e) => setTargetCgpa(e.target.value)}
-                    className="w-full pl-12 pr-4 py-3.5 rounded-2xl border border-indigo-200 dark:border-indigo-500/30 bg-indigo-50/40 hover:bg-indigo-50 dark:bg-indigo-500/5 dark:hover:bg-indigo-500/10 text-slate-900 dark:text-white font-semibold text-lg focus:bg-white dark:focus:bg-indigo-500/10 focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-400 outline-none transition-all shadow-sm"
+                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md placeholder:font-medium placeholder:text-slate-300 dark:placeholder:text-slate-600"
                   />
                 </div>
               </div>
             </div>
 
-            <div className="mt-10 flex items-start gap-4 p-5 rounded-2xl bg-slate-50/80 dark:bg-white/[0.02] border border-slate-100 dark:border-white/[0.05]">
-              <div className="p-2 bg-slate-200/60 dark:bg-white/10 rounded-full shrink-0">
-                <Info className="w-4 h-4 text-slate-600 dark:text-slate-400" />
+            <div className="mt-12 flex items-start gap-4 p-5 rounded-r-2xl rounded-l-md bg-gradient-to-r from-blue-50/80 to-transparent dark:from-blue-500/10 dark:to-transparent border-y border-r border-slate-100 dark:border-white/[0.05] border-l-4 border-l-blue-500 shadow-sm relative overflow-hidden">
+              <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay pointer-events-none" />
+              <div className="p-2 bg-white dark:bg-white/[0.06] rounded-full shrink-0 shadow-sm border border-slate-100 dark:border-slate-700 relative z-10">
+                <Info className="w-4 h-4 text-blue-600 dark:text-blue-400" />
               </div>
-              <p className="text-[13px] text-slate-600 dark:text-slate-400 leading-relaxed font-medium">
+              <p className="text-[13px] text-slate-700 dark:text-slate-300 leading-relaxed font-medium pt-0.5 relative z-10">
                 This calculator uses average arithmetic weighting across
                 semesters. If your university uses significantly different total
                 credits per semester, your required SGPA may vary slightly.
@@ -217,30 +232,54 @@ export default function CgpaCalculatorPage() {
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.5, delay: 0.4 }}
-            className="lg:col-span-2 flex flex-col"
+            className="lg:col-span-2 flex flex-col relative"
           >
-            <div className="flex-1 p-8 md:p-10 rounded-[32px] border border-slate-200/60 dark:border-white/10 bg-gradient-to-b from-blue-50/40 to-white dark:from-[#0D1B36] dark:to-[#0B1528] shadow-[0_8px_30px_rgb(0,0,0,0.06)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)] flex flex-col justify-center relative overflow-hidden backdrop-blur-2xl">
+            {/* Absolute Glow behind the card */}
+            <div className="absolute inset-0 bg-blue-500/20 dark:bg-indigo-500/20 blur-[80px] rounded-full pointer-events-none z-0" />
+            <div className="flex-1 p-8 md:p-12 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-bl from-white/90 to-indigo-50/60 dark:from-white/[0.05] dark:to-transparent shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] flex flex-col justify-center relative overflow-hidden backdrop-blur-3xl z-10">
               <AnimatePresence mode="wait">
                 {!currentCgpa || !targetCgpa ? (
                   <motion.div
                     key="empty"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="text-center z-10"
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0.95 }}
+                    className="text-center z-10 flex flex-col items-center justify-center h-full w-full py-10"
                   >
-                    <div className="relative w-24 h-24 mx-auto mb-6">
-                      <div className="absolute inset-0 bg-blue-100/50 dark:bg-blue-500/10 rounded-full animate-ping opacity-50" />
-                      <div className="relative w-full h-full rounded-full bg-white dark:bg-white/5 flex items-center justify-center border border-slate-100 dark:border-white/10 shadow-sm">
-                        <TrendingUp className="w-10 h-10 text-slate-300 dark:text-white/20" />
+                    <div className="relative w-32 h-32 mx-auto mb-8 flex items-center justify-center">
+                      {/* Rotating Dashed Ring */}
+                      <div className="absolute inset-0 rounded-full border-2 border-dashed border-slate-200 dark:border-slate-700 animate-[spin_10s_linear_infinite]" />
+
+                      {/* Pulsing Core */}
+                      <div className="absolute inset-4 bg-blue-50 dark:bg-blue-500/10 rounded-full animate-pulse" />
+
+                      {/* Inner Icon Container */}
+                      <div className="relative w-16 h-16 rounded-full bg-white dark:bg-white/[0.06] flex items-center justify-center border border-slate-100 dark:border-slate-700 shadow-lg">
+                        <TrendingUp className="w-8 h-8 text-slate-400 dark:text-slate-500" />
                       </div>
                     </div>
-                    <h3 className="text-xl font-bold text-slate-800 dark:text-slate-200 mb-3">
-                      Awaiting Inputs
+
+                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 dark:bg-white/[0.06] border border-white/80 dark:border-slate-700 mb-4">
+                      <div className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
+                      <span className="text-[10px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400">
+                        System Standby
+                      </span>
+                    </div>
+
+                    <h3 className="text-2xl font-black text-slate-800 dark:text-slate-200 mb-3 tracking-tight">
+                      Awaiting Calculation
                     </h3>
-                    <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
-                      Enter your current and target CGPA to reveal your custom
-                      academic roadmap.
+
+                    <p className="text-[15px] font-medium text-slate-500 dark:text-slate-400 max-w-xs mx-auto leading-relaxed">
+                      Please enter your{" "}
+                      <strong className="text-slate-700 dark:text-slate-300">
+                        Current CGPA
+                      </strong>{" "}
+                      and{" "}
+                      <strong className="text-slate-700 dark:text-slate-300">
+                        Target CGPA
+                      </strong>{" "}
+                      in the fields to generate your custom academic roadmap.
                     </p>
                   </motion.div>
                 ) : error ? (
@@ -328,42 +367,77 @@ export default function CgpaCalculatorPage() {
                         </p>
                       </div>
                     ) : (
-                      <div className="space-y-5 w-full">
-                        <h3 className="text-[13px] font-bold uppercase tracking-widest text-blue-600 dark:text-blue-400 mb-1">
-                          Required Average SGPA
-                        </h3>
-                        <div className="text-[72px] leading-none font-black text-slate-900 dark:text-white tracking-tighter drop-shadow-sm">
-                          {result.toFixed(2)}
+                      <div className="space-y-6 w-full flex flex-col items-center">
+                        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 mb-2">
+                          <Target className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                          <h3 className="text-xs font-bold uppercase tracking-widest text-blue-600 dark:text-blue-400">
+                            Required Average SGPA
+                          </h3>
+                        </div>
+
+                        <div className="relative">
+                          <div className="text-[80px] md:text-[100px] leading-none font-black text-transparent bg-clip-text bg-gradient-to-b from-slate-900 to-slate-500 dark:from-white dark:to-slate-400 tracking-tighter drop-shadow-sm pb-2">
+                            {result.toFixed(2)}
+                          </div>
+                          {result > parseFloat(currentCgpa) && (
+                            <div className="absolute -right-4 top-0 -translate-y-1/4 translate-x-full hidden sm:flex items-center gap-1 px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20">
+                              <TrendingUp className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" />
+                              <span className="text-xs font-bold text-emerald-600 dark:text-emerald-400">
+                                +{(result - parseFloat(currentCgpa)).toFixed(2)}{" "}
+                                jump
+                              </span>
+                            </div>
+                          )}
                         </div>
 
-                        {/* Progress Bar */}
-                        <div className="w-full pt-4 pb-2">
-                          <div className="flex justify-between text-xs font-bold text-slate-500 mb-2">
-                            <span>Current: {currentCgpa}</span>
-                            <span className="text-indigo-600 dark:text-indigo-400">
-                              Target: {targetCgpa}
-                            </span>
+                        {/* Premium Progress Bar */}
+                        <div className="w-full pt-6 pb-2">
+                          <div className="flex justify-between items-end mb-3 px-1">
+                            <div className="flex flex-col gap-1">
+                              <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">
+                                Current
+                              </span>
+                              <span className="text-sm font-black text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-white/10 px-2.5 py-0.5 rounded-md border border-white/80 dark:border-white/5 shadow-sm">
+                                {currentCgpa}
+                              </span>
+                            </div>
+                            <div className="flex flex-col gap-1 items-end">
+                              <span className="text-[10px] font-bold uppercase tracking-widest text-indigo-400">
+                                Target
+                              </span>
+                              <span className="text-sm font-black text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-500/20 px-2.5 py-0.5 rounded-md border border-indigo-100 dark:border-indigo-500/20 shadow-sm">
+                                {targetCgpa}
+                              </span>
+                            </div>
                           </div>
-                          <div className="h-3 w-full bg-slate-100 dark:bg-white/10 rounded-full overflow-hidden shadow-inner">
+                          <div className="relative h-4 w-full bg-slate-100 dark:bg-white/[0.06]/80 rounded-full overflow-visible shadow-inner border border-white/80/50 dark:border-slate-700/50">
                             <motion.div
                               initial={{ width: 0 }}
                               animate={{
                                 width: `${Math.min(progressValue, 100)}%`,
                               }}
-                              transition={{ duration: 1, ease: "easeOut" }}
-                              className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"
-                            />
+                              transition={{
+                                duration: 1.2,
+                                ease: [0.16, 1, 0.3, 1],
+                              }}
+                              className="relative h-full bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 rounded-full"
+                            >
+                              <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-6 h-6 bg-white dark:bg-slate-900 border-4 border-purple-500 rounded-full shadow-[0_0_15px_rgba(168,85,247,0.5)] z-10" />
+                            </motion.div>
                           </div>
                         </div>
 
-                        <p className="text-[15px] font-medium leading-relaxed text-slate-600 dark:text-slate-400">
-                          Maintain this precise minimum SGPA across your
-                          remaining{" "}
-                          <strong className="text-slate-900 dark:text-white">
-                            {totalSemesters - currentSemester}
-                          </strong>{" "}
-                          semesters to successfully unlock your target CGPA.
-                        </p>
+                        <div className="mt-4 flex items-start gap-3 p-4 rounded-2xl bg-slate-50/80 dark:bg-white/[0.02] border border-slate-100 dark:border-white/[0.05]">
+                          <Info className="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" />
+                          <p className="text-sm font-medium leading-relaxed text-slate-600 dark:text-slate-400 text-left">
+                            Maintain this precise minimum SGPA across your
+                            remaining{" "}
+                            <strong className="text-slate-900 dark:text-white font-bold px-1 rounded bg-slate-200/50 dark:bg-white/10">
+                              {totalSemesters - currentSemester}
+                            </strong>{" "}
+                            semesters to successfully unlock your target CGPA.
+                          </p>
+                        </div>
                       </div>
                     )}
                   </motion.div>
@@ -402,9 +476,9 @@ export default function CgpaCalculatorPage() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
             {/* Placement Eligibility Radar */}
-            <div className="p-8 rounded-[32px] border border-slate-200/60 dark:border-white/10 bg-white dark:bg-white/[0.02] backdrop-blur-xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] relative overflow-hidden">
+            <div className="p-8 md:p-10 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-tr from-white/90 to-violet-50/60 dark:bg-none dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] relative overflow-hidden">
               <div className="absolute top-0 right-0 p-8 opacity-[0.03] pointer-events-none">
                 <Compass className="w-32 h-32" />
               </div>
@@ -451,7 +525,7 @@ export default function CgpaCalculatorPage() {
                         onClick={() => setRadarTier(tier.id)}
                         className={`flex items-center justify-between p-3.5 rounded-xl border text-left transition-all ${
                           radarTier === tier.id
-                            ? "bg-indigo-50/50 dark:bg-indigo-500/10 border-indigo-200 dark:border-indigo-500/30 shadow-sm"
+                            ? "bg-indigo-50/50 dark:bg-indigo-500/10 border-indigo-200 dark:border-indigo-500/50 shadow-sm"
                             : "bg-slate-50/50 dark:bg-white/5 border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/10"
                         }`}
                       >
@@ -550,7 +624,7 @@ export default function CgpaCalculatorPage() {
             </div>
 
             {/* Pro-Tips for Boosting SGPA */}
-            <div className="p-8 rounded-[32px] border border-slate-200/60 dark:border-white/10 bg-white dark:bg-white/[0.02] backdrop-blur-xl shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
+            <div className="p-8 md:p-10 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-tl from-white/90 to-emerald-50/60 dark:bg-none dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)]">
               <div className="flex items-center gap-3 mb-8">
                 <div className="p-2.5 rounded-xl bg-indigo-50 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
                   <Lightbulb className="w-5 h-5" />
diff --git a/app/globals.css b/app/globals.css
index fb28a5d..af917ec 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -85,6 +85,15 @@
   }
 }
 
+/* Hide Number Input Spinners globally */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/app/layout.tsx b/app/layout.tsx
index 15182d8..3f6b16a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,17 @@
 import "./globals.css";
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Toaster } from "sonner";
 import Navbar from "@/components/navbar";
 import Footer from "@/components/footer";
 import { ThemeProvider } from "@/components/theme-provider";
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 export const metadata: Metadata = {
   metadataBase: new URL("https://www.hyperlearningtech.in"),
 
diff --git a/features/landing/cgpa-feature.tsx b/features/landing/cgpa-feature.tsx
new file mode 100644
index 0000000..cd692fd
--- /dev/null
+++ b/features/landing/cgpa-feature.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import {
+  Calculator,
+  Target,
+  Briefcase,
+  ArrowRight,
+  ShieldCheck,
+  LineChart,
+  Sparkles,
+} from "lucide-react";
+
+export default function CgpaFeature() {
+  return (
+    <section className="relative flex flex-col items-center justify-center overflow-hidden border-b border-slate-100 bg-slate-50 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-50/40 via-white to-slate-50 dark:bg-none py-12 lg:py-20 dark:border-white/5 dark:bg-[#020617] min-h-[80vh] lg:min-h-0">
+      {/* Ultra-Premium Ambient Background */}
+      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-[20%] left-[10%] h-[600px] w-[600px] rounded-full bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-transparent dark:from-indigo-600/20 dark:via-purple-900/10 blur-[120px]" />
+        <div className="absolute bottom-[0%] right-[5%] h-[700px] w-[700px] rounded-full bg-gradient-to-bl from-blue-500/10 via-cyan-500/5 to-transparent dark:from-blue-600/20 dark:via-cyan-900/10 blur-[150px]" />
+      </div>
+
+      <div className="relative z-10 w-full mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
+          {/* Content Side */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+            className="flex flex-col items-start text-left"
+          >
+            {/* Glowing Badge */}
+            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-indigo-500/30 bg-indigo-500/10 px-4 py-1.5 backdrop-blur-md relative overflow-hidden group">
+              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:animate-[shimmer_1.5s_infinite]" />
+              <Sparkles className="h-3 w-3 text-indigo-600 dark:text-indigo-400" />
+              <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-indigo-700 dark:text-indigo-300">
+                Academic Blueprint
+              </span>
+            </div>
+
+            <h2 className="mb-4 text-4xl font-black tracking-tight text-slate-900 md:text-5xl lg:text-5xl dark:text-white">
+              Precision <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 dark:from-blue-400 dark:via-indigo-400 dark:to-purple-400">
+                goal tracking.
+              </span>
+            </h2>
+
+            <p className="mb-6 text-base font-medium leading-relaxed text-slate-600 md:text-lg dark:text-slate-400 max-w-xl">
+              Stop guessing your grades. Use our intelligent Target CGPA
+              Calculator to mathematically map out your remaining semesters and
+              guarantee your dream placements.
+            </p>
+
+            {/* Premium Feature List */}
+            <div className="mb-8 space-y-4 w-full">
+              {[
+                {
+                  icon: Target,
+                  title: "Smart Recovery Planning",
+                  desc: "Instantly calculate the exact SGPA needed to reach your target CGPA.",
+                  color: "bg-blue-500 text-blue-500",
+                },
+                {
+                  icon: Briefcase,
+                  title: "Live Placement Radar",
+                  desc: "Instantly know if you qualify for Tier-1, Core, or Consulting companies.",
+                  color: "bg-indigo-500 text-indigo-500",
+                },
+              ].map((item, idx) => (
+                <motion.div
+                  initial={{ opacity: 0, x: -20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: 0.2 + idx * 0.1 }}
+                  key={idx}
+                  className="group flex items-start gap-4 p-3 rounded-2xl hover:bg-white/60 dark:hover:bg-white/5 transition-all duration-300 border border-transparent hover:border-slate-200/60 dark:hover:border-white/10"
+                >
+                  <div
+                    className={`mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-opacity-10 ${item.color} bg-current dark:bg-opacity-20`}
+                  >
+                    <item.icon className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <h3 className="mb-0.5 text-base font-bold text-slate-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+                      {item.title}
+                    </h3>
+                    <p className="text-sm text-slate-600 dark:text-slate-400 font-medium leading-relaxed">
+                      {item.desc}
+                    </p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+
+            <Link href="/cgpa-calculator">
+              <button className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full bg-slate-900 px-8 py-3.5 font-bold text-white transition-all hover:scale-105 hover:shadow-[0_0_40px_-10px_rgba(79,70,229,0.5)] dark:bg-white dark:text-slate-900 dark:hover:shadow-[0_0_40px_-10px_rgba(255,255,255,0.3)]">
+                <span className="relative z-10 flex items-center gap-2 text-base">
+                  Launch Calculator
+                  <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
+                </span>
+                <div className="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-indigo-400 dark:to-purple-400 dark:group-hover:opacity-20" />
+              </button>
+            </Link>
+          </motion.div>
+
+          {/* Visual Side (Ultra-Premium App Mockup) */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9, rotateY: 10 }}
+            whileInView={{ opacity: 1, scale: 1, rotateY: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 1, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
+            className="relative perspective-[2000px]"
+          >
+            {/* The Main "App Window" */}
+            <div className="relative w-full rounded-3xl border border-white/40 bg-white/40 p-2 shadow-[0_40px_80px_-20px_rgba(0,0,0,0.1)] backdrop-blur-2xl dark:border-white/10 dark:bg-slate-900/40 dark:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.5)] transform-gpu hover:rotate-0 transition-transform duration-700">
+              {/* macOS Style Header */}
+              <div className="flex h-10 w-full items-center gap-2 rounded-t-[1.25rem] bg-white/60 px-4 dark:bg-black/40">
+                <div className="h-2.5 w-2.5 rounded-full bg-red-400/80 shadow-inner" />
+                <div className="h-2.5 w-2.5 rounded-full bg-amber-400/80 shadow-inner" />
+                <div className="h-2.5 w-2.5 rounded-full bg-emerald-400/80 shadow-inner" />
+                <div className="mx-auto flex items-center gap-2 rounded-md bg-black/5 px-3 py-1 dark:bg-white/10">
+                  <Calculator className="h-3 w-3 text-slate-500 dark:text-slate-400" />
+                  <span className="text-[10px] font-semibold text-slate-500 dark:text-slate-400 tracking-wider">
+                    hyper-learning.tech/cgpa
+                  </span>
+                </div>
+              </div>
+
+              {/* App Body */}
+              <div className="flex flex-col gap-5 rounded-b-[1.25rem] bg-slate-50/80 p-6 dark:bg-[#0A0F24]/80">
+                {/* Result Block */}
+                <div className="relative overflow-hidden rounded-2xl bg-white p-5 shadow-sm border border-slate-200/60 dark:bg-white/5 dark:border-white/10">
+                  <div className="absolute top-0 right-0 w-24 h-24 bg-blue-500/10 rounded-bl-full blur-2xl" />
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-xs font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400">
+                      Required SGPA
+                    </span>
+                    <span className="flex items-center justify-center w-7 h-7 rounded-full bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400">
+                      <Target className="w-3.5 h-3.5" />
+                    </span>
+                  </div>
+                  <div className="flex items-end gap-3">
+                    <div className="text-5xl font-black text-slate-900 dark:text-white tracking-tighter">
+                      8.75
+                    </div>
+                    <div className="mb-1 text-xs font-bold text-emerald-500">
+                      +1.25 jump
+                    </div>
+                  </div>
+
+                  {/* Fake Progress Bar */}
+                  <div className="mt-5 w-full h-1.5 rounded-full bg-slate-100 dark:bg-white/5 overflow-hidden">
+                    <motion.div
+                      initial={{ width: 0 }}
+                      whileInView={{ width: "87.5%" }}
+                      transition={{
+                        duration: 1.5,
+                        delay: 0.5,
+                        ease: "easeOut",
+                      }}
+                      className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"
+                    />
+                  </div>
+                </div>
+
+                {/* Radar Mockup */}
+                <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50/50 p-5 border border-emerald-200/50 dark:from-emerald-950/30 dark:to-teal-900/10 dark:border-emerald-500/20">
+                  <div className="flex items-start gap-3">
+                    <div className="p-2.5 bg-emerald-100 rounded-xl dark:bg-emerald-500/20 shadow-inner">
+                      <ShieldCheck className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
+                    </div>
+                    <div>
+                      <h4 className="text-base font-black text-emerald-900 dark:text-emerald-300 mb-0.5">
+                        Tier-1 Safe Zone
+                      </h4>
+                      <p className="text-[13px] font-medium text-emerald-700/80 dark:text-emerald-400/80 leading-relaxed">
+                        Your current trajectory easily clears the 8.0 cutoff for
+                        Google, Microsoft, and Amazon.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Floating Elements / Micro-interactions */}
+            <motion.div
+              animate={{ y: [0, -10, 0] }}
+              transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
+              className="absolute -right-8 top-16 p-4 rounded-2xl bg-white border border-slate-100 shadow-2xl dark:bg-slate-800 dark:border-white/10 hidden xl:block backdrop-blur-xl scale-90 origin-top-right"
+            >
+              <div className="flex items-center gap-3">
+                <div className="relative flex h-10 w-10 items-center justify-center rounded-full bg-indigo-50 dark:bg-indigo-500/10">
+                  <LineChart className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
+                  <span className="absolute right-0 top-0 flex h-2.5 w-2.5">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-indigo-400 opacity-75"></span>
+                    <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-indigo-500"></span>
+                  </span>
+                </div>
+                <div>
+                  <div className="text-xs font-bold uppercase text-slate-400 tracking-wider">
+                    Prediction
+                  </div>
+                  <div className="font-black text-slate-900 dark:text-white">
+                    Trend UP
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

From 6b6fc01228c0c2502ee397f6f9884e58322b349f Mon Sep 17 00:00:00 2001
From: nitin mohan <mohannitin494@gmail.com>
Date: Thu, 9 Jul 2026 18:23:17 +0530
Subject: [PATCH 2/3] ,,,,,,,

---
 app/(public)/cgpa-calculator/page.tsx | 90 ++++++++++++++++++---------
 1 file changed, 60 insertions(+), 30 deletions(-)

diff --git a/app/(public)/cgpa-calculator/page.tsx b/app/(public)/cgpa-calculator/page.tsx
index a3ec630..77685c4 100644
--- a/app/(public)/cgpa-calculator/page.tsx
+++ b/app/(public)/cgpa-calculator/page.tsx
@@ -71,11 +71,37 @@ export default function CgpaCalculatorPage() {
 
   return (
     <main className="relative min-h-screen pt-28 pb-24 overflow-hidden bg-slate-50 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-50/40 via-white to-slate-50 dark:bg-none dark:bg-[#020617]">
-      {/* Ultra-Premium Ambient Background */}
-      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
-        <div className="absolute top-[10%] left-[20%] h-[700px] w-[700px] rounded-full bg-gradient-to-br from-blue-500/10 via-indigo-500/5 to-transparent dark:from-blue-600/20 dark:via-indigo-900/10 blur-[120px] mix-blend-multiply dark:mix-blend-screen" />
-        <div className="absolute bottom-[20%] right-[10%] h-[600px] w-[600px] rounded-full bg-gradient-to-bl from-indigo-500/10 via-purple-500/5 to-transparent dark:from-indigo-600/20 dark:via-purple-900/10 blur-[150px] mix-blend-multiply dark:mix-blend-screen" />
-        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.02] dark:opacity-[0.04] mix-blend-overlay" />
+      {/* Ultra-Premium Dynamic Ambient Background */}
+      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none flex items-center justify-center">
+        {/* Orb 1: Top Left Blue */}
+        <motion.div
+          animate={{ x: [0, 80, 0], y: [0, 60, 0], scale: [1, 1.1, 1] }}
+          transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
+          className="absolute -top-[20%] -left-[10%] h-[900px] w-[900px] rounded-full bg-blue-500/10 dark:bg-blue-500/5 blur-[160px] mix-blend-multiply dark:mix-blend-normal"
+        />
+        {/* Orb 2: Top Right Purple */}
+        <motion.div
+          animate={{ x: [0, -100, 0], y: [0, 80, 0], scale: [1, 1.05, 1] }}
+          transition={{
+            duration: 25,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 2,
+          }}
+          className="absolute top-[10%] -right-[20%] h-[800px] w-[800px] rounded-full bg-purple-500/10 dark:bg-purple-500/5 blur-[160px] mix-blend-multiply dark:mix-blend-normal"
+        />
+        {/* Orb 3: Bottom Center Indigo */}
+        <motion.div
+          animate={{ x: [0, 60, 0], y: [0, -100, 0], scale: [1, 1.2, 1] }}
+          transition={{
+            duration: 30,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 5,
+          }}
+          className="absolute -bottom-[20%] left-[15%] h-[1000px] w-[1000px] rounded-full bg-indigo-500/10 dark:bg-indigo-500/5 blur-[160px] mix-blend-multiply dark:mix-blend-normal"
+        />
+        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] dark:opacity-[0.05] mix-blend-overlay" />
       </div>
 
       <div className="relative z-10 mx-auto max-w-[1200px] px-6 lg:px-8">
@@ -118,11 +144,11 @@ export default function CgpaCalculatorPage() {
           <motion.div
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
-            className="lg:col-span-3 p-8 md:p-12 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-br from-white/90 to-blue-50/60 dark:bg-none dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] relative overflow-hidden"
+            className="lg:col-span-3 p-6 sm:p-8 md:p-12 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-blue-50/90 dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] relative overflow-hidden"
           >
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-10">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 sm:gap-y-10">
               {/* Total Semesters */}
-              <div className="space-y-3">
+              <div className="space-y-2 sm:space-y-3">
                 <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400">
                   Total Semesters
                 </label>
@@ -138,13 +164,13 @@ export default function CgpaCalculatorPage() {
                     max="12"
                     value={totalSemesters}
                     onChange={(e) => setTotalSemesters(Number(e.target.value))}
-                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md"
+                    className="w-full pl-14 pr-4 py-3 sm:py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-lg sm:text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md"
                   />
                 </div>
               </div>
 
               {/* Current Semester */}
-              <div className="space-y-3">
+              <div className="space-y-2 sm:space-y-3">
                 <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400">
                   Completed Sems
                 </label>
@@ -160,13 +186,13 @@ export default function CgpaCalculatorPage() {
                     max="12"
                     value={currentSemester}
                     onChange={(e) => setCurrentSemester(Number(e.target.value))}
-                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md"
+                    className="w-full pl-14 pr-4 py-3 sm:py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-lg sm:text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md"
                   />
                 </div>
               </div>
 
               {/* Current CGPA */}
-              <div className="space-y-3">
+              <div className="space-y-2 sm:space-y-3">
                 <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400">
                   Current CGPA
                 </label>
@@ -184,13 +210,13 @@ export default function CgpaCalculatorPage() {
                     placeholder="0.00"
                     value={currentCgpa}
                     onChange={(e) => setCurrentCgpa(e.target.value)}
-                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md placeholder:font-medium placeholder:text-slate-300 dark:placeholder:text-slate-600"
+                    className="w-full pl-14 pr-4 py-3 sm:py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-lg sm:text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md placeholder:font-medium placeholder:text-slate-300 dark:placeholder:text-slate-600"
                   />
                 </div>
               </div>
 
               {/* Target CGPA */}
-              <div className="space-y-3">
+              <div className="space-y-2 sm:space-y-3">
                 <label className="text-[11px] font-black tracking-widest uppercase text-slate-500 dark:text-slate-400 flex items-center gap-2">
                   Target CGPA
                 </label>
@@ -208,13 +234,13 @@ export default function CgpaCalculatorPage() {
                     placeholder="0.00"
                     value={targetCgpa}
                     onChange={(e) => setTargetCgpa(e.target.value)}
-                    className="w-full pl-14 pr-4 py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md placeholder:font-medium placeholder:text-slate-300 dark:placeholder:text-slate-600"
+                    className="w-full pl-14 pr-4 py-3 sm:py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-lg sm:text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md placeholder:font-medium placeholder:text-slate-300 dark:placeholder:text-slate-600"
                   />
                 </div>
               </div>
             </div>
 
-            <div className="mt-12 flex items-start gap-4 p-5 rounded-r-2xl rounded-l-md bg-gradient-to-r from-blue-50/80 to-transparent dark:from-blue-500/10 dark:to-transparent border-y border-r border-slate-100 dark:border-white/[0.05] border-l-4 border-l-blue-500 shadow-sm relative overflow-hidden">
+            <div className="mt-8 sm:mt-12 flex items-start gap-4 p-5 rounded-r-2xl rounded-l-md bg-gradient-to-r from-blue-50/80 to-transparent dark:from-blue-500/10 dark:to-transparent border-y border-r border-slate-100 dark:border-white/[0.05] border-l-4 border-l-blue-500 shadow-sm relative overflow-hidden">
               <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay pointer-events-none" />
               <div className="p-2 bg-white dark:bg-white/[0.06] rounded-full shrink-0 shadow-sm border border-slate-100 dark:border-slate-700 relative z-10">
                 <Info className="w-4 h-4 text-blue-600 dark:text-blue-400" />
@@ -236,7 +262,7 @@ export default function CgpaCalculatorPage() {
           >
             {/* Absolute Glow behind the card */}
             <div className="absolute inset-0 bg-blue-500/20 dark:bg-indigo-500/20 blur-[80px] rounded-full pointer-events-none z-0" />
-            <div className="flex-1 p-8 md:p-12 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-bl from-white/90 to-indigo-50/60 dark:from-white/[0.05] dark:to-transparent shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] flex flex-col justify-center relative overflow-hidden backdrop-blur-3xl z-10">
+            <div className="flex-1 p-6 sm:p-8 md:p-12 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-indigo-50/90 dark:bg-white/[0.05] shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] flex flex-col justify-center relative overflow-hidden backdrop-blur-3xl z-10">
               <AnimatePresence mode="wait">
                 {!currentCgpa || !targetCgpa ? (
                   <motion.div
@@ -478,11 +504,7 @@ export default function CgpaCalculatorPage() {
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
             {/* Placement Eligibility Radar */}
-            <div className="p-8 md:p-10 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-tr from-white/90 to-violet-50/60 dark:bg-none dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] relative overflow-hidden">
-              <div className="absolute top-0 right-0 p-8 opacity-[0.03] pointer-events-none">
-                <Compass className="w-32 h-32" />
-              </div>
-
+            <div className="p-6 sm:p-8 md:p-10 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-indigo-50/90 dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] relative overflow-hidden">
               <div className="flex items-center gap-3 mb-8 relative z-10">
                 <div className="p-2.5 rounded-xl bg-indigo-50 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
                   <Briefcase className="w-5 h-5" />
@@ -523,19 +545,27 @@ export default function CgpaCalculatorPage() {
                       <button
                         key={tier.id}
                         onClick={() => setRadarTier(tier.id)}
-                        className={`flex items-center justify-between p-3.5 rounded-xl border text-left transition-all ${
+                        className={`group flex items-center justify-between p-4 rounded-2xl border text-left transition-colors duration-200 ${
                           radarTier === tier.id
-                            ? "bg-indigo-50/50 dark:bg-indigo-500/10 border-indigo-200 dark:border-indigo-500/50 shadow-sm"
-                            : "bg-slate-50/50 dark:bg-white/5 border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/10"
+                            ? "bg-indigo-50/80 dark:bg-indigo-500/10 border-indigo-200 dark:border-indigo-500/30 shadow-sm"
+                            : "bg-slate-50/50 dark:bg-white/5 border-slate-100 dark:border-white/5 hover:bg-slate-100/50 dark:hover:bg-white/10 hover:border-slate-200 dark:hover:border-white/10"
                         }`}
                       >
                         <span
-                          className={`font-semibold ${radarTier === tier.id ? "text-indigo-700 dark:text-indigo-300" : "text-slate-700 dark:text-slate-300"}`}
+                          className={`font-semibold transition-colors ${
+                            radarTier === tier.id
+                              ? "text-indigo-700 dark:text-indigo-300"
+                              : "text-slate-600 group-hover:text-slate-800 dark:text-slate-400 dark:group-hover:text-slate-200"
+                          }`}
                         >
                           {tier.label}
                         </span>
                         <span
-                          className={`text-[13px] font-bold px-2.5 py-1 rounded-md ${radarTier === tier.id ? "bg-indigo-100 dark:bg-indigo-500/20 text-indigo-700 dark:text-indigo-300" : "bg-slate-200/50 dark:bg-white/10 text-slate-600 dark:text-slate-400"}`}
+                          className={`text-[13px] font-bold px-3 py-1 rounded-full transition-colors ${
+                            radarTier === tier.id
+                              ? "bg-indigo-600 text-white shadow-sm dark:bg-indigo-500"
+                              : "bg-slate-200/60 dark:bg-white/10 text-slate-500 group-hover:bg-slate-300/50 group-hover:text-slate-700 dark:group-hover:bg-white/20 dark:group-hover:text-slate-200"
+                          }`}
                         >
                           {tier.cutoff}+
                         </span>
@@ -599,7 +629,7 @@ export default function CgpaCalculatorPage() {
                     );
                   } else {
                     return (
-                      <div className="flex gap-4 p-5 rounded-2xl bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20">
+                      <div className="flex gap-4 p-4 sm:p-5 rounded-2xl bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20">
                         <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400 shrink-0" />
                         <div>
                           <h4 className="font-bold text-red-800 dark:text-red-300 mb-1">
@@ -624,7 +654,7 @@ export default function CgpaCalculatorPage() {
             </div>
 
             {/* Pro-Tips for Boosting SGPA */}
-            <div className="p-8 md:p-10 rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-gradient-to-tl from-white/90 to-emerald-50/60 dark:bg-none dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)]">
+            <div className="p-6 sm:p-8 md:p-10 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.05] bg-blue-50/90 dark:bg-white/[0.02] backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] relative overflow-hidden">
               <div className="flex items-center gap-3 mb-8">
                 <div className="p-2.5 rounded-xl bg-indigo-50 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
                   <Lightbulb className="w-5 h-5" />
@@ -634,7 +664,7 @@ export default function CgpaCalculatorPage() {
                 </h3>
               </div>
 
-              <div className="space-y-4">
+              <div className="space-y-3 sm:space-y-4">
                 {[
                   {
                     title: "Master High-Credit Subjects",

From 3a388a1324f3965d8abe35a9057e1fca6d9b9f2f Mon Sep 17 00:00:00 2001
From: nitin mohan <mohannitin494@gmail.com>
Date: Thu, 9 Jul 2026 18:35:33 +0530
Subject: [PATCH 3/3] Trigger CI