diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 0a8078d..eabf455 100755 --- a/.github/workflows/test.yml +++ b/.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 \ No newline at end of file + run: bun run build \ No newline at end of file diff --git a/app/components/about.jsx b/app/components/about.jsx index d941698..68d0e82 100755 --- a/app/components/about.jsx +++ b/app/components/about.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import { IoMdInformationCircle } from "react-icons/io"; const AboutSection = () => { @@ -6,40 +6,36 @@ const AboutSection = () => {
{/* Section Header */} -
+
- + About The Platform -

- Revolutionizing DSA Learning -

+

+ Revolutionizing{" "} + + DSA Learning + +

{/* Mission Statement */} -
-
- {/* Decorative element */} -
- -

- Our Mission -

-
-

- 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. -

-
-
+
+

+ 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. +

-{/* Divider */} -
+ {/* Divider */} +
); }; -export default AboutSection; \ No newline at end of file +export default AboutSection; diff --git a/app/components/faq.jsx b/app/components/faq.jsx index ca3f0e8..35fc53e 100755 --- a/app/components/faq.jsx +++ b/app/components/faq.jsx @@ -38,10 +38,10 @@ const FAQSection = () => { Need Help? -

- Frequently Asked Questions -

-

+

+ Frequently Asked Questions +

+

Quick answers to common questions about our platform

diff --git a/app/components/feature.jsx b/app/components/feature.jsx index 4df22c7..161027c 100755 --- a/app/components/feature.jsx +++ b/app/components/feature.jsx @@ -60,10 +60,10 @@ const FeaturesSection = () => { Features we offer -

+

Elevate Your DSA Mastery

-

+

Modern tools designed to transform how you understand algorithms

@@ -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 */} -
+
{/* Icon */} @@ -90,24 +90,24 @@ const FeaturesSection = () => { Feature 0{index + 1} -

+

{feature.title}

-

+

{feature.description}

@@ -126,7 +126,7 @@ const FeaturesSection = () => { {features.map((feature, index) => (
{/* Icon */} @@ -152,12 +152,12 @@ const FeaturesSection = () => {
    {feature.benefits.map((benefit, i) => (
  • -
    +
    - {benefit} + {benefit}
    • ))}
@@ -184,7 +184,7 @@ const FeaturesSection = () => {
{/* Divider */} -
+
); diff --git a/app/components/hero.jsx b/app/components/hero.jsx index b5c7ec7..3ab0185 100755 --- a/app/components/hero.jsx +++ b/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 (
-
+
{/* Notification Bar */}
@@ -81,40 +82,26 @@ const HeroSection = () => {
{/* Text Content */}
-

- +

+ Master DSA
Through Interactive Visualization

-

- See algorithms come to life in your mind's eye before you code +

+ See algorithms come to life in your mind{"\'"}s eye before you code them. The way developers actually think.

@@ -126,7 +113,7 @@ const HeroSection = () => { {name.map((item, index) => (
{getInitials(item.name)}
@@ -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 = () => {

{/* Divider */}
-
+
); diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx index 802420d..021a8a9 100755 --- a/app/components/navbar.jsx +++ b/app/components/navbar.jsx @@ -1,8 +1,10 @@ "use client"; import Link from "next/link"; -import { useState, useEffect } from "react"; +import Image from "next/image"; +import { useState } from "react"; import { useRouter } from "next/navigation"; import { useUser } from '@/app/contexts/UserContext'; +import { useTheme } from '@/app/contexts/ThemeContext'; import { supabase } from '@/lib/supabase'; // Constants for services dropdown items @@ -119,8 +121,8 @@ const ChevronIcon = ({ isOpen = false }) => ( ); -// Service item component for both desktop and mobile -const ServiceItem = ({ title, description, icon, iconBg, href }) => ( +// Dropdown item, shared by the About and Services menus on both desktop and mobile +const DropdownItem = ({ title, description, icon, iconBg, href }) => ( ( ); -// Services dropdown component for desktop -const DesktopServicesDropdown = () => ( +// Dropdown menu component for desktop (hover-triggered via group-hover) +const DesktopDropdown = ({ items }) => (
- {SERVICES.map((service, index) => ( - + {items.map((item, index) => ( + ))}
); -// Services dropdown component for mobile -const MobileServicesDropdown = ({ isOpen }) => ( +// Dropdown menu component for mobile (click-triggered via isOpen state) +const MobileDropdown = ({ items, isOpen }) => (
- {SERVICES.map((service, index) => ( - - ))} -
-); - -// Service item component for both desktop and mobile -const AboutItem = ({ title, description, icon, iconBg, href }) => ( - -
-
- {icon} -
-
-
{title}
-
{description}
-
-
- - - - -); - -// About dropdown component for desktop -const AboutServicesDropdown = () => ( -
-
- {ABOUT.map((about, index) => ( - - ))} -
-
-); - -// Services dropdown component for mobile -const MobileAboutDropdown = ({ isOpen }) => ( -
- {ABOUT.map((about, index) => ( - + {items.map((item, index) => ( + ))}
); export default function Navbar() { - const [theme, setTheme] = useState("light"); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); - const [isScrolled, setIsScrolled] = useState(false); + const [isAboutOpen, setIsAboutOpen] = useState(false); const [isServicesOpen, setIsServicesOpen] = useState(false); const [isUserMenuOpen, setIsUserMenuOpen] = useState(false); const router = useRouter(); const { user, setUser } = useUser(); + const { theme, toggleTheme } = useTheme(); const handleLogout = async () => { await supabase.auth.signOut(); @@ -228,41 +183,13 @@ const handleLogout = async () => { router.push('/'); }; - // Load theme from localStorage on mount and apply it - useEffect(() => { - const savedTheme = localStorage.getItem("theme") || "light"; - setTheme(savedTheme); - document.documentElement.classList.toggle("dark", savedTheme === "dark"); - }, []); - - // Handle scroll effect - useEffect(() => { - const handleScroll = () => { - setIsScrolled(window.scrollY > 10); - }; - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); - - const toggleTheme = () => { - const newTheme = theme === "light" ? "dark" : "light"; - setTheme(newTheme); - localStorage.setItem("theme", newTheme); - document.documentElement.classList.toggle("dark", newTheme === "dark"); - window.dispatchEvent(new Event("themeChange")); - }; - // Close mobile menu const closeMobileMenu = () => { setMobileMenuOpen(false); }; return ( -