(SP: 2) [Frontend] Update Code cards, button behavior, and layout

frontend/app/[locale]/layout.tsx

@@ -10,7 +10,6 @@ import { AppChrome } from '@/components/header/AppChrome';
 import { MainSwitcher } from '@/components/header/MainSwitcher';
 import { CookieBanner } from '@/components/shared/CookieBanner';
 import Footer from '@/components/shared/Footer';
-import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
 import { ThemeProvider } from '@/components/theme/ThemeProvider';
 import { locales } from '@/i18n/config';
 import { getCurrentUser } from '@/lib/auth';
@@ -73,7 +72,6 @@ export default async function LocaleLayout({
             {children}
           </MainSwitcher>
         </AppChrome>
-        <OnlineCounterPopup />
 
         <Footer />
         <Toaster position="top-right" richColors expand />

frontend/app/[locale]/q&a/page.tsx

@@ -27,19 +27,21 @@ export default async function QAPage({
   const t = await getTranslations({ locale, namespace: 'qa' });
 
   return (
-    <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
-      <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="mb-8">
-          <p className="text-sm font-semibold text-(--accent-primary)">
-            {t('pretitle')}
-          </p>
-          <h1 className="text-3xl font-bold">{t('title')}</h1>
-          <p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
-        </div>
-        <Suspense fallback={<>...</>}>
-          <QaSection />
-        </Suspense>
-      </main>
-    </DynamicGridBackground>
+    <div className="min-h-screen">
+      <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
+        <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-8">
+            <p className="text-sm font-semibold text-(--accent-primary)">
+              {t('pretitle')}
+            </p>
+            <h1 className="text-3xl font-bold">{t('title')}</h1>
+            <p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
+          </div>
+          <Suspense fallback={<>...</>}>
+            <QaSection />
+          </Suspense>
+        </main>
+      </DynamicGridBackground>
+    </div>
   );
 }

frontend/app/globals.css

@@ -237,7 +237,8 @@
     will-change: transform;
   }
 
-  .lg\:left-16.animate-card-breathe {
+  .lg\:left-16.animate-card-breathe,
+  .xl\:left-8.animate-card-breathe {
     transform: rotate(-10deg);
     --card-x: -20px;
     --card-y: -15px;
@@ -246,7 +247,8 @@
     animation-delay: 0s;
   }
 
-  .lg\:right-20.animate-card-breathe {
+  .lg\:right-20.animate-card-breathe,
+  .xl\:right-8.animate-card-breathe {
     transform: rotate(8deg);
     --card-x: 20px;
     --card-y: 15px;

frontend/components/home/CodeCard.tsx

@@ -18,17 +18,19 @@ export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
 
       <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 dark:shadow-[var(--accent-primary)]/10">
-        <div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px]">
+      <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" />
-            <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm" />
-            <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm" />
+            <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">{fileName}</span>
+          <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">
+        <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>

frontend/components/home/HeroCodeCards.tsx

@@ -5,7 +5,7 @@ export function HeroCodeCards() {
     <>
       <CodeCard
         fileName="arrays.ts"
-        className="lg:top-0 lg:left-16"
+        className="lg:top-0 lg:left-16 xl:-top-2 xl:left-8"
         snippet={
           <>
             <span className="text-[var(--accent-primary)]">type</span> Arr1 = [
@@ -31,7 +31,7 @@ export function HeroCodeCards() {
 
       <CodeCard
         fileName="utils.js"
-        className="lg:right-20 lg:bottom-16"
+        className="lg:right-20 lg:bottom-14 xl:right-8 xl:bottom-4"
         snippet={
           <>
             <span className="text-[var(--accent-primary)]">function</span> sum(

frontend/components/home/HeroSection.tsx

@@ -1,16 +1,20 @@
 '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-260px)] items-center overflow-hidden bg-gray-50 transition-colors duration-300 sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh] dark:bg-black">
+    <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">
@@ -40,7 +44,8 @@ export default function HeroSection() {
         </p>
 
         <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16">
-          <InteractiveCTAButton />
+          <InteractiveCTAButton ref={ctaRef} />
+          <OnlineCounterPopup ctaRef={ctaRef} />
         </div>
       </div>
     </section>