feat : major overhaul updates

.github/workflows/test.yml

@@ -14,17 +14,16 @@ jobs:
         steps:
             - uses: actions/checkout@v4
 
-            - name: Set up Node.js
-              uses: actions/setup-node@v4
+            - name: Set up Bun
+              uses: oven-sh/setup-bun@v2
               with:
-                node-version: 20
-                cache: 'npm'
+                bun-version: latest
 
             - name: Install dependencies
-              run: npm install
+              run: bun install --frozen-lockfile
 
             - name: Run tests
-              run: npm run test
+              run: bun run test
 
             - name: Build Next.js
-              run: npm run build
+              run: bun run build

app/components/about.jsx

@@ -1,45 +1,41 @@
-import React from 'react';
+import React from "react";
 import { IoMdInformationCircle } from "react-icons/io";
 
 const AboutSection = () => {
   return (
     <section className="relative py-10 bg-white dark:bg-neutral-900 overflow-hidden">
       <div className="container mx-auto px-6 relative z-10">
         {/* Section Header */}
-        <div className="max-w-2xl mx-auto text-center mb-12">
+        <div className="max-w-4xl mx-auto text-center mb-4">
           <span className="flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
-            <IoMdInformationCircle className='text-xl'/>
+            <IoMdInformationCircle className="text-xl" />
             About The Platform
           </span>
-          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
-            Revolutionizing <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">DSA Learning</span>
-          </h2>
+          <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-gray-900 dark:text-white mb-6">
+            Revolutionizing{" "}
+            <span className="text-transparent bg-clip-text bg-linear-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">
+              DSA Learning
+            </span>
+          </h1>
         </div>
 
         {/* Mission Statement */}
-        <div className="max-w-6xl mx-auto bg-white dark:bg-neutral-950 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-3xl p-8 md:p-10 shadow-lg overflow-hidden">
-          <div className="relative">
-            {/* Decorative element */}
-            <div className="absolute -top-20 -right-20 w-40 h-40 bg-blue-500/10 rounded-full filter blur-xl"></div>
-
-            <h3 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6 relative">
-              <span className="text-blue-500">Our</span> Mission
-            </h3>
-            <div className="space-y-6 text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
-              <p>
-                DSA Visualizer was created to bridge the gap between theoretical knowledge and practical understanding. We believe that seeing concepts in action is the key to mastering data structures and algorithms.
-              </p>
-              <p>
-                Whether you're a student preparing for exams, a developer honing your skills, or an enthusiast exploring computer science, our tool makes learning engaging and effective through interactive visualizations and a user-friendly interface.
-              </p>
-            </div>
-          </div>
+        <div className="max-w-5xl mx-auto text-neutral-600 dark:text-neutral-300 p-8 md:p-10 overflow-hidden">
+            <p className="text-center text-lg">
+              DSA Visualizer was created to bridge the gap between theoretical
+              knowledge and practical understanding. We believe that seeing
+              concepts in action is the key to mastering data structures and
+              algorithms. Whether you{"\'"}re a student preparing for exams, a
+              developer honing your skills, or an enthusiast exploring computer
+              science, our tool makes learning engaging and effective through
+              interactive visualizations and a user-friendly interface.
+            </p>
         </div>
-{/* Divider */}
-        <div className="mt-20 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
+        {/* Divider */}
+        <div className="mt-20 mx-auto h-px max-w-4xl bg-linear-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
       </div>
     </section>
   );
 };
 
-export default AboutSection;
+export default AboutSection;

app/components/faq.jsx

