diff --git a/frontend/app/[locale]/page.tsx b/frontend/app/[locale]/page.tsx
index e14bdcac..5b7cbb03 100644
--- a/frontend/app/[locale]/page.tsx
+++ b/frontend/app/[locale]/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations } from 'next-intl/server';
 
-import HeroSection from '@/components/home/HeroSection';
+import FeaturesHeroSection from '@/components/home/FeaturesHeroSection';
 
 export async function generateMetadata({
   params,
@@ -57,10 +57,13 @@ export async function generateMetadata({
   };
 }
 
+import WelcomeHeroSection from '@/components/home/WelcomeHeroSection';
+
 export default function Home() {
   return (
     <>
-      <HeroSection />
+      <WelcomeHeroSection />
+      <FeaturesHeroSection />
     </>
   );
 }
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 7ab59b5f..7d97ed10 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -277,6 +277,19 @@
   .animate-dash-flow {
     animation: dash-flow 2s linear infinite;
   }
+
+  /* 3D Flip Card */
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+
+  .preserve-3d {
+    transform-style: preserve-3d;
+  }
+
+  .backface-hidden {
+    backface-visibility: hidden;
+  }
 }
 
 @keyframes float {
diff --git a/frontend/components/about/HeroSection.tsx b/frontend/components/about/HeroSection.tsx
index df3487df..29f3f263 100644
--- a/frontend/components/about/HeroSection.tsx
+++ b/frontend/components/about/HeroSection.tsx
@@ -16,7 +16,7 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
     questionsSolved: '850+',
     githubStars: '120+',
     activeUsers: '200+',
-    linkedinFollowers: '1.3k+',
+    linkedinFollowers: '1.5k+',
   };
 
   return (
diff --git a/frontend/components/home/CodeCard.tsx b/frontend/components/home/CodeCard.tsx
deleted file mode 100644
index 0f658566..00000000
--- a/frontend/components/home/CodeCard.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-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 lg:block ${className} animate-card-breathe`}
-      aria-hidden="true"
-    >
-      <div className="absolute top-1/3 -right-4 -bottom-6 -left-4 rounded-3xl bg-[var(--accent-primary)]/8 blur-2xl" />
-
-      <div className="absolute top-1/2 -right-2 -bottom-4 -left-2 rounded-2xl bg-[var(--accent-primary)]/12 blur-xl" />
-
-      <div className="absolute top-2/3 -right-1 -bottom-2 -left-1 rounded-2xl bg-[var(--accent-primary)]/15 blur-md" />
-
-      <div className="bg-card/90 relative max-w-[200px] min-w-[180px] overflow-hidden rounded-2xl border border-[var(--accent-primary)]/20 px-3.5 py-3 shadow-2xl backdrop-blur-xl lg:max-w-[220px] lg:min-w-[200px] lg:px-4 lg:py-3.5 xl:max-w-[240px] xl:min-w-[220px] xl:px-4 xl:py-3.5 dark:shadow-[var(--accent-primary)]/10">
-        <div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px] lg:text-[10px] xl:text-xs">
-          <div className="flex items-center gap-1">
-            <span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm lg:h-2 lg:w-2" />
-            <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm lg:h-2 lg:w-2" />
-            <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2" />
-          </div>
-          <span className="text-[8.5px] font-medium lg:text-[9.5px] xl:text-[10.5px]">
-            {fileName}
-          </span>
-        </div>
-
-        <code className="text-foreground/85 relative z-10 block font-mono text-[10px] leading-relaxed whitespace-pre lg:text-[11px] xl:text-xs">
-          {snippet}
-        </code>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/components/home/FeaturesHeroSection.tsx b/frontend/components/home/FeaturesHeroSection.tsx
new file mode 100644
index 00000000..63d50b66
--- /dev/null
+++ b/frontend/components/home/FeaturesHeroSection.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import * as React from 'react';
+import { BrainCircuit, MessageCircleQuestion, TrendingUp } from 'lucide-react';
+
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
+
+import { FlipCardQA } from './FlipCardQA';
+import { FloatingCode } from './FloatingCode';
+
+export default function FeaturesHeroSection() {
+  const t = useTranslations('homepage');
+
+  return (
+    <DynamicGridBackground
+      showStaticGrid
+      className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 transition-colors duration-300 dark:bg-black"
+    >
+      <FloatingCode />
+
+      <div className="relative z-10 flex w-full max-w-6xl flex-col items-center px-6 py-8 text-center sm:py-12">
+        
+        <h1 className="mb-4 text-2xl font-black tracking-tight text-gray-900 sm:text-4xl md:text-5xl dark:text-white">
+          {t('featuresHeading.aceYourNext')}{' '}<br className="sm:hidden" />
+          <span className="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">
+            {t('featuresHeading.technicalInterview')}
+          </span>
+        </h1>
+
+        <p className="mb-6 max-w-xl text-xs text-gray-600 sm:text-base dark:text-gray-400">
+          {t('description')}
+        </p>
+
+        <div className="mb-8 flex flex-row flex-wrap items-center justify-center gap-3 sm:gap-4">
+          <div className="group relative overflow-hidden rounded-full border border-blue-200/60 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 shadow-sm transition-all duration-300 hover:scale-105 hover:shadow-md dark:border-blue-800/30 dark:from-blue-950/30 dark:to-indigo-950/30">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-100/0 via-blue-100/50 to-blue-100/0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-blue-800/0 dark:via-blue-800/30 dark:to-blue-800/0" />
+            <span className="relative flex items-center gap-2 text-xs font-semibold text-blue-700 sm:text-sm dark:text-blue-300">
+              <MessageCircleQuestion className="h-4 w-4" />
+              <span className="whitespace-nowrap">{t('featureBadges.smartQA')}</span>
+            </span>
+          </div>
+
+          <div className="group relative overflow-hidden rounded-full border border-purple-200/60 bg-gradient-to-r from-purple-50 to-pink-50 px-4 py-2 shadow-sm transition-all duration-300 hover:scale-105 hover:shadow-md dark:border-purple-800/30 dark:from-purple-950/30 dark:to-pink-950/30">
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-100/0 via-purple-100/50 to-purple-100/0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-purple-800/0 dark:via-purple-800/30 dark:to-purple-800/0" />
+            <span className="relative flex items-center gap-2 text-xs font-semibold text-purple-700 sm:text-sm dark:text-purple-300">
+              <BrainCircuit className="h-4 w-4" />
+              <span className="whitespace-nowrap">{t('featureBadges.adaptiveQuizzes')}</span>
+            </span>
+          </div>
+
+          <div className="group relative overflow-hidden rounded-full border border-emerald-200/60 bg-gradient-to-r from-emerald-50 to-teal-50 px-4 py-2 shadow-sm transition-all duration-300 hover:scale-105 hover:shadow-md dark:border-emerald-800/30 dark:from-emerald-950/30 dark:to-teal-950/30">
+            <div className="absolute inset-0 bg-gradient-to-r from-emerald-100/0 via-emerald-100/50 to-emerald-100/0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-emerald-800/0 dark:via-emerald-800/30 dark:to-emerald-800/0" />
+            <span className="relative flex items-center gap-2 text-xs font-semibold text-emerald-700 sm:text-sm dark:text-emerald-300">
+              <TrendingUp className="h-4 w-4" />
+              <span className="whitespace-nowrap">{t('featureBadges.performance')}</span>
+            </span>
+          </div>
+        </div>
+
+        <FlipCardQA />
+
+        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
+          <Link
+            href="/q&a"
+            className="group relative overflow-hidden rounded-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-hover)] px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-[var(--accent-primary)]/20 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-[var(--accent-primary)]/30 focus:outline-none focus:ring-2 focus:ring-[var(--accent-primary)] focus:ring-offset-2 dark:shadow-[var(--accent-primary)]/10 dark:hover:shadow-[var(--accent-primary)]/20"
+          >
+            <span className="relative z-10 flex items-center justify-center gap-2">
+              {t('featuresCta.browseQuestions')}
+              <svg className="h-3.5 w-3.5 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+              </svg>
+            </span>
+          </Link>
+
+          <Link
+            href="/quizzes"
+            className="group relative overflow-hidden rounded-full border border-gray-300/60 bg-white/80 px-6 py-2.5 text-sm font-bold text-gray-900 shadow-sm transition-all duration-300 hover:bg-white hover:border-gray-400 hover:scale-[1.02] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 dark:border-white/10 dark:bg-[#121212] dark:text-gray-200 dark:hover:bg-neutral-900 dark:hover:border-white/20 dark:shadow-none"
+          >
+            <span className="flex items-center justify-center gap-2">
+              {t('featuresCta.takeQuiz')}
+              <svg className="h-3.5 w-3.5 text-gray-400 transition-transform group-hover:rotate-12 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </span>
+          </Link>
+        </div>
+      </div>
+    </DynamicGridBackground>
+  );
+}
diff --git a/frontend/components/home/FlipCardQA.tsx b/frontend/components/home/FlipCardQA.tsx
new file mode 100644
index 00000000..c2b569c9
--- /dev/null
+++ b/frontend/components/home/FlipCardQA.tsx
@@ -0,0 +1,370 @@
+'use client';
+
+import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from 'framer-motion';
+import { RotateCw } from 'lucide-react';
+import Image from 'next/image';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslations } from 'next-intl';
+
+interface Question {
+  id: number;
+  question: string;
+  answer: React.ReactNode;
+  category: string;
+  tip?: string;
+}
+
+const categoryIcons: Record<string, string> = {
+  React: '/icons/react.svg',
+  JavaScript: '/icons/javascript.svg',
+  'Node.js': '/icons/nodejs.svg',
+  'Next.js': '/icons/nextjs.svg', 
+  TypeScript: '/icons/typescript.svg',
+};
+
+const categoryColors: Record<string, string> = {
+  React: '#61DAFB',
+  JavaScript: '#F7DF1E',
+  'Node.js': '#339933',
+  'Next.js': '#FFFFFF',
+  TypeScript: '#3178C6',
+};
+
+export function FlipCardQA() {
+  const t = useTranslations('homepage.flipCard');
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+
+  // Refs for cleanup
+  const flipTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const nextCardTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const resetTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const questions: Question[] = [1, 2, 3, 4, 5].map((id) => ({
+    id,
+    question: t(`questions.${id}.question`),
+    answer: t.rich(`questions.${id}.answer`, {
+      strong: (chunks) => <strong>{chunks}</strong>,
+    }),
+    category: t(`questions.${id}.category`),
+    tip: t(`questions.${id}.tip`),
+  }));
+
+  const currentQuestion = questions[currentIndex];
+  const categoryIcon = categoryIcons[currentQuestion.category] || categoryIcons['JavaScript'];
+  const categoryColor = categoryColors[currentQuestion.category] || categoryColors['JavaScript'];
+
+  const flipRotation = useMotionValue(0);
+  
+  useEffect(() => {
+    flipRotation.set(isFlipped ? 180 : 0);
+  }, [isFlipped, flipRotation]);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const rotateX = useTransform(y, [-100, 100], [10, -10]); 
+  const tiltY = useTransform(x, [-100, 100], [-10, 10]);
+  const rotateY = useTransform([tiltY, flipRotation], (latest: any[]) => latest[0] + latest[1]);
+  
+  const springConfig = { damping: 20, stiffness: 260 }; 
+  const rotateXSpring = useSpring(rotateX, springConfig);
+  const rotateYSpring = useSpring(rotateY, springConfig);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const isFlippedRef = useRef(isFlipped);
+  const isPausedRef = useRef(isPaused);
+  
+  useEffect(() => {
+    isFlippedRef.current = isFlipped;
+  }, [isFlipped]);
+
+  useEffect(() => {
+    isPausedRef.current = isPaused;
+  }, [isPaused]);
+
+  useEffect(() => {
+    const duration = 8000;
+    const interval = 50;
+    let elapsed = 0;
+
+    const timer = setInterval(() => {
+      if (isFlippedRef.current || isPausedRef.current) {
+        elapsed = 0; 
+        setProgress(0);
+        return;
+      }
+
+      elapsed += interval;
+      const newProgress = (elapsed / duration) * 100;
+
+      if (newProgress >= 100) {
+        setIsFlipped(true);
+        elapsed = 0; 
+
+        if (nextCardTimerRef.current) clearTimeout(nextCardTimerRef.current);
+        if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+
+        nextCardTimerRef.current = setTimeout(() => {
+          setCurrentIndex((prev) => (prev + 1) % questions.length);
+        }, 300);
+
+        resetTimerRef.current = setTimeout(() => {
+          setIsFlipped(false);
+          setProgress(0);
+        }, 600);
+      } else {
+        setProgress(newProgress);
+      }
+    }, interval);
+
+    flipTimerRef.current = timer;
+
+    return () => {
+      clearInterval(timer);
+      if (nextCardTimerRef.current) clearTimeout(nextCardTimerRef.current);
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+    };
+  }, [questions.length]); // Only depend on props/stable values
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      setIsFlipped((prev) => !prev);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      setIsFlipped(false);
+      setCurrentIndex((prev) => (prev + 1) % questions.length);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      setIsFlipped(false);
+      setCurrentIndex((prev) => (prev - 1 + questions.length) % questions.length);
+    }
+  };
+
+  const handleFlip = () => {
+    setIsFlipped(!isFlipped);
+  };
+
+  const handleNavigate = (index: number) => {
+    setIsFlipped(false);
+    setCurrentIndex(index);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (isMobile) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+
+    const xPct = (mouseX / width - 0.5) * 200; 
+    const yPct = (mouseY / height - 0.5) * 200; 
+
+    x.set(xPct);
+    y.set(yPct);
+  };
+
+  const handleMouseLeave = () => {
+    if (isMobile) return;
+    x.set(0);
+    y.set(0);
+    setIsPaused(false);
+  };
+
+  const handleMouseEnter = () => {
+    if (isMobile) return;
+    setIsPaused(true);
+  };
+
+  return (
+    <div className="relative w-full max-w-xl">
+      <div
+        className="relative h-[320px] perspective-1000 sm:h-[340px]"
+        onMouseMove={handleMouseMove}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <motion.div
+          className="relative h-full w-full cursor-pointer preserve-3d"
+          style={{
+            rotateX: rotateXSpring,
+            rotateY: rotateYSpring,
+          }}
+          onClick={handleFlip}
+          onKeyDown={handleKeyDown}
+          role="button"
+          tabIndex={0}
+          aria-label={`${t('ui.answer')}. ${isFlipped ? t('ui.clickAgain') : t('ui.clickToReveal')}.`}
+        >
+          <div className="backface-hidden absolute inset-0 flex flex-col overflow-hidden rounded-3xl border border-gray-200 bg-white/80 p-6 shadow-xl backdrop-blur-xl sm:p-8 dark:border-white/10 dark:bg-white/5 dark:shadow-2xl">
+            {categoryIcon && (
+              <div className="pointer-events-none absolute -bottom-10 -right-10 opacity-[0.08] dark:opacity-[0.07]">
+                <Image
+                  src={categoryIcon}
+                  alt=""
+                  width={240}
+                  height={240}
+                  className="rotate-[-15deg] object-contain grayscale"
+                />
+              </div>
+            )}
+
+            <div className="relative z-10 flex h-10 items-center justify-center">
+              <div
+                className="flex items-center gap-2 rounded-full px-4 py-2 backdrop-blur-md transition-colors"
+                style={{
+                  backgroundColor: `${categoryColor}15`,
+                  border: `1px solid ${categoryColor}30`,
+                }}
+              >
+                {categoryIcon && (
+                  <div className="relative h-5 w-5 shrink-0">
+                    <Image
+                      src={categoryIcon}
+                      alt=""
+                      width={20}
+                      height={20}
+                      className="object-contain"
+                    />
+                  </div>
+                )}
+                <span className="text-xs font-semibold text-gray-900 dark:text-white sm:text-sm">
+                  {currentQuestion.category}
+                </span>
+              </div>
+            </div>
+
+            <div className="relative z-10 flex flex-1 flex-col items-center justify-center px-2 py-4 sm:py-6">
+              <h3 className="text-center text-xl font-bold leading-tight text-gray-900 drop-shadow-sm sm:text-2xl sm:leading-snug dark:text-white">
+                {currentQuestion.question}
+              </h3>
+            </div>
+
+            <div className="relative z-10 flex h-16 flex-col items-center justify-center gap-3">
+              <div className="flex items-center gap-2 opacity-60">
+                <div
+                  className="h-px w-8"
+                  style={{ backgroundColor: categoryColor }}
+                />
+                <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: categoryColor }} />
+                <div
+                  className="h-px w-8"
+                  style={{ backgroundColor: categoryColor }}
+                />
+              </div>
+
+              <p className="text-[10px] font-semibold uppercase tracking-wider text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">
+                {isMobile ? t('ui.tapToReveal') : t('ui.clickToReveal')}
+              </p>
+            </div>
+          </div>
+
+          <div className="backface-hidden absolute inset-0 flex flex-col overflow-hidden rounded-3xl border border-gray-200 bg-white/90 p-6 shadow-sm backdrop-blur-md sm:p-8 [transform:rotateY(180deg)] dark:border-neutral-800 dark:bg-neutral-900/10">
+            {categoryIcon && (
+              <div className="pointer-events-none absolute -bottom-10 -right-10 opacity-[0.08] dark:opacity-[0.07]">
+                <Image
+                  src={categoryIcon}
+                  alt=""
+                  width={240}
+                  height={240}
+                  className="rotate-[-15deg] object-contain grayscale"
+                />
+              </div>
+            )}
+
+            <div className="relative z-10 flex h-10 items-center justify-center">
+              <div
+                className="flex items-center gap-2 rounded-full bg-green-100 px-4 py-2 backdrop-blur-sm dark:bg-green-500/20"
+                style={{
+                  border: '1px solid rgba(34, 197, 94, 0.4)',
+                }}
+              >
+                {categoryIcon && (
+                  <div className="relative h-5 w-5 shrink-0">
+                    <Image
+                      src={categoryIcon}
+                      alt=""
+                      width={20}
+                      height={20}
+                      className="object-contain"
+                    />
+                  </div>
+                )}
+                <span className="text-xs font-semibold text-green-800 dark:text-green-100 sm:text-sm">
+                  {t('ui.answer')}
+                </span>
+              </div>
+            </div>
+
+            <div className="relative z-10 flex flex-1 items-center justify-center px-4 py-4 sm:px-6 sm:py-6">
+              <p className="text-center text-sm leading-relaxed text-gray-700 sm:text-base sm:leading-relaxed dark:text-neutral-300">
+                {currentQuestion.answer}
+              </p>
+            </div>
+
+            <div className="relative z-10 flex min-h-[4rem] items-center justify-center px-4">
+              {currentQuestion.tip ? (
+                <div className="flex flex-col items-center">
+                  <span className="mb-1 text-[10px] font-bold uppercase tracking-wider text-indigo-600 opacity-90 dark:text-indigo-300 dark:opacity-70">
+                    {t('ui.proTip')}
+                  </span>
+                  <p className="text-center text-xs font-medium text-gray-600 dark:text-gray-400">
+                    {currentQuestion.tip}
+                  </p>
+                </div>
+              ) : (
+                <p className="text-xs text-gray-600 dark:text-gray-400">
+                  {isMobile ? t('ui.tapAgain') : t('ui.clickAgain')}
+                </p>
+              )}
+            </div>
+          </div>
+        </motion.div>
+
+
+      </div>
+
+      <div className="mt-6 flex justify-center gap-2">
+        {questions.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => handleNavigate(index)}
+            className="relative focus:outline-none focus:ring-2 focus:ring-[var(--accent-primary)] focus:ring-offset-2"
+            aria-label={`Go to question ${index + 1}`}
+            aria-current={index === currentIndex ? 'true' : 'false'}
+          >
+            {index === currentIndex ? (
+              <div className="relative h-2 w-8">
+                <div className="absolute inset-0 rounded-full bg-gray-300 dark:bg-gray-700" />
+                <motion.div
+                  className="absolute inset-0 rounded-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-hover)]"
+                  initial={{ width: '0%' }}
+                  animate={{ width: `${progress}%` }}
+                  transition={{ duration: 0.05, ease: 'linear' }}
+                />
+              </div>
+            ) : (
+              <div className="h-2 w-2 rounded-full bg-gray-300 transition-colors hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600" />
+            )}
+          </button>
+        ))}
+      </div>
+
+
+    </div>
+  );
+}
diff --git a/frontend/components/home/FloatingCode.tsx b/frontend/components/home/FloatingCode.tsx
new file mode 100644
index 00000000..16d0e151
--- /dev/null
+++ b/frontend/components/home/FloatingCode.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+
+interface CodeSnippet {
+  id: string;
+  code: string;
+  language: string;
+  position: { x: string; y: string };
+  rotate: number;
+  delay: number;
+  color: string;
+}
+
+const snippets: CodeSnippet[] = [
+  {
+    id: 'react-hook',
+    code: 'useEffect(() => {\n  fetchData();\n}, []);',
+    language: 'react',
+    position: { x: '12%', y: '25%' },
+    rotate: -6,
+    delay: 0,
+    color: '#61DAFB',
+  },
+  {
+    id: 'css-grid',
+    code: '.grid {\n  display: grid;\n  gap: 1rem;\n}',
+    language: 'css',
+    position: { x: '8%', y: '55%' },
+    rotate: 3,
+    delay: 0.2,
+    color: '#1572B6',
+  },
+  {
+    id: 'git-cmd',
+    code: 'git commit -m\n"feat: init"',
+    language: 'shell',
+    position: { x: '15%', y: '80%' },
+    rotate: -4,
+    delay: 0.4,
+    color: '#F05032',
+  },
+  {
+    id: 'ts-interface',
+    code: 'interface User {\n  id: number;\n  name: string;\n}',
+    language: 'typescript',
+    position: { x: '88%', y: '20%' },
+    rotate: 5,
+    delay: 0.1,
+    color: '#3178C6',
+  },
+  {
+    id: 'sql-query',
+    code: 'SELECT * FROM\nusers WHERE\nactive = true;',
+    language: 'sql',
+    position: { x: '92%', y: '50%' },
+    rotate: -3,
+    delay: 0.3,
+    color: '#e34c26',
+  },
+  {
+    id: 'js-async',
+    code: 'const data =\nawait api.get();',
+    language: 'javascript',
+    position: { x: '85%', y: '75%' },
+    rotate: 4,
+    delay: 0.5,
+    color: '#F7DF1E',
+  },
+];
+
+function CodeBlock({ snippet }: { snippet: CodeSnippet }) {
+  const [displayedCode, setDisplayedCode] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+
+  // Refs for cleanup
+  const typeIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const resetTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const startTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const initialTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    let currentIndex = 0;
+    const code = snippet.code;
+    const typingSpeed = 50 + Math.random() * 30; 
+
+    const startTyping = () => {
+      setIsTyping(true);
+      setDisplayedCode('');
+      currentIndex = 0;
+
+      // Clear any existing interval just in case
+      if (typeIntervalRef.current) clearInterval(typeIntervalRef.current);
+
+      typeIntervalRef.current = setInterval(() => {
+        if (currentIndex < code.length) {
+          setDisplayedCode(code.substring(0, currentIndex + 1));
+          currentIndex++;
+        } else {
+          if (typeIntervalRef.current) clearInterval(typeIntervalRef.current);
+          setIsTyping(false);
+          
+          resetTimeoutRef.current = setTimeout(() => {
+            setDisplayedCode('');
+            startTimeoutRef.current = setTimeout(startTyping, 1000 + Math.random() * 2000);
+          }, 4000 + Math.random() * 2000); 
+        }
+      }, typingSpeed);
+    };
+
+    initialTimeoutRef.current = setTimeout(startTyping, snippet.delay * 1000);
+
+    return () => {
+      if (initialTimeoutRef.current) clearTimeout(initialTimeoutRef.current);
+      if (typeIntervalRef.current) clearInterval(typeIntervalRef.current);
+      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+      if (startTimeoutRef.current) clearTimeout(startTimeoutRef.current);
+    };
+  }, [snippet.code, snippet.delay]);
+
+  return (
+    <motion.div
+      className="absolute -translate-x-1/2 -translate-y-1/2 pointer-events-auto select-none"      
+      style={{
+        left: snippet.position.x,
+        top: snippet.position.y,
+      }}
+      initial={{ opacity: 0, scale: 0.8, y: 20 }}
+      animate={{ 
+        opacity: 0.7,
+        scale: 1,
+        y: 0,
+      }}
+      whileHover={{ 
+        scale: 1.1,
+        opacity: 1,
+        zIndex: 50,
+      }}
+      transition={{
+        duration: 0.8,
+        delay: snippet.delay,
+        ease: 'easeOut',
+      }}
+    >
+      <motion.div
+        className="relative overflow-hidden rounded-lg border bg-white/80 p-3 backdrop-blur-md dark:bg-gray-950/60" 
+        style={{
+          borderColor: `${snippet.color}30`,
+          boxShadow: `0 8px 32px -4px ${snippet.color}15`, 
+        }}
+        animate={{
+          y: [0, -12, 0],
+          rotate: [snippet.rotate, snippet.rotate + 2, snippet.rotate],
+        }}
+        transition={{
+          duration: 5 + Math.random() * 3, 
+          repeat: Infinity,
+          ease: 'easeInOut',
+          delay: snippet.delay,
+        }}
+      >
+        <pre className="font-mono text-[11px] leading-relaxed text-gray-600 dark:text-gray-400">
+          <code>
+            {displayedCode.split('\n').map((line, i) => (
+              <div key={i} className="flex min-h-[1.5em]">
+                <span className="mr-3 w-3 select-none text-right opacity-30 text-xs">{i + 1}</span>
+                <span 
+                  style={{ 
+                    color: i === 0 ? snippet.color : 'inherit',
+                    textShadow: i === 0 ? `0 0 10px ${snippet.color}40` : 'none',
+                    fontWeight: i === 0 ? 600 : 400,
+                  }}
+                >
+                  {line}
+                  {i === displayedCode.split('\n').length - 1 && (
+                    <motion.span
+                      animate={{ opacity: [1, 0, 1] }}
+                      transition={{ duration: 0.8, repeat: Infinity }}
+                      className="ml-0.5 inline-block h-3 w-1.5 align-middle bg-current opacity-70"
+                    />
+                  )}
+                </span>
+              </div>
+            ))}
+          </code>
+        </pre>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export function FloatingCode() {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) return null;
+
+  return (
+    <div className="pointer-events-none absolute inset-0 hidden lg:block overflow-hidden" aria-hidden="true">
+      {snippets.map((snippet) => (
+        <CodeBlock key={snippet.id} snippet={snippet} />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/components/home/HeroCodeCards.tsx b/frontend/components/home/HeroCodeCards.tsx
deleted file mode 100644
index e8e21244..00000000
--- a/frontend/components/home/HeroCodeCards.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { CodeCard } from './CodeCard';
-
-export function HeroCodeCards() {
-  return (
-    <>
-      <CodeCard
-        fileName="arrays.ts"
-        className="lg:top-0 lg:left-16 xl:-top-2 xl:left-8"
-        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="lg:right-20 lg:bottom-14 xl:right-8 xl:bottom-4"
-        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
deleted file mode 100644
index eba79791..00000000
--- a/frontend/components/home/HeroSection.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import * as React from 'react';
-
-import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
-
-import { HeroBackground } from './HeroBackground';
-import { HeroCodeCards } from './HeroCodeCards';
-import { InteractiveCTAButton } from './InteractiveCTAButton';
-
-export default function HeroSection() {
-  const ctaRef = React.useRef<HTMLAnchorElement>(null);
-  const t = useTranslations('homepage');
-
-  return (
-    <section className="relative flex min-h-[calc(100vh-200px)] items-center overflow-hidden bg-gray-50 transition-colors duration-300 sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-screen dark:bg-black">
-      <HeroBackground />
-
-      <div className="relative mx-auto flex w-full max-w-5xl flex-col items-center px-6 py-8 text-center sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32">
-        <HeroCodeCards />
-
-        <p className="text-foreground/90 text-[11px] font-bold tracking-[0.35em] uppercase sm:text-xs lg:text-sm">
-          {t('subtitle')}
-        </p>
-
-        <div className="relative mt-6 inline-block sm:mt-8 lg:mt-14">
-          <h1 className="relative inline-block px-4 text-5xl font-black tracking-tight min-[375px]:text-[3.5rem] sm:text-7xl md:text-[5rem] lg:text-8xl xl:text-[100px]">
-            <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="wave-text-gradient 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"
-              aria-hidden="true"
-            >
-              DevLovers
-            </span>
-          </h1>
-        </div>
-
-        <p className="text-muted-foreground mt-4 text-sm font-light sm:mt-6 sm:text-sm md:mt-10 md:max-w-xl lg:mt-12 lg:max-w-2xl lg:text-base">
-          {t('description')}
-        </p>
-
-        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16">
-          <InteractiveCTAButton ref={ctaRef} />
-          <OnlineCounterPopup ctaRef={ctaRef} />
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
index 381ddb74..b057b111 100644
--- a/frontend/components/home/InteractiveCTAButton.tsx
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -1,22 +1,24 @@
 'use client';
 
-import { AnimatePresence, motion } from 'framer-motion';
-import { Heart } from 'lucide-react';
+import { AnimatePresence, motion, useMotionTemplate, useMotionValue, useSpring } from 'framer-motion';
 import { useTranslations } from 'next-intl';
-import * as React from 'react';
-
+import React, { useRef, useState, useEffect } from 'react';
 import { Link } from '@/i18n/routing';
 
+const MotionLink = motion(Link);
+
 export const InteractiveCTAButton = React.forwardRef<HTMLAnchorElement>(
-  function InteractiveCTAButton(_, ref) {
+  function InteractiveCTAButton(props, forwardedRef) {
     const t = useTranslations('homepage');
-
-    const [variantIndex, setVariantIndex] = React.useState(1);
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [currentText, setCurrentText] = React.useState(t('cta'));
-    const [isFirstRender, setIsFirstRender] = React.useState(true);
+    const internalRef = useRef<HTMLAnchorElement>(null);
+    const [isHovered, setIsHovered] = useState(false);
+    
+    const [currentText, setCurrentText] = useState(t('cta'));
+    const [variantIndex, setVariantIndex] = useState(0); 
+    const [isFirstRender, setIsFirstRender] = useState(true);
 
     const textVariants = [
+      t('cta'), 
       t('ctaVariants.1'),
       t('ctaVariants.2'),
       t('ctaVariants.3'),
@@ -27,139 +29,110 @@ export const InteractiveCTAButton = React.forwardRef<HTMLAnchorElement>(
       t('ctaVariants.8'),
     ];
 
-    React.useEffect(() => {
-      setIsFirstRender(false);
+    useEffect(() => {
+        setIsFirstRender(false);
     }, []);
 
-    const handleEnter = () => {
-      if (!window.matchMedia('(hover: hover)').matches) return;
-      setIsHovered(true);
-      setCurrentText(textVariants[variantIndex]);
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+
+    const springConfig = { damping: 15, stiffness: 150, mass: 0.1 };
+    const springX = useSpring(x, springConfig);
+    const springY = useSpring(y, springConfig);
+
+    const rotate = useMotionValue(0);
+    const background = useMotionTemplate`linear-gradient(${rotate}deg, var(--accent-primary), var(--accent-hover))`;
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      const el = internalRef.current;
+      if (!el) return;
+
+      const rect = el.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      const distanceX = e.clientX - centerX;
+      const distanceY = e.clientY - centerY;
+
+      x.set(distanceX / 4);
+      y.set(distanceY / 4);
     };
 
-    const handleLeave = () => {
-      if (!window.matchMedia('(hover: hover)').matches) return;
+    const handleMouseLeave = () => {
       setIsHovered(false);
-      setVariantIndex(prev => (prev + 1) % textVariants.length);
+      x.set(0);
+      y.set(0);
     };
 
-    const particles = Array.from({ length: 12 }, (_, i) => ({
-      id: i,
-      angle: (i * 360) / 12,
-    }));
+    const handleMouseEnter = () => {
+      setIsHovered(true);
+      const nextIndex = (variantIndex + 1) % textVariants.length;
+      const finalIndex = nextIndex === 0 ? 1 : nextIndex; 
+      
+      setVariantIndex(finalIndex);
+      setCurrentText(textVariants[finalIndex]);
+    };
 
+    useEffect(() => {
+        if (isHovered) {
+             const interval = setInterval(() => {
+                 rotate.set((rotate.get() + 2) % 360);
+             }, 16);
+             return () => clearInterval(interval);
+        }
+    }, [isHovered, rotate]);
+    
     return (
-      <Link
-        ref={ref}
+      <MotionLink
         href="/q&a"
-        onMouseEnter={handleEnter}
-        onMouseLeave={handleLeave}
-        className="group relative inline-flex items-center justify-center overflow-visible rounded-2xl px-8 py-3 text-xs font-semibold tracking-[0.25em] text-white uppercase shadow-[0_18px_45px_rgba(30,94,255,0.35)] transition-shadow duration-500 ease-out hover:shadow-[0_22px_55px_rgba(30,94,255,0.45)] focus-visible:ring-2 focus-visible:ring-[var(--accent-primary)] focus-visible:ring-offset-2 focus-visible:outline-none active:scale-95 active:shadow-xl active:brightness-110 sm:px-10 md:px-12 md:py-3.5 md:text-sm lg:py-4 dark:shadow-[0_22px_60px_rgba(255,45,85,0.5)] dark:hover:shadow-[0_28px_70px_rgba(255,45,85,0.6)]"
+        ref={(node: HTMLAnchorElement) => {
+             internalRef.current = node;
+             if (typeof forwardedRef === 'function') forwardedRef(node);
+             else if (forwardedRef) forwardedRef.current = node;
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        onMouseEnter={handleMouseEnter}
+        style={{ x: springX, y: springY }}
+        className="group relative inline-flex items-center justify-center overflow-hidden rounded-full px-12 py-4 text-sm font-bold tracking-widest text-white uppercase shadow-[0_10px_30px_rgba(0,0,0,0.15)] transition-shadow duration-300 hover:shadow-[0_20px_40px_rgba(30,94,255,0.4)] dark:hover:shadow-[0_20px_40px_rgba(255,45,85,0.5)] cursor-pointer"
+        {...props}
       >
-        <motion.span
-          className="absolute inset-0 rounded-2xl"
-          style={{
-            background:
-              'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
-          }}
-          animate={{
-            background: isHovered
-              ? [
-                  'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
-                  'linear-gradient(225deg, var(--accent-hover) 0%, var(--accent-primary) 100%)',
-                  'linear-gradient(315deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
-                  'linear-gradient(45deg, var(--accent-hover) 0%, var(--accent-primary) 100%)',
-                ]
-              : 'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
-          }}
-          transition={{
-            duration: 2,
-            repeat: isHovered ? Infinity : 0,
-            ease: 'linear',
-          }}
-        />
-
-        <motion.span
-          className="pointer-events-none absolute inset-0 rounded-2xl"
-          initial={{ opacity: 0 }}
-          animate={{
-            opacity: isHovered ? [0.15, 0.25, 0.15] : 0,
-          }}
-          transition={{
-            duration: 2.5,
-            repeat: isHovered ? Infinity : 0,
-            ease: 'easeInOut',
-          }}
-          style={{
-            boxShadow: `
-            0 0 30px 3px var(--accent-primary),
-            0 0 50px 5px var(--accent-hover)
-          `,
-          }}
-        />
-
-        <AnimatePresence>
-          {isHovered &&
-            particles.map(particle => (
-              <motion.span
-                key={particle.id}
-                className="pointer-events-none absolute h-3 w-3"
-                style={{
-                  left: '50%',
-                  top: '50%',
-                  marginLeft: '-6px',
-                  marginTop: '-6px',
-                }}
-                initial={{ x: 0, y: 0, scale: 0, opacity: 0 }}
-                animate={{
-                  x: [0, Math.cos((particle.angle * Math.PI) / 180) * 230, 0],
-                  y: [0, Math.sin((particle.angle * Math.PI) / 180) * 60, 0],
-                  scale: [0.7, 1, 0.7],
-                  opacity: [0, 0.9, 0],
-                }}
-                transition={{
-                  duration: 2,
-                  repeat: Infinity,
-                  ease: 'easeInOut',
-                  delay: particle.id * 0.1,
-                }}
-              >
-                <Heart
-                  size={14}
-                  fill="var(--accent-primary)"
-                  color="var(--accent-primary)"
-                  style={{
-                    filter: 'drop-shadow(0 0 6px var(--accent-primary))',
-                  }}
-                />
-              </motion.span>
-            ))}
-        </AnimatePresence>
-
-        <span
-          className="pointer-events-none absolute inset-[1px] rounded-2xl"
-          style={{
-            background:
-              'linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',
-          }}
-        />
-
-        <span className="relative z-10 flex items-center justify-center">
-          <AnimatePresence mode="wait">
-            <motion.span
-              key={currentText}
-              initial={
-                isFirstRender ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }
-              }
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.3, ease: 'easeOut' }}
-            >
-              {currentText}
-            </motion.span>
-          </AnimatePresence>
-        </span>
-      </Link>
+          <motion.span
+            className="absolute inset-0 z-0"
+            style={{ background }}
+            animate={{
+               scale: isHovered ? 1.1 : 1,
+            }}
+            transition={{ duration: 0.4 }}
+          />
+          
+          <motion.span
+            className="absolute inset-0 z-0 bg-gradient-to-tr from-white/20 to-transparent opacity-0 group-hover:opacity-100"
+            animate={{
+                x: isHovered ? ['100%', '-100%'] : '100%',
+            }}
+            transition={{
+                duration: 1.5,
+                repeat: Infinity,
+                ease: "linear"
+            }}
+          />
+
+          <span className="relative z-10 flex items-center justify-center gap-2 h-5 min-w-[100px] overflow-hidden">
+             <AnimatePresence mode="popLayout" initial={false}>
+                <motion.span
+                    key={currentText}
+                    initial={{ y: '100%', opacity: 0 }}
+                    animate={{ y: '0%', opacity: 1 }}
+                    exit={{ y: '-100%', opacity: 0 }}
+                    transition={{ type: "spring", stiffness: 500, damping: 30, mass: 0.5 }}
+                    className="block whitespace-nowrap text-center origin-center"
+                >
+                    {currentText}
+                </motion.span>
+             </AnimatePresence>
+          </span>
+      </MotionLink>
     );
   }
 );
diff --git a/frontend/components/home/InteractiveConstellation.tsx b/frontend/components/home/InteractiveConstellation.tsx
new file mode 100644
index 00000000..c350a0ba
--- /dev/null
+++ b/frontend/components/home/InteractiveConstellation.tsx
@@ -0,0 +1,335 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import React, { useEffect, useRef } from 'react';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+type IconType = 'react' | 'next' | 'git' | 'code' | 'heart' | 'js' | 'ts' | 'css' | 'node' | 'brackets';
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+  icon: IconType;
+  rotation: number;
+  rotationSpeed: number;
+}
+
+export function InteractiveConstellation() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mouseRef = useRef<Point>({ x: -1000, y: -1000 });
+  const { theme } = useTheme();
+
+  const icons: Record<IconType, (ctx: CanvasRenderingContext2D, size: number) => void> = {
+    react: (ctx, size) => {
+      ctx.beginPath();
+      ctx.ellipse(0, 0, size * 1.2, size * 0.4, 0, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.ellipse(0, 0, size * 1.2, size * 0.4, Math.PI / 3, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.ellipse(0, 0, size * 1.2, size * 0.4, -Math.PI / 3, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(0, 0, size * 0.25, 0, Math.PI * 2);
+      ctx.fill();
+    },
+    next: (ctx, size) => {
+        ctx.beginPath();
+        ctx.moveTo(-size * 0.6, -size * 0.8);
+        ctx.lineTo(-size * 0.6, size * 0.8);
+        ctx.lineTo(size * 0.6, -size * 0.8);
+        ctx.lineTo(size * 0.6, size * 0.8);
+        ctx.lineWidth = 2.5;
+        ctx.stroke();
+    },
+    git: (ctx, size) => {
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(0, size * 0.9);
+        ctx.lineTo(0, -size * 0.9);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(0, -size * 0.9, size * 0.3, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.quadraticCurveTo(size * 0.7, 0, size * 0.7, -size * 0.5);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(size * 0.7, -size * 0.5, size * 0.3, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(0, size * 0.9, size * 0.3, 0, Math.PI * 2);
+        ctx.fill();
+    },
+    code: (ctx, size) => {
+        ctx.font = `bold ${size * 1.3}px monospace`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('</>', 0, 0);
+    },
+    heart: (ctx, size) => {
+        ctx.beginPath();
+        ctx.moveTo(0, size * 0.4);
+        ctx.bezierCurveTo(
+          -size * 0.8, -size * 0.3,
+          -size * 1.0, size * 0.2,
+          0, size * 1.0
+        );
+        ctx.bezierCurveTo(
+          size * 1.0, size * 0.2,
+          size * 0.8, -size * 0.3,
+          0, size * 0.4
+        );
+        ctx.fill();
+    },
+    js: (ctx, size) => {
+       ctx.font = `bold ${size * 1.6}px sans-serif`;
+       ctx.textAlign = 'center';
+       ctx.textBaseline = 'middle';
+       ctx.fillText('JS', 0, 0);
+    },
+    ts: (ctx, size) => {
+       ctx.font = `bold ${size * 1.6}px sans-serif`;
+       ctx.textAlign = 'center';
+       ctx.textBaseline = 'middle';
+       ctx.fillText('TS', 0, 0);
+    },
+    css: (ctx, size) => {
+        ctx.font = `bold ${size * 1.4}px sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('CSS', 0, 0);
+    },
+    node: (ctx, size) => {
+        ctx.font = `bold ${size * 1.2}px sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('NODE', 0, 0);
+    },
+    brackets: (ctx, size) => {
+        ctx.font = `bold ${size * 1.8}px monospace`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('{}', 0, 0);
+    }
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let animationFrameId: number;
+    let particles: Particle[] = [];
+    
+    const connectionDistance = 140;
+    const particleCountFull = 50; 
+    const interactionRadius = 220;
+    const magneticForce = 0.6; 
+    const iconTypes = Object.keys(icons) as IconType[];
+
+    const resize = () => {
+      canvas.width = container.clientWidth;
+      canvas.height = container.clientHeight;
+      initParticles();
+    };
+
+    const initParticles = () => {
+      particles = [];
+      const density = (canvas.width * canvas.height) / (1920 * 1080);
+      const count = Math.floor(particleCountFull * density) || 20;
+
+      for (let i = 0; i < count; i++) {
+        particles.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          vx: (Math.random() - 0.5) * 0.3, 
+          vy: (Math.random() - 0.5) * 0.3,
+          size: Math.random() * 8 + 10, 
+          icon: iconTypes[Math.floor(Math.random() * iconTypes.length)],
+          rotation: Math.random() * Math.PI * 2,
+          rotationSpeed: (Math.random() - 0.5) * 0.02,
+        });
+      }
+    };
+
+    const draw = () => {
+      if (!ctx || !canvas) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Colors
+      const isDark = theme === 'dark' || document.documentElement.classList.contains('dark');
+      const r = isDark ? 255 : 30;
+      const g = isDark ? 45 : 94;
+      const b = isDark ? 85 : 255;
+      
+      
+      particles.forEach((p, i) => {
+        const pulse = Math.sin((Date.now() * 0.002) + p.rotation * 5) * 0.5 + 0.5;
+        const baseAlpha = 0.4;
+        const pulseAlpha = baseAlpha + (pulse * 0.2);
+
+        const dx = mouseRef.current.x - p.x;
+        const dy = mouseRef.current.y - p.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        
+        if (dist < interactionRadius) {
+            const force = (interactionRadius - dist) / interactionRadius;
+            const safeDist = Math.max(dist, 0.1);
+             p.vx -= (dx / safeDist) * force * magneticForce * 0.2;
+             p.vy -= (dy / safeDist) * force * magneticForce * 0.2;
+        }
+
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        const dxCenter = p.x - centerX;
+        const dyCenter = p.y - centerY;
+        const distCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter);
+        const centerClearRadius = 450;
+
+        if (distCenter < centerClearRadius) {
+            const force = (centerClearRadius - distCenter) / centerClearRadius;
+            const safeDistCenter = Math.max(distCenter, 0.1);
+             p.vx += (dxCenter / safeDistCenter) * force * 2.0; 
+             p.vy += (dyCenter / safeDistCenter) * force * 2.0;
+        }
+
+        for (let j = 0; j < particles.length; j++) {
+          if (i === j) continue;
+          const p2 = particles[j];
+          const dx2 = p.x - p2.x;
+          const dy2 = p.y - p2.y;
+          const dist2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+          const minDistance = 60;
+          
+          if (dist2 < minDistance && dist2 > 0) {
+            const repulsionForce = (minDistance - dist2) / minDistance;
+            const safeDist2 = Math.max(dist2, 0.1);
+            const pushX = (dx2 / safeDist2) * repulsionForce * 0.5;
+            const pushY = (dy2 / safeDist2) * repulsionForce * 0.5;
+            p.vx += pushX;
+            p.vy += pushY;
+          }
+        }
+
+        const mouseInfluenceRadius = 300;
+        let alpha = pulseAlpha;
+        if (dist < mouseInfluenceRadius) {
+            const boost = (mouseInfluenceRadius - dist) / mouseInfluenceRadius;
+            alpha += boost * 0.5; 
+        }
+        alpha = Math.min(alpha, 1);
+
+        const currentParticleColor = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+
+        const padding = 50;
+        const pushStrength = 0.05;
+
+        if (p.x < padding) p.vx += pushStrength;
+        if (p.x > canvas.width - padding) p.vx -= pushStrength;
+        if (p.y < padding) p.vy += pushStrength;
+        if (p.y > canvas.height - padding) p.vy -= pushStrength;
+
+        p.x += p.vx;
+        p.y += p.vy;
+        p.rotation += p.rotationSpeed;
+
+        if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
+        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
+        p.vx *= 0.98;
+        p.vy *= 0.98;
+
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.rotation);
+        
+        ctx.shadowBlur = alpha * 15;
+        ctx.shadowColor = `rgba(${r}, ${g}, ${b}, 0.8)`;
+        
+        ctx.strokeStyle = currentParticleColor;
+        ctx.fillStyle = currentParticleColor; 
+        ctx.lineWidth = 2; 
+
+        icons[p.icon](ctx, p.size);
+        
+        ctx.restore();
+
+        for (let j = i + 1; j < particles.length; j++) {
+            const p2 = particles[j];
+            const dx2 = p.x - p2.x;
+            const dy2 = p.y - p2.y;
+            const dist2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+
+            if (dist2 < connectionDistance) {
+                const maxAlpha = Math.max(alpha, 0.4);
+                
+                const connectionAlpha = (1 - dist2 / connectionDistance) * maxAlpha;
+                
+                if (connectionAlpha > 0.05) {
+                    ctx.beginPath();
+                    ctx.moveTo(p.x, p.y);
+                    ctx.lineTo(p2.x, p2.y);
+                    
+                    ctx.shadowBlur = connectionAlpha * 10;
+                    ctx.shadowColor = `rgba(${r}, ${g}, ${b}, 0.5)`;
+                    
+                    ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${connectionAlpha})`;
+                    ctx.lineWidth = 1.5;
+                    ctx.lineCap = 'round';
+                    ctx.stroke();
+                    
+                   ctx.shadowBlur = 0;
+                }
+            }
+        }
+      });
+      
+      animationFrameId = requestAnimationFrame(draw);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = container.getBoundingClientRect();
+      mouseRef.current = { 
+          x: e.clientX - rect.left, 
+          y: e.clientY - rect.top 
+      };
+    };
+
+    const handleMouseLeave = () => {
+         mouseRef.current = { x: -1000, y: -1000 };
+    };
+
+    window.addEventListener('resize', resize);
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
+
+    resize();
+    draw();
+
+    return () => {
+      window.removeEventListener('resize', resize);
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('mouseleave', handleMouseLeave);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [theme]);
+
+  return (
+    <div ref={containerRef} className="absolute inset-0 z-0 overflow-hidden pointer-events-auto hidden lg:block">
+      <canvas ref={canvasRef} className="block h-full w-full" />
+    </div>
+  );
+}
diff --git a/frontend/components/home/HeroBackground.tsx b/frontend/components/home/WelcomeHeroBackground.tsx
similarity index 76%
rename from frontend/components/home/HeroBackground.tsx
rename to frontend/components/home/WelcomeHeroBackground.tsx
index 06e360d2..db6a4d24 100644
--- a/frontend/components/home/HeroBackground.tsx
+++ b/frontend/components/home/WelcomeHeroBackground.tsx
@@ -1,8 +1,10 @@
-export function HeroBackground() {
+import React from 'react';
+
+export function WelcomeHeroBackground() {
   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 top-0 left-0 -z-10 h-full w-full overflow-hidden">
+        <div className="absolute top-[-10rem] left-[-10rem] h-[30rem] w-[30rem] 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 right-0 bottom-[-10rem] h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
       </div>
diff --git a/frontend/components/home/WelcomeHeroSection.tsx b/frontend/components/home/WelcomeHeroSection.tsx
new file mode 100644
index 00000000..bf64bf2e
--- /dev/null
+++ b/frontend/components/home/WelcomeHeroSection.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+
+
+import { InteractiveConstellation } from '@/components/home/InteractiveConstellation';
+import { InteractiveCTAButton } from '@/components/home/InteractiveCTAButton';
+import { WelcomeHeroBackground } from '@/components/home/WelcomeHeroBackground';
+
+export default function WelcomeHeroSection() {
+  const t = useTranslations('homepage');
+
+  return (
+    <section className="relative flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center overflow-hidden px-4 md:px-8 lg:px-12">
+      <WelcomeHeroBackground />
+      <InteractiveConstellation />
+      <div className="z-10 flex w-full max-w-5xl flex-col items-center text-center">
+        <span className="mb-6 text-[10px] font-bold tracking-[0.25em] text-gray-600 uppercase sm:text-xs md:text-sm dark:text-white/70">
+          {t('subtitle')}
+        </span>
+        <div className="relative">
+          <h1 className="select-none text-5xl font-extrabold tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
+            <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="wave-text-gradient 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"
+              aria-hidden="true"
+            >
+              DevLovers
+            </span>
+          </h1>
+        </div>
+
+        <p className="text-muted-foreground mt-4 text-sm font-light sm:mt-6 sm:text-sm md:mt-10 md:max-w-xl lg:mt-12 lg:max-w-2xl lg:text-base">
+          {t('welcomeDescription')}
+        </p>
+
+        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16">
+          <InteractiveCTAButton />
+        </div>
+      </div>
+
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 1, duration: 1 }}
+        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-400 dark:text-white/50"
+      >
+        <div className="relative h-8 w-5 rounded-full border-2 border-gray-300 p-1 dark:border-white/30">
+           <motion.div 
+              animate={{ y: [0, 8, 0] }}
+              transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
+              className="mx-auto h-1.5 w-1 rounded-full bg-gray-400 dark:bg-white/70"
+           />
+        </div>
+        <motion.div
+           animate={{ y: [0, 4, 0] }}
+           transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.2 }}
+        >
+            <ChevronDown className="h-4 w-4 text-gray-400 dark:text-white/50" />
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index 27cd2ea2..15130e25 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -363,4 +363,4 @@ export function ParticleCanvas({
   }, []);
 
   return <canvas ref={canvasRef} className={className} aria-hidden="true" />;
