From a2ba21c188edf2bea6d85270ad41b361c7349700 Mon Sep 17 00:00:00 2001
From: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Date: Wed, 28 Jan 2026 15:55:55 +0200
Subject: [PATCH 1/7] (SP 2) [Frontend] Update Features section content and
 improve mobile UX

- Features Section: Refined feature content and visuals.
- Mobile UX: Improved responsive layout and scaling for feature cards and interactive elements.
- Visual Enhancements: Added dynamic particle background effects to the Pricing section.
---
 frontend/app/globals.css                      |  38 ++
 .../components/about/CommunitySection.tsx     |  59 +-
 frontend/components/about/FeaturesSection.tsx | 641 ++++++++++--------
 frontend/components/about/HeroSection.tsx     |  20 +-
 frontend/components/about/PricingSection.tsx  |  72 +-
 frontend/components/about/SponsorsWall.tsx    |  17 +-
 frontend/components/about/TopicsSection.tsx   |   8 +-
 frontend/components/ui/gradient-badge.tsx     |  22 +
 frontend/components/ui/particle-canvas.tsx    | 348 ++++++++++
 frontend/components/ui/section-heading.tsx    |  25 +
 10 files changed, 873 insertions(+), 377 deletions(-)
 create mode 100644 frontend/components/ui/gradient-badge.tsx
 create mode 100644 frontend/components/ui/particle-canvas.tsx
 create mode 100644 frontend/components/ui/section-heading.tsx

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a5a92c93..c789b40e 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -331,6 +331,44 @@
     --card-rotate-offset: 3deg;
     animation-delay: 0.8s;
   }
+
+  /* Feature bubble floating animation */
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  /* Slow spinning for orbit rings */
+  .animate-spin-slow {
+    animation: spin 20s linear infinite;
+  }
+  
+  .animate-spin-slower {
+    animation: spin 30s linear infinite reverse;
+  }
+
+  /* Dashed line flow animation */
+  .animate-dash-flow {
+    animation: dash-flow 2s linear infinite;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes dash-flow {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 20;
+  }
 }
 
 /* Shop theme: scoped overrides (must not affect platform pages) */
diff --git a/frontend/components/about/CommunitySection.tsx b/frontend/components/about/CommunitySection.tsx
index f8232dd5..dd37aceb 100644
--- a/frontend/components/about/CommunitySection.tsx
+++ b/frontend/components/about/CommunitySection.tsx
@@ -1,32 +1,31 @@
 "use client"
 
-import { MessageCircle, Github, ArrowRight, ExternalLink } from "lucide-react"
-import { TESTIMONIALS, type Testimonial } from "@/data/about" 
-
+import { Github, ArrowRight, ExternalLink, MessageCircle } from "lucide-react"
 import Link from "next/link"