@@ -38,10 +38,10 @@ const FAQSection = () => {
             <FiHelpCircle className="w-5 h-5" />
             Need Help?
           </span>
-          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
-            Frequently <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">Asked Questions</span>
-          </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
+          <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-gray-900 dark:text-white mb-6">
+            Frequently <span className="text-transparent bg-clip-text bg-linear-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">Asked Questions</span>
+          </h1>
+          <p className="text-lg text-neutral-600 dark:text-neutral-300 leading-relaxed">
             Quick answers to common questions about our platform
           </p>
         </div>

app/components/feature.jsx

@@ -60,10 +60,10 @@ const FeaturesSection = () => {
             <HiSparkles className='text-xl'/>
             Features we offer
           </span>
-          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+          <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-gray-900 dark:text-white mb-4">
             Elevate Your <span className="text-blue-600 dark:text-blue-400">DSA Mastery</span>
           </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+          <p className="text-xl text-neutral-600 dark:text-neutral-300 max-w-3xl mx-auto">
             Modern tools designed to transform how you understand algorithms
           </p>
         </div>
@@ -76,7 +76,7 @@ const FeaturesSection = () => {
               className="relative group bg-white dark:bg-neutral-950 rounded-2xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100 dark:border-gray-700"
             >
               {/* Hover effect background */}
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-neutral-900 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"></div>
+              <div className="absolute inset-0 bg-linear-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-neutral-900 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"></div>
 
               <div className="relative z-10">
                 {/* Icon */}
@@ -90,24 +90,24 @@ const FeaturesSection = () => {
                     <span className="text-xs font-semibold tracking-wider text-blue-500 dark:text-blue-400 uppercase">
                       Feature 0{index + 1}
                     </span>
-                    <h3 className="text-2xl font-bold text-gray-900 dark:text-white mt-2">
+                    <h3 className="text-2xl font-semibold tracking-tight text-gray-900 dark:text-white mt-2">
                       {feature.title}
                     </h3>
                   </div>
 
-                  <p className="text-gray-600 dark:text-gray-300">
+                  <p className="text-neutral-700 text-sm dark:text-neutral-300">
                     {feature.description}
                   </p>
 
                   <ul className="space-y-3 mt-4">
                     {feature.benefits.map((benefit, i) => (
                       <li key={i} className="flex items-start gap-3">
-                        <div className={`flex-shrink-0 mt-1 w-5 h-5 ${feature.color} rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900/30`}>
+                        <div className={`shrink-0 w-5 h-5 ${feature.color} rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900/30`}>
                           <svg className="w-3 h-3 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path strokeLinecap="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
                           </svg>
                         </div>
-                        <span className="text-gray-700 dark:text-gray-300">{benefit}</span>
+                        <span className="text-neutral-700 text-sm dark:text-neutral-300">{benefit}</span>
                       </li>
                     ))}
                   </ul>
@@ -126,7 +126,7 @@ const FeaturesSection = () => {
             {features.map((feature, index) => (
               <div 
                 key={index} 
-                className="w-full flex-shrink-0 px-2"
+                className="w-full shrink-0 px-2"
               >
                 <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
                   {/* Icon */}
@@ -152,12 +152,12 @@ const FeaturesSection = () => {
                     <ul className="space-y-3 mt-4">
                       {feature.benefits.map((benefit, i) => (
                         <li key={i} className="flex items-start gap-3">
-                          <div className={`flex-shrink-0 mt-1 w-5 h-5 ${feature.color} rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900/30`}>
+                          <div className={`shrink-0 mt-1 w-5 h-5 ${feature.color} rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900/30`}>
                             <svg className="w-3 h-3 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                               <path strokeLinecap="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
                             </svg>
                           </div>
-                          <span className="text-gray-700 dark:text-gray-300">{benefit}</span>
+                          <span className="text-neutral-700 dark:text-neutral-300">{benefit}</span>
                         </li>
                       ))}
                     </ul>
@@ -184,7 +184,7 @@ const FeaturesSection = () => {
         </div>
 
         {/* Divider */}
-        <div className="mt-20 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
+        <div className="mt-20 mx-auto h-px max-w-4xl bg-linear-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
       </div>
     </section>
   );

app/components/hero.jsx

@@ -19,6 +19,7 @@ const HeroSection = () => {
   };
 
   const name = [{ name: "A" }, { name: "S" }, { name: "R" }];
+  const avatarColors = ["bg-orange-600", "bg-amber-500", "bg-emerald-500"];
 
   const getInitials = (name) => {
     return name
@@ -30,7 +31,7 @@ const HeroSection = () => {
 
   return (
     <main className="bg-white dark:bg-neutral-900">
-      <section className="min-h-screen py-10 flex items-start md:items-center justify-center bg-gradient-to-br from-blue-50 to-white dark:from-neutral-900 dark:to-neutral-900 text-gray-900 dark:text-gray-100 relative overflow-hidden">
+      <section className="min-h-screen py-10 flex items-start md:items-center justify-center bg-linear-to-br from-blue-50 to-white dark:from-neutral-900 dark:to-neutral-900 text-gray-900 dark:text-gray-100 relative overflow-hidden">
         {/* Notification Bar */}
         <div className="hidden md:block absolute mt-14 top-12 left-1/2 transform -translate-x-1/2 z-20 w-full max-w-md px-4">
           <div className="bg-white dark:bg-neutral-950 border border-blue-200 dark:border-blue-900 rounded-full shadow-lg py-2 px-4 flex items-center justify-between">
@@ -81,40 +82,26 @@ const HeroSection = () => {
         <div className="container top-4 mx-auto px-6 pt-20 flex flex-col lg:flex-row items-center justify-between relative z-10 gap-12">
           {/* Text Content */}
           <div className="lg:w-1/2 text-center lg:text-left space-y-4 sm:space-y-6">
-            <h1 className="text-4xl sm:text-5xl md:text-5xl font-bold leading-snug md:leading-tight">
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-400 dark:from-blue-400 dark:to-blue-300">
+            <h1 className="text-4xl p-0 m-0 sm:text-5xl md:text-6xl font-semibold tracking-tight leading-snug md:leading-tight">
+              <span className="text-transparent bg-clip-text bg-linear-to-r from-blue-600 to-blue-500 dark:from-blue-500 dark:to-blue-400">
                 Master DSA
               </span>
               <br />
               Through Interactive Visualization
             </h1>
-            <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto lg:mx-0">
-              See algorithms come to life in your mind's eye before you code
+            <p className="text-lg md:text-lg text-neutral-700 dark:text-neutral-400 max-w-2xl mx-auto lg:mx-0">
+              See algorithms come to life in your mind{"\'"}s eye before you code
               them. The way developers actually think.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center lg:justify-start">
               <button
                 onClick={handleStartVisualizing}
-                className="relative px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden"
+                className="relative px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden"
               >
                 <span className="relative z-10 flex items-center justify-center gap-2">
                   Start Visualizing Now
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5 group-hover:translate-x-1 transition-transform"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M14 5l7 7m0 0l-7 7m7-7H3"
-                    />
-                  </svg>
                 </span>
-                <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+                <span className="absolute inset-0 bg-linear-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
               </button>
               <Promotion/>
             </div>
@@ -126,7 +113,7 @@ const HeroSection = () => {
                   {name.map((item, index) => (
                     <div
                       key={index}
-                      className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold"
+                      className={`w-8 h-8 rounded-full ${avatarColors[index % avatarColors.length]} flex items-center justify-center text-white font-semibold ring-2 ring-white dark:ring-neutral-900`}
                     >
                       {getInitials(item.name)}
                     </div>
@@ -156,7 +143,7 @@ const HeroSection = () => {
                 alt="Person thinking about algorithms"
                 width={1200}
                 height={1200}
-                className="w-full z-20 h-full max-h-[400px] lg:max-h-[600px] object-contain drop-shadow-2xl"
+                className="w-full z-20 h-full max-h-100 lg:max-h-150 object-contain drop-shadow-2xl"
                 style={{
                   filter: "drop-shadow(0 20px 13px rgba(0, 0, 0, 0.1))",
                   maskImage:
@@ -203,7 +190,7 @@ const HeroSection = () => {
       </section>
       {/* Divider */}
       <div className="pb-10">
-        <div className="mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
+        <div className="mx-auto h-px max-w-4xl bg-linear-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
       </div>
     </main>
   );