diff --git a/frontend/app/[locale]/page.tsx b/frontend/app/[locale]/page.tsx
index c7e1ee1c..072e55c3 100644
--- a/frontend/app/[locale]/page.tsx
+++ b/frontend/app/[locale]/page.tsx
@@ -1,5 +1,5 @@
 import { getTranslations } from 'next-intl/server';
-import HeroSection from '@/components/shared/HeroSection';
+import HeroSection from '@/components/home/HeroSection';
 
 export async function generateMetadata({
   params,
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a56f36df..a5a92c93 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -30,8 +30,7 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-  --animate-float-soft: float-soft 8s ease-in-out infinite;
-  --animate-pulse-soft: pulse-soft 2.8s ease-in-out infinite;
+  --animate-wave-clip: wave-clip 5s ease-in-out infinite;
 }
 
 @theme {
@@ -154,51 +153,183 @@
   user-select: none; /* Standard */
 }
 
-@keyframes float-soft {
+@keyframes progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+@keyframes shrink {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes wave-clip {
   0%,
   100% {
-    transform: translateY(8px) scale(1);
+    clip-path: polygon(
+      0% 50%,
+      15% 48%,
+      32% 52%,
+      54% 60%,
+      70% 62%,
+      84% 60%,
+      100% 55%,
+      100% 100%,
+      0% 100%
+    );
   }
   50% {
-    transform: translateY(-16px) scale(1.04);
+    clip-path: polygon(
+      0% 65%,
+      16% 70%,
+      34% 72%,
+      51% 68%,
+      67% 58%,
+      84% 52%,
+      100% 48%,
+      100% 100%,
+      0% 100%
+    );
   }
 }
 
-@keyframes pulse-soft {
-  0%,
+@keyframes slide-up-gradient {
+  0% {
+    clip-path: inset(100% 0 0 0);
+  }
   100% {
-    opacity: 0.2;
-    transform: scale(1);
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes wave-slide-up {
+  0% {
+    clip-path: polygon(
+      0% 100%,
+      10% 100%,
+      20% 100%,
+      30% 100%,
+      40% 100%,
+      50% 100%,
+      60% 100%,
+      70% 100%,
+      80% 100%,
+      90% 100%,
+      100% 100%,
+      100% 100%,
+      0% 100%
+    );
   }
   50% {
-    opacity: 0.4;
-    transform: scale(1.08);
+    clip-path: polygon(
+      0% 60%,
+      10% 50%,
+      20% 45%,
+      30% 48%,
+      40% 55%,
+      50% 50%,
+      60% 45%,
+      70% 48%,
+      80% 52%,
+      90% 50%,
+      100% 55%,
+      100% 100%,
+      0% 100%
+    );
+  }
+  100% {
+    clip-path: polygon(
+      0% 0%,
+      10% 0%,
+      20% 0%,
+      30% 0%,
+      40% 0%,
+      50% 0%,
+      60% 0%,
+      70% 0%,
+      80% 0%,
+      90% 0%,
+      100% 0%,
+      100% 100%,
+      0% 100%
+    );
   }
 }
 
-@keyframes progress {
-  from {
-    width: 100%;
+@keyframes text-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
   }
-  to {
-    width: 0%;
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
-@keyframes shimmer {
+
+@keyframes card-breathe {
   0% {
-    background-position: 200% 0;
+    transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
+  }
+  50% {
+    transform: translate(var(--card-x, 0), var(--card-y, 0)) scale(1.05)
+      rotate(calc(var(--card-rotate, 0deg) + var(--card-rotate-offset, 0deg)));
   }
   100% {
-    background-position: -200% 0;
+    transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
   }
 }
 
-@keyframes shrink {
-  from {
-    transform: scaleX(1);
+@layer utilities {
+  .wave-text-gradient {
+    animation: wave-clip 5s ease-in-out infinite;
   }
-  to {
-    transform: scaleX(0);
+
+  .animate-slide-up-gradient {
+    animation: slide-up-gradient 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .animate-wave-slide-up {
+    animation: wave-slide-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .animate-text-fade-in {
+    animation: text-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .animate-card-breathe {
+    animation: card-breathe 6s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  .left-4 .animate-card-breathe,
+  .md\:left-6 .animate-card-breathe,
+  .lg\:left-8 .animate-card-breathe,
+  .xl\:left-12 .animate-card-breathe {
+    --card-x: -30px;
+    --card-y: -25px;
+    --card-rotate: -10deg;
+    --card-rotate-offset: -3deg;
+    animation-delay: 0s;
+  }
+
+  .right-4 .animate-card-breathe,
+  .md\:right-6 .animate-card-breathe,
+  .lg\:right-8 .animate-card-breathe,
+  .xl\:right-12 .animate-card-breathe {
+    --card-x: 30px;
+    --card-y: 25px;
+    --card-rotate: 8deg;
+    --card-rotate-offset: 3deg;
+    animation-delay: 0.8s;
   }
 }
 
@@ -218,13 +349,11 @@
   --color-ring: var(--foreground);
 
   --card: var(--background);
-    /* CTA button: light theme (section is black) -> pink bg + white text */
+  /* CTA button: light theme (section is black) -> pink bg + white text */
   --shop-cta-bg: #ff2d55;
   --shop-cta-fg: oklch(0.985 0 0);
-
 }
 
-
 .dark .shop-scope {
   /* dark: shop accent = magenta */
   --accent: var(--accent-primary);
@@ -241,10 +370,9 @@
   /* keep borders closer to previous shop look, derived (no hex) */
   --border: color-mix(in oklab, var(--foreground) 18%, var(--background));
   --input: color-mix(in oklab, var(--foreground) 18%, var(--background));
-    /* CTA button: dark theme (section becomes white) -> black bg + white text */
+  /* CTA button: dark theme (section becomes white) -> black bg + white text */
   --shop-cta-bg: var(--background);
   --shop-cta-fg: var(--foreground);
-
 }
 
 /* about-community */
diff --git a/frontend/components/header/MainSwitcher.tsx b/frontend/components/header/MainSwitcher.tsx
index 52dd41d5..63a313e0 100644
--- a/frontend/components/header/MainSwitcher.tsx
+++ b/frontend/components/header/MainSwitcher.tsx
@@ -61,11 +61,7 @@ export function MainSwitcher({
   }
 
   return (
-    <main
-      className={
-        isQa || isHome ? 'mx-auto min-h-[80vh]' : 'mx-auto px-6 min-h-[80vh]'
-      }
-    >
+    <main className={isQa || isHome ? 'mx-auto' : 'mx-auto px-6 min-h-[80vh]'}>
       {children}
     </main>
   );
diff --git a/frontend/components/home/CodeCard.tsx b/frontend/components/home/CodeCard.tsx
new file mode 100644
index 00000000..6f3b1157
--- /dev/null
+++ b/frontend/components/home/CodeCard.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+interface CodeCardProps {
+  fileName: string;
+  snippet: ReactNode;
+  className?: string;
+}
+
+export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
+  return (
+    <div
+      className={`pointer-events-none absolute hidden md:block ${className}`}
+      aria-hidden="true"
+    >
+      <div className="rounded-2xl border border-border bg-card/60 backdrop-blur-xl shadow-xl dark:shadow-black/50 px-5 py-4 min-w-[230px] animate-card-breathe">
+        <div className="flex items-center justify-between mb-3 text-[10px] text-muted-foreground">
+          <div className="flex items-center gap-1.5">
+            <span className="h-2 w-2 rounded-full bg-red-400/90" />
+            <span className="h-2 w-2 rounded-full bg-yellow-400/90" />
+            <span className="h-2 w-2 rounded-full bg-green-400/90" />
+          </div>
+          <span className="font-medium">{fileName}</span>
+        </div>
+        <code className="text-[11px] whitespace-pre leading-relaxed font-mono text-foreground/90">
+          {snippet}
+        </code>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/home/HeroBackground.tsx b/frontend/components/home/HeroBackground.tsx
new file mode 100644
index 00000000..56caf61b
--- /dev/null
+++ b/frontend/components/home/HeroBackground.tsx
@@ -0,0 +1,19 @@
+export function HeroBackground() {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-0 opacity-60">
+        <div className="absolute -top-32 left-1/2 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-[var(--accent-primary)]/20 blur-3xl" />
+        <div className="absolute bottom-[-12rem] left-1/4 h-[22rem] w-[22rem] rounded-full bg-[var(--accent-hover)]/15 blur-3xl" />
+        <div className="absolute bottom-[-10rem] right-0 h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
+      </div>
+
+      <div className="pointer-events-none absolute inset-0 opacity-40 dark:opacity-60">
+        <span className="absolute left-[10%] top-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute left-[35%] top-[8%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute left-[70%] top-[16%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute left-[80%] top-[40%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute left-[18%] top-[60%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+      </div>
+    </>
+  );
+}
diff --git a/frontend/components/home/HeroCodeCards.tsx b/frontend/components/home/HeroCodeCards.tsx
new file mode 100644
index 00000000..7c4fd1b6
--- /dev/null
+++ b/frontend/components/home/HeroCodeCards.tsx
@@ -0,0 +1,56 @@
+import { CodeCard } from './CodeCard';
+
+export function HeroCodeCards() {
+  return (
+    <>
+      <CodeCard
+        fileName="arrays.ts"
+        className="left-4 md:left-10 lg:left-8 xl:left-12 -top-2 md:-top-12 lg:-top-8 xl:-top-12 rotate-[-10deg]"
+        snippet={
+          <>
+            <span className="text-[var(--accent-primary)]">type</span> Arr1 = [
+            <span className="text-emerald-500 dark:text-emerald-400">
+              &apos;a&apos;
+            </span>
+            ,{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">
+              &apos;b&apos;
+            </span>
+            ,{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">
+              &apos;c&apos;
+            </span>
+            ]{'\n'}
+            <span className="text-[var(--accent-primary)]">type</span> Arr2 = [
+            <span className="text-amber-500 dark:text-amber-400">3</span>,{' '}
+            <span className="text-amber-500 dark:text-amber-400">2</span>,{' '}
+            <span className="text-amber-500 dark:text-amber-400">1</span>]
+          </>
+        }
+      />
+
+      <CodeCard
+        fileName="utils.js"
+        className="right-4 md:right-4 lg:right-8 xl:right-12 -bottom-2 md:-bottom-6 lg:-bottom-8 xl:-bottom-12 rotate-[8deg]"
+        snippet={
+          <>
+            <span className="text-[var(--accent-primary)]">function</span> sum(
+            <span className="text-emerald-500 dark:text-emerald-400">
+              a
+            </span>,{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">b</span>){' '}
+            {'{'}
+            {'\n'}
+            {'  '}
+            <span className="text-[var(--accent-primary)]">return</span>{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">a</span>{' '}
+            <span className="text-purple-500 dark:text-purple-400">+</span>{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">b</span>;
+            {'\n'}
+            {'}'}
+          </>
+        }
+      />
+    </>
+  );
+}
diff --git a/frontend/components/home/HeroSection.tsx b/frontend/components/home/HeroSection.tsx
new file mode 100644
index 00000000..78946cce
--- /dev/null
+++ b/frontend/components/home/HeroSection.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { HeroBackground } from './HeroBackground';
+import { HeroCodeCards } from './HeroCodeCards';
+import { InteractiveCTAButton } from './InteractiveCTAButton';
+
+export default function HeroSection() {
+  const t = useTranslations('homepage');
+
+  return (
+    <section
+      className="
+        relative
+        overflow-hidden
+        min-h-[calc(100vh-260px)]
+sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
+        flex
+        items-center
+        bg-gray-50 dark:bg-black
+        transition-colors duration-300
+      "
+    >
+      <HeroBackground />
+
+      <div className="relative max-w-5xl mx-auto w-full px-6 py-8 sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32 flex flex-col items-center text-center">
+        <HeroCodeCards />
+
+        <p className="text-[11px] sm:text-xs md:text-sm tracking-[0.35em] uppercase text-foreground font-bold">
+          {t('subtitle')}
+        </p>
+
+        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16 relative inline-block">
+          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tight relative inline-block">
+            <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
+              DevLovers
+            </span>
+
+            <span
+              className="absolute inset-0 inline-block bg-gradient-to-r from-[var(--accent-primary)] via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent wave-text-gradient"
+              aria-hidden="true"
+            >
+              DevLovers
+            </span>
+          </h1>
+        </div>
+
+        <p className="mt-4 sm:mt-6 md:mt-10 lg:mt-12 max-w-2xl text-sm sm:text-base md:text-lg text-muted-foreground font-light">
+          {t('description')}
+        </p>
+
+        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16">
+          <InteractiveCTAButton />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
new file mode 100644
index 00000000..f6c84014
--- /dev/null
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/routing';
+import { createCTAVariants } from '@/lib/home/cta-variants';
+
+export function InteractiveCTAButton() {
+  const t = useTranslations('homepage');
+
+  const [index, setIndex] = React.useState(0);
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const variants = createCTAVariants(t('cta'));
+  const current = variants[index];
+  const nextIndex = (index + 1) % variants.length;
+  const next = variants[nextIndex];
+
+  const handleEnter = () => {
+    if (!window.matchMedia('(hover: hover)').matches) return;
+    if (isHovered) return;
+    setIsHovered(true);
+  };
+
+  const handleLeave = () => {
+    if (!window.matchMedia('(hover: hover)').matches) return;
+    if (!isHovered) return;
+    setIndex(nextIndex);
+    setIsHovered(false);
+  };
+
+  return (
+    <Link
+      href="/q&a"
+      onMouseEnter={handleEnter}
+      onMouseLeave={handleLeave}
+      className={`
+        group relative inline-flex items-center overflow-hidden rounded-2xl
+        px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
+        text-xs md:text-sm font-semibold tracking-[0.25em] uppercase text-white
+        ${current.shadow} ${current.shadowDark}
+        transition-shadow duration-700 ease-out
+        active:scale-95
+active:brightness-110
+active:shadow-xl
+
+        focus-visible:outline-none focus-visible:ring-2 ${current.ring} focus-visible:ring-offset-2
+      `}
+    >
+      <span
+        className={`absolute inset-0 bg-gradient-to-r ${current.gradient} ${current.gradientDark}`}
+      />
+
+      {isHovered && (
+        <span
+          className={`absolute inset-0 bg-gradient-to-r ${next.gradient} ${next.gradientDark} animate-wave-slide-up`}
+        />
+      )}
+
+      <span
+        className="pointer-events-none absolute inset-[2px] rounded-2xl
+        bg-gradient-to-r from-white/20 via-white/5 to-white/20
+        opacity-40 supports-[hover:hover]:group-hover:opacity-60 transition-opacity"
+      />
+
+      <span className="relative z-10">
+        <span
+          key={isHovered ? nextIndex : index}
+          className={`inline-block ${isHovered ? 'animate-text-fade-in' : ''}`}
+        >
+          {isHovered ? next.text : current.text}
+        </span>
+      </span>
+    </Link>
+  );
+}
diff --git a/frontend/components/shared/Footer.tsx b/frontend/components/shared/Footer.tsx
index 5c802d6e..a355efa4 100644
--- a/frontend/components/shared/Footer.tsx
+++ b/frontend/components/shared/Footer.tsx
@@ -20,27 +20,7 @@ export default function Footer() {
   const t = useTranslations('footer');
 
   return (
-    <footer className="relative overflow-hidden border-t border-gray-200/70 dark:border-neutral-800/70">
-      <div
-        className="
-    absolute inset-0
-    bg-white
-    dark:bg-neutral-950/70
-    dark:backdrop-blur
-  "
-      />
-
-      <div
-        aria-hidden="true"
-        className="
-    pointer-events-none absolute inset-0
-    hidden dark:block
-    opacity-40
-    [background-image:radial-gradient(circle_at_20%_30%,rgba(59,130,246,0.20)_0,transparent_35%),radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.18)_0,transparent_38%),radial-gradient(circle,rgba(148,163,184,0.18)_1px,transparent_1px)]
-    [background-size:900px_420px,900px_420px,22px_22px]
-  "
-      />
-
+    <footer className="relative overflow-hidden border-t border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/50">
       <div className="container-main relative py-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-3">
@@ -58,14 +38,24 @@ export default function Footer() {
             <p className="text-sm text-slate-500 dark:text-slate-400">
               <Link
                 href="/privacy-policy"
-                className="transition-colors hover:[color:var(--accent-hover)] focus-visible:[color:var(--accent-hover)]"
+                className="
+transition-colors
+hover:[color:var(--accent-hover)]
+active:[color:var(--accent-hover)]
+focus-visible:[color:var(--accent-hover)]
+"
               >
                 {t('privacyPolicy')}
               </Link>
               <span className="px-2 opacity-60">|</span>
               <Link
                 href="/terms-of-service"
-                className="transition-colors hover:[color:var(--accent-hover)] focus-visible:[color:var(--accent-hover)]"
+                className="
+transition-colors
+hover:[color:var(--accent-hover)]
+active:[color:var(--accent-hover)]
+focus-visible:[color:var(--accent-hover)]
+"
               >
                 {t('termsOfService')}
               </Link>
@@ -96,13 +86,20 @@ export default function Footer() {
                       rounded-full border border-gray-200/60
                       bg-white/40
                       text-slate-600
-                      transition-all
-                      hover:-translate-y-0.5
                       dark:border-neutral-800/60
                       dark:bg-neutral-950/30
                       dark:text-slate-300
-                      [&:hover]:!text-[var(--accent-hover)]
-                      [&:hover]:!border-[var(--accent-hover)]
+                      transition-all
+
+hover:-translate-y-0.5
+hover:!text-[var(--accent-hover)]
+hover:!border-[var(--accent-hover)]
+
+active:!text-[var(--accent-hover)]
+active:!border-[var(--accent-hover)]
+active:scale-95
+
+
                     "
                   >
                     <Icon className="h-5 w-5" />
diff --git a/frontend/components/shared/HeroSection.tsx b/frontend/components/shared/HeroSection.tsx
deleted file mode 100644
index 3601f4af..00000000
--- a/frontend/components/shared/HeroSection.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { useTranslations } from 'next-intl';
-import { Link } from '@/i18n/routing';
-
-interface CodeCardProps {
-  fileName: string;
-  snippet: ReactNode;
-  className?: string;
-}
-
-function CodeCard({ fileName, snippet, className }: CodeCardProps) {
-  return (
-    <div
-      className={`pointer-events-none absolute hidden md:block ${className}`}
-      aria-hidden="true"
-    >
-      <div
-        className="
-          rounded-[2rem]
-          border border-slate-200/70 dark:border-slate-700/80
-          bg-gradient-to-b
-          from-white via-slate-50 to-white
-          dark:from-slate-900/95 dark:via-slate-950/95 dark:to-slate-950/95
-          shadow-[0_18px_45px_rgba(15,23,42,0.18)]
-          dark:shadow-[0_22px_60px_rgba(56,189,248,0.45)]
-          px-5 py-4
-          min-w-[230px]
-          animate-float-soft
-        "
-      >
-        <div className="flex items-center justify-between mb-3 text-[10px] text-slate-500 dark:text-slate-300">
-          <div className="flex items-center gap-1.5">
-            <span className="h-2 w-2 rounded-full bg-rose-400/90" />
-            <span className="h-2 w-2 rounded-full bg-amber-300/90" />
-            <span className="h-2 w-2 rounded-full bg-emerald-400/90" />
-          </div>
-          <span className="font-medium">{fileName}</span>
-        </div>
-        <code
-          className="
-            text-[11px] whitespace-pre leading-relaxed font-mono
-            text-slate-700 dark:text-slate-100/90
-          "
-        >
-          {snippet}
-        </code>
-      </div>
-    </div>
-  );
-}
-
-export default function HeroSection() {
-  const t = useTranslations('homepage');
-
-  return (
-    <section
-      className="
-        relative
-        overflow-hidden
-        min-h-[100vh]
-        flex
-        items-center
-      "
-    >
-      <div
-        className="
-          absolute inset-0
-          bg-gradient-to-b
-          from-sky-50 via-white to-rose-50
-          dark:from-slate-950 dark:via-slate-950 dark:to-black
-        "
-      />
-      <div className="pointer-events-none absolute inset-0 opacity-70">
-        <div className="absolute -top-32 left-1/2 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-sky-300/30 blur-3xl dark:bg-sky-500/25" />
-        <div className="absolute bottom-[-12rem] left-1/4 h-[22rem] w-[22rem] rounded-full bg-pink-300/30 blur-3xl dark:bg-fuchsia-500/25" />
-        <div className="absolute bottom-[-10rem] right-0 h-[26rem] w-[26rem] rounded-full bg-violet-300/40 blur-3xl dark:bg-violet-500/25" />
-      </div>
-      <div className="pointer-events-none absolute inset-0 opacity-70 dark:opacity-100">
-        <span className="absolute left-[10%] top-[18%] h-1 w-1 rounded-full bg-sky-300/70 dark:bg-sky-400" />
-        <span className="absolute left-[35%] top-[8%] h-1 w-1 rounded-full bg-fuchsia-300/70 dark:bg-fuchsia-400" />
-        <span className="absolute left-[70%] top-[16%] h-1 w-1 rounded-full bg-amber-300/70 dark:bg-amber-300" />
-        <span className="absolute left-[80%] top-[40%] h-0.5 w-0.5 rounded-full bg-sky-300/70 dark:bg-sky-400" />
-        <span className="absolute left-[18%] top-[60%] h-0.5 w-0.5 rounded-full bg-violet-300/70 dark:bg-violet-400" />
-      </div>
-      <div
-        className="
-          relative
-          max-w-5xl mx-auto
-          w-full
-          px-6
-          py-24 md:py-32
-          flex flex-col items-center text-center
-        "
-      >
-        <CodeCard
-          fileName="arrays.ts"
-          className="left-8 -top-4 rotate-[-10deg]"
-          snippet={
-            <>
-              <span className="text-sky-500 dark:text-sky-400">type</span> Arr1
-              = [
-              <span className="text-pink-500 dark:text-pink-400">
-                &apos;a&apos;
-              </span>
-              ,{' '}
-              <span className="text-pink-500 dark:text-pink-400">
-                &apos;b&apos;
-              </span>
-              ,{' '}
-              <span className="text-pink-500 dark:text-pink-400">
-                &apos;c&apos;
-              </span>
-              ]{'\n'}
-              <span className="text-sky-500 dark:text-sky-400">type</span> Arr2
-              = [<span className="text-amber-500 dark:text-amber-400">3</span>,{' '}
-              <span className="text-amber-500 dark:text-amber-400">2</span>,{' '}
-              <span className="text-amber-500 dark:text-amber-400">1</span>]
-            </>
-          }
-        />
-        <CodeCard
-          fileName="utils.js"
-          className="right-8 -bottom-4 rotate-[8deg]"
-          snippet={
-            <>
-              <span className="text-sky-500 dark:text-sky-400">function</span>{' '}
-              sum(
-              <span className="text-emerald-500 dark:text-emerald-400">
-                a
-              </span>,{' '}
-              <span className="text-emerald-500 dark:text-emerald-400">b</span>){' '}
-              {'{'}
-              {'\n'}
-              {'  '}
-              <span className="text-sky-500 dark:text-sky-400">
-                return
-              </span>{' '}
-              <span className="text-emerald-500 dark:text-emerald-400">a</span>{' '}
-              <span className="text-pink-500 dark:text-pink-400">+</span>{' '}
-              <span className="text-emerald-500 dark:text-emerald-400">b</span>;
-              {'\n'}
-              {'}'}
-            </>
-          }
-        />
-        <p
-          className="
-    text-[11px] sm:text-xs md:text-sm
-    tracking-[0.35em]
-    uppercase
-    text-emerald-600/90
-    dark:text-emerald-300/80
-  "
-        >
-          {t('subtitle')}
-        </p>
-        <div className="mt-10 sm:mt-12">
-          <div className="-rotate-2 inline-block">
-            <h1
-              className="
-                text-5xl sm:text-6xl md:text-7xl
-                font-black
-                tracking-tight
-                drop-shadow-[0_0_22px_rgba(129,140,248,0.55)]
-              "
-            >
-              <span
-                className="
-                  bg-gradient-to-r
-                  from-sky-400 via-violet-400 to-pink-400
-                  dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500
-                  bg-clip-text
-                  text-transparent
-                "
-              >
-                DevLovers
-              </span>
-            </h1>
-          </div>
-        </div>
-        <p
-          className="
-            mt-8 sm:mt-10
-            max-w-2xl
-            text-base sm:text-lg
-            text-slate-700 dark:text-slate-200
-          "
-        >
-          {t('description')}
-        </p>
-        <div className="mt-12">
-          <Link
-            href="/q&a"
-            className="
-              group
-              relative
-              inline-flex items-center
-              rounded-full
-              px-10 md:px-12
-              py-3.5 md:py-4
-              text-xs md:text-sm
-              font-semibold
-              tracking-[0.25em]
-              uppercase
-              text-white
-              bg-gradient-to-r
-              from-sky-500 via-indigo-500 to-pink-500
-              shadow-[0_18px_45px_rgba(56,189,248,0.45)]
-              dark:shadow-[0_22px_60px_rgba(129,140,248,0.6)]
-              transition
-              hover:scale-105
-              hover:shadow-[0_24px_60px_rgba(56,189,248,0.6)]
-              focus-visible:outline-none
-              focus-visible:ring-2
-              focus-visible:ring-ring
-              focus-visible:ring-offset-2
-            "
-          >
-            <span
-              className="
-                pointer-events-none
-                absolute inset-[2px]
-                rounded-full
-                bg-gradient-to-r
-                from-white/30 via-white/10 to-white/30
-                opacity-40
-                group-hover:opacity-60
-                transition-opacity
-                motion-safe:animate-pulse-soft
-              "
-              aria-hidden="true"
-            />
-            <span className="relative z-10">{t('cta')}</span>
-            <span
-              className="
-                relative z-10 ml-4
-                h-px w-6
-                bg-white/70
-                group-hover:w-10
-                transition-all
-              "
-            />
-          </Link>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/lib/home/cta-variants.ts b/frontend/lib/home/cta-variants.ts
new file mode 100644
index 00000000..ef0bc67f
--- /dev/null
+++ b/frontend/lib/home/cta-variants.ts
@@ -0,0 +1,52 @@
+export interface CTAVariant {
+  text: string;
+  gradient: string;
+  gradientDark: string;
+  shadow: string;
+  shadowDark: string;
+  ring: string;
+}
+
+export const createCTAVariants = (ctaText: string): CTAVariant[] => [
+  {
+    text: `${ctaText} 1`,
+    gradient: 'from-[var(--accent-primary)] to-[var(--accent-hover)]',
+    gradientDark:
+      'dark:from-[var(--accent-primary)] dark:to-[var(--accent-hover)]',
+    shadow: 'shadow-[0_18px_45px_rgba(30,94,255,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(255,45,85,0.5)]',
+    ring: 'focus-visible:ring-[var(--accent-primary)]',
+  },
+  {
+    text: `${ctaText} 2`,
+    gradient: 'from-[#60a5fa] to-[#3b82f6]',
+    gradientDark: 'dark:from-[#ff6b9d] dark:to-[#ff477e]',
+    shadow: 'shadow-[0_18px_45px_rgba(96,165,250,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(255,107,157,0.5)]',
+    ring: 'focus-visible:ring-[#60a5fa] dark:focus-visible:ring-[#ff6b9d]',
+  },
+  {
+    text: `${ctaText} 3`,
+    gradient: 'from-[#2563eb] to-[#1e40af]',
+    gradientDark: 'dark:from-[#f87171] dark:to-[#ef4444]',
+    shadow: 'shadow-[0_18px_45px_rgba(37,99,235,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(239,68,68,0.5)]',
+    ring: 'focus-visible:ring-[#2563eb] dark:focus-visible:ring-[#f87171]',
+  },
+  {
+    text: `${ctaText} 4`,
+    gradient: 'from-[#3b82f6] to-[#2563eb]',
+    gradientDark: 'dark:from-[#fb7185] dark:to-[#e11d48]',
+    shadow: 'shadow-[0_18px_45px_rgba(59,130,246,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(225,29,72,0.5)]',
+    ring: 'focus-visible:ring-[#3b82f6] dark:focus-visible:ring-[#fb7185]',
+  },
+  {
+    text: `${ctaText} 5`,
+    gradient: 'from-[#2563eb] to-[#1d4ed8]',
+    gradientDark: 'dark:from-[#fca5a5] dark:to-[#ef4444]',
+    shadow: 'shadow-[0_18px_45px_rgba(37,99,235,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(239,68,68,0.5)]',
+    ring: 'focus-visible:ring-[#2563eb] dark:focus-visible:ring-[#fca5a5]',
+  },
+];
diff --git a/frontend/project-structure.txt b/frontend/project-structure.txt
index 8aff5152..e396c2de 100644
--- a/frontend/project-structure.txt
+++ b/frontend/project-structure.txt
@@ -1,94 +1,24 @@
+📄 .DS_Store
 📄 .env
 📄 .env.example
 📄 .gitignore
 📄 .prettierrc
+📄 README.md
 📁 actions
   📄 quiz.ts
 📁 app
-  📁 api
-    📁 auth
-      📁 github
-        📁 callback
-          📄 route.ts
-        📄 route.ts
-      📁 google
-        📁 callback
-          📄 route.ts
-        📄 route.ts
-      📁 login
-        📄 route.ts
-      📁 logout
-        📄 route.ts
-      📁 me
-        📄 route.ts
-      📁 password-reset
-        📁 confirm
-          📄 route.ts
-        📄 route.ts
-      📁 resend-verification
-        📄 route.ts
-      📁 signup
-        📄 route.ts
-      📁 verify-email
-        📄 route.ts
-    📁 blog-search
-      📄 route.ts
-    📁 questions
-      📁 [category]
-        📄 route.ts
-    📁 quiz
-      📁 guest-result
-        📄 route.ts
-      📁 verify-answer
-        📄 route.ts
-      📁 [slug]
-        📄 route.ts
-    📁 shop
-      📁 admin
-        📁 orders
-          📁 reconcile-stale
-            📄 route.ts
-          📄 route.ts
-          📁 [id]
-            📁 refund
-              📄 route.ts
-            📄 route.ts
-        📁 products
-          📄 route.ts
-          📁 [id]
-            📄 route.ts
-            📁 status
-              📄 route.ts
-      📁 cart
-        📁 rehydrate
-          📄 route.ts
-      📁 catalog
-        📄 route.ts
-      📁 checkout
-        📄 route.ts
-      📁 internal
-        📁 orders
-          📁 restock-stale
-            📄 route.ts
-      📁 orders
-        📁 [id]
-          📄 route.ts
-      📁 webhooks
-        📁 stripe
-          📄 route.ts
-  📄 globals.css
-  📄 layout.tsx
+  📄 .DS_Store
   📁 [locale]
     📁 about
       📄 page.tsx
     📁 blog
+      📁 [slug]
+        📄 PostDetails.tsx
+        📄 page.tsx
       📁 category
         📁 [category]
           📄 page.tsx
       📄 page.tsx
-      📁 [slug]
-        📄 page.tsx
-        📄 PostDetails.tsx
     📁 dashboard
       📄 page.tsx
     📁 forgot-password
@@ -114,20 +44,20 @@
     📁 shop
       📁 admin
         📁 orders
-          📄 page.tsx
           📁 [id]
-            📄 page.tsx
             📄 RefundButton.tsx
-        📄 page.tsx
-        📁 products
-          📁 new
             📄 page.tsx
           📄 page.tsx
+        📄 page.tsx
+        📁 products
           📁 [id]
             📁 edit
               📄 page.tsx
           📁 _components
             📄 product-form.tsx
+          📁 new
+            📄 page.tsx
+          📄 page.tsx
       📁 cart
         📄 page.tsx
       📁 checkout
@@ -147,7 +77,6 @@
         📄 page.tsx
       📄 page.tsx
       📁 products
-        📄 page.tsx
         📁 [slug]
           📄 page.tsx
         📄 page.tsx
@@ -155,26 +84,121 @@
       📄 page.tsx
     📁 terms-of-service
       📄 page.tsx
+  📁 api
+    📁 ai
+      📁 explain
+        📄 route.ts
+    📁 auth
+      📁 github
+        📁 callback
+          📄 route.ts
+        📄 route.ts
+      📁 google
+        📁 callback
+          📄 route.ts
+        📄 route.ts
+      📁 login
+        📄 route.ts
+      📁 logout
+        📄 route.ts
+      📁 me
+        📄 route.ts
+      📁 password-reset
+        📁 confirm
+          📄 route.ts
+        📄 route.ts
+      📁 resend-verification
+        📄 route.ts
+      📁 signup
+        📄 route.ts
+      📁 verify-email
+        📄 route.ts
+    📁 blog-author
+      📄 route.ts
+    📁 blog-search
+      📄 route.ts
+    📁 questions
+      📁 [category]
+        📄 route.ts
+    📁 quiz
+      📁 [slug]
+        📄 route.ts
+      📁 guest-result
+        📄 route.ts
+      📁 verify-answer
+        📄 route.ts
+    📁 sessions
+      📁 activity
+        📄 route.ts
+    📁 shop
+      📁 admin
+        📁 orders
+          📁 [id]
+            📁 refund
+              📄 route.ts
+            📄 route.ts
+          📁 reconcile-stale
+            📄 route.ts
+          📄 route.ts
+        📁 products
+          📁 [id]
+            📄 route.ts
+            📁 status
+              📄 route.ts
+          📄 route.ts
+      📁 cart
+        📁 rehydrate
+          📄 route.ts
+      📁 catalog
+        📄 route.ts
+      📁 checkout
+        📄 route.ts
+      📁 internal
+        📁 orders
+          📁 restock-stale
+            📄 route.ts
+      📁 orders
+        📁 [id]
+          📄 route.ts
+      📁 webhooks
+        📁 stripe
+          📄 route.ts
+    📁 stats
+      📄 route.ts
+  📄 globals.css
+  📄 layout.tsx
 📄 checkout.json
 📄 client.ts
 📁 components
+  📄 .DS_Store
   📁 about
     📄 CommunitySection.tsx
     📄 FeaturesSection.tsx
     📄 HeroSection.tsx
+    📄 InteractiveGame.tsx
     📄 PricingSection.tsx
-    📄 StatsSection.tsx
+    📄 SponsorsWall.tsx
+    📄 TopicsSection.tsx
   📁 auth
+    📄 AuthErrorBanner.tsx
+    📄 AuthProvidersBlock.tsx
+    📄 AuthShell.tsx
+    📄 AuthSuccessBanner.tsx
+    📄 ForgotPasswordForm.tsx
+    📄 LoginForm.tsx
     📄 OAuthButtons.tsx
     📄 PostAuthQuizSync.tsx
     📄 ProviderButton.tsx
+    📄 ResetPasswordForm.tsx
+    📄 SignupForm.tsx
+    📁 fields
+      📄 EmailField.tsx
+      📄 NameField.tsx
+      📄 PasswordField.tsx
     📁 icons
       📄 GitHubIcon.tsx
       📄 GoogleIcon.tsx
     📄 logoutButton.tsx
-    📄 OAuthButtons.tsx
-    📄 PostAuthQuizSync.tsx
-    📄 ProviderButton.tsx
   📁 blog
     📄 BlogCard.tsx
     📄 BlogCategoryGrid.tsx
@@ -190,13 +214,16 @@
   📁 header
     📄 AppChrome.tsx
     📄 AppMobileMenu.tsx
+    📄 DesktopActions.tsx
+    📄 DesktopNav.tsx
     📄 MainSwitcher.tsx
+    📄 MobileActions.tsx
+    📄 NavLink.tsx
     📄 UnifiedHeader.tsx
   📁 leaderboard
     📄 LeaderboardClient.tsx
     📄 LeaderboardPodium.tsx
     📄 LeaderboardTable.tsx
-    📄 LeaderboardTabs.tsx
     📄 types.ts
   📁 legal
     📄 LegalBlock.tsx
@@ -204,10 +231,14 @@
     📄 PrivacyPolicyContent.tsx
     📄 TermsOfServiceContent.tsx
   📁 q&a
+    📄 AIWordHelper.tsx
     📄 AccordionList.tsx
     📄 CodeBlock.tsx
+    📄 FloatingExplainButton.tsx
+    📄 HighlightCachedTerms.tsx
     📄 Pagination.tsx
     📄 QaSection.tsx
+    📄 SelectableText.tsx
     📄 types.ts
     📄 useQaTabs.ts
   📁 quiz
@@ -220,15 +251,25 @@
     📄 QuizQuestion.tsx
     📄 QuizResult.tsx
     📄 QuizzesSection.tsx
+    📁 tests
+      📄 quiz-container-flow.test.tsx
   📁 shared
+    📄 AnimatedNavLink.tsx
+    📄 CategoryTabButton.tsx
     📄 CookieBanner.tsx
+    📄 DynamicGridBackground.tsx
     📄 Footer.tsx
+    📄 GitHubStarButton.tsx
+    📄 HeaderButton.tsx
     📄 HeroSection.tsx
     📄 LanguageSwitcher.tsx
+    📄 Logo.tsx
+    📄 OnlineCounterPopup.tsx
   📁 shop
     📄 add-to-cart-button.tsx
     📁 admin
       📄 admin-pagination.tsx
+      📄 admin-product-delete-button.tsx
       📄 admin-product-status-toggle.tsx
       📄 shop-admin-topbar.tsx
     📄 cart-provider.tsx
@@ -246,6 +287,17 @@
     📄 shop-hero.tsx
   📁 tests
     📄 CookieBanner.test.tsx
+    📁 q&a
+      📄 accordion-list.test.tsx
+      📄 ai-word-helper.test.tsx
+      📄 code-block.test.tsx
+      📄 floating-explain-button.test.tsx
+      📄 highlight-cached-terms.test.tsx
+      📄 pagination.test.tsx
+      📄 qa-section.test.tsx
+      📄 selectable-text.test.tsx
+      📄 types.test.ts
+      📄 use-qa-tabs.test.tsx
   📁 theme
     📄 ThemeProvider.tsx
     📄 ThemeToggle.tsx
@@ -254,11 +306,14 @@
     📄 badge.tsx
     📄 button.tsx
     📄 confirm-modal.tsx
+    📄 github-star-button.tsx
     📄 radio-group.tsx
     📄 tabs.tsx
 📄 components.json
 📁 data
+  📄 about.ts
   📄 category.ts
+  📄 categoryStyles.ts
 📁 db
   📄 index.ts
   📁 legacy-migrations
@@ -348,7 +403,6 @@
   📄 seed-quiz-vue.ts
   📄 seed-users.ts
 📁 docs
-  📁 payments
   📁 security
     📄 origin-posture.md
 📁 drizzle
@@ -357,12 +411,14 @@
   📄 0002_clean_martin_li.sql
   📄 0003_add_stripe_events_claim_lock.sql
   📄 0004_add_api_rate_limits.sql
+  📄 0005_modern_bromley.sql
   📁 meta
     📄 0000_snapshot.json
     📄 0001_snapshot.json
     📄 0002_snapshot.json
     📄 0003_snapshot.json
     📄 0004_snapshot.json
+    📄 0005_snapshot.json
     📄 _journal.json
 📄 drizzle.config.ts
 📄 eslint.config.mjs
@@ -376,8 +432,14 @@
   📄 request.ts
   📄 routing.ts
 📁 lib
+  📁 about
+    📄 github-sponsors.ts
+    📄 stats.ts
   📁 admin
     📄 parseAdminProductForm.ts
+  📁 ai
+    📄 explainCache.ts
+    📄 prompts.ts
   📁 auth
     📄 admin.ts
     📄 email-verification.ts
@@ -385,7 +447,10 @@
     📄 internal-janitor.ts
     📄 oauth-state.ts
     📄 password-reset.ts
+    📄 safe-redirect.ts
   📄 auth.ts
+  📁 blog
+    📄 date.ts
   📄 cart.ts
   📄 cloudinary.ts
   📁 config
@@ -403,6 +468,8 @@
     📄 cloudinary.ts
     📄 index.ts
     📄 stripe.ts
+  📁 errors
+    📄 products.ts
   📁 http
     📄 getBaseUrl.ts
   📄 logging.ts
@@ -419,11 +486,14 @@
   📁 security
     📄 admin-csrf.ts
     📄 csrf.ts
+    📄 origin.ts
     📄 rate-limit.ts
+    📄 stripe-webhook-rate-limit.ts
   📁 services
     📄 errors.ts
     📄 inventory.ts
     📁 orders
+      📄 _shared.ts
       📄 checkout.ts
       📄 payment-attempts.ts
       📄 payment-intent.ts
@@ -434,7 +504,6 @@
       📄 restock.ts
       📄 summary.ts
       📄 sweeps.ts
-      📄 _shared.ts
     📄 orders.ts
     📁 products
       📁 admin
@@ -461,6 +530,8 @@
     📄 request-locale.ts
     📄 slug.ts
   📁 tests
+    📁 __mocks__
+      📄 server-only.ts
     📄 admin-api-killswitch.test.ts
     📄 admin-csrf-contract.test.ts
     📄 admin-product-patch-price-config-error-contract.test.ts
@@ -473,6 +544,9 @@
     📄 checkout-set-payment-intent-reject-contract.test.ts
     📄 checkout-stripe-error-contract.test.ts
     📄 currency.test.ts
+    📁 factories
+      📁 quiz
+        📄 quiz.ts
     📄 format-money.test.ts
     📁 helpers
       📄 ip.ts
@@ -489,6 +563,20 @@
     📄 product-admin-update-prices-patch-semantics.test.ts
     📄 product-sale-invariant.test.ts
     📄 public-product-visibility.test.ts
+    📁 q&a
+      📄 questions-route.test.ts
+    📁 quiz
+      📄 guest-quiz.test.ts
+      📄 guest-result-route.test.ts
+      📄 quiz-anticheat.test.ts
+      📄 quiz-crypto.test.ts
+      📄 quiz-session.test.ts
+      📄 quiz-setup.test.ts
+      📄 quiz-slug-route.test.ts
+      📄 setup.ts
+      📄 use-quiz-guards.test.ts
+      📄 use-quiz-session.test.ts
+      📄 verify-answer.test.ts
     📄 rate-limit-subject-normalization.test.ts
     📄 rate-limit-subject.test.ts
     📄 restock-order-only-once.test.ts
@@ -503,8 +591,6 @@
     📄 stripe-webhook-psp-fields.test.ts
     📄 stripe-webhook-rate-limit-env.test.ts
     📄 stripe-webhook-refund-full.test.ts
-    📁 __mocks__
-      📄 server-only.ts
   📁 types
     📄 shop.ts
   📄 utils.ts
@@ -520,9 +606,9 @@
 📄 package-lock.json
 📄 package.json
 📁 parse
+  📄 README.md
   📄 parse.ts
   📄 questions.json
-  📄 README.md
   📄 start.json
   📁 typescript
     📁 advanced
@@ -543,12 +629,21 @@
   📄 collectibles.jpg
   📄 favicon-dark.svg
   📄 favicon-light.svg
+  📁 icons
+    📄 angular.svg
+    📄 css3.svg
+    📄 git.svg
+    📄 html5.svg
+    📄 javascript.svg
+    📄 nextjs.svg
+    📄 nodejs.svg
+    📄 react.svg
+    📄 typescript.svg
+    📄 vuejs.svg
   📄 lifestyle.jpg
   📄 placeholder.svg
-📄 README.md
 📄 save-structure.cjs
 📁 scripts
   📄 shop-janitor-restock-stale.mjs
 📄 tsconfig.json
-📄 tsconfig.tsbuildinfo
-📄 vitest.config.ts
+📄 vitest.config.ts
\ No newline at end of file