-}
+}
\ No newline at end of file
diff --git a/frontend/lib/about/stats.ts b/frontend/lib/about/stats.ts
index c42e764e..2b0ea081 100644
--- a/frontend/lib/about/stats.ts
+++ b/frontend/lib/about/stats.ts
@@ -43,7 +43,7 @@ export const getPlatformStats = unstable_cache(
 
     const linkedinCount = process.env.LINKEDIN_FOLLOWER_COUNT
       ? parseInt(process.env.LINKEDIN_FOLLOWER_COUNT)
-      : 1400;
+      : 1500;
 
     let totalUsers = 243;
     let solvedTests = 1890;
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 8ea781ee..8a5be3a3 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -46,7 +46,8 @@
   "homepage": {
     "title": "DevLovers — Technical Interview Platform",
     "subtitle": "Platform for Technical Interview Preparation",
-    "description": "Prepare for technical interviews with Q&A, quizzes, leaderboards, and AI-powered explanations.",
+    "welcomeDescription": "Prepare for technical interviews with Q&A, quizzes, leaderboards, and AI-powered explanations.",
+    "description": "Build real confidence in frontend, backend, and full-stack development through interactive interview questions, quizzes, and practical explanations",
     "ogImageAlt": "DevLovers — Technical Interview Platform",
     "cta": "Take the first step",
     "ctaVariants": {
@@ -58,6 +59,61 @@
       "6": "Brave move, by the way",
       "7": "Okay, now it's happening",
       "8": "Hello, new commit"
+    },
+    "featuresHeading": {
+      "aceYourNext": "Ace Your Next",
+      "technicalInterview": "Technical Interview"
+    },
+    "featureBadges": {
+      "smartQA": "Smart Q&A",
+      "adaptiveQuizzes": "Adaptive Quizzes",
+      "performance": "Performance"
+    },
+    "featuresCta": {
+      "browseQuestions": "Browse All Questions",
+      "takeQuiz": "Take a Quiz"
+    },
+    "flipCard": {
+      "ui": {
+        "tapToReveal": "Tap to reveal",
+        "clickToReveal": "Click to reveal",
+        "tapAgain": "Tap again to see question",
+        "clickAgain": "Click again to see question",
+        "answer": "Answer",
+        "proTip": "Pro Tip"
+      },
+      "questions": {
+        "1": {
+          "question": "When should you actually use useMemo?",
+          "answer": "Don't prematurely optimize! Use it only for <strong>expensive calculations</strong> or when passing objects as props to children wrapped in <strong>React.memo</strong> to prevent unnecessary re-renders.",
+          "category": "React",
+          "tip": "Overusing it can hurt performance due to dependency comparison overhead."
+        },
+        "2": {
+          "question": "Why is \"Event Delegation\" better than direct binding?",
+          "answer": "It attaches a <strong>single listener</strong> to a parent instead of thousands on children. This uses less memory and automatically handles <strong>dynamically added elements</strong> via event bubbling.",
+          "category": "JavaScript",
+          "tip": "Perfect for lists, tables, and infinite scroll feeds."
+        },
+        "3": {
+          "question": "How does the Node.js Event Loop handle I/O?",
+          "answer": "Node.js offloads I/O operations to the system kernel. When an operation completes, the kernel notifies Node.js, and the callback is added to the <strong>Poll phase</strong> to be executed.",
+          "category": "Node.js",
+          "tip": "This is why Node.js is \"non-blocking\" despite being single-threaded."
+        },
+        "4": {
+          "question": "Should you use SSR, SSG, or ISR?",
+          "answer": "Use <strong>SSG</strong> for static blogs (fastest). Use <strong>SSR</strong> for personalized dashboards (freshest). Use <strong>ISR</strong> to update static pages incrementally without a full rebuild.",
+          "category": "Next.js",
+          "tip": "Start with SSG/ISR by default for better performance."
+        },
+        "5": {
+          "question": "Why use Generics in TypeScript?",
+          "answer": "They let you write <strong>reusable code</strong> that works with any type while keeping full type safety. It's like function arguments, but for <strong>types</strong>.",
+          "category": "TypeScript",
+          "tip": "Commonly used in API wrappers, hooks, and utility functions."
+        }
+      }
     }
   },
   "qa": {
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 7ccdf583..4128c2ce 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -45,10 +45,11 @@
   },
   "homepage": {
     "title": "DevLovers",
-    "subtitle": "Platforma do przygotowania do rozmów kwalifikacyjnych",
-    "description": "Przygotuj się do rozmów technicznych dzięki pytaniom, quizom, rankingom i wyjaśnieniom wspieranym przez AI.",
+    "subtitle": "Platforma do Przygotowania do Rozmów Kwalifikacyjnych",
+    "welcomeDescription": "Przygotuj się do rozmów technicznych z Q&A, quizami, rankingiem i wyjaśnieniami AI.",
+    "description": "Zbuduj prawdziwą pewność w frontend, backend i full-stack development dzięki interaktywnym pytaniom rekrutacyjnym, quizom i praktycznym wyjaśnieniom",
     "ogImageAlt": "DevLovers — platforma do przygotowania do rozmów technicznych",
-    "cta": "Rozpocznij",
+    "cta": "Rozpocznij naukę",
     "ctaVariants": {
       "1": "Bez presji. Po prostu zacznij",
       "2": "To może być ciekawsze, niż myślisz",
@@ -58,6 +59,61 @@
       "6": "Klik był — to się liczy",
       "7": "Postęp ważniejszy niż perfekcja",
       "8": "Zacząć to też funkcja"
+    },
+    "featuresHeading": {
+      "aceYourNext": "Zdaj kolejną",
+      "technicalInterview": "rozmowę perfekcyjnie"
+    },
+    "featureBadges": {
+      "smartQA": "Inteligentne Q&A",
+      "adaptiveQuizzes": "Adaptacyjne quizy",
+      "performance": "Wydajność"
+    },
+    "featuresCta": {
+      "browseQuestions": "Przeglądaj wszystkie pytania",
+      "takeQuiz": "Rozwiąż quiz"
+    },
+    "flipCard": {
+      "ui": {
+        "tapToReveal": "Dotknij, aby odkryć",
+        "clickToReveal": "Kliknij, aby odkryć",
+        "tapAgain": "Dotknij ponownie, aby zobaczyć pytanie",
+        "clickAgain": "Kliknij ponownie, aby zobaczyć pytanie",
+        "answer": "Odpowiedź",
+        "proTip": "Wskazówka"
+      },
+      "questions": {
+        "1": {
+          "question": "Kiedy faktycznie używać useMemo?",
+          "answer": "Nie optymalizuj przedwcześnie! Używaj tylko do <strong>kosztownych obliczeń</strong> lub przy przekazywaniu obiektów jako props do dzieci owiniętych w <strong>React.memo</strong>, aby zapobiec niepotrzebnym renderowaniom.",
+          "category": "React",
+          "tip": "Nadużywanie może zaszkodzić wydajności przez narzut porównywania zależności."
+        },
+        "2": {
+          "question": "Dlaczego \"Delegacja Zdarzeń\" jest lepsza niż bezpośrednie wiązanie?",
+          "answer": "Dołącza <strong>pojedynczy nasłuchiwacz</strong> do rodzica zamiast tysięcy do dzieci. Zużywa mniej pamięci i automatycznie obsługuje <strong>dynamicznie dodawane elementy</strong> poprzez bąbelkowanie zdarzeń.",
+          "category": "JavaScript",
+          "tip": "Idealne dla list, tabel i nieskończonych przewijań."
+        },
+        "3": {
+          "question": "Jak Event Loop w Node.js obsługuje I/O?",
+          "answer": "Node.js zleca operacje I/O jądru systemu. Gdy operacja się kończy, jądro powiadamia Node.js, a callback trafia do <strong>fazy Poll</strong> w celu wykonania.",
+          "category": "Node.js",
+          "tip": "Dlatego Node.js jest \"nieblokujący\" mimo bycia jednowątkowym."
+        },
+        "4": {
+          "question": "Co wybrać: SSR, SSG czy ISR?",
+          "answer": "Używaj <strong>SSG</strong> dla statycznych blogów (najszybsze). Używaj <strong>SSR</strong> dla spersonalizowanych kokpitów (najświeższe). Używaj <strong>ISR</strong> do aktualizacji statycznych stron bez pełnej przebudowy.",
+          "category": "Next.js",
+          "tip": "Zacznij od SSG/ISR domyślnie dla lepszej wydajności."
+        },
+        "5": {
+          "question": "Po co używać Generics w TypeScript?",
+          "answer": "Pozwalają pisać <strong>kod wielokrotnego użytku</strong>, który działa z każdym typem, zachowując pełne bezpieczeństwo typów. To jak argumenty funkcji, ale dla <strong>typów</strong>.",
+          "category": "TypeScript",
+          "tip": "Powszechnie używane w wrapperach API, hookach i funkcjach użytkowych."
+        }
+      }
     }
   },
   "qa": {
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index 32aea444..85d1a9ca 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -46,7 +46,8 @@
   "homepage": {
     "title": "DevLovers — Платформа для підготовки до технічних співбесід",
     "subtitle": "Платформа для підготовки до технічних співбесід",
-    "description": "Готуйся до технічних співбесід за допомогою питань, квізів, рейтингу та пояснень на базі AI.",
+    "welcomeDescription": "Готуйся до технічних співбесід з Q&A, квізами, рейтингом та AI-поясненнями.",
+    "description": "Сформуй справжню впевненість у frontend, backend та full-stack розробці завдяки інтерактивним питанням для співбесід, квізам і практичним поясненням",
     "ogImageAlt": "DevLovers — платформа для підготовки до технічних співбесід",
     "cta": "Зроби перший крок",
     "ctaVariants": {
@@ -58,6 +59,61 @@
       "6": "Ну все, процес пішов",
       "7": "Простіше, ніж виглядає",
       "8": "Почати — це теж фіча"
+    },
+    "featuresHeading": {
+      "aceYourNext": "Пройди наступну",
+      "technicalInterview": "співбесіду на відмінно"
+    },
+    "featureBadges": {
+      "smartQA": "Розумні Q&A",
+      "adaptiveQuizzes": "Адаптивні квізи",
+      "performance": "Продуктивність"
+    },
+    "featuresCta": {
+      "browseQuestions": "Переглянути всі питання",
+      "takeQuiz": "Пройти квіз"
+    },
+    "flipCard": {
+      "ui": {
+        "tapToReveal": "Торкніться, щоб відкрити",
+        "clickToReveal": "Клікніть, щоб відкрити",
+        "tapAgain": "Торкніться ще раз, щоб побачити питання",
+        "clickAgain": "Клікніть ще раз, щоб побачити питання",
+        "answer": "Відповідь",
+        "proTip": "Порада"
+      },
+      "questions": {
+        "1": {
+          "question": "Коли насправді варто використовувати useMemo?",
+          "answer": "Не оптимізуйте передчасно! Використовуйте тільки для <strong>важких обчислень</strong> або при передачі об'єктів як пропсів у компоненти, огорнуті в <strong>React.memo</strong>, щоб запобігти зайвим ре-рендерам.",
+          "category": "React",
+          "tip": "Надмірне використання може зашкодити продуктивності через накладні витрати на порівняння залежностей."
+        },
+        "2": {
+          "question": "Чому \"Делегування подій\" краще за пряме прив'язування?",
+          "answer": "Воно додає <strong>один слухач</strong> до батьківського елемента замість тисяч на дочірніх. Це використовує менше пам'яті та автоматично обробляє <strong>динамічно додані елементи</strong> через спливання подій.",
+          "category": "JavaScript",
+          "tip": "Ідеально для списків, таблиць та стрічок з нескінченною прокруткою."
+        },
+        "3": {
+          "question": "Як Event Loop у Node.js обробляє I/O?",
+          "answer": "Node.js перекладає операції I/O на ядро системи. Коли операція завершується, ядро повідомляє Node.js, і колбек додається у <strong>фазу Poll</strong> для виконання.",
+          "category": "Node.js",
+          "tip": "Ось чому Node.js є \"неблокуючим\", незважаючи на однопотоковість."
+        },
+        "4": {
+          "question": "Що обрати: SSR, SSG чи ISR?",
+          "answer": "Використовуйте <strong>SSG</strong> для статичних блогів (найшвидше). Використовуйте <strong>SSR</strong> для персоналізованих дашбордів (найсвіжіше). Використовуйте <strong>ISR</strong> для оновлення статичних сторінок без повного перезбирання.",
+          "category": "Next.js",
+          "tip": "Починайте з SSG/ISR за замовчуванням для кращої продуктивності."
+        },
+        "5": {
+          "question": "Навіщо використовувати Generics у TypeScript?",
+          "answer": "Вони дозволяють писати <strong>перевикористовуваний код</strong>, який працює з будь-яким типом, зберігаючи повну безпеку типів. Це як аргументи функції, але для <strong>типів</strong>.",
+          "category": "TypeScript",
+          "tip": "Часто використовується в обгортках API, хуках та утилітах."
+        }
+      }
     }
   },
   "qa": {
diff --git a/frontend/public/apparel.jpg b/frontend/public/apparel.jpg
deleted file mode 100644
index ade156ae..00000000
Binary files a/frontend/public/apparel.jpg and /dev/null differ
diff --git a/frontend/public/collectibles.jpg b/frontend/public/collectibles.jpg
deleted file mode 100644
index 23bfee58..00000000
Binary files a/frontend/public/collectibles.jpg and /dev/null differ
diff --git a/frontend/public/icons/code.svg b/frontend/public/icons/code.svg
new file mode 100644
index 00000000..aaec906f
--- /dev/null
+++ b/frontend/public/icons/code.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00BCD4">
+  <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+</svg>
diff --git a/frontend/public/icons/heart.svg b/frontend/public/icons/heart.svg
new file mode 100644
index 00000000..0f655e4a
--- /dev/null
+++ b/frontend/public/icons/heart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#E91E63">
+  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+</svg>
diff --git a/frontend/public/icons/palette.svg b/frontend/public/icons/palette.svg
new file mode 100644
index 00000000..c1046f28
--- /dev/null
+++ b/frontend/public/icons/palette.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#9C27B0">
+  <path d="M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
+</svg>
diff --git a/frontend/public/lifestyle.jpg b/frontend/public/lifestyle.jpg
deleted file mode 100644
index 3e726676..00000000
Binary files a/frontend/public/lifestyle.jpg and /dev/null differ