+import { TESTIMONIALS, type Testimonial } from "@/data/about"
+import { GradientBadge } from "@/components/ui/gradient-badge"
+import { SectionHeading } from "@/components/ui/section-heading"
 
 export function CommunitySection() {
   return (
-    <section className="w-full py-16 md:py-24 relative overflow-hidden bg-gray-50 dark:bg-transparent">
+    <section className="w-full py-20 lg:py-28 relative overflow-hidden bg-gray-50 dark:bg-transparent">
         
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[80px] rounded-full pointer-events-none" />
 
         <div className="w-full relative z-10">
             
-            <div className="max-w-7xl mx-auto px-4 mb-12 text-center">
-                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 text-gray-500 dark:text-gray-400 text-[10px] font-bold uppercase tracking-widest mb-4">
-                    <MessageCircle size={10} /> Community Love
-                </div>
+            <div className="container-main mb-12 text-center">
+                <GradientBadge icon={MessageCircle} text="Community Love" className="mb-4" />
                 
-                <h2 className="text-3xl md:text-4xl font-black tracking-tight text-gray-900 dark:text-white mb-4">
-                    Approved by <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">Survivors</span>
-                </h2>
-                <p className="text-gray-600 dark:text-gray-400 max-w-xl mx-auto text-base font-light leading-relaxed">
-                    Join thousands of developers who stopped guessing and started shipping. Real feedback from real engineers.
-                </p>
+                <SectionHeading 
+                    title="Approved by"
+                    highlight="Survivors"
+                    subtitle="Join thousands of developers who stopped guessing and started shipping. Real feedback from real engineers."
+                    className="mb-0"
+                />
             </div>
 
-            <div className="relative w-full pause-on-hover mb-16">
+            <div className="relative w-full pause-on-hover mb-8 md:mb-16">
                 
                 <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-r from-gray-50 dark:from-background to-transparent" />
                 <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-l from-gray-50 dark:from-background to-transparent" />
@@ -45,25 +44,23 @@ export function CommunitySection() {
                 </div>
             </div>
 
-            <div className="max-w-7xl mx-auto px-4 text-center">
-                <div className="flex flex-col items-center gap-3 md:hidden">
-                    <span className="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                        Have a success story or feature request?
-                    </span>
+            <div className="container-main text-center">
+                <div className="flex flex-col items-center gap-2 md:hidden">
                     <Link
                         href="https://github.com/DevLoversTeam/devlovers.net/discussions"
                         target="_blank"
-                        className="group inline-flex items-center gap-2 px-5 py-3 rounded-full
-                            bg-gray-900 dark:bg-white text-white dark:text-black
-                            text-xs font-bold uppercase tracking-wider
+                        className="group inline-flex items-center gap-1.5 px-4 py-2 rounded-full
+                            border border-gray-200 dark:border-white/10
+                            bg-white/50 dark:bg-white/5
+                            text-[10px] font-bold uppercase tracking-wider
+                            text-gray-700 dark:text-gray-300
                             transition-all duration-300
-                            hover:bg-[#1e5eff] dark:hover:bg-[#ff2d55]
-                            hover:text-white dark:hover:text-white
-                            hover:scale-[1.02]"
+                            hover:border-[#1e5eff]/40 dark:hover:border-[#ff2d55]/40
+                            hover:text-[#1e5eff] dark:hover:text-[#ff2d55]"
                     >
-                        <Github size={14} />
+                        <Github size={12} />
                         Join Discussion
-                        <ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
+                        <ArrowRight size={10} className="group-hover:translate-x-0.5 transition-transform" />
                     </Link>
                 </div>
 
@@ -94,8 +91,8 @@ export function CommunitySection() {
                     </span>
                 </Link>
 
-                <p className="mt-6 text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-widest font-bold opacity-60">
-                    We read every single thread
+                <p className="mt-3 md:mt-6 text-[8px] md:text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-widest md:font-bold md:opacity-60 opacity-70">
+                    We read every <span className="hidden md:inline">single </span>thread
                 </p>
             </div>
 
@@ -114,7 +111,7 @@ function TestimonialCard({
   color
 }: Testimonial) {
   return (
-    <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#0f0f0f] p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
+    <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
       <div className="mb-3 flex items-start justify-between">
         <div className="flex items-center gap-3">
           <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-white/10 border border-gray-200 dark:border-white/5 text-xs font-bold text-gray-700 dark:text-gray-200">
diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 3d1839b5..38dd2711 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -1,336 +1,395 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { Link } from "@/i18n/routing"
-import { MessageCircle, Brain, Trophy, User, ShoppingBag } from "lucide-react"
+import { 
+    MessageCircle, Brain, Trophy, User, ShoppingBag, BookOpen,
+    Globe, Cpu, Shield, Languages, Clock, Lightbulb, Target,
+    Medal, Users, Flame, Zap, BarChart3, TrendingUp, Tag, History,
+    CreditCard, Package, Sparkles, PenTool, CalendarDays,
+    Search, Save, Activity, UserCircle, Bell,
+    LucideIcon
+} from "lucide-react"
+import { SectionHeading } from "@/components/ui/section-heading"
 
-const tMock = (key: string) => {
-    const map: any = {
-        "title": "Everything you need to",
-        "titleHighlight": "get hired",
-        "subtitle": "Stop searching for scattered info. We curated the ultimate toolkit to crack technical interviews.",
-        
-        "qa.title": "Q&A",
-        "qa.description": "No fluff. Just a massive library of real interview questions with precise, recruiter-approved answers.",
-        
-        "quiz.title": "Quizzes",
-        "quiz.description": "Validate your confidence. Fast-paced interactive quizzes to spot your weak points before the interviewer does.",
-        
-        "leaderboard.title": "Leaderboard",
-        "leaderboard.description": "Gamify your prep. Earn points for every correct answer, keep your streak alive, and rank up against others.",
-        
-        "profile.title": "Analytics",
-        "profile.description": "Don't fly blind. Visualize your progress with detailed charts to see exactly which topics you've mastered.",
-        
-        "shop.title": "Shop",
-        "shop.description": "Upgrade your setup. High-quality developer apparel, desk accessories, and digital assets available for purchase.",
-    }
-    return map[key] || key
+interface Feature {
+    icon: LucideIcon
+    label: string
+    desc: string
+    x: number
+    y: number
+    size: number
 }
 
-export function FeaturesSection() {
-  const t = tMock 
-  const [activeTab, setActiveTab] = useState("qa")
-
-  const features = [
-    { id: "qa", icon: MessageCircle, href: "/q&a" },
-    { id: "quiz", icon: Brain, href: "/quizzes" },
-    { id: "leaderboard", icon: Trophy, href: "/leaderboard" },
-    { id: "profile", icon: User, href: "/profile" },
-    { id: "shop", icon: ShoppingBag, href: "/shop" },
-  ]
+interface Page {
+    id: string
+    icon: LucideIcon
+    href: string
+    features: Feature[]
+}
 
-  const activeFeature = features.find((f) => f.id === activeTab)
-  const activeHref = activeFeature ? activeFeature.href : "/"
+const translations: Record<string, string> = {
+    "title": "Features designed to",
+    "titleHighlight": "make you unstoppable",
+    "subtitle": "Stop searching for scattered info. We curated the ultimate toolkit to crack technical interviews.",
+    "qa.title": "Q&A",
+    "qa.description": "No fluff. Just a massive library of real interview questions with precise, recruiter-approved answers.",
+    "quiz.title": "Quizzes",
+    "quiz.description": "Validate your confidence. Fast-paced interactive quizzes to spot your weak points before the interviewer does.",
+    "leaderboard.title": "Leaderboard",
+    "leaderboard.description": "Gamify your prep. Earn points for every correct answer, keep your streak alive, and rank up against others.",
+    "blog.title": "Blog",
+    "blog.description": "Stay updated. detailed articles on tech trends, coding tutorials, and industry insights to keep you ahead of the curve.",
+    "profile.title": "Analytics",
+    "profile.description": "Don't fly blind. Visualize your progress with detailed charts to see exactly which topics you've mastered.",
+    "shop.title": "Shop",
+    "shop.description": "Upgrade your setup. High-quality developer apparel, desk accessories, and digital assets available for purchase.",
+}
 
-  return (
-    <section className="relative w-full py-24 overflow-hidden bg-gray-50 dark:bg-transparent">
-      
-      <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-[10%] left-1/2 -translate-x-1/2 w-full max-w-4xl h-[500px] rounded-full blur-[120px] opacity-30 
-          bg-[#1e5eff]/15 dark:bg-[#ff2d55]/15 mix-blend-multiply dark:mix-blend-screen" 
-        />
-      </div>
+const t = (key: string) => translations[key] || key
 
-      <div className="relative container mx-auto px-4 max-w-5xl z-10 flex flex-col items-center">
-        
-        <div className="mb-12 text-center max-w-3xl">
-          <h2 className="text-4xl md:text-5xl font-bold mb-4 tracking-tight text-gray-900 dark:text-white">
-            {t("title")} <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">{t("titleHighlight")}</span>
-          </h2>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
-            {t("subtitle")}
-          </p>
-        </div>
+const decorativeDots = [
+    { x: '5%', y: '20%', size: 8 },
+    { x: '10%', y: '75%', size: 6 },
+    { x: '18%', y: '40%', size: 5 },
+    { x: '92%', y: '25%', size: 7 },
+    { x: '88%', y: '70%', size: 6 },
+    { x: '82%', y: '45%', size: 5 },
+    { x: '7%', y: '55%', size: 7 },
+    { x: '95%', y: '55%', size: 8 },
+    { x: '15%', y: '85%', size: 6 },
+    { x: '85%', y: '15%', size: 5 },
+    { x: '3%', y: '35%', size: 6 },
+    { x: '97%', y: '80%', size: 7 },
+]
 
-        <div className="w-full relative mb-10 group perspective-1000">
-          
-          <div className="absolute -inset-1 rounded-xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700
-             bg-gradient-to-t from-[#1e5eff]/20 to-transparent dark:from-[#ff2d55]/20" 
-          />
+const pages: Page[] = [
+    {
+        id: "qa",
+        icon: MessageCircle,
+        href: "/q&a",
+        features: [
+            { icon: Globe, label: "3 Languages", desc: "EN, UK & PL supported", x: -120, y: -120, size: 88 },
+            { icon: Cpu, label: "AI Helper", desc: "Select text for AI explain", x: 120, y: -120, size: 88 },
+            { icon: Lightbulb, label: "Smart Cache", desc: "Highlights learned terms", x: -120, y: 120, size: 88 },
+            { icon: Search, label: "Tech Filter", desc: "React, Git, JS & more", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "quiz",
+        icon: Brain,
+        href: "/quizzes",
+        features: [
+            { icon: Clock, label: "Smart Timer", desc: "Race against the total time", x: -120, y: -120, size: 88 },
+            { icon: Shield, label: "Anti-Cheat", desc: "Focus loss detection", x: 120, y: -120, size: 88 },
+            { icon: Save, label: "Auto Sync", desc: "Saves progress post-login", x: -120, y: 120, size: 88 },
+            { icon: BarChart3, label: "Tracking", desc: "Best scores & attempts", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "leaderboard",
+        icon: Trophy,
+        href: "/leaderboard",
+        features: [
+            { icon: Medal, label: "The Podium", desc: "Top 3 exclusive spotlight", x: -120, y: -120, size: 88 },
+            { icon: Globe, label: "Global Rank", desc: "Compete worldwide", x: 120, y: -120, size: 88 },
+            { icon: Zap, label: "XP System", desc: "Points for every answer", x: -120, y: 120, size: 88 },
+            { icon: Activity, label: "Live Feed", desc: "Real-time rank updates", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "profile",
+        icon: User,
+        href: "/dashboard",
+        features: [
+            { icon: BarChart3, label: "Stats Hub", desc: "Visualize your growth", x: -120, y: -120, size: 88 },
+            { icon: History, label: "History", desc: "Track learning streaks", x: 120, y: -120, size: 88 },
+            { icon: UserCircle, label: "Identity", desc: "Manage role & profile", x: -120, y: 120, size: 88 },
+            { icon: Bell, label: "Reminders", desc: "Finish incomplete quizzes", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "blog",
+        icon: BookOpen,
+        href: "/blog",
+        features: [
+            { icon: TrendingUp, label: "Tech Trends", desc: "Stay ahead of the curve", x: -120, y: -120, size: 88 },
+            { icon: PenTool, label: "Tutorials", desc: "Step-by-step guides", x: 120, y: -120, size: 88 },
+            { icon: BookOpen, label: "Deep Dives", desc: "In-depth analysis", x: -120, y: 120, size: 88 },
+            { icon: Users, label: "Community", desc: "Written by developers", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "shop",
+        icon: ShoppingBag,
+        href: "/shop",
+        features: [
+            { icon: Sparkles, label: "New Drops", desc: "Regular fresh content", x: -120, y: -120, size: 88 },
+            { icon: Tag, label: "Curated", desc: "Dev-focused collections", x: 120, y: -120, size: 88 },
+            { icon: CreditCard, label: "Checkout", desc: "Seamless Stripe flow", x: -120, y: 120, size: 88 },
+            { icon: Package, label: "Premium", desc: "High-quality material", x: 120, y: 120, size: 88 },
+        ]
+    },
+]
 
-          <Link href={activeHref} className="block relative w-full focus:outline-none cursor-pointer">
-            <div className="relative w-full aspect-video rounded-xl overflow-hidden shadow-2xl transition-all duration-500 group-hover:scale-[1.01] 
-              border border-gray-200 dark:border-white/10
-              bg-white dark:bg-[#0f0f0f]
-              group-hover:shadow-[0_0_40px_-10px_rgba(30,94,255,0.3)] dark:group-hover:shadow-[0_0_40px_-10px_rgba(255,45,85,0.3)]"
+function FeatureBubble({ feature, index, href, isMobile }: { feature: Feature; index: number; href: string; isMobile: boolean }) {
+    const Icon = feature.icon
+    const floatDelay = index * 0.5
+    const floatDuration = 3 + index * 0.3
+    
+    const scaleX = isMobile ? 0.55 : 1
+    const scaleY = isMobile ? 1.3 : 1
+    const posX = feature.x * scaleX
+    const posY = feature.y * scaleY
+    
+    return (
+        <motion.div
+            className="absolute"
+            style={{ left: '50%', top: '50%' }}
+            initial={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
+            animate={{ 
+                x: `calc(-50% + ${posX}%)`, 
+                y: `calc(-50% + ${posY}%)`,
+                opacity: 1, 
+                scale: 1,
+            }}
+            exit={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
+            transition={{
+                x: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
+                y: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
+                opacity: { delay: 0.1 + index * 0.08, duration: 0.3 },
+                scale: { delay: 0.1 + index * 0.08, duration: 0.5, type: "spring", bounce: 0.4 },
+            }}
+        >
+            <div 
+                className="animate-float"
+                style={{ animationDelay: `${floatDelay}s`, animationDuration: `${floatDuration}s` }}
             >
-              
-              <div className="absolute top-0 left-0 w-full h-10 flex items-center px-4 z-20 backdrop-blur-md
-                border-b border-gray-200 dark:border-white/5
-                bg-white/90 dark:bg-[#1a1a1a]/95"
-              >
-                <div className="flex gap-2 opacity-100 dark:opacity-70 group-hover:opacity-100 transition-opacity">
-                  <div className="w-3 h-3 rounded-full bg-[#ff5f56] border border-black/5" />
-                  <div className="w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/5" />
-                  <div className="w-3 h-3 rounded-full bg-[#27c93f] border border-black/5" />
-                </div>
-                
-                <div className="ml-4 px-3 py-1 rounded-md text-[10px] font-mono flex items-center select-none transition-colors
-                  border border-gray-200 dark:border-white/5
-                  bg-gray-50 dark:bg-black/40 
-                  text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-300"
-                >
-                  <span className="text-gray-400 dark:text-gray-600 mr-1">https://</span>
-                  devlovers.net/{activeTab}
-                </div>
-              </div>
-
-              <div className="absolute inset-0 pt-10 w-full h-full bg-white dark:bg-[#0f0f0f]">
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={activeTab}
-                    initial={{ opacity: 0, scale: 1.02, filter: "blur(4px)" }}
-                    animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
-                    exit={{ opacity: 0, scale: 0.98, filter: "blur(4px)" }}
-                    transition={{ duration: 0.35, ease: "easeInOut" }}
-                    className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden"
-                  >
-                    <div className="absolute inset-0 bg-[size:24px_24px]
-                      bg-[linear-gradient(to_right,#00000008_1px,transparent_1px),linear-gradient(to_bottom,#00000008_1px,transparent_1px)]
-                      dark:bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)]" 
-                    />
-                    
-                    <div className="z-10 w-full h-full flex items-center justify-center p-8">
-                        {activeTab === 'qa' && <QAVisual />}
-                        {activeTab === 'quiz' && <QuizVisual />}
-                        {activeTab === 'leaderboard' && <LeaderboardVisual />}
-                        {activeTab === 'profile' && <ProfileVisual />}
-                        {activeTab === 'shop' && <ShopVisual />}
+                <Link href={href} className="group block">
+                    <div className="flex items-center gap-2 md:gap-3 px-2 md:px-3 py-2 md:py-2.5 w-[140px] md:w-[180px] bg-white dark:bg-neutral-900 border border-gray-200 dark:border-white/10 shadow-lg dark:shadow-black/30 rounded-xl md:rounded-2xl cursor-pointer transition-all duration-200 group-hover:border-[#1e5eff]/40 dark:group-hover:border-[#ff2d55]/40 group-hover:shadow-[0_8px_30px_rgba(30,94,255,0.25)] dark:group-hover:shadow-[0_8px_30px_rgba(255,45,85,0.25)] group-hover:scale-105">
+                        <div 
+                            className="flex items-center justify-center shrink-0 w-8 h-8 md:w-10 md:h-10 bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 rounded-lg md:rounded-xl transition-transform duration-200 group-hover:rotate-6 group-hover:scale-110"
+                        >
+                            <Icon className="w-4 h-4 md:w-5 md:h-5 text-[#1e5eff] dark:text-[#ff2d55]" strokeWidth={1.5} />
+                        </div>
+                        <div className="min-w-0">
+                            <div className="text-xs md:text-sm font-bold text-gray-800 dark:text-white">{feature.label}</div>
+                            <div className="text-[10px] md:text-xs text-gray-500 dark:text-gray-400">{feature.desc}</div>
+                        </div>
                     </div>
-
-                    <div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
-                  </motion.div>
-                </AnimatePresence>
-              </div>
+                </Link>
             </div>
-          </Link>
-        </div>
-
-        <div className="flex justify-center mb-8">
-          <div className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full
-            border border-gray-200 dark:border-white/10
-            bg-white dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none"
-          >
-            {features.map((feature) => {
-              const isActive = activeTab === feature.id
-              return (
-                <button
-                  key={feature.id}
-                  onClick={() => setActiveTab(feature.id)}
-                  className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
-                    isActive
-                      ? "text-white"
-                      : "text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
-                  }`}
-                >
-                  {isActive && (
-                    <motion.div
-                      layoutId="activeTabBackground"
-                      className="absolute inset-0 bg-[#1e5eff] dark:bg-[#ff2d55] shadow-lg shadow-[#1e5eff]/25 dark:shadow-[#ff2d55]/25"
-                      initial={false}
-                      transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
-                      style={{ borderRadius: 9999 }}
-                    />
-                  )}
-                  <span className="relative z-10 flex items-center gap-2">
-                      <feature.icon size={18} className="md:w-4 md:h-4" />
-                      <span className="hidden md:inline">{t(`${feature.id}.title`)}</span>
-                  </span>
-                </button>
-              )
-            })}
-          </div>
-        </div>
-
-        <div className="max-w-2xl mx-auto text-center relative h-20 w-full overflow-hidden">
-           <AnimatePresence mode="wait">
-            <motion.div
-              key={activeTab}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.2 }}
-              className="absolute w-full top-0 left-0 flex justify-center"
-            >
-              <p className="text-lg text-gray-600 dark:text-gray-300 leading-relaxed font-light">
-                {t(`${activeTab}.description`)}
-              </p>
-            </motion.div>
-          </AnimatePresence>
-        </div>
-      </div>
-    </section>
-  )
+        </motion.div>
+    )
 }
 
-function QAVisual() {
+function CentralIcon({ page }: { page: Page }) {
+    const Icon = page.icon
+    
     return (
-        <div className="w-full max-w-sm space-y-3">
+        <motion.div
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ duration: 0.5, type: "spring", bounce: 0.3 }}
+            className="relative flex items-center justify-center z-30"
+        >
             <motion.div 
-                initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }}
-                className="bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 w-full"
+                className="absolute w-60 h-60 rounded-full blur-3xl"
+                animate={{ opacity: [0.15, 0.25, 0.15], scale: [1, 1.1, 1] }}
+                transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
             >
-                <div className="flex items-center gap-2 mb-2">
-                     <div className="w-2 h-2 rounded-full bg-red-500" />
-                     <div className="text-[10px] uppercase font-bold text-gray-400">Question</div>
-                </div>
-                <div className="h-2 w-3/4 bg-gray-200 dark:bg-white/20 rounded mb-2" />
-                <div className="h-2 w-1/2 bg-gray-200 dark:bg-white/20 rounded" />
+                <div className="w-full h-full rounded-full bg-[#1e5eff] dark:bg-[#ff2d55]" />
             </motion.div>
             
-            <motion.div 
-                 initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3 }}
-                 className="flex justify-center"
-            >
-                <div className="w-[1px] h-4 bg-gray-300 dark:bg-white/20" />
-            </motion.div>
+            <div className="relative w-36 h-36 md:w-40 md:h-40 rounded-full flex items-center justify-center border border-gray-100 dark:border-white/10 bg-white/80 dark:bg-neutral-900/60 backdrop-blur-xl shadow-2xl dark:shadow-black/40">
+                <div className="absolute inset-2 rounded-full bg-gradient-to-br from-[#1e5eff]/10 to-[#1e5eff]/5 dark:from-[#ff2d55]/10 dark:to-[#ff2d55]/5" />
+                <Icon className="relative z-10 w-16 h-16 text-[#1e5eff] dark:text-[#ff2d55]" strokeWidth={1.5} />
+            </div>
+        </motion.div>
+    )
+}
 
-            <motion.div 
-                initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }}
-                className="bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 p-4 rounded-xl shadow-sm border border-[#1e5eff]/20 dark:border-[#ff2d55]/20 w-full"
-            >
-                <div className="flex items-center gap-2 mb-2">
-                     <div className="w-2 h-2 rounded-full bg-green-500" />
-                     <div className="text-[10px] uppercase font-bold text-[#1e5eff] dark:text-[#ff2d55]">Correct Answer</div>
-                </div>
-                <div className="h-2 w-full bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded mb-2" />
-                <div className="h-2 w-5/6 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded mb-2" />
-                <div className="h-2 w-2/3 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded" />
-            </motion.div>
+function DecorativeDots() {
+    return (
+        <div className="absolute inset-0 pointer-events-none z-0" aria-hidden="true">
+            {decorativeDots.map((dot, i) => (
+                <div
+                    key={i}
+                    className="absolute rounded-full bg-[#1e5eff]/40 dark:bg-[#ff2d55]/40 animate-float"
+                    style={{
+                        left: dot.x,
+                        top: dot.y,
+                        width: dot.size,
+                        height: dot.size,
+                        animationDelay: `${i * 0.3}s`,
+                        animationDuration: `${3 + i * 0.2}s`,
+                    }}
+                />
+            ))}
         </div>
     )
 }
 
-function QuizVisual() {
+function OrbitRings() {
     return (
-        <div className="relative w-full max-w-sm h-48 flex items-center justify-center">
-            <motion.div 
-                initial={{ rotate: -5, scale: 0.9 }} animate={{ rotate: -5, scale: 0.95 }} 
-                className="absolute inset-0 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 shadow opacity-60"
-            />
-            <motion.div 
-                 initial={{ rotate: 5, scale: 0.95 }} animate={{ rotate: 5, scale: 0.98 }} 
-                 className="absolute inset-0 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 shadow opacity-80"
-            />
-             <motion.div 
-                 initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }}
-                 className="absolute inset-0 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/10 shadow-xl p-6 flex flex-col items-center justify-center text-center"
-            >
-                <Brain className="w-12 h-12 text-[#1e5eff] dark:text-[#ff2d55] mb-4 opacity-80" />
-                <div className="h-2 w-3/4 bg-gray-100 dark:bg-white/10 rounded mb-2" />
-                <div className="h-2 w-1/2 bg-gray-100 dark:bg-white/10 rounded mb-6" />
-                <div className="flex gap-2 w-full">
-                    <div className="h-8 flex-1 rounded bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/5" />
-                    <div className="h-8 flex-1 rounded bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 border border-[#1e5eff]/30 dark:border-[#ff2d55]/30" />
-                </div>
-            </motion.div>
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none" aria-hidden="true">
+            <div className="absolute w-[55%] h-[55%] rounded-full border border-dashed border-gray-300/50 dark:border-white/10 animate-spin-slow" />
+            <div className="absolute w-[75%] h-[75%] rounded-full border border-dashed border-gray-200/50 dark:border-white/[0.07] animate-spin-slower" />
+            <div className="absolute w-[95%] h-[95%] rounded-full border border-gray-100/50 dark:border-white/[0.03]" />
         </div>
     )
 }
 
-function LeaderboardVisual() {
+function ConnectingLines() {
+    const lines = [
+        { x2: "15%", y2: "15%", delay: "0s" },
+        { x2: "85%", y2: "15%", delay: "0.5s" },
+        { x2: "15%", y2: "85%", delay: "1s" },
+        { x2: "85%", y2: "85%", delay: "1.5s" },
+    ]
+    
     return (
-        <div className="flex items-end gap-4 h-32">
-            <motion.div 
-                initial={{ height: 0 }} animate={{ height: "40%" }} transition={{ delay: 0.2 }}
-                className="w-16 bg-gray-200 dark:bg-white/10 rounded-t-lg relative group"
-            >
-                 <div className="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-gray-400 font-bold">3</div>
-            </motion.div>
-            <motion.div 
-                initial={{ height: 0 }} animate={{ height: "100%" }} transition={{ delay: 0.4, type: "spring" }}
-                className="w-16 bg-gradient-to-t from-[#1e5eff] to-[#60a5fa] dark:from-[#ff2d55] dark:to-[#ff7c9c] rounded-t-lg relative shadow-lg shadow-blue-500/20 dark:shadow-pink-500/20"
-            >
-                <Trophy className="absolute -top-8 left-1/2 -translate-x-1/2 w-6 h-6 text-[#1e5eff] dark:text-[#ff2d55]" />
-                <div className="absolute top-2 left-1/2 -translate-x-1/2 text-white font-bold">1</div>
-            </motion.div>
-            <motion.div 
-                initial={{ height: 0 }} animate={{ height: "70%" }} transition={{ delay: 0.3 }}
-                className="w-16 bg-gray-300 dark:bg-white/20 rounded-t-lg relative"
-            >
-                 <div className="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-gray-400 font-bold">2</div>
-            </motion.div>
-        </div>
+        <svg className="absolute inset-0 w-full h-full pointer-events-none" aria-hidden="true">
+            <defs>
+                <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]" stopOpacity="0.3" />
+                    <stop offset="100%" className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]" stopOpacity="0" />
+                </linearGradient>
+            </defs>
+            {lines.map((line, i) => (
+                <line 
+                    key={i}
+                    x1="50%" y1="50%" x2={line.x2} y2={line.y2} 
+                    stroke="url(#lineGradient)" 
+                    strokeWidth="1" 
+                    strokeDasharray="4 4" 
+                    className="animate-dash-flow" 
+                    style={{ animationDelay: line.delay }} 
+                />
+            ))}
+        </svg>
     )
 }
 
-function ProfileVisual() {
+function TabButton({ page, isActive, onClick }: { page: Page; isActive: boolean; onClick: () => void }) {
     return (
-        <div className="w-full max-w-md bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 p-4 shadow-sm">
-            <div className="flex items-center gap-4 mb-6">
-                <div className="w-12 h-12 rounded-full bg-gray-100 dark:bg-white/10" />
-                <div className="space-y-2">
-                    <div className="h-3 w-32 bg-gray-200 dark:bg-white/20 rounded" />
-                    <div className="h-2 w-20 bg-gray-100 dark:bg-white/10 rounded" />
-                </div>
-            </div>
-            <div className="space-y-3">
-                <div className="flex justify-between text-xs text-gray-400">
-                    <span>JS</span>
-                    <span>85%</span>
-                </div>
-                <div className="w-full h-2 bg-gray-100 dark:bg-white/5 rounded-full overflow-hidden">
-                    <motion.div 
-                        initial={{ width: 0 }} animate={{ width: "85%" }} transition={{ duration: 1, delay: 0.2 }}
-                        className="h-full bg-yellow-400 rounded-full" 
-                    />
-                </div>
-                 <div className="flex justify-between text-xs text-gray-400">
-                    <span>React</span>
-                    <span>60%</span>
-                </div>
-                <div className="w-full h-2 bg-gray-100 dark:bg-white/5 rounded-full overflow-hidden">
-                    <motion.div 
-                        initial={{ width: 0 }} animate={{ width: "60%" }} transition={{ duration: 1, delay: 0.4 }}
-                        className="h-full bg-blue-400 rounded-full" 
-                    />
-                </div>
-            </div>
-        </div>
+        <button
+            onClick={onClick}
+            aria-label={t(`${page.id}.title`)}
+            aria-current={isActive ? 'true' : 'false'}
+            className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
+                isActive
+                    ? "text-white"
+                    : "text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
+            }`}
+        >
+            {isActive && (
+                <motion.div
+                    layoutId="activeTabBackground"
+                    className="absolute inset-0 bg-[#1e5eff] dark:bg-[#ff2d55] shadow-lg shadow-[#1e5eff]/25 dark:shadow-[#ff2d55]/25"
+                    initial={false}
+                    transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                    style={{ borderRadius: 9999 }}
+                />
+            )}
+            <span className="relative z-10 flex items-center gap-2">
+                <page.icon size={18} className="md:w-4 md:h-4" aria-hidden="true" />
+                <span className="hidden md:inline">{t(`${page.id}.title`)}</span>
+            </span>
+        </button>
     )
 }
 
-function ShopVisual() {
+export function FeaturesSection() {
+    const [activeTab, setActiveTab] = useState("qa")
+    const [isMobile, setIsMobile] = useState(false)
+    const activePage = pages.find(p => p.id === activeTab) || pages[0]
+
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768)
+        checkMobile()
+        window.addEventListener('resize', checkMobile)
+        return () => window.removeEventListener('resize', checkMobile)
+    }, [])
+
     return (
-        <div className="flex gap-4">
-            {[1, 2].map((i) => (
-                <motion.div 
-                    key={i}
-                    initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.1 }}
-                    className="w-36 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 p-3 shadow-sm hover:-translate-y-1 transition-transform relative"
-                >
-                    <div className="w-full aspect-square bg-gray-100 dark:bg-white/5 rounded-lg mb-3 flex items-center justify-center">
-                        <ShoppingBag className="w-6 h-6 text-gray-300" />
+        <section className="relative w-full py-20 lg:py-28 overflow-hidden bg-gray-50 dark:bg-transparent">
+            <DecorativeDots />
+            
+            <div className="absolute inset-0 -z-10 pointer-events-none" aria-hidden="true">
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl h-[400px] rounded-full blur-[150px] opacity-20 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20" />
+            </div>
+
+            <div className="relative container-main z-10 flex flex-col items-center">
+                <SectionHeading 
+                    title={t("title")}
+                    highlight={t("titleHighlight")}
+                    subtitle={t("subtitle")}
+                />
+
+                <div className="w-full max-w-md mx-auto aspect-square relative mb-4">
+                    <OrbitRings />
+                    <ConnectingLines />
+                    
+                    <div className="absolute inset-0 flex items-center justify-center z-30 pointer-events-none">
+                        <AnimatePresence mode="wait">
+                            <CentralIcon key={activeTab} page={activePage} />
+                        </AnimatePresence>
                     </div>
-                    <div className="h-2 w-3/4 bg-gray-200 dark:bg-white/20 rounded mb-2" />
-                    <div className="flex justify-between items-center mt-2">
-                         <div className="h-3 w-10 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded" />
-                         <div className="text-[10px] font-bold text-gray-400">$25</div>
+
+                    <AnimatePresence mode="wait">
+                        <motion.div
+                            key={activeTab}
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            className="absolute inset-0"
+                        >
+                            {activePage.features.map((feature, i) => (
+                                <FeatureBubble
+                                    key={feature.label}
+                                    feature={feature}
+                                    index={i}
+                                    href={activePage.href}
+                                    isMobile={isMobile}
+                                />
+                            ))}
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+
+                <div className="flex justify-center mb-8">
+                    <div className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full border border-gray-200 dark:border-white/10 bg-white/20 dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none">
+                        {pages.map((page) => (
+                            <TabButton
+                                key={page.id}
+                                page={page}
+                                isActive={activeTab === page.id}
+                                onClick={() => setActiveTab(page.id)}
+                            />
+                        ))}
                     </div>
-                </motion.div>
-            ))}
-        </div>
+                </div>
+
+                <div className="max-w-2xl mx-auto text-center relative h-20 md:h-16 w-full mb-4">
+                    <AnimatePresence mode="wait">
+                        <motion.div
+                            key={activeTab}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.2 }}
+                            className="absolute w-full top-0 left-0 flex justify-center"
+                        >
+                            <p className="text-base md:text-lg text-gray-600 dark:text-gray-300 leading-relaxed font-light">
+                                {t(`${activeTab}.description`)}
+                            </p>
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+            </div>
+        </section>
     )
 }
\ No newline at end of file
diff --git a/frontend/components/about/HeroSection.tsx b/frontend/components/about/HeroSection.tsx
index d3765e89..00a0d81b 100644
--- a/frontend/components/about/HeroSection.tsx
+++ b/frontend/components/about/HeroSection.tsx
@@ -29,7 +29,7 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
 
         <div className="flex flex-col items-center text-center xl:col-span-6">
             
-            <div className="scale-90 md:scale-100 mb-6">
+            <div className="scale-90 md:scale-100 mb-6" aria-hidden="true">
                 <InteractiveGame />
             </div>
 
@@ -37,10 +37,10 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               transition={{ duration: 0.6 }}
-              className="mt-4 mb-8 text-4xl font-black tracking-tight text-gray-900 dark:text-white md:text-6xl lg:text-7xl max-w-5xl text-balance leading-[1.1]"
+              className="mt-4 mb-8 text-4xl font-black tracking-tight text-gray-900 dark:text-white md:text-5xl lg:text-6xl xl:text-7xl max-w-5xl text-balance leading-[1.1]"
             >
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">
-                Debug your skills
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
+                Debug your skills <br/>
               </span> before the recruiter does.
             </motion.h1>
             
@@ -48,7 +48,7 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               transition={{ duration: 0.6, delay: 0.1 }}
-              className="max-w-3xl text-base font-light leading-relaxed text-gray-600 text-balance dark:text-gray-400 md:text-xl mb-10"
+              className="max-w-3xl text-sm font-light leading-relaxed text-gray-700 text-balance dark:text-gray-300 md:text-lg lg:text-xl mb-10"
             >
               Stop guessing. We decoded the chaotic interview process into a structured roadmap. <strong className="font-medium text-gray-900 dark:text-gray-200">Compile your scattered knowledge</strong> into a production-ready skillset and land that offer.
             </motion.p>
@@ -70,7 +70,7 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
                 transition={{ duration: 2, repeat: Infinity }}
                 className="mt-16 text-gray-400 dark:text-gray-600 hidden xl:block"
             >
-                <ArrowDown className="h-6 w-6" />
+                <ArrowDown className="h-6 w-6" aria-hidden="true" />
             </motion.div>
         </div>
 
@@ -92,9 +92,9 @@ function GlassWidget({ icon: Icon, color, bg, label, value }: any) {
     return (
         <motion.div 
             whileHover={{ y: -5 }}
-            className="flex min-w-[220px] items-center gap-4 rounded-2xl border border-gray-100 bg-white/60 p-5 shadow-xl backdrop-blur-xl transition-all hover:border-[#1e5eff]/30 dark:border-white/5 dark:bg-[#111]/60 dark:hover:border-[#ff2d55]/30 dark:shadow-black/50"
+            className="flex min-w-[220px] items-center gap-4 rounded-2xl border border-gray-100 bg-white/10 p-5 shadow-xl backdrop-blur-xl transition-all hover:border-[#1e5eff]/30 dark:border-white/5 dark:bg-neutral-900/10 dark:hover:border-[#ff2d55]/30 dark:shadow-black/50"
         >
-            <div className={`flex h-12 w-12 items-center justify-center rounded-xl ${bg} ${color}`}>
+            <div className={`flex h-12 w-12 items-center justify-center rounded-xl ${bg} ${color}`} aria-hidden="true">
                 <Icon size={24} />
             </div>
             <div className="flex flex-col items-start">
@@ -107,8 +107,8 @@ function GlassWidget({ icon: Icon, color, bg, label, value }: any) {
 
 function MobileStatItem({ icon: Icon, color, bg, label, value }: any) {
     return (
-        <div className="flex items-center gap-3 rounded-xl border border-gray-100 bg-white/60 p-3 shadow-sm backdrop-blur-xl dark:border-white/5 dark:bg-[#111]/60">
-            <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${bg} ${color}`}>
+        <div className="flex items-center gap-3 rounded-xl border border-gray-100 bg-white/10 p-3 shadow-sm backdrop-blur-xl dark:border-white/5 dark:bg-neutral-900/10">
+            <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${bg} ${color}`} aria-hidden="true">
                 <Icon size={20} />
             </div>
             <div className="flex flex-col items-start overflow-hidden">
diff --git a/frontend/components/about/PricingSection.tsx b/frontend/components/about/PricingSection.tsx
index 15b74862..f74862b7 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -1,53 +1,59 @@
 "use client"
-
+import { useState } from "react"
 import { motion } from "framer-motion"
 import { Check, Heart, X, Sparkles, Server, ArrowRight } from "lucide-react"
+import Link from "next/link"
 import type { Sponsor } from "@/lib/about/github-sponsors" 
 import { SponsorsWall } from "./SponsorsWall"
-import Link from "next/link"
+import { GradientBadge } from "@/components/ui/gradient-badge"
+import { SectionHeading } from "@/components/ui/section-heading"
+import { ParticleCanvas } from "@/components/ui/particle-canvas"
+import { cn } from "@/lib/utils"
 interface PricingSectionProps {
   sponsors?: Sponsor[]
 }
 
 export function PricingSection({ sponsors = [] }: PricingSectionProps) {
+    const [activeShape, setActiveShape] = useState<"brackets" | "heart" | null>(null)
+
     return (
-        <section className="w-full py-24 relative overflow-hidden bg-gray-50 dark:bg-transparent">
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[100px] rounded-full pointer-events-none" />
+        <section className="w-full py-20 lg:py-28 relative overflow-hidden bg-gray-50 dark:bg-transparent" aria-labelledby="pricing-heading">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[100px] rounded-full pointer-events-none" aria-hidden="true" />
+            
+            <div className="absolute inset-0 pointer-events-none z-0">
+                <ParticleCanvas activeShape={activeShape} className="w-full h-full" />
+            </div>
 
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+            <div className="container-main relative z-10">
                 <div className="text-center mb-16">
                     <motion.div 
                         initial={{ opacity: 0, y: 10 }} 
                         whileInView={{ opacity: 1, y: 0 }}
-                        className="inline-flex items-center gap-2 px-3 py-1 rounded-full 
-                            border border-[#1e5eff]/20 dark:border-[#ff2d55]/20 
-                            bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 
-                            text-[#1e5eff] dark:text-[#ff2d55] 
-                            text-[10px] font-bold uppercase tracking-widest mb-4"
                     >
-                        <Sparkles size={12} /> No Hidden Fees
+                        <GradientBadge icon={Sparkles} text="No Hidden Fees" className="mb-4" />
                     </motion.div>
-                    <h2 className="text-4xl md:text-5xl font-black tracking-tight text-gray-900 dark:text-white mb-6">
-                        Invest in your brain, <br />
-                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-gray-500 to-gray-700 dark:from-neutral-400 dark:to-neutral-600">not our subscriptions.</span>
-                    </h2>
-                    <p className="text-gray-700 dark:text-neutral-400 max-w-2xl mx-auto text-lg font-light">
-                        We believe knowledge should be accessible. So we don&apos;t sell courses. But servers heat up and coffee runs out. The choice is yours.
-                    </p>
+                    
+                    <SectionHeading 
+                        title="Invest in your brain,"
+                        highlight="not our subscriptions."
+                        subtitle="We believe knowledge should be accessible. So we don't sell courses. But servers heat up and coffee runs out. The choice is yours."
+                    />
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-24">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12 max-w-4xl mx-auto mb-6">
                     
                     <motion.div 
                         whileHover={{ y: -5 }}
-                        className="flex flex-col p-8 rounded-3xl border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50 backdrop-blur-sm shadow-sm"
+                        onMouseEnter={() => setActiveShape("brackets")}
+                        onMouseLeave={() => setActiveShape(null)}
+                        className="flex flex-col p-8 lg:p-10 rounded-3xl border border-gray-200 dark:border-neutral-800 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md shadow-sm relative z-10"
                     >
                         <div className="mb-6">
                             <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Junior Engineer</h3>
                             <p className="text-sm text-gray-600 dark:text-neutral-400">For those who want an offer, not expenses.</p>
                         </div>
                         <div className="mb-8">
-                            <span className="text-5xl font-black text-gray-900 dark:text-white">$0</span>
+                            <span className="text-4xl lg:text-5xl font-black text-gray-900 dark:text-white">$0</span>
                             <span className="text-gray-500 dark:text-neutral-500 font-mono text-sm ml-2">/ forever</span>
                         </div>
                         
@@ -59,14 +65,14 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                                 "0% Guilt Trip",
                             ].map((item) => (
                                 <li key={item} className="flex items-center gap-3 text-sm text-gray-700 dark:text-neutral-300">
-                                    <div className="p-1 rounded-full bg-green-500/10 text-green-500">
+                                    <div className="p-1 rounded-full bg-green-500/10 text-green-500" aria-hidden="true">
                                         <Check size={12} />
                                     </div>
                                     {item}
                                 </li>
                             ))}
                              <li className="flex items-center gap-3 text-sm text-gray-400 dark:text-neutral-500 line-through decoration-gray-300 dark:decoration-neutral-700">
-                                    <div className="p-1 rounded-full bg-gray-100 dark:bg-neutral-800 text-gray-400 dark:text-neutral-600">
+                                    <div className="p-1 rounded-full bg-gray-100 dark:bg-neutral-800 text-gray-400 dark:text-neutral-600" aria-hidden="true">
                                         <X size={12} />
                                     </div>
                                     Personal Yacht
@@ -80,9 +86,11 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
 
                     <motion.div 
                         whileHover={{ y: -5 }}
-                        className="relative flex flex-col p-8 rounded-3xl overflow-hidden backdrop-blur-sm
+                        onMouseEnter={() => setActiveShape("heart")}
+                        onMouseLeave={() => setActiveShape(null)}
+                        className="relative flex flex-col p-8 lg:p-10 rounded-3xl overflow-hidden backdrop-blur-md z-10
                             border border-[#1e5eff]/30 dark:border-[#ff2d55]/30
-                            bg-gradient-to-b from-[#1e5eff]/5 to-white dark:from-[#ff2d55]/10 dark:to-neutral-900/50"
+                            bg-gradient-to-b from-[#1e5eff]/5 to-white/10 dark:from-[#ff2d55]/10 dark:to-neutral-900/10"
                     >
                         <div className="absolute top-0 right-0 px-3 py-1 rounded-bl-xl uppercase tracking-widest text-[10px] font-bold text-white
                             bg-[#1e5eff] dark:bg-[#ff2d55]"
@@ -93,31 +101,31 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                         <div className="mb-6">
                             <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                                 Open Source Hero 
-                                <Heart size={18} className="fill-[#1e5eff] text-[#1e5eff] dark:fill-[#ff2d55] dark:text-[#ff2d55]" />
+                                <Heart size={18} className="fill-[#1e5eff] text-[#1e5eff] dark:fill-[#ff2d55] dark:text-[#ff2d55]" aria-label="Supporter" />
                             </h3>
                             <p className="text-sm text-neutral-500 dark:text-neutral-400">For those who already landed an offer thanks to us.</p>
                         </div>
                         <div className="mb-8">
-                            <span className="text-5xl font-black text-[#1e5eff] dark:text-[#ff2d55]">$$$</span>
+                            <span className="text-4xl lg:text-5xl font-black text-[#1e5eff] dark:text-[#ff2d55]">$$$</span>
                             <span className="text-neutral-500 font-mono text-sm ml-2">/ karma points</span>
                         </div>
                         
                         <ul className="space-y-4 mb-8 flex-1">
                             {[
                                 "Keep Servers Alive",
-                                "Buy Coffee for Mentors",
+                                "Buy Coffee for Developers",
                                 "Profile Badge (Big Flex)",
                                 "Warm Fuzzy Feeling",
                             ].map((item) => (
                                 <li key={item} className="flex items-center gap-3 text-sm text-gray-900 dark:text-white font-medium">
-                                    <div className="p-1 rounded-full bg-[#1e5eff]/20 text-[#1e5eff] dark:bg-[#ff2d55]/20 dark:text-[#ff2d55]">
+                                    <div className="p-1 rounded-full bg-[#1e5eff]/20 text-[#1e5eff] dark:bg-[#ff2d55]/20 dark:text-[#ff2d55]" aria-hidden="true">
                                         <Sparkles size={12} />
                                     </div>
                                     {item}
                                 </li>
                             ))}
                             <li className="flex items-center gap-3 text-sm text-gray-600 dark:text-neutral-400 italic">
-                                    <div className="p-1 rounded-full bg-gray-200 dark:bg-neutral-800 text-gray-500 dark:text-neutral-500">
+                                    <div className="p-1 rounded-full bg-gray-200 dark:bg-neutral-800 text-gray-500 dark:text-neutral-500" aria-hidden="true">
                                         <Server size={12} />
                                     </div>
                                     We actually pay for Drizzle
@@ -132,13 +140,13 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                                 bg-[#1e5eff] hover:bg-[#1e5eff]/90 shadow-[0_0_20px_rgba(30,94,255,0.3)] hover:shadow-[0_0_30px_rgba(30,94,255,0.5)]
                                 dark:bg-[#ff2d55] dark:hover:bg-[#ff2d55]/90 dark:shadow-[0_0_20px_rgba(255,45,85,0.3)] dark:hover:shadow-[0_0_30px_rgba(255,45,85,0.5)]"
                         >
-                            Support the Project <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform"/>
+                            Support the Project <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" aria-hidden="true" />
                         </Link>
                     </motion.div>
 
                 </div>
                 
-                <p className="text-center text-gray-500 dark:text-neutral-600 text-xs mb-12 font-mono">
+                <p className="text-center text-gray-400 dark:text-neutral-600 text-[10px] mb-16 font-mono max-w-lg mx-auto leading-relaxed">
                     *No developers were harmed in the making of this pricing table. Only caffeine levels were impacted.
                 </p>
 
diff --git a/frontend/components/about/SponsorsWall.tsx b/frontend/components/about/SponsorsWall.tsx
index 07415439..c430e067 100644
--- a/frontend/components/about/SponsorsWall.tsx
+++ b/frontend/components/about/SponsorsWall.tsx
@@ -6,6 +6,7 @@ import Link from "next/link"
 import { Plus, Crown, Sparkles } from "lucide-react"
 import { cn } from "@/lib/utils"
 import type { Sponsor } from "@/lib/about/github-sponsors"
+import { GradientBadge } from "@/components/ui/gradient-badge"
 
 interface SponsorsWallProps {
   sponsors?: Sponsor[]
@@ -18,18 +19,15 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
 
   return (
     <div className="w-full mt-16 flex flex-col items-center">
-      <div className="flex items-center gap-2 mb-4 opacity-60">
-        <Sparkles size={10} className="text-[#1e5eff] dark:text-[#ff2d55]" />
-        <span className="text-[10px] font-mono uppercase tracking-widest text-gray-500">
-           Latest Contributors
-        </span>
+      <div className="mb-4 opacity-100">
+          <GradientBadge icon={Sparkles} text="Latest Contributors" />
       </div>
 
       <motion.div 
         initial={{ opacity: 0, y: 10 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
-        className="group relative flex items-center p-2 rounded-full border border-gray-200 dark:border-white/10 bg-white/60 dark:bg-[#0a0a0a]/60 backdrop-blur-xl shadow-sm hover:shadow-lg hover:border-[#1e5eff]/20 dark:hover:border-[#ff2d55]/20 transition-all duration-300"
+        className="group relative flex items-center p-2 rounded-full border border-gray-200 dark:border-white/10 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-xl shadow-sm hover:shadow-lg hover:border-[#1e5eff]/20 dark:hover:border-[#ff2d55]/20 transition-all duration-300"
       >
         <div className="flex -space-x-3 md:-space-x-4 pl-2">
             {displaySponsors.map((sponsor) => (
@@ -48,9 +46,10 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
         <Link 
             href="https://github.com/sponsors/DevLoversTeam" 
             target="_blank"
+            aria-label="Become a sponsor to claim your spot"
             className="relative flex items-center justify-center w-10 h-10 rounded-full border-2 border-dashed border-gray-300 dark:border-white/20 hover:border-[#1e5eff] dark:hover:border-[#ff2d55] bg-transparent hover:bg-[#1e5eff]/5 dark:hover:bg-[#ff2d55]/5 transition-all group/cta"
         >
-            <Plus size={16} className="text-gray-400 group-hover/cta:text-[#1e5eff] dark:group-hover/cta:text-[#ff2d55] transition-colors" />
+            <Plus size={16} className="text-gray-400 group-hover/cta:text-[#1e5eff] dark:group-hover/cta:text-[#ff2d55] transition-colors" aria-hidden="true" />
             
             <div className="absolute bottom-full mb-3 left-1/2 -translate-x-1/2 px-2 py-1 bg-[#1e5eff] dark:bg-[#ff2d55] text-white text-[10px] font-bold rounded opacity-0 group-hover/cta:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">
                 Your Spot
@@ -64,7 +63,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
 
       </motion.div>
 
-      <p className="mt-4 text-[10px] text-gray-400 font-mono">
+      <p className="mt-4 text-[10px] text-gray-500 dark:text-neutral-500 font-mono">
          100% of funds go to server costs & coffee
       </p>
 
@@ -91,7 +90,7 @@ function SponsorItem({ sponsor }: { sponsor: Sponsor }) {
             
             {sponsor.tierColor === 'gold' && (
                  <div className="absolute inset-0 bg-black/10 flex items-center justify-center opacity-0 group-hover/avatar:opacity-100 transition-opacity">
-                    <Crown size={12} className="text-white fill-white" />
+                    <Crown size={12} className="text-white fill-white" aria-label="Gold Tier Sponsor" />
                  </div>
             )}
         </div>
diff --git a/frontend/components/about/TopicsSection.tsx b/frontend/components/about/TopicsSection.tsx
index 48b70326..208b0867 100644
--- a/frontend/components/about/TopicsSection.tsx
+++ b/frontend/components/about/TopicsSection.tsx
@@ -8,8 +8,8 @@ import Link from "next/link"
 
 export function TopicsSection() {
     return (
-        <section id="topics" className="w-full py-24 bg-gray-50 dark:bg-transparent">
-            <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
+        <section id="topics" className="w-full py-20 lg:py-28 bg-gray-50 dark:bg-transparent">
+            <div className="container-main">
                     
                     <div className="mb-16 md:flex md:justify-between md:items-end">
                         <div className="max-w-2xl">
@@ -20,9 +20,9 @@ export function TopicsSection() {
                             >
                                 / The Ecosystem
                             </motion.div>
-                            <h2 className="text-4xl md:text-5xl font-black text-black dark:text-white tracking-tighter">
+                            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-black dark:text-white tracking-tighter">
                                 Master your <br />
-                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">
+                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
                                     entire stack
                                 </span>
                             </h2>
diff --git a/frontend/components/ui/gradient-badge.tsx b/frontend/components/ui/gradient-badge.tsx
new file mode 100644
index 00000000..f1ba3777
--- /dev/null
+++ b/frontend/components/ui/gradient-badge.tsx
@@ -0,0 +1,22 @@
+import { LucideIcon } from "lucide-react"
+
+interface GradientBadgeProps {
+  icon?: LucideIcon
+  text: string
+  className?: string
+}
+
+export function GradientBadge({ icon: Icon, text, className }: GradientBadgeProps) {
+  return (
+    <div 
+      className={`inline-flex items-center gap-2 px-3 py-1 rounded-full 
+        border border-[#1e5eff]/20 dark:border-[#ff2d55]/20 
+        bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 
+        text-[#1e5eff] dark:text-[#ff2d55] 
+        text-[10px] font-bold uppercase tracking-widest ${className}`}
+    >
+      {Icon && <Icon size={12} aria-hidden="true" />}
+      {text}
+    </div>
+  )
+}
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
new file mode 100644
index 00000000..5375c31b
--- /dev/null
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -0,0 +1,348 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+interface ParticleCanvasProps {
+  activeShape: "brackets" | "heart" | null
+  className?: string
+}
+
+interface Point {
+  x: number
+  y: number
+  z: number
+  vx: number
+  vy: number
+  vz: number
+  floatX: number
+  floatY: number
+  floatVx: number
+  floatVy: number
+}
+
+interface Point3D {
+  x: number
+  y: number
+  z: number
+}
+
+// Generate Code Brackets {} shape
+function generateBracketsPoints(count: number): Point3D[] {
+  const points: Point3D[] = []
+  const halfCount = Math.floor(count / 2)
+
+  const generateBrace = (flipX: boolean) => {
+    for (let i = 0; i < halfCount; i++) {
+      const t = (i / halfCount) * Math.PI * 2 - Math.PI
+
+      let x: number
+      let y: number
+
+      if (t < -Math.PI / 2) {
+        const localT = (t + Math.PI) / (Math.PI / 2)
+        x = 0.3 * Math.cos(localT * Math.PI / 2)
+        y = -0.8 + 0.3 * Math.sin(localT * Math.PI / 2)
+      } else if (t < 0) {
+        const localT = (t + Math.PI / 2) / (Math.PI / 2)
+        x = 0.3 - 0.5 * localT
+        y = -0.5 + 0.5 * localT
+      } else if (t < Math.PI / 2) {
+        const localT = t / (Math.PI / 2)
+        x = -0.2 + 0.5 * localT
+        y = 0.5 * localT
+      } else {
+        const localT = (t - Math.PI / 2) / (Math.PI / 2)
+        x = 0.3 * Math.cos((1 - localT) * Math.PI / 2)
+        y = 0.5 + 0.3 * (1 - Math.cos(localT * Math.PI / 2))
+      }
+
+      const z = (Math.random() - 0.5) * 0.3
+      const finalX = flipX ? -x + 0.6 : x - 0.6
+
+      points.push({
+        x: finalX + (Math.random() - 0.5) * 0.05,
+        y: y + (Math.random() - 0.5) * 0.05,
+        z: z,
+      })
+    }
+  }
+
+  generateBrace(false)
+  generateBrace(true)
+  return points
+}
+
+// Generate 3D Heart shape
+function generateHeartPoints(count: number): Point3D[] {
+  const points: Point3D[] = []
+  const layers = 8
+  const pointsPerLayer = Math.floor(count / layers)
+
+  for (let layer = 0; layer < layers; layer++) {
+    const depthRatio = layer / (layers - 1)
+    const z = (depthRatio - 0.5) * 0.6
+    const layerScale = 1 - Math.abs(depthRatio - 0.5) * 0.3
+
+    for (let i = 0; i < pointsPerLayer; i++) {
+      const t = (i / pointsPerLayer) * Math.PI * 2
+      const x = 16 * Math.pow(Math.sin(t), 3)
+      const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
+
+      points.push({
+        x: (x / 17) * layerScale + (Math.random() - 0.5) * 0.08,
+        y: (y / 17) * layerScale + (Math.random() - 0.5) * 0.08,
+        z: z + (Math.random() - 0.5) * 0.08,
+      })
+    }
+  }
+  return points
+}
+
+const SHAPE_POINTS_BRACKETS = generateBracketsPoints(800)
+const SHAPE_POINTS_HEART = generateHeartPoints(800)
+
+// Smooth ease in-out
+function easeInOutCubic(t: number): number {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+}
+
+export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const particles = useRef<Point[]>([])
+  const animationFrameId = useRef<number | undefined>(undefined)
+  const timeRef = useRef(0)
+
+  // Simple transition: 0 = floating, 1 = shape
+  const transitionRef = useRef(0)
+  const targetTransitionRef = useRef(0)
+  const prevShapeRef = useRef<"brackets" | "heart" | null>(null)
+  const justLeftShapeRef = useRef(false)
+
+  const getThemeColors = () => {
+    const isDark = document.documentElement.classList.contains("dark")
+    return {
+      isDark,
+      r: isDark ? 255 : 30,
+      g: isDark ? 45 : 94,
+      b: isDark ? 85 : 255,
+    }
+  }
+
+  useEffect(() => {
+    const wasInShape = targetTransitionRef.current === 1
+    targetTransitionRef.current = activeShape ? 1 : 0
+    if (activeShape) {
+      prevShapeRef.current = activeShape
+      justLeftShapeRef.current = false
+    } else if (wasInShape) {
+      justLeftShapeRef.current = true
+      // Gentle nudge instead of hard push
+      particles.current.forEach(p => {
+        p.vx *= 0.5
+        p.vy *= 0.5
+      })
+    }
+  }, [activeShape])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const resizeCanvas = () => {
+      canvas.width = canvas.parentElement?.offsetWidth || window.innerWidth
+      canvas.height = canvas.parentElement?.offsetHeight || window.innerHeight
+      initParticles(canvas.width, canvas.height)
+    }
+
+    const initParticles = (width: number, height: number) => {
+      const count = 800
+      particles.current = []
+
+      for (let i = 0; i < count; i++) {
+        const floatX = Math.random() * width
+        const floatY = Math.random() * height
+        
+        const speed = 0.2 + Math.random() * 0.3
+        const angle = Math.random() * Math.PI * 2
+
+        particles.current.push({
+          x: floatX,
+          y: floatY,
+          z: 0,
+          vx: 0,
+          vy: 0,
+          vz: 0,
+          floatX,
+          floatY,
+          floatVx: Math.cos(angle) * speed,
+          floatVy: Math.sin(angle) * speed,
+        })
+      }
+    }
+
+    const draw = () => {
+      if (!canvas || !ctx) return
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      timeRef.current += 0.016
+
+      // Linear transition - no initial freeze
+      const inSpeed = 0.012
+      const outSpeed = 0.006 // Slower out
+      if (targetTransitionRef.current > transitionRef.current) {
+        // Going IN
+        transitionRef.current = Math.min(targetTransitionRef.current, transitionRef.current + inSpeed)
+      } else if (targetTransitionRef.current < transitionRef.current) {
+        // Going OUT - slow and smooth
+        transitionRef.current = Math.max(targetTransitionRef.current, transitionRef.current - outSpeed)
+      }
+
+      // Apply smooth easing
+      const rawProgress = Math.max(0, Math.min(1, transitionRef.current))
+      const progress = easeInOutCubic(rawProgress)
+
+      const { r, g, b, isDark } = getThemeColors()
+
+      const isMobileView = canvas.width < 768
+
+      const currentShape = activeShape || prevShapeRef.current
+      const shapePoints =
+        currentShape === "brackets"
+          ? SHAPE_POINTS_BRACKETS
+          : currentShape === "heart"
+            ? SHAPE_POINTS_HEART
+            : null
+
+      // 3D rotation - always moving
+      const angle = timeRef.current * 0.4
+      const cos = Math.cos(angle)
+      const sin = Math.sin(angle)
+
+      particles.current.forEach((p, i) => {
+        // Always update floating positions
+        p.floatX += p.floatVx
+        p.floatY += p.floatVy
+
+        if (p.floatX < 0 || p.floatX > canvas.width) {
+          p.floatVx *= -1
+          p.floatX = Math.max(0, Math.min(canvas.width, p.floatX))
+        }
+        if (p.floatY < 0 || p.floatY > canvas.height) {
+          p.floatVy *= -1
+          p.floatY = Math.max(0, Math.min(canvas.height, p.floatY))
+        }
+
+        // Calculate shape position
+        let shapeX = p.floatX
+        let shapeY = p.floatY
+
+        if (isMobileView) {
+          // Mobile: show both shapes - first half brackets, second half heart
+          const halfCount = Math.floor(particles.current.length / 2)
+          const isFirstHalf = i < halfCount
+          const localIndex = isFirstHalf ? i : i - halfCount
+          const mobileShapePoints = isFirstHalf ? SHAPE_POINTS_BRACKETS : SHAPE_POINTS_HEART
+          const shapePoint = mobileShapePoints[localIndex % mobileShapePoints.length]
+          
+          const rotatedX = shapePoint.x * cos - shapePoint.z * sin
+          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos
+          const rotatedY = shapePoint.y
+          const perspective = 3
+          const scale = perspective / (perspective + rotatedZ)
+          const shapeScale = Math.min(canvas.width, canvas.height) * 0.7
+          
+          // Position: centered on each card
+          const centerX = canvas.width / 2
+          const centerY = isFirstHalf ? canvas.height * 0.32 : canvas.height * 0.68
+          
+          shapeX = centerX + rotatedX * shapeScale * scale
+          shapeY = centerY + rotatedY * shapeScale * scale
+        } else if (shapePoints) {
+          // Desktop: original hover behavior
+          let centerX = canvas.width / 2
+          const centerY = canvas.height / 2
+          if (currentShape === "brackets") centerX = canvas.width * 0.25
+          if (currentShape === "heart") centerX = canvas.width * 0.75
+          
+          const shapePoint = shapePoints[i % shapePoints.length]
+          const rotatedX = shapePoint.x * cos - shapePoint.z * sin
+          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos
+          const rotatedY = shapePoint.y
+          const perspective = 3
+          const scale = perspective / (perspective + rotatedZ)
+          const shapeScale = Math.min(canvas.width, canvas.height) * 0.35
+          shapeX = centerX + rotatedX * shapeScale * scale
+          shapeY = centerY + rotatedY * shapeScale * scale
+        }
+
+        // Target position - on mobile always full shape, on desktop based on hover progress
+        const effectiveProgress = isMobileView ? 1 : progress
+        const targetX = p.floatX + (shapeX - p.floatX) * effectiveProgress
+        const targetY = p.floatY + (shapeY - p.floatY) * effectiveProgress
+
+        // Smooth spring physics - gentle force, high damping
+        const springForce = 0.04 // Gentle spring
+        const damping = 0.92 // High damping for smooth motion
+        
+        // Add spring force toward target
+        p.vx += (targetX - p.x) * springForce
+        p.vy += (targetY - p.y) * springForce
+        
+        // Apply damping
+        p.vx *= damping
+        p.vy *= damping
+        
+        // Update position
+        p.x += p.vx
+        p.y += p.vy
+
+        // Alpha - on mobile always visible, on desktop based on progress
+        const alpha = isMobileView ? 0.3 : (0.15 + 0.45 * progress)
+
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`
+        ctx.fill()
+      })
+
+      // Connecting lines when in shape
+      if (progress > 0.5 && shapePoints) {
+        const lineAlpha = (progress - 0.5) * 0.2
+        ctx.globalAlpha = lineAlpha
+        ctx.lineWidth = 0.5
+        ctx.strokeStyle = isDark ? "#ff2d55" : "#1e5eff"
+        ctx.beginPath()
+
+        for (let i = 0; i < particles.current.length; i += 4) {
+          const p1 = particles.current[i]
+          for (let j = 1; j <= 4; j++) {
+            const p2 = particles.current[(i + j) % particles.current.length]
+            const distSq = (p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2
+            if (distSq < 35 * 35) {
+              ctx.moveTo(p1.x, p1.y)
+              ctx.lineTo(p2.x, p2.y)
+            }
+          }
+        }
+        ctx.stroke()
+        ctx.globalAlpha = 1.0
+      }
+
+      animationFrameId.current = requestAnimationFrame(draw)
+    }
+
+    resizeCanvas()
+    window.addEventListener("resize", resizeCanvas)
+    draw()
+
+    return () => {
+      window.removeEventListener("resize", resizeCanvas)
+      if (animationFrameId.current) cancelAnimationFrame(animationFrameId.current)
+    }
+  }, [activeShape])
+
+  return <canvas ref={canvasRef} className={className} />
+}
diff --git a/frontend/components/ui/section-heading.tsx b/frontend/components/ui/section-heading.tsx
new file mode 100644
index 00000000..3d10598c
--- /dev/null
+++ b/frontend/components/ui/section-heading.tsx
@@ -0,0 +1,25 @@
+interface SectionHeadingProps {
+  title: string
+  highlight?: string
+  subtitle?: string
+  align?: "left" | "center"
+  className?: string
+}
+
+export function SectionHeading({ title, highlight, subtitle, align = "center", className }: SectionHeadingProps) {
+  return (
+    <div className={`mb-12 ${align === "center" ? "text-center mx-auto" : ""} max-w-3xl ${className}`}>
+      <h2 className="text-4xl md:text-5xl lg:text-6xl font-black mb-6 tracking-tight text-gray-900 dark:text-white leading-[1.1]">
+        {title} 
+        {highlight && (
+          <> <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] via-[#1e5eff]/70 to-[#1e5eff] dark:from-[#ff2d55] dark:via-[#ff2d55]/70 dark:to-[#ff2d55] bg-[length:200%_auto] animate-gradient">{highlight}</span></>
+        )}
+      </h2>
+      {subtitle && (
+        <p className="text-lg md:text-xl text-gray-700 dark:text-neutral-300 font-light leading-relaxed max-w-2xl mx-auto">
+          {subtitle}
+        </p>
+      )}
+    </div>
+  )
+}

From fc3d358e8c5f762ebe30358676b39f815fc5ae13 Mon Sep 17 00:00:00 2001
From: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Date: Wed, 28 Jan 2026 16:20:47 +0200
Subject: [PATCH 2/7] fix(review): address accessibility, security, and
 performance feedback

---
 frontend/app/globals.css                      |  9 +++++
 .../components/about/CommunitySection.tsx     |  2 ++
 frontend/components/about/FeaturesSection.tsx |  2 +-
 frontend/components/about/HeroSection.tsx     |  2 +-
 frontend/components/about/PricingSection.tsx  |  4 +++
 frontend/components/about/SponsorsWall.tsx    |  3 +-
 frontend/components/ui/gradient-badge.tsx     |  2 +-
 frontend/components/ui/particle-canvas.tsx    |  6 ++--
 frontend/components/ui/section-heading.tsx    |  2 +-
 frontend/package-lock.json                    | 35 ++++++-------------
 10 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index c789b40e..702d39a7 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -458,3 +458,12 @@
 .scrollbar-hide::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-float,
+  .animate-spin-slow,
+  .animate-spin-slower,
+  .animate-dash-flow {
+    animation: none !important;
+  }
+}
diff --git a/frontend/components/about/CommunitySection.tsx b/frontend/components/about/CommunitySection.tsx
index dd37aceb..bd402a44 100644
--- a/frontend/components/about/CommunitySection.tsx
+++ b/frontend/components/about/CommunitySection.tsx
@@ -49,6 +49,7 @@ export function CommunitySection() {
                     <Link
                         href="https://github.com/DevLoversTeam/devlovers.net/discussions"
                         target="_blank"
+                        rel="noopener noreferrer"
                         className="group inline-flex items-center gap-1.5 px-4 py-2 rounded-full
                             border border-gray-200 dark:border-white/10
                             bg-white/50 dark:bg-white/5
@@ -67,6 +68,7 @@ export function CommunitySection() {
                 <Link
                     href="https://github.com/DevLoversTeam/devlovers.net/discussions"
                     target="_blank"
+                    rel="noopener noreferrer"
                     className="group relative hidden md:inline-flex items-center justify-center gap-4 p-1.5 pl-6 pr-1.5 rounded-full
                     bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10
                     transition-all duration-300 ease-out
diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 38dd2711..898ab194 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -40,7 +40,7 @@ const translations: Record<string, string> = {
     "leaderboard.title": "Leaderboard",
     "leaderboard.description": "Gamify your prep. Earn points for every correct answer, keep your streak alive, and rank up against others.",
     "blog.title": "Blog",
-    "blog.description": "Stay updated. detailed articles on tech trends, coding tutorials, and industry insights to keep you ahead of the curve.",
+    "blog.description": "Stay updated with detailed articles on tech trends, coding tutorials, and industry insights to keep you ahead of the curve.",
     "profile.title": "Analytics",
     "profile.description": "Don't fly blind. Visualize your progress with detailed charts to see exactly which topics you've mastered.",
     "shop.title": "Shop",
diff --git a/frontend/components/about/HeroSection.tsx b/frontend/components/about/HeroSection.tsx
index 00a0d81b..f502daa4 100644
--- a/frontend/components/about/HeroSection.tsx
+++ b/frontend/components/about/HeroSection.tsx
@@ -29,7 +29,7 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
 
         <div className="flex flex-col items-center text-center xl:col-span-6">
             
-            <div className="scale-90 md:scale-100 mb-6" aria-hidden="true">
+            <div className="scale-90 md:scale-100 mb-6">
                 <InteractiveGame />
             </div>
 
diff --git a/frontend/components/about/PricingSection.tsx b/frontend/components/about/PricingSection.tsx
index f74862b7..bc4eda27 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -46,6 +46,8 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                         whileHover={{ y: -5 }}
                         onMouseEnter={() => setActiveShape("brackets")}
                         onMouseLeave={() => setActiveShape(null)}
+                        onFocus={() => setActiveShape("brackets")}
+                        onBlur={() => setActiveShape(null)}
                         className="flex flex-col p-8 lg:p-10 rounded-3xl border border-gray-200 dark:border-neutral-800 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md shadow-sm relative z-10"
                     >
                         <div className="mb-6">
@@ -88,6 +90,8 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                         whileHover={{ y: -5 }}
                         onMouseEnter={() => setActiveShape("heart")}
                         onMouseLeave={() => setActiveShape(null)}
+                        onFocus={() => setActiveShape("heart")}
+                        onBlur={() => setActiveShape(null)}
                         className="relative flex flex-col p-8 lg:p-10 rounded-3xl overflow-hidden backdrop-blur-md z-10
                             border border-[#1e5eff]/30 dark:border-[#ff2d55]/30
                             bg-gradient-to-b from-[#1e5eff]/5 to-white/10 dark:from-[#ff2d55]/10 dark:to-neutral-900/10"
diff --git a/frontend/components/about/SponsorsWall.tsx b/frontend/components/about/SponsorsWall.tsx
index c430e067..6ea620c2 100644
--- a/frontend/components/about/SponsorsWall.tsx
+++ b/frontend/components/about/SponsorsWall.tsx
@@ -46,6 +46,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
         <Link 
             href="https://github.com/sponsors/DevLoversTeam" 
             target="_blank"
+            rel="noopener noreferrer"
             aria-label="Become a sponsor to claim your spot"
             className="relative flex items-center justify-center w-10 h-10 rounded-full border-2 border-dashed border-gray-300 dark:border-white/20 hover:border-[#1e5eff] dark:hover:border-[#ff2d55] bg-transparent hover:bg-[#1e5eff]/5 dark:hover:bg-[#ff2d55]/5 transition-all group/cta"
         >
@@ -57,7 +58,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
             </div>
         </Link>
 
-        <Link href="https://github.com/sponsors/DevLoversTeam" target="_blank" className="hidden sm:block ml-3 mr-2 text-xs font-bold text-gray-500 hover:text-[#1e5eff] dark:hover:text-[#ff2d55] transition-colors">
+        <Link href="https://github.com/sponsors/DevLoversTeam" target="_blank" rel="noopener noreferrer" className="hidden sm:block ml-3 mr-2 text-xs font-bold text-gray-500 hover:text-[#1e5eff] dark:hover:text-[#ff2d55] transition-colors">
             Join the club
         </Link>
 
diff --git a/frontend/components/ui/gradient-badge.tsx b/frontend/components/ui/gradient-badge.tsx
index f1ba3777..8780c377 100644
--- a/frontend/components/ui/gradient-badge.tsx
+++ b/frontend/components/ui/gradient-badge.tsx
@@ -6,7 +6,7 @@ interface GradientBadgeProps {
   className?: string
 }
 
-export function GradientBadge({ icon: Icon, text, className }: GradientBadgeProps) {
+export function GradientBadge({ icon: Icon, text, className = "" }: GradientBadgeProps) {
   return (
     <div 
       className={`inline-flex items-center gap-2 px-3 py-1 rounded-full 
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index 5375c31b..46bbeda3 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -117,6 +117,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
   const targetTransitionRef = useRef(0)
   const prevShapeRef = useRef<"brackets" | "heart" | null>(null)
   const justLeftShapeRef = useRef(false)
+  const activeShapeRef = useRef<"brackets" | "heart" | null>(activeShape)
 
   const getThemeColors = () => {
     const isDark = document.documentElement.classList.contains("dark")
@@ -129,6 +130,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
   }
 
   useEffect(() => {
+    activeShapeRef.current = activeShape
     const wasInShape = targetTransitionRef.current === 1
     targetTransitionRef.current = activeShape ? 1 : 0
     if (activeShape) {
@@ -208,7 +210,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
 
       const isMobileView = canvas.width < 768
 
-      const currentShape = activeShape || prevShapeRef.current
+      const currentShape = activeShapeRef.current || prevShapeRef.current
       const shapePoints =
         currentShape === "brackets"
           ? SHAPE_POINTS_BRACKETS
@@ -342,7 +344,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
       window.removeEventListener("resize", resizeCanvas)
       if (animationFrameId.current) cancelAnimationFrame(animationFrameId.current)
     }
-  }, [activeShape])
+  }, [])
 
   return <canvas ref={canvasRef} className={className} />
 }
diff --git a/frontend/components/ui/section-heading.tsx b/frontend/components/ui/section-heading.tsx
index 3d10598c..c3719324 100644
--- a/frontend/components/ui/section-heading.tsx
+++ b/frontend/components/ui/section-heading.tsx
@@ -6,7 +6,7 @@ interface SectionHeadingProps {
   className?: string
 }
 
-export function SectionHeading({ title, highlight, subtitle, align = "center", className }: SectionHeadingProps) {
+export function SectionHeading({ title, highlight, subtitle, align = "center", className = "" }: SectionHeadingProps) {
   return (
     <div className={`mb-12 ${align === "center" ? "text-center mx-auto" : ""} max-w-3xl ${className}`}>
       <h2 className="text-4xl md:text-5xl lg:text-6xl font-black mb-6 tracking-tight text-gray-900 dark:text-white leading-[1.1]">
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 726b3b98..124f811a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1007,7 +1007,6 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -1325,7 +1324,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1366,7 +1364,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -4724,7 +4721,6 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.6.4.tgz",
       "integrity": "sha512-ipBq9+YEt5i4FxotkwNlQDqXvt//9ts23XQ4zgwm7yOkU/k3ZHnNRnm7dR418r5nC455dVYEzP7eERUHLrIYhA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.16"
       }
@@ -5190,7 +5186,6 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -5423,7 +5418,6 @@
       "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -5434,7 +5428,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -5484,7 +5477,6 @@
       "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.1",
         "@typescript-eslint/types": "8.53.1",
@@ -6166,7 +6158,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6613,7 +6604,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7668,7 +7658,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -8082,7 +8071,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8268,7 +8256,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -10123,7 +10110,6 @@
       "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
@@ -11004,7 +10990,6 @@
       "resolved": "https://registry.npmjs.org/next/-/next-16.1.4.tgz",
       "integrity": "sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "16.1.4",
         "@swc/helpers": "0.5.15",
@@ -11128,6 +11113,16 @@
         }
       }
     },
+    "node_modules/next-intl/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
@@ -11545,7 +11540,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.17.2.tgz",
       "integrity": "sha512-vjbKdiBJRqzcYw1fNU5KuHyYvdJ1qpcQg1CeBrHFqV1pWgHeVR6j/+kX0E1AAXfyuLUGY1ICrN2ELKA/z2HWzw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.10.1",
         "pg-pool": "^3.11.0",
@@ -11709,7 +11703,6 @@
       "resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.8.tgz",
       "integrity": "sha512-d+JFcLM17njZaOLkv6SCev7uoLaBtfK86vMUXhW1Z4glPWh4jozno9APvW/XKFJ3CCxVoC7OL38BqRydtu5nGg==",
       "license": "Unlicense",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11863,7 +11856,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11873,7 +11865,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -12888,7 +12879,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13336,7 +13326,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13521,7 +13510,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -13691,7 +13679,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13705,7 +13692,6 @@
       "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.18",
         "@vitest/mocker": "4.0.18",
@@ -14080,7 +14066,6 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

From 2c3c7a8885bdee138e52a12e628086ae35d49493 Mon Sep 17 00:00:00 2001
From: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Date: Wed, 28 Jan 2026 16:30:02 +0200
Subject: [PATCH 3/7] fix(review): resolve accessibility and hydration issues

---
 frontend/components/about/FeaturesSection.tsx | 12 +++++++++---
 frontend/components/about/PricingSection.tsx  |  2 +-
 frontend/components/ui/particle-canvas.tsx    |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 898ab194..feca3f27 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -277,8 +277,9 @@ function TabButton({ page, isActive, onClick }: { page: Page; isActive: boolean;
     return (
         <button
             onClick={onClick}
-            aria-label={t(`${page.id}.title`)}
-            aria-current={isActive ? 'true' : 'false'}
+            role="tab"
+            aria-selected={isActive}
+            aria-controls={`${page.id}-panel`}
             className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
                 isActive
                     ? "text-white"
@@ -307,13 +308,18 @@ export function FeaturesSection() {
     const [isMobile, setIsMobile] = useState(false)
     const activePage = pages.find(p => p.id === activeTab) || pages[0]
 
+    const [mounted, setMounted] = useState(false)
+
     useEffect(() => {
+        setMounted(true)
         const checkMobile = () => setIsMobile(window.innerWidth < 768)
         checkMobile()
         window.addEventListener('resize', checkMobile)
         return () => window.removeEventListener('resize', checkMobile)
     }, [])
 
+    if (!mounted) return null
+
     return (
         <section className="relative w-full py-20 lg:py-28 overflow-hidden bg-gray-50 dark:bg-transparent">
             <DecorativeDots />
@@ -361,7 +367,7 @@ export function FeaturesSection() {
                 </div>
 
                 <div className="flex justify-center mb-8">
-                    <div className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full border border-gray-200 dark:border-white/10 bg-white/20 dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none">
+                    <div role="tablist" aria-label="Feature categories" className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full border border-gray-200 dark:border-white/10 bg-white/20 dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none">
                         {pages.map((page) => (
                             <TabButton
                                 key={page.id}
diff --git a/frontend/components/about/PricingSection.tsx b/frontend/components/about/PricingSection.tsx
index bc4eda27..d7490235 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -8,7 +8,6 @@ import { SponsorsWall } from "./SponsorsWall"
 import { GradientBadge } from "@/components/ui/gradient-badge"
 import { SectionHeading } from "@/components/ui/section-heading"
 import { ParticleCanvas } from "@/components/ui/particle-canvas"
-import { cn } from "@/lib/utils"
 interface PricingSectionProps {
   sponsors?: Sponsor[]
 }
@@ -30,6 +29,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                         initial={{ opacity: 0, y: 10 }} 
                         whileInView={{ opacity: 1, y: 0 }}
                     >
+                        <h2 id="pricing-heading" className="sr-only">Pricing</h2>
                         <GradientBadge icon={Sparkles} text="No Hidden Fees" className="mb-4" />
                     </motion.div>
                     
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index 46bbeda3..d8031ef3 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -346,5 +346,5 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
     }
   }, [])
 
-  return <canvas ref={canvasRef} className={className} />
+  return <canvas ref={canvasRef} className={className} aria-hidden="true" />
 }

From e82350d9b828ce2cdf3535f39e93378d99ee3672 Mon Sep 17 00:00:00 2001
From: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Date: Wed, 28 Jan 2026 16:41:55 +0200
Subject: [PATCH 4/7] fix(perf): implement frame-rate independent animations

---
 frontend/components/about/FeaturesSection.tsx |  4 ++++
 frontend/components/ui/particle-canvas.tsx    | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index feca3f27..4a0a96db 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -276,6 +276,7 @@ function ConnectingLines() {
 function TabButton({ page, isActive, onClick }: { page: Page; isActive: boolean; onClick: () => void }) {
     return (
         <button
+            id={`${page.id}-tab`}
             onClick={onClick}
             role="tab"
             aria-selected={isActive}
@@ -348,6 +349,9 @@ export function FeaturesSection() {
                     <AnimatePresence mode="wait">
                         <motion.div
                             key={activeTab}
+                            role="tabpanel"
+                            id={`${activeTab}-panel`}
+                            aria-labelledby={`${activeTab}-tab`}
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index d8031ef3..c1cc279b 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -111,6 +111,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
   const particles = useRef<Point[]>([])
   const animationFrameId = useRef<number | undefined>(undefined)
   const timeRef = useRef(0)
+  const lastTimeRef = useRef<number>(0)
 
   // Simple transition: 0 = floating, 1 = shape
   const transitionRef = useRef(0)
@@ -185,11 +186,16 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
       }
     }
 
-    const draw = () => {
+    const draw = (timestamp: number) => {
       if (!canvas || !ctx) return
+      
+      if (!lastTimeRef.current) lastTimeRef.current = timestamp
+      const deltaTime = (timestamp - lastTimeRef.current) / 1000
+      lastTimeRef.current = timestamp
+
       ctx.clearRect(0, 0, canvas.width, canvas.height)
 
-      timeRef.current += 0.016
+      timeRef.current += deltaTime
 
       // Linear transition - no initial freeze
       const inSpeed = 0.012
@@ -338,7 +344,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
 
     resizeCanvas()
     window.addEventListener("resize", resizeCanvas)
-    draw()
+    animationFrameId.current = requestAnimationFrame(draw)
 
     return () => {
       window.removeEventListener("resize", resizeCanvas)

From e7b8651b2339e91b4d3d9cafd75483a0181a0a19 Mon Sep 17 00:00:00 2001
From: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Date: Wed, 28 Jan 2026 17:24:42 +0200
Subject: [PATCH 5/7] fix(review): address accessibility, security, and
 performance feedback

---
 frontend/components/about/FeaturesSection.tsx | 38 ++++++++++++++++---
 frontend/components/ui/particle-canvas.tsx    |  3 +-
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 4a0a96db..88dabff9 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { motion, AnimatePresence } from "framer-motion"
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion"
 import { Link } from "@/i18n/routing"
 import { 
     MessageCircle, Brain, Trophy, User, ShoppingBag, BookOpen,
@@ -143,6 +143,8 @@ function FeatureBubble({ feature, index, href, isMobile }: { feature: Feature; i
     const posX = feature.x * scaleX
     const posY = feature.y * scaleY
     
+    const shouldReduceMotion = useReducedMotion()
+
     return (
         <motion.div
             className="absolute"
@@ -155,7 +157,7 @@ function FeatureBubble({ feature, index, href, isMobile }: { feature: Feature; i
                 scale: 1,
             }}
             exit={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
-            transition={{
+            transition={shouldReduceMotion ? { duration: 0 } : {
                 x: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
                 y: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
                 opacity: { delay: 0.1 + index * 0.08, duration: 0.3 },
@@ -163,7 +165,7 @@ function FeatureBubble({ feature, index, href, isMobile }: { feature: Feature; i
             }}
         >
             <div 
-                className="animate-float"
+                className="animate-float motion-reduce:animate-none"
                 style={{ animationDelay: `${floatDelay}s`, animationDuration: `${floatDuration}s` }}
             >
                 <Link href={href} className="group block">
@@ -273,14 +275,27 @@ function ConnectingLines() {
     )
 }
 
-function TabButton({ page, isActive, onClick }: { page: Page; isActive: boolean; onClick: () => void }) {
+function TabButton({ 
+    page, 
+    isActive, 
+    onClick,
+    onKeyDown
+}: { 
+    page: Page; 
+    isActive: boolean; 
+    onClick: () => void 
+    onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void
+}) {
     return (
         <button
+            type="button"
             id={`${page.id}-tab`}
             onClick={onClick}
+            onKeyDown={onKeyDown}
             role="tab"
             aria-selected={isActive}
             aria-controls={`${page.id}-panel`}
+            tabIndex={isActive ? 0 : -1}
             className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
                 isActive
                     ? "text-white"
@@ -319,6 +334,18 @@ export function FeaturesSection() {
         return () => window.removeEventListener('resize', checkMobile)
     }, [])
 
+    const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+        if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return
+        event.preventDefault()
+        const dir = event.key === "ArrowRight" ? 1 : -1
+        const nextIndex = (index + dir + pages.length) % pages.length
+        const nextId = pages[nextIndex].id
+        setActiveTab(nextId)
+        setTimeout(() => {
+             document.getElementById(`${nextId}-tab`)?.focus()
+        }, 0)
+    }
+
     if (!mounted) return null
 
     return (
@@ -372,12 +399,13 @@ export function FeaturesSection() {
 
                 <div className="flex justify-center mb-8">
                     <div role="tablist" aria-label="Feature categories" className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full border border-gray-200 dark:border-white/10 bg-white/20 dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none">
-                        {pages.map((page) => (
+                        {pages.map((page, index) => (
                             <TabButton
                                 key={page.id}
                                 page={page}
                                 isActive={activeTab === page.id}
                                 onClick={() => setActiveTab(page.id)}
+                                onKeyDown={(e) => onTabKeyDown(e, index)}
                             />
                         ))}
                     </div>
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index c1cc279b..629d81a3 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -190,7 +190,8 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
       if (!canvas || !ctx) return
       
       if (!lastTimeRef.current) lastTimeRef.current = timestamp
-      const deltaTime = (timestamp - lastTimeRef.current) / 1000
+      const rawDeltaTime = (timestamp - lastTimeRef.current) / 1000
+      const deltaTime = Math.min(rawDeltaTime, 0.05)
       lastTimeRef.current = timestamp
 
       ctx.clearRect(0, 0, canvas.width, canvas.height)

From 741b17fab3e97e35cde06d718be135b06d8282c0 Mon Sep 17 00:00:00 2001
From: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Date: Wed, 28 Jan 2026 17:41:29 +0200
Subject: [PATCH 6/7] fix(review): enable SSR for features section and support
 HiDPI canvas

---
 frontend/components/about/FeaturesSection.tsx |  9 ++++-----
 frontend/components/ui/particle-canvas.tsx    | 14 +++++++++++---
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 88dabff9..84eec101 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -321,13 +321,12 @@ function TabButton({
 
 export function FeaturesSection() {
     const [activeTab, setActiveTab] = useState("qa")
-    const [isMobile, setIsMobile] = useState(false)
+    const [isMobile, setIsMobile] = useState(() => 
+        typeof window !== "undefined" ? window.innerWidth < 768 : false
+    )
     const activePage = pages.find(p => p.id === activeTab) || pages[0]
 
-    const [mounted, setMounted] = useState(false)
-
     useEffect(() => {
-        setMounted(true)
         const checkMobile = () => setIsMobile(window.innerWidth < 768)
         checkMobile()
         window.addEventListener('resize', checkMobile)
@@ -346,7 +345,7 @@ export function FeaturesSection() {
         }, 0)
     }
 
-    if (!mounted) return null
+
 
     return (
         <section className="relative w-full py-20 lg:py-28 overflow-hidden bg-gray-50 dark:bg-transparent">
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index 629d81a3..f175df75 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -155,9 +155,17 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
     if (!ctx) return
 
     const resizeCanvas = () => {
-      canvas.width = canvas.parentElement?.offsetWidth || window.innerWidth
-      canvas.height = canvas.parentElement?.offsetHeight || window.innerHeight
-      initParticles(canvas.width, canvas.height)
+      const width = canvas.parentElement?.offsetWidth || window.innerWidth
+      const height = canvas.parentElement?.offsetHeight || window.innerHeight
+      const dpr = window.devicePixelRatio || 1
+      
+      canvas.width = width * dpr
+      canvas.height = height * dpr
+      canvas.style.width = `${width}px`
+      canvas.style.height = `${height}px`
+      
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      initParticles(width, height)
     }
 
     const initParticles = (width: number, height: number) => {

From b29bd7fea1d7627ea6f0d03478e1bfeec1fd8b24 Mon Sep 17 00:00:00 2001
From: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Date: Wed, 28 Jan 2026 19:20:04 +0200
Subject: [PATCH 7/7] fix(review): correct HiDPI logic for particle canvas
 measurements

---
 frontend/components/ui/particle-canvas.tsx | 45 ++++++++++++----------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index f175df75..50b04c35 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -154,18 +154,21 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
     const ctx = canvas.getContext("2d")
     if (!ctx) return
 
+    let logicalWidth = 0
+    let logicalHeight = 0
+
     const resizeCanvas = () => {
-      const width = canvas.parentElement?.offsetWidth || window.innerWidth
-      const height = canvas.parentElement?.offsetHeight || window.innerHeight
+      logicalWidth = canvas.parentElement?.offsetWidth || window.innerWidth
+      logicalHeight = canvas.parentElement?.offsetHeight || window.innerHeight
       const dpr = window.devicePixelRatio || 1
       
-      canvas.width = width * dpr
-      canvas.height = height * dpr
-      canvas.style.width = `${width}px`
-      canvas.style.height = `${height}px`
+      canvas.width = logicalWidth * dpr
+      canvas.height = logicalHeight * dpr
+      canvas.style.width = `${logicalWidth}px`
+      canvas.style.height = `${logicalHeight}px`
       
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-      initParticles(width, height)
+      initParticles(logicalWidth, logicalHeight)
     }
 
     const initParticles = (width: number, height: number) => {
@@ -202,7 +205,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
       const deltaTime = Math.min(rawDeltaTime, 0.05)
       lastTimeRef.current = timestamp
 
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.clearRect(0, 0, logicalWidth, logicalHeight)
 
       timeRef.current += deltaTime
 
@@ -223,7 +226,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
 
       const { r, g, b, isDark } = getThemeColors()
 
-      const isMobileView = canvas.width < 768
+      const isMobileView = logicalWidth < 768
 
       const currentShape = activeShapeRef.current || prevShapeRef.current
       const shapePoints =
@@ -243,13 +246,13 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
         p.floatX += p.floatVx
         p.floatY += p.floatVy
 
-        if (p.floatX < 0 || p.floatX > canvas.width) {
+        if (p.floatX < 0 || p.floatX > logicalWidth) {
           p.floatVx *= -1
-          p.floatX = Math.max(0, Math.min(canvas.width, p.floatX))
+          p.floatX = Math.max(0, Math.min(logicalWidth, p.floatX))
         }
-        if (p.floatY < 0 || p.floatY > canvas.height) {
+        if (p.floatY < 0 || p.floatY > logicalHeight) {
           p.floatVy *= -1
-          p.floatY = Math.max(0, Math.min(canvas.height, p.floatY))
+          p.floatY = Math.max(0, Math.min(logicalHeight, p.floatY))
         }
 
         // Calculate shape position
@@ -269,20 +272,20 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
           const rotatedY = shapePoint.y
           const perspective = 3
           const scale = perspective / (perspective + rotatedZ)
-          const shapeScale = Math.min(canvas.width, canvas.height) * 0.7
+          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.7
           
           // Position: centered on each card
-          const centerX = canvas.width / 2
-          const centerY = isFirstHalf ? canvas.height * 0.32 : canvas.height * 0.68
+          const centerX = logicalWidth / 2
+          const centerY = isFirstHalf ? logicalHeight * 0.32 : logicalHeight * 0.68
           
           shapeX = centerX + rotatedX * shapeScale * scale
           shapeY = centerY + rotatedY * shapeScale * scale
         } else if (shapePoints) {
           // Desktop: original hover behavior
-          let centerX = canvas.width / 2
-          const centerY = canvas.height / 2
-          if (currentShape === "brackets") centerX = canvas.width * 0.25
-          if (currentShape === "heart") centerX = canvas.width * 0.75
+          let centerX = logicalWidth / 2
+          const centerY = logicalHeight / 2
+          if (currentShape === "brackets") centerX = logicalWidth * 0.25
+          if (currentShape === "heart") centerX = logicalWidth * 0.75
           
           const shapePoint = shapePoints[i % shapePoints.length]
           const rotatedX = shapePoint.x * cos - shapePoint.z * sin
@@ -290,7 +293,7 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
           const rotatedY = shapePoint.y
           const perspective = 3
           const scale = perspective / (perspective + rotatedZ)
-          const shapeScale = Math.min(canvas.width, canvas.height) * 0.35
+          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.35
           shapeX = centerX + rotatedX * shapeScale * scale
           shapeY = centerY + rotatedY * shapeScale * scale
         }