From cda439670a72430fd0060c90ff046eea1a2b4d12 Mon Sep 17 00:00:00 2001
From: PrimeBuild <primebuild.official@gmail.com>
Date: Thu, 18 Jun 2026 14:59:33 +0200
Subject: [PATCH] Refresh website UX and visual design

---
 client/src/App.tsx                          |  25 +-
 client/src/components/AppsSection.tsx       |  47 +--
 client/src/components/BuildsSection.tsx     |  83 +++--
 client/src/components/ComponentsSection.tsx | 351 +++-----------------
 client/src/components/ContactSection.tsx    |  40 +--
 client/src/components/FAQSection.tsx        |  30 +-
 client/src/components/Footer.tsx            |  27 +-
 client/src/components/GallerySection.tsx    |  29 +-
 client/src/components/HeroSection.tsx       | 217 +++++++-----
 client/src/components/NavBar.tsx            |  73 ++--
 client/src/components/SectionHeader.tsx     |  18 +-
 client/src/components/ServicesSection.tsx   |  59 ++--
 client/src/hooks/use-mobile.tsx             |  19 --
 client/src/index.css                        | 125 ++++++-
 client/src/lib/AnimatedElement.tsx          |  14 +-
 client/src/pages/Home.tsx                   |   5 +-
 16 files changed, 549 insertions(+), 613 deletions(-)
 delete mode 100644 client/src/hooks/use-mobile.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 4a66b99..74675e8 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -12,6 +12,7 @@ import NotFound from "@/pages/not-found";
 import SchemaMarkup from "@/components/SchemaMarkup";
 import CookieBanner from "@/components/CookieBanner";
 import SkipLink from "@/components/SkipLink";
+import { MotionConfig } from "framer-motion";
 
 function Router() {
   return (
@@ -28,17 +29,19 @@ function Router() {
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <SchemaMarkup />
-      <SkipLink />
-      <div className="flex flex-col min-h-screen bg-black text-white font-inter">
-        <NavBar />
-        <main id="main-content" className="flex-grow">
-          <Router />
-        </main>
-        <Footer />
-      </div>
-      <Toaster />
-      <CookieBanner />
+      <MotionConfig reducedMotion="user">
+        <SchemaMarkup />
+        <SkipLink />
+        <div className="flex min-h-screen flex-col bg-black text-white font-inter">
+          <NavBar />
+          <main id="main-content" className="flex-grow">
+            <Router />
+          </main>
+          <Footer />
+        </div>
+        <Toaster />
+        <CookieBanner />
+      </MotionConfig>
     </QueryClientProvider>
   );
 }
diff --git a/client/src/components/AppsSection.tsx b/client/src/components/AppsSection.tsx
index 8205c7c..804a5f5 100644
--- a/client/src/components/AppsSection.tsx
+++ b/client/src/components/AppsSection.tsx
@@ -118,36 +118,39 @@ const AppsSection = () => {
   };
 
   return (
-    <section id="apps" className="py-20 bg-black">
-      <div className="container mx-auto px-4">
+    <section id="apps" className="section-shell relative overflow-hidden bg-[#08090b]">
+      <div className="section-glow -right-64 top-24 opacity-50" aria-hidden="true" />
+      <div className="site-container">
         <AnimatedElement>
           <SectionHeader
-            title="Le nostre"
-            highlight="app"
+            eyebrow="Software"
+            title="Strumenti open source per"
+            highlight="controllo e performance"
             subtitle="Strumenti esclusivi per ottimizzare la tua esperienza di gioco"
             underline={false}
           />
         </AnimatedElement>
 
-        <div className="flex gap-6 max-w-6xl mx-auto overflow-x-auto pb-4 snap-x snap-mandatory no-scrollbar md:grid md:grid-cols-2 lg:grid-cols-4 md:overflow-visible">
+        <div className="mx-auto flex max-w-6xl snap-x snap-mandatory gap-5 overflow-x-auto pb-5 no-scrollbar md:grid md:grid-cols-2 md:overflow-visible lg:grid-cols-4">
           {apps.map((app, index) => {
             const repoUrl = buildGitHubRepoUrl(app.owner, app.repo);
 
             return (
               <AnimatedElement
                 key={index}
-                className="glow-card relative bg-neutral-900 rounded-xl overflow-hidden flex flex-col
-                         flex-shrink-0 w-[280px] snap-center md:w-auto
-                         focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary
-                         transition-transform hover:scale-105 focus-within:scale-105"
+                className="surface-card interactive-card relative flex w-[82vw] max-w-[310px] flex-shrink-0 snap-center flex-col md:w-auto md:max-w-none"
                 delay={0.1 * index}
               >
                 {/* wrapper interno a colonna per riempire l'altezza */}
-                <div className="p-6 flex flex-col h-full">
-                  <h3 className="text-xl font-bold mb-2">{app.name}</h3>
-                  <p className="text-neutral-400 mb-4">{app.description}</p>
+                <div className="relative z-10 flex h-full flex-col p-6">
+                  <div className="mb-5 flex items-center justify-between">
+                    <span className="eyebrow py-1">Windows</span>
+                    <span className="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_12px_rgb(52_211_153/0.8)]" aria-label="Disponibile" />
+                  </div>
+                  <h3 className="mb-2 text-xl font-bold">{app.name}</h3>
+                  <p className="mb-5 text-sm leading-6 text-neutral-400">{app.description}</p>
 
-                  <ul className="space-y-2 mb-6">
+                  <ul className="mb-6 space-y-2">
                     {app.features.map((feature, i) => (
                       <li key={i} className="flex items-center text-sm text-neutral-300">
                         <span className="text-primary mr-2">•</span> {feature}
@@ -164,7 +167,7 @@ const AppsSection = () => {
                       rel="noopener noreferrer"
                       onClick={() => handleRepoClick(app.name, repoUrl)}
                       aria-label={`Visualizza repository GitHub di ${app.name}`}
-                      className="inline-flex items-center gap-1.5 bg-[#24292f] hover:bg-[#444d56] text-white px-3 py-1.5 rounded-md text-sm min-h-[32px]"
+                        className="inline-flex min-h-10 items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm text-white transition hover:bg-white/10"
                     >
                       <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                         <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
@@ -183,7 +186,7 @@ const AppsSection = () => {
                         onClick={() => handleDownloadClick(app)}
                         disabled={downloadingApp === app.name}
                         aria-label={`Scarica ${app.name}`}
-                        className="inline-flex items-center gap-1.5 bg-primary hover:bg-primary text-black font-semibold px-3 py-1.5 rounded-md min-h-[32px] text-sm transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
+                        className="inline-flex min-h-10 items-center gap-1.5 rounded-full bg-primary px-3 py-2 text-sm font-semibold text-black transition hover:bg-orange-400 disabled:cursor-not-allowed disabled:opacity-60"
                       >
                         <FaDownload aria-hidden="true" /> {downloadingApp === app.name ? 'Verifica...' : 'Download'}
                       </button>
@@ -195,12 +198,12 @@ const AppsSection = () => {
           })}
         </div>
 
-        <AnimatedElement className="mt-16 text-center" delay={0.3}>
-          <div className="max-w-2xl mx-auto bg-neutral-900 p-8 rounded-xl">
-            <h3 className="text-2xl font-bold mb-4">Supporta il nostro lavoro</h3>
-            <p className="text-neutral-400 mb-6">
-              Le nostre app sono in fase di sviluppo e saranno presto disponibili. Supporta il nostro lavoro con una
-              donazione per accelerare lo sviluppo e ottenere accesso anticipato.
+        <AnimatedElement className="mt-10 text-center" delay={0.3}>
+          <div className="surface-card mx-auto max-w-3xl p-7 sm:p-9">
+            <span className="eyebrow mb-4">Community driven</span>
+            <h3 className="text-2xl font-bold mb-3">Supporta lo sviluppo</h3>
+            <p className="mx-auto mb-6 max-w-xl leading-7 text-neutral-400">
+              Le nostre app sono open source e vengono migliorate continuamente. Una donazione ci aiuta a dedicare più tempo a sviluppo, test e documentazione.
             </p>
             <a
               href="https://paypal.me/PrimeBuildOfficial?country.x=IT&locale.x=it_IT"
@@ -208,7 +211,7 @@ const AppsSection = () => {
               rel="noopener noreferrer"
               onClick={handlePayPalClick}
               aria-label="Supportaci con una donazione su PayPal"
-              className="inline-flex items-center bg-[#0070BA] hover:bg-[#003087] text-white font-medium py-3 px-8 rounded-md transition-all transform hover:scale-105"
+              className="button-secondary"
             >
               <FaPaypal className="mr-2 text-xl" aria-hidden="true" /> Supportaci su PayPal
             </a>
diff --git a/client/src/components/BuildsSection.tsx b/client/src/components/BuildsSection.tsx
index 24d0665..03d2643 100644
--- a/client/src/components/BuildsSection.tsx
+++ b/client/src/components/BuildsSection.tsx
@@ -113,49 +113,65 @@ const BuildsSection = () => {
   ], []);
 
   return (
-    <section id="builds" className="py-20 bg-neutral-900" ref={specBarsRef}>
-      <div className="container mx-auto px-4">
+    <section id="builds" className="section-shell relative overflow-hidden bg-[#08090b]" ref={specBarsRef}>
+      <div className="section-glow -left-72 top-1/3 opacity-50" aria-hidden="true" />
+      <div className="site-container">
         <AnimatedElement>
           <SectionHeader
-            title="Le"
-            highlight="nostre build"
+            eyebrow="Configurazioni"
+            title="Una base solida,"
+            highlight="costruita intorno a te"
             subtitle="Configurazioni di PC Gaming su misura per ogni esigenza e budget"
             italicText="Esempi di build che puoi trovare da noi"
           />
         </AnimatedElement>
 
-        <div className="max-w-6xl mx-auto">
+        <div className="mx-auto max-w-6xl space-y-8">
           {builds.map((build, index) => (
             <AnimatedElement
               key={index}
-              className={`mb-24 ${index === builds.length - 1 ? "mb-0" : ""}`}
-              delay={0.2}
+              delay={0.08 * index}
             >
               <div
-                className={`grid md:grid-cols-2 gap-8 items-center ${index % 2 !== 0 ? "md:order-first" : ""}`}
+                className="surface-card interactive-card grid overflow-hidden lg:grid-cols-[0.92fr_1.08fr]"
               >
-                <div className="order-1">
-                  <div className="flex justify-between items-center mb-2">
-                    <h3 className="text-2xl font-bold font-montserrat">
+                <div className={`relative min-h-[280px] overflow-hidden sm:min-h-[360px] ${index % 2 !== 0 ? "lg:order-2" : ""}`}>
+                  <ImageWithFallback
+                    src={build.image}
+                    alt={`PC Gaming ${build.name} - ${build.tagline} - Build gaming custom Prime Build`}
+                    width={720}
+                    height={520}
+                    className="absolute inset-0 h-full w-full object-cover transition duration-700 hover:scale-[1.03]"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent lg:bg-gradient-to-r" />
+                  <div className="absolute inset-x-0 bottom-0 p-6 lg:p-8">
+                    <span className="eyebrow border-white/10 bg-black/50 text-neutral-200">{build.level}</span>
+                    <p className="mt-3 text-lg font-semibold text-white">{build.tagline}</p>
+                  </div>
+                </div>
+
+                <div className={`relative z-10 p-6 sm:p-8 lg:p-10 ${index % 2 !== 0 ? "lg:order-1" : ""}`}>
+                  <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+                    <h3 className="text-2xl font-bold tracking-tight font-montserrat">
                       PRIME{" "}
                       <span className="text-primary">{build.shortName}</span>
                     </h3>
-                    <span className="text-primary text-xl font-bold border border-primary rounded-md px-3 py-1">
-                      {build.price}
+                    <span className="rounded-full border border-primary/25 bg-primary/10 px-4 py-2 text-sm font-bold text-orange-300">
+                      Da {build.price}
                     </span>
                   </div>
-                  <p className="text-neutral-300 mb-6">{build.description}</p>
+                  <p className="mb-7 leading-7 text-neutral-400">{build.description}</p>
 
-                  <div className="space-y-4">
+                  <div className="space-y-5">
                     {build.specs.map((spec, i) => (
                       <div key={i}>
-                        <div className="flex justify-between mb-1">
-                          <span className="font-medium">{spec.name}</span>
-                          <span className="text-primary">{spec.value}</span>
+                        <div className="mb-2 flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between">
+                          <span className="font-medium text-neutral-300">{spec.name}</span>
+                          <span className="text-neutral-500 sm:text-right">{spec.value}</span>
                         </div>
-                        <div className="relative h-2 bg-white/10 rounded-full overflow-hidden">
+                        <div className="relative h-1 overflow-hidden rounded-full bg-white/10">
                           <div
-                            className="spec-bar-fill absolute h-full bg-primary rounded-full w-0 transition-all duration-1000 ease-out"
+                            className="spec-bar-fill absolute h-full w-0 rounded-full bg-gradient-to-r from-primary to-amber-400 transition-all duration-1000 ease-out"
                             data-width={spec.performance}
                           ></div>
                         </div>
@@ -163,40 +179,17 @@ const BuildsSection = () => {
                     ))}
                   </div>
 
-                  <div className="mt-8">
+                  <div className="mt-9">
                     <a
                       href="https://docs.google.com/forms/d/e/1FAIpQLSfXO6-BVQ3x1WLDlxpp7B534U8xIxymD7QbP8MId0fcf_9Yqw/viewform?usp=sharing"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-block bg-primary hover:bg-primary text-black font-semibold py-3 px-8 rounded-md transition-all transform hover:scale-105"
+                      className="button-primary"
                     >
                       Richiedi Preventivo
                     </a>
                   </div>
                 </div>
-
-                <div
-                  className={`relative rounded-xl overflow-hidden group order-2 ${index % 2 !== 0 ? "md:order-1" : "md:order-2"}`}
-                >
-                  <ImageWithFallback
-                    src={build.image}
-                    alt={`PC Gaming ${build.name} - ${build.tagline} - Build gaming custom Prime Build`}
-                    width={600}
-                    height={384}
-                    className="w-full h-96 object-cover"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                    <div>
-                      <span className="inline-block bg-primary text-black text-xs font-semibold px-3 py-1 rounded-full mb-3">
-                        {build.level}
-                      </span>
-                      <h3 className="text-2xl font-bold font-montserrat">
-                        {build.name}
-                      </h3>
-                      <p className="text-neutral-300">{build.tagline}</p>
-                    </div>
-                  </div>
-                </div>
               </div>
             </AnimatedElement>
           ))}
diff --git a/client/src/components/ComponentsSection.tsx b/client/src/components/ComponentsSection.tsx
index 0327616..8333f6c 100644
--- a/client/src/components/ComponentsSection.tsx
+++ b/client/src/components/ComponentsSection.tsx
@@ -1,306 +1,57 @@
-import { useEffect, useMemo, useRef, useState } from "react";
 import AnimatedElement from "@/lib/AnimatedElement";
-import { useIsMobile } from "@/hooks/use-mobile";
 import ImageWithFallback from "@/lib/ImageWithFallback";
-
-interface Component {
-  image: string;
-  title: string;
-  brands: string;
-}
-
-const ComponentsSection = () => {
-  const components: Component[] = [
-    {
-      image: "/cpu.jpg",
-      title: "Processori",
-      brands: "AMD & Intel"
-    },
-    {
-      image: "/gpu.jpg",
-      title: "Schede Video",
-      brands: "NVIDIA & AMD"
-    },
-    {
-      image: "/ram.jpg",
-      title: "Memorie RAM",
-      brands: "Corsair & G.Skill"
-    },
-    {
-      image: "/ssd.jpg",
-      title: "Storage",
-      brands: "Samsung & WD"
-    },
-    {
-      image: "/cooling.jpg",
-      title: "Raffreddamento",
-      brands: "NZXT & Thermalright"
-    },
-    {
-      image: "/case.jpg",
-      title: "Case",
-      brands: "Lian Li & Phanteks"
-    }
-  ];
-
-  // 3D Wheel state and helpers
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [rotation, setRotation] = useState(0); // degrees
-  const rotationRef = useRef(0);
-  // velocity state removed to reduce extra renders
-  const velocityRef = useRef(0);
-  const [radius, setRadius] = useState(300);
-  const [dragging, setDragging] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const lastXRef = useRef<number | null>(null);
-  const rafRef = useRef<number | null>(null);
-
-  const step = 360 / components.length;
-
-  const hasWindow = typeof window !== "undefined";
-  const cssSupports = (prop: string, value: string) => (hasWindow && (window.CSS?.supports?.(prop, value) ?? false));
-  const supports3D = cssSupports("transform", "translateZ(1px)") || cssSupports("perspective", "1px");
-  const prefersReduced = hasWindow && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
-  const isMobile = useIsMobile();
-  const enable3D = supports3D; // show 3D; if reduced motion, we dampen inertia
-
-  // Compute radius responsively (smaller on mobile to reduce offscreen drawing)
-  useEffect(() => {
-    const update = () => {
-      const w = containerRef.current?.clientWidth || 1024;
-      const base = isMobile ? 0.24 : 0.3;
-      const minR = isMobile ? 140 : 160;
-      const maxR = isMobile ? 340 : 420;
-      const r = Math.max(minR, Math.min(maxR, w * base));
-      setRadius(r);
-    };
-    update();
-    window.addEventListener("resize", update);
-    return () => window.removeEventListener("resize", update);
-  }, [isMobile]);
-
-  // Inertia + snapping loop
-  useEffect(() => {
-    if (!enable3D) return;
-
-    const animate = () => {
-      if (!dragging) {
-        const damping = isMobile ? 0.84 : (prefersReduced ? 0.88 : 0.95);
-        const v = velocityRef.current * damping;
-        if (Math.abs(v) > 0.01) {
-          velocityRef.current = v;
-          setRotation((r) => {
-            const nr = r + v;
-            rotationRef.current = nr;
-            return nr;
-          });
-        } else {
-          // Snap to nearest card (ease faster on mobile)
-          const snapped = Math.round(rotationRef.current / step) * step;
-          const diff = snapped - rotationRef.current;
-          if (Math.abs(diff) > 0.5) {
-            const nr = rotationRef.current + diff * (isMobile ? 0.35 : 0.2);
-            rotationRef.current = nr;
-            setRotation(nr);
-          } else {
-            rotationRef.current = snapped;
-            setRotation(snapped);
-          }
-        }
-      }
-      // Update active index
-      const idx = ((Math.round((-rotationRef.current) / step) % components.length) + components.length) % components.length;
-      setActiveIndex(idx);
-      rafRef.current = requestAnimationFrame(animate);
-    };
-    rafRef.current = requestAnimationFrame(animate);
-    return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-    };
-  }, [dragging, step, enable3D, components.length, isMobile, prefersReduced]);
-
-  // Pointer interactions
-  useEffect(() => {
-    let lastT = 0;
-    const onMove = (clientX: number) => {
-      if (!dragging) return;
-      const now = performance.now();
-      if (isMobile && now - lastT < 16) return; // throttle on mobile ~60fps
-      lastT = now;
-      if (lastXRef.current === null) {
-        lastXRef.current = clientX;
-        return;
-      }
-      const dx = clientX - lastXRef.current;
-      lastXRef.current = clientX;
-      const sensitivity = isMobile ? 0.22 : 0.3;
-      const delta = -dx * sensitivity;
-      setRotation((r) => {
-        const nr = r + delta;
-        rotationRef.current = nr;
-        return nr;
-      });
-      velocityRef.current = delta;
-    };
-    const onPointerMove = (e: PointerEvent) => onMove(e.clientX);
-    const onPointerUp = () => {
-      setDragging(false);
-      lastXRef.current = null;
-      // Snap to nearest immediately on mobile to avoid idle RAF
-      const snapped = Math.round(rotationRef.current / step) * step;
-      rotationRef.current = snapped;
-      setRotation(snapped);
-    };
-    if (dragging) {
-      window.addEventListener("pointermove", onPointerMove);
-      window.addEventListener("pointerup", onPointerUp, { once: true });
-    }
-    return () => {
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-  }, [dragging, isMobile]);
-
-  const onWheel = (e: React.WheelEvent) => {
-    if (!enable3D) return;
-    const delta = e.deltaY * (isMobile ? 0.06 : 0.1);
-    setRotation((r) => {
-      const nr = r + delta;
-      rotationRef.current = nr;
-      return nr;
-    });
-    velocityRef.current = delta;
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (!enable3D) return;
-    if (e.key === "ArrowLeft") {
-      velocityRef.current = 0;
-      setRotation((r) => {
-        const nr = r + step;
-        rotationRef.current = nr;
-        return nr;
-      });
-    } else if (e.key === "ArrowRight") {
-      velocityRef.current = 0;
-      setRotation((r) => {
-        const nr = r - step;
-        rotationRef.current = nr;
-        return nr;
-      });
-    } else if (e.key === "Enter" || e.key === " ") {
-      // Snap to active
-      const snapped = Math.round(rotationRef.current / step) * step;
-      rotationRef.current = snapped;
-      setRotation(snapped);
-    }
-  };
-
-  // Fallback grid for no 3D or reduced motion
-  if (!enable3D) {
-    return (
-      <section className="py-20 bg-dark-gradient bg-diagonal-grid noise-overlay">
-        <div className="container mx-auto px-4">
-          <AnimatedElement className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold font-montserrat mb-4">
-              Componenti <span className="text-primary">premium</span>
-            </h2>
-            <p className="text-lg max-w-2xl mx-auto text-neutral-300">
-              Ecco alcuni dei marchi che trovi nelle nostre build
-            </p>
-          </AnimatedElement>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 max-w-6xl mx-auto">
-            {components.map((component, index) => (
-              <AnimatedElement
-                key={index}
-                className="bg-neutral-900 p-5 rounded-xl text-center hover:bg-neutral-800 transition-colors"
-                delay={0.1 * index}
-              >
-                <ImageWithFallback
-                  src={component.image}
-                  alt={`${component.title} per PC Gaming - ${component.brands} - Componenti premium Prime Build`}
-                  width={64}
-                  height={64}
-                  className="w-16 h-16 object-cover mx-auto mb-4 rounded-lg"
-                />
-                <h3 className="font-medium text-primary">{component.title}</h3>
-                <p className="text-xs text-neutral-400">{component.brands}</p>
-              </AnimatedElement>
-            ))}
-          </div>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="py-20 bg-dark-gradient bg-diagonal-grid noise-overlay" onWheel={onWheel}>
-      <div className="container mx-auto px-4">
-        <AnimatedElement className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold font-montserrat mb-4">
-            Componenti <span className="text-primary">premium</span>
-          </h2>
-          <p className="text-lg max-w-2xl mx-auto text-neutral-300">
-            Ecco alcuni dei marchi che trovi nelle nostre build
-          </p>
-        </AnimatedElement>
-
-        <div
-          ref={containerRef}
-          className="relative max-w-6xl mx-auto px-4 h-[420px] md:h-[480px] flex items-center justify-center overflow-visible"          role="listbox"
-          aria-label="Carosello componenti"
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-          onPointerDown={(e) => {
-            setDragging(true);
-            (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-            lastXRef.current = e.clientX;
-          }}
-          style={{ perspective: isMobile ? "800px" : "1100px",perspectiveOrigin: isMobile ? "46% 50%" : "41% 50%", ["--wheel-offset" as any]: isMobile ? "-130px" : "-160px",} as React.CSSProperties}
-        >
-
-          {/* 3D stage with slight top-down tilt */}
-          <div
-            className="absolute inset-0 will-change-transform"
-            style={{ transformStyle: "preserve-3d", transform: "translateX(var(--wheel-offset)) rotateX(20deg)", }}
+import { SectionHeader } from "./SectionHeader";
+
+const components = [
+  { image: "/cpu.webp", title: "Processori", brands: "AMD & Intel" },
+  { image: "/gpu.webp", title: "Schede Video", brands: "NVIDIA & AMD" },
+  { image: "/ram.webp", title: "Memorie RAM", brands: "Corsair & G.Skill" },
+  { image: "/ssd.webp", title: "Storage", brands: "Samsung & WD" },
+  { image: "/cooling.webp", title: "Raffreddamento", brands: "NZXT & Thermalright" },
+  { image: "/case.webp", title: "Case", brands: "Lian Li & Phanteks" },
+];
+
+const ComponentsSection = () => (
+  <section className="section-shell relative overflow-hidden border-y border-white/5 bg-black">
+    <div className="section-grid opacity-60" aria-hidden="true" />
+    <div className="site-container">
+      <AnimatedElement>
+        <SectionHeader
+          eyebrow="Hardware"
+          title="Componenti premium,"
+          highlight="scelti con criterio"
+          subtitle="Selezioniamo piattaforme affidabili e bilanciate, senza rincorrere specifiche che non portano vantaggi reali."
+        />
+      </AnimatedElement>
+
+      <div className="mx-auto grid max-w-6xl grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
+        {components.map((component, index) => (
+          <AnimatedElement
+            key={component.title}
+            delay={index * 0.06}
+            className={`group surface-card interactive-card min-h-48 p-4 sm:min-h-56 sm:p-6 ${
+              index === 0 || index === 5 ? "lg:col-span-2" : ""
+            }`}
           >
-            {components.map((component, i) => {
-              const angle = i * step + rotation;
-              const norm = ((angle % 360) + 360) % 360;
-              const isActive = Math.abs(norm) < step / 2;
-              const backface = norm > 90 && norm < 270; // backside culling
-              const transform = `rotateY(${angle}deg) translateZ(${radius}px) rotateY(${-angle}deg)`; // rotation handled; stage has rotateX for top-down
-              const depth = Math.cos((norm * Math.PI) / 180);
-              return (
-                <div
-                  key={i}
-                  role="option"
-                  aria-selected={isActive}
-                  aria-label={`${component.title} - ${component.brands}`}
-                  className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl text-center ${isMobile ? 'bg-neutral-900' : 'bg-neutral-900/80 backdrop-blur-sm'} border border-white/5 transition-colors ${isActive && !isMobile ? "scale-105 shadow-[0_0_24px_hsl(var(--primary) / 0.25)]" : "scale-95 opacity-90"}`}
-                  style={{ transform, willChange: isMobile ? "auto" : "transform, opacity",  pointerEvents: backface ? "none" : "auto",  zIndex: Math.round(1000 + depth * 1000), opacity: backface ? 0.5 : 1}}
-                >
-                  <div className="p-5 w-52 md:w-64">
-                    <ImageWithFallback
-                      src={component.image}
-                      alt={`${component.title} per PC Gaming - ${component.brands} - Componenti premium Prime Build`}
-                      width={64}
-                      height={64}
-                      className="w-14 h-14 md:w-16 md:h-16 object-cover mx-auto mb-4 rounded-lg"
-                    />
-                    <h3 className="font-medium text-primary">{component.title}</h3>
-                    <p className="text-xs text-neutral-400">{component.brands}</p>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
+            <div className="absolute inset-0">
+              <ImageWithFallback
+                src={component.image}
+                alt={`${component.title} per PC Gaming - ${component.brands} - Componenti premium Prime Build`}
+                width={520}
+                height={320}
+                className="h-full w-full object-cover opacity-45 grayscale-[25%] transition duration-500 group-hover:scale-105 group-hover:opacity-60 group-hover:grayscale-0"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent" />
+            </div>
+            <div className="relative z-10 flex h-full min-h-40 flex-col justify-end sm:min-h-44">
+              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">{component.brands}</p>
+              <h3 className="mt-2 text-lg font-semibold text-white sm:text-xl">{component.title}</h3>
+            </div>
+          </AnimatedElement>
+        ))}
       </div>
-    </section>
-  );
-};
+    </div>
+  </section>
+);
 
 export default ComponentsSection;
-
-
diff --git a/client/src/components/ContactSection.tsx b/client/src/components/ContactSection.tsx
index b6582c3..4f83b62 100644
--- a/client/src/components/ContactSection.tsx
+++ b/client/src/components/ContactSection.tsx
@@ -191,19 +191,22 @@ const ContactSection = () => {
   ];
 
   return (
-    <section id="contact" className="py-20 bg-neutral-900">
-      <div className="container mx-auto px-4">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid md:grid-cols-2 gap-12">
+    <section id="contact" className="section-shell relative overflow-hidden border-t border-white/5 bg-[#08090b]">
+      <div className="section-grid opacity-40" aria-hidden="true" />
+      <div className="section-glow -left-72 bottom-0 opacity-60" aria-hidden="true" />
+      <div className="site-container">
+        <div className="mx-auto max-w-6xl">
+          <div className="grid gap-8 lg:grid-cols-[1.15fr_0.85fr]">
             <AnimatedElement>
               <SectionHeader
-                title=""
-                highlight="Contattaci"
+                eyebrow="Contatti"
+                title="Parliamo del tuo"
+                highlight="prossimo progetto"
                 subtitle="Sei interessato ai nostri servizi o hai domande? Contattaci per ricevere un preventivo personalizzato o per maggiori informazioni."
                 alignment="left"
               />
               
-              <form className="space-y-6" onSubmit={handleSubmit}>
+              <form className="surface-card space-y-6 p-5 sm:p-7" onSubmit={handleSubmit}>
                 {/* Honeypot field (hidden) */}
                 <div style={{ position: 'absolute', left: '-9999px', top: '-9999px' }} aria-hidden="true">
                   <label htmlFor="website">Website</label>
@@ -220,7 +223,7 @@ const ContactSection = () => {
                     </p>
                   )}
                 </div>
-                <div className="grid md:grid-cols-2 gap-6">
+                <div className="grid gap-6 sm:grid-cols-2">
                   <div>
                     <label htmlFor="name" className="block text-sm font-medium text-neutral-300 mb-1">
                       Nome
@@ -232,7 +235,7 @@ const ContactSection = () => {
                       onChange={handleChange}
                       placeholder="Il tuo nome"
                       aria-required="true"
-                      className="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-white"
+                      className="w-full rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3 text-white placeholder:text-neutral-600 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20"
                       required
                     />
                   </div>
@@ -247,7 +250,7 @@ const ContactSection = () => {
                       onChange={handleChange}
                       placeholder="La tua email"
                       aria-required="true"
-                      className="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-white"
+                      className="w-full rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3 text-white placeholder:text-neutral-600 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20"
                       required
                     />
                   </div>
@@ -264,7 +267,7 @@ const ContactSection = () => {
                     onChange={handleChange}
                     placeholder="Oggetto del messaggio"
                     aria-required="true"
-                    className="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-white"
+                    className="w-full rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3 text-white placeholder:text-neutral-600 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20"
                     required
                   />
                 </div>
@@ -280,7 +283,7 @@ const ContactSection = () => {
                     onChange={handleChange}
                     placeholder="Il tuo messaggio"
                     aria-required="true"
-                    className="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-white"
+                    className="w-full resize-y rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3 text-white placeholder:text-neutral-600 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20"
                     required
                   ></textarea>
                 </div>
@@ -288,9 +291,7 @@ const ContactSection = () => {
                 <motion.button
                   type="submit"
                   disabled={isSubmitting}
-                  whileHover={{ scale: isSubmitting ? 1 : 1.05 }}
-                  whileTap={{ scale: isSubmitting ? 1 : 0.95 }}
-                  className="bg-primary hover:bg-primary text-black font-semibold py-3 px-8 rounded-md transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="button-primary disabled:cursor-not-allowed disabled:opacity-50"
                 >
                   {isSubmitting ? "Invio in corso..." : "Invia Messaggio"}
                 </motion.button>
@@ -305,7 +306,7 @@ const ContactSection = () => {
             </AnimatedElement>
             
             <AnimatedElement direction="right">
-              <div className="bg-black p-8 rounded-xl h-full">
+              <div className="surface-card h-full p-6 sm:p-8">
                 <h3 className="text-2xl font-bold font-montserrat mb-6">
                   Informazioni di <span className="text-primary">contatto</span>
                 </h3>
@@ -313,7 +314,7 @@ const ContactSection = () => {
                 <div className="space-y-6">
                   {contactInfo.map((item, index) => (
                     <div key={index} className="flex items-start">
-                      <div className="bg-primary/10 p-3 rounded-lg mr-4">
+                      <div className="mr-4 rounded-xl border border-primary/15 bg-primary/10 p-3 text-primary">
                         {item.icon}
                       </div>
                       <div>
@@ -333,11 +334,10 @@ const ContactSection = () => {
                           target="_blank"
                           rel="noopener noreferrer"
                           onClick={() => handleSocialClick(link.name, link.url)}
-                          whileHover={{ scale: 1.05 }}
-                          className="bg-neutral-800 hover:bg-primary p-3 rounded-lg flex items-center transition-colors"
+                          className="flex items-center rounded-xl border border-white/10 bg-white/[0.045] p-3 transition-colors hover:border-primary/30 hover:bg-primary/10"
                           aria-label={`Contattaci su ${link.name}`}
                         >
-                          <div className="bg-primary/20 p-2 rounded-full mr-3" aria-hidden="true">
+                          <div className="mr-3 rounded-full bg-primary/15 p-2 text-primary" aria-hidden="true">
                             {link.icon}
                           </div>
                           <span className="font-medium">{link.name}</span>
diff --git a/client/src/components/FAQSection.tsx b/client/src/components/FAQSection.tsx
index 5809a85..96ba437 100644
--- a/client/src/components/FAQSection.tsx
+++ b/client/src/components/FAQSection.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import AnimatedElement from "@/lib/AnimatedElement";
 import { SectionHeader } from "./SectionHeader";
+import { ChevronDown } from "lucide-react";
 
 interface FAQ {
   question: string;
@@ -54,37 +55,38 @@ const FAQSection = () => {
   };
 
   return (
-    <section id="faq" className="py-20 bg-gradient-to-b from-black via-neutral-950 to-black">
-      <div className="container mx-auto px-4">
+    <section id="faq" className="section-shell relative overflow-hidden bg-black">
+      <div className="site-container">
         <AnimatedElement>
           <SectionHeader
-            title="Domande"
-            highlight="frequenti"
+            eyebrow="FAQ"
+            title="Domande frequenti,"
+            highlight="risposte chiare"
             subtitle="Tutto quello che devi sapere su Prime Build e i nostri servizi"
             underline={false}
           />
         </AnimatedElement>
 
-        <div className="max-w-3xl mx-auto space-y-4">
+        <div className="mx-auto max-w-4xl space-y-3">
           {faqs.map((faq, index) => (
             <AnimatedElement key={index} delay={0.05 * index}>
-              <div className="bg-neutral-900 rounded-xl overflow-hidden">
+              <div className={`overflow-hidden rounded-2xl border transition-colors ${openIndex === index ? "border-primary/30 bg-primary/[0.045]" : "border-white/10 bg-white/[0.035]"}`}>
                 <button
                   onClick={() => toggleFAQ(index)}
-                  className="w-full px-6 py-4 text-left flex items-center justify-between gap-4 hover:bg-neutral-800 transition-colors"
+                  className="flex w-full items-center justify-between gap-4 px-5 py-5 text-left transition-colors hover:bg-white/[0.035] sm:px-6"
                   aria-expanded={openIndex === index}
                   aria-controls={`faq-answer-${index}`}
                 >
                   <span className="font-semibold text-white">{faq.question}</span>
-                  <span className={`text-primary text-2xl transition-transform duration-300 ${openIndex === index ? 'rotate-45' : ''}`}>
-                    +
+                  <span className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5 text-primary transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''}`}>
+                    <ChevronDown className="h-4 w-4" aria-hidden="true" />
                   </span>
                 </button>
                 <div
                   id={`faq-answer-${index}`}
-                  className={`overflow-hidden transition-all duration-300 ${openIndex === index ? 'max-h-96 pb-4' : 'max-h-0'}`}
+                  className={`overflow-hidden transition-all duration-300 ${openIndex === index ? 'max-h-[1000px] pb-6' : 'max-h-0'}`}
                 >
-                  <p className="px-6 text-neutral-300">{faq.answer}</p>
+                  <p className="px-5 leading-7 text-neutral-400 sm:px-6">{faq.answer}</p>
                 </div>
               </div>
             </AnimatedElement>
@@ -92,13 +94,13 @@ const FAQSection = () => {
         </div>
 
         <AnimatedElement className="text-center mt-12" delay={0.4}>
-          <p className="text-neutral-400 mb-4">Hai altre domande?</p>
+          <p className="text-neutral-400 mb-5">Hai altre domande?</p>
           <div className="flex flex-wrap justify-center gap-4">
             <a
               href="https://www.instagram.com/prime_build_/"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105"
+              className="button-secondary"
             >
               <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
@@ -109,7 +111,7 @@ const FAQSection = () => {
               href="https://discord.gg/BcPsRQqJ4s"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 bg-[#5865F2] hover:bg-[#4752C4] text-white px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105"
+              className="button-secondary"
             >
               <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index 3bf48da..7c145a6 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -12,10 +12,11 @@ const Footer = () => {
   };
 
   return (
-    <footer className="bg-black py-12" role="contentinfo">
-      <div className="container mx-auto px-4">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid md:grid-cols-3 gap-8">
+    <footer className="relative overflow-hidden border-t border-white/10 bg-black py-14" role="contentinfo">
+      <div className="section-glow -bottom-80 left-1/2 -translate-x-1/2 opacity-30" aria-hidden="true" />
+      <div className="site-container">
+        <div className="mx-auto max-w-6xl">
+          <div className="grid gap-10 md:grid-cols-[1.35fr_0.8fr_0.8fr]">
             <div>
               <div className="flex items-center mb-4">
                 <div className="h-10 w-10 mr-2 relative">
@@ -31,17 +32,17 @@ const Footer = () => {
                   PRIME<span className="text-primary">BUILD</span>
                 </span>
               </div>
-              <p className="text-neutral-400 text-sm mb-6">
+              <p className="mb-6 max-w-sm text-sm leading-6 text-neutral-400">
                 Realizziamo PC Gaming su misura per un'esperienza di gioco senza compromessi
               </p>
-              <div className="flex space-x-4">
+              <div className="flex space-x-3">
                 <a
                   href="https://www.instagram.com/prime_build_/"
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label="Seguici su Instagram"
                   onClick={() => handleSocialClick('Instagram', 'https://www.instagram.com/prime_build_/')}
-                  className="bg-neutral-800 hover:bg-primary p-2 rounded-full flex items-center justify-center transition-all transform hover:-translate-y-1"
+                  className="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-neutral-300 transition hover:border-primary/30 hover:text-primary"
                 >
                   <FaInstagram aria-hidden="true" />
                 </a>
@@ -51,7 +52,7 @@ const Footer = () => {
                   rel="noopener noreferrer"
                   aria-label="Unisciti al nostro Discord"
                   onClick={() => handleSocialClick('Discord', 'https://discord.gg/jBNk2vXKKd')}
-                  className="bg-neutral-800 hover:bg-primary p-2 rounded-full flex items-center justify-center transition-all transform hover:-translate-y-1"
+                  className="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-neutral-300 transition hover:border-primary/30 hover:text-primary"
                 >
                   <FaDiscord aria-hidden="true" />
                 </a>
@@ -59,10 +60,10 @@ const Footer = () => {
             </div>
             
             <div>
-              <h4 className="text-lg font-bold font-montserrat mb-4 text-primary">
+              <h4 className="mb-4 text-sm font-bold uppercase tracking-[0.16em] text-neutral-200 font-montserrat">
                 Link Rapidi
               </h4>
-              <ul className="space-y-2 text-neutral-400">
+              <ul className="space-y-3 text-sm text-neutral-400">
                 <li>
                   <a href="#home" className="hover:text-primary transition-colors">
                     Home
@@ -104,10 +105,10 @@ const Footer = () => {
             </div>
 
             <div>
-              <h4 className="text-lg font-bold font-montserrat mb-4 text-primary">
+              <h4 className="mb-4 text-sm font-bold uppercase tracking-[0.16em] text-neutral-200 font-montserrat">
                 Servizi
               </h4>
-              <ul className="space-y-2 text-neutral-400">
+              <ul className="space-y-3 text-sm text-neutral-400">
                 <li>
                   <a href="#services" className="hover:text-primary transition-colors">
                     PC Gaming Custom
@@ -133,7 +134,7 @@ const Footer = () => {
 
           </div>
 
-          <div className="border-t border-neutral-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
+          <div className="mt-12 flex flex-col items-center justify-between border-t border-white/10 pt-6 md:flex-row">
             <p className="text-neutral-500 text-sm order-2 md:order-1 mt-4 md:mt-0">
               © {new Date().getFullYear()} Prime Build. Tutti i diritti riservati.
             </p>
diff --git a/client/src/components/GallerySection.tsx b/client/src/components/GallerySection.tsx
index 1030550..e67a487 100644
--- a/client/src/components/GallerySection.tsx
+++ b/client/src/components/GallerySection.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import AnimatedElement from "@/lib/AnimatedElement";
 import ImageWithFallback from "@/lib/ImageWithFallback";
 import { trackGalleryView } from "@/lib/analytics";
+import { SectionHeader } from "./SectionHeader";
 
 interface GalleryImage { src: string; alt: string }
 
@@ -86,41 +87,45 @@ export default function GallerySection() {
   }, [loopImages.length]);
 
   return (
-    <section id="galleria" className="py-20 md:py-24 bg-gradient-to-b from-black via-neutral-950 to-black">
-  <div className="w-full px-0">
+    <section id="galleria" className="section-shell overflow-hidden bg-black">
+      <div className="site-container">
         <AnimatedElement>
-          <h2 className="text-3xl md:text-4xl font-bold mb-4 tracking-tight">Galleria</h2>
+          <SectionHeader
+            eyebrow="Realizzazioni"
+            title="Dettagli che fanno"
+            highlight="la differenza"
+            subtitle="Una selezione di build, workstation e setup assemblati da Prime Build."
+          />
         </AnimatedElement>
-        <div className="mt-10 relative overflow-hidden" aria-label="Galleria a scorrimento continuo" role="list">
+      </div>
+      <div className="relative overflow-hidden" aria-label="Galleria a scorrimento continuo" role="list">
           <style>{`
             @keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-distance))); } }
           `}</style>
-          <div ref={trackRef} className="marquee-animate flex gap-4 flex-nowrap will-change-transform" style={{ ...styleVars, animation: `marqueeX var(--marquee-duration) linear infinite` }}>
+          <div ref={trackRef} className="marquee-animate flex flex-nowrap gap-4 will-change-transform motion-reduce:overflow-x-auto motion-reduce:px-4" style={{ ...styleVars, animation: `marqueeX var(--marquee-duration) linear infinite` }}>
             {loopImages.map((img, i) => (
               <div
                 key={i}
                 role="listitem"
-                className="flex-shrink-0 w-[140px] h-[248px] sm:w-[160px] sm:h-[285px] md:w-[200px] md:h-[356px] lg:w-[225px] lg:h-[400px] rounded-xl"
+                className="surface-card h-[264px] w-[150px] flex-shrink-0 rounded-2xl p-1.5 sm:h-[320px] sm:w-[180px] md:h-[390px] md:w-[220px]"
               >
-                <div className="w-full h-full rounded-xl overflow-hidden flex items-center justify-center bg-black">
+                <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[0.8rem] bg-black">
                   <ImageWithFallback
                     src={img.src}
                     alt={img.alt}
                     width={225}
                     height={400}
-                    className="max-h-full max-w-full object-contain rounded-xl"
+                    className="h-full w-full rounded-[0.8rem] object-cover"
                   />
                 </div>
               </div>
             ))}
           </div>
           {/* Gradient edges, reduced width to minimize side gaps */}
-          <div className="pointer-events-none absolute inset-y-0 left-0 w-12 bg-gradient-to-r from-black via-black/10 to-transparent" />
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-black via-black/10 to-transparent" />
-        </div>
+          <div className="pointer-events-none absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black to-transparent sm:w-28" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black to-transparent sm:w-28" />
       </div>
     </section>
   );
 }
 
-
diff --git a/client/src/components/HeroSection.tsx b/client/src/components/HeroSection.tsx
index 94e676f..86f868b 100644
--- a/client/src/components/HeroSection.tsx
+++ b/client/src/components/HeroSection.tsx
@@ -1,93 +1,154 @@
-import { motion } from "framer-motion";
-import ParticleCanvas from "./ParticleCanvas";
-import { FaChevronDown } from "react-icons/fa";
+import { motion, useReducedMotion } from "framer-motion";
+import { ArrowDown, ArrowRight, CheckCircle2, Gauge, ShieldCheck, Sparkles } from "lucide-react";
 import { trackCTAClick } from "@/lib/analytics";
 
+const trustItems = [
+  "Configurazioni su misura",
+  "Assemblaggio, test e ottimizzazione",
+  "Supporto in tutta Italia",
+];
+
 const HeroSection = () => {
+  const shouldReduceMotion = useReducedMotion();
+  const reveal = shouldReduceMotion
+    ? { initial: { opacity: 1 }, animate: { opacity: 1 } }
+    : { initial: { y: 24, opacity: 0 }, animate: { y: 0, opacity: 1 } };
+
   return (
-    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
-      <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
-        <ParticleCanvas />
-      </div>
-      
-      <div className="container mx-auto px-4 z-10 relative py-32">
-        <div className="max-w-3xl mx-auto text-center">
-          <motion.div
-            initial={{ y: -20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className="mx-auto mb-6"
-          >
-            <img
-              src="/logo.png"
-              alt="Prime Build Logo"
-              width={96}
-              height={96}
-              className="h-24 mx-auto object-contain"
-            />
-          </motion.div>
-          
-          <motion.h1
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.6, delay: 0.4 }}
-            className="text-4xl md:text-6xl font-bold font-montserrat mb-4 flex flex-col items-center"
-          >
-            <span>PRIME</span>
-            <span className="text-primary">BUILD</span>
-            <span className="sr-only"> - Assemblaggio PC Gaming su misura</span>
-          </motion.h1>
-          
-          <motion.p
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.6, delay: 0.6 }}
-            className="text-xl md:text-2xl font-light mb-8 text-neutral-300"
-          >
-            Realizziamo PC Gaming su misura <br />per un'esperienza di gioco senza compromessi
-          </motion.p>
-          
-          <motion.div
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.6, delay: 0.8 }}
-            className="flex flex-col sm:flex-row justify-center gap-4"
-          >
-            <a
-              href="#builds"
-              onClick={() => trackCTAClick('Scopri le Build', 'hero')}
-              className="bg-primary hover:bg-primary/90 text-black font-semibold py-3 px-8 rounded-md transition-all transform hover:scale-105"
+    <section id="home" className="relative isolate min-h-[92svh] overflow-hidden pt-28 md:pt-32">
+      <div className="section-grid" aria-hidden="true" />
+      <div className="section-glow -left-48 top-20" aria-hidden="true" />
+      <div className="section-glow -right-52 top-1/3 opacity-60" aria-hidden="true" />
+      <div
+        aria-hidden="true"
+        className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"
+      />
+
+      <div className="site-container flex min-h-[calc(92svh-7rem)] items-center pb-20">
+        <div className="grid w-full items-center gap-14 lg:grid-cols-[1.05fr_0.95fr] lg:gap-10 xl:gap-20">
+          <div className="max-w-3xl">
+            <motion.div
+              {...reveal}
+              transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
+              className="eyebrow mb-7"
             >
-              Scopri le Build
-            </a>
-            <a
-              href="#contact"
-              onClick={() => trackCTAClick('Contattaci', 'hero')}
-              className="bg-transparent border-2 border-white hover:border-primary hover:text-primary text-white font-medium py-3 px-8 rounded-md transition-all transform hover:scale-105"
+              <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
+              PC custom. Performance reale.
+            </motion.div>
+
+            <motion.h1
+              {...reveal}
+              transition={{ duration: 0.65, delay: shouldReduceMotion ? 0 : 0.08, ease: [0.22, 1, 0.36, 1] }}
+              className="text-balance font-montserrat text-5xl font-bold leading-[0.98] tracking-[-0.055em] text-white sm:text-6xl lg:text-7xl xl:text-[5.4rem]"
             >
-              Contattaci
-            </a>
+              Il tuo prossimo PC,
+              <span className="block bg-gradient-to-r from-orange-300 via-primary to-amber-500 bg-clip-text text-transparent">
+                costruito senza compromessi.
+              </span>
+            </motion.h1>
+
+            <motion.p
+              {...reveal}
+              transition={{ duration: 0.65, delay: shouldReduceMotion ? 0 : 0.16, ease: [0.22, 1, 0.36, 1] }}
+              className="mt-7 max-w-2xl text-balance text-lg leading-8 text-neutral-300 sm:text-xl"
+            >
+              Progettiamo, assembliamo e ottimizziamo PC gaming su misura, con componenti scelti per il tuo budget e il tuo utilizzo reale.
+            </motion.p>
+
+            <motion.div
+              {...reveal}
+              transition={{ duration: 0.65, delay: shouldReduceMotion ? 0 : 0.24, ease: [0.22, 1, 0.36, 1] }}
+              className="mt-9 flex flex-col gap-3 sm:flex-row"
+            >
+              <a
+                href="#builds"
+                onClick={() => trackCTAClick("Scopri le Build", "hero")}
+                className="button-primary"
+              >
+                Scopri le build
+                <ArrowRight className="h-4 w-4" aria-hidden="true" />
+              </a>
+              <a
+                href="#contact"
+                onClick={() => trackCTAClick("Richiedi un preventivo", "hero")}
+                className="button-secondary"
+              >
+                Richiedi un preventivo
+              </a>
+            </motion.div>
+
+            <motion.ul
+              {...reveal}
+              transition={{ duration: 0.65, delay: shouldReduceMotion ? 0 : 0.32, ease: [0.22, 1, 0.36, 1] }}
+              className="mt-9 grid gap-3 text-sm text-neutral-400 sm:grid-cols-3"
+            >
+              {trustItems.map((item) => (
+                <li key={item} className="flex items-center gap-2">
+                  <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" aria-hidden="true" />
+                  {item}
+                </li>
+              ))}
+            </motion.ul>
+          </div>
+
+          <motion.div
+            initial={shouldReduceMotion ? { opacity: 1 } : { x: 36, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ duration: 0.8, delay: shouldReduceMotion ? 0 : 0.18, ease: [0.22, 1, 0.36, 1] }}
+            className="relative mx-auto w-full max-w-xl lg:mx-0"
+          >
+            <div className="absolute -inset-8 rounded-[3rem] bg-primary/10 blur-3xl" aria-hidden="true" />
+            <div className="surface-card p-3 sm:p-4">
+              <div className="relative aspect-[4/4.25] overflow-hidden rounded-[1.35rem] sm:aspect-[4/3.8]">
+                <img
+                  src="/high.webp"
+                  alt="PC gaming custom Prime Build con componenti di fascia alta"
+                  width={720}
+                  height={720}
+                  fetchPriority="high"
+                  className="h-full w-full object-cover object-center"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/10 to-transparent" />
+                <div className="absolute inset-x-0 bottom-0 p-5 sm:p-7">
+                  <span className="eyebrow border-white/10 bg-black/50 text-neutral-200">
+                    Prime Elite
+                  </span>
+                  <div className="mt-4 flex items-end justify-between gap-4">
+                    <div>
+                      <p className="text-sm text-neutral-400">Progettata per</p>
+                      <p className="mt-1 text-xl font-semibold text-white sm:text-2xl">Gaming 4K e workstation</p>
+                    </div>
+                    <div className="hidden h-11 w-11 items-center justify-center rounded-full border border-primary/30 bg-primary/15 text-primary sm:flex">
+                      <Gauge className="h-5 w-5" aria-hidden="true" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="surface-card absolute -left-3 top-8 flex items-center gap-3 px-4 py-3 sm:-left-8">
+              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/15 text-primary">
+                <ShieldCheck className="h-4 w-4" aria-hidden="true" />
+              </div>
+              <div>
+                <p className="text-xs text-neutral-500">Ogni sistema</p>
+                <p className="text-sm font-semibold text-white">Testato e ottimizzato</p>
+              </div>
+            </div>
           </motion.div>
         </div>
       </div>
-      
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 1.2, duration: 0.6 }}
-        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"
+
+      <a
+        href="#services"
+        aria-label="Vai alla sezione servizi"
+        className="absolute bottom-5 left-1/2 hidden -translate-x-1/2 items-center gap-2 text-xs uppercase tracking-[0.2em] text-neutral-500 transition hover:text-primary md:flex"
       >
-        <a
-          href="#services"
-          className="text-white opacity-70 hover:opacity-100 transition-opacity"
-        >
-          <FaChevronDown className="text-2xl" />
-        </a>
-      </motion.div>
+        Esplora
+        <ArrowDown className="h-4 w-4" aria-hidden="true" />
+      </a>
     </section>
   );
 };
 
 export default HeroSection;
-
-
diff --git a/client/src/components/NavBar.tsx b/client/src/components/NavBar.tsx
index 3fb3c39..d838a1e 100644
--- a/client/src/components/NavBar.tsx
+++ b/client/src/components/NavBar.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { Link } from "wouter";
 import { motion, AnimatePresence } from "framer-motion";
 import { FaBars, FaTimes, FaInstagram, FaDiscord } from "react-icons/fa";
+import { ArrowUpRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { trackSocialClick } from "@/lib/analytics";
 
@@ -75,15 +76,22 @@ const NavBar = () => {
   return (
     <nav
       className={cn(
-        "fixed w-full z-50 transition-all duration-300",
-        scrolled ? "bg-black/95 shadow-lg" : "bg-transparent"
+        "fixed inset-x-0 top-0 z-50 px-3 pt-3 transition-all duration-300 sm:px-5",
+        scrolled ? "translate-y-0" : "md:pt-5"
       )}
       role="navigation"
       aria-label="Menu principale"
     >
-      <div className="container mx-auto px-4 py-3 flex items-center justify-between">
-        <Link href="/" className="flex items-center">
-          <div className="h-12 w-12 mr-2 relative">
+      <div
+        className={cn(
+          "mx-auto flex max-w-7xl items-center justify-between rounded-2xl border px-3 py-2.5 transition duration-300 sm:px-4",
+          scrolled
+            ? "border-white/10 bg-black/80 shadow-2xl shadow-black/40 backdrop-blur-xl"
+            : "border-white/10 bg-black/35 backdrop-blur-md"
+        )}
+      >
+        <Link href="/" className="flex items-center rounded-xl pr-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <div className="relative mr-2 h-10 w-10">
             <img
               src="/logo.png"
               alt="Prime Build Logo"
@@ -92,29 +100,28 @@ const NavBar = () => {
               className="h-full w-full object-contain"
             />
           </div>
-          <span className="text-xl font-bold font-montserrat">
+          <span className="text-base font-bold tracking-tight font-montserrat sm:text-lg">
             PRIME<span className="text-primary">BUILD</span>
           </span>
         </Link>
 
         {/* Desktop Menu */}
-        <div className="hidden md:flex items-center space-x-8">
-          <a href="/#home" className="font-medium hover:text-primary transition-colors">Home</a>
-          <a href="/#services" className="font-medium hover:text-primary transition-colors">Servizi</a>
-          <a href="/#builds" className="font-medium hover:text-primary transition-colors">Build</a>
-          <a href="/#apps" className="font-medium hover:text-primary transition-colors">App</a>
-          <Link href="/guides" className="font-medium hover:text-primary transition-colors">
+        <div className="hidden items-center gap-1 md:flex">
+          <a href="/#home" className="rounded-lg px-3 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/5 hover:text-white">Home</a>
+          <a href="/#services" className="rounded-lg px-3 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/5 hover:text-white">Servizi</a>
+          <a href="/#builds" className="rounded-lg px-3 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/5 hover:text-white">Build</a>
+          <a href="/#apps" className="rounded-lg px-3 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/5 hover:text-white">App</a>
+          <Link href="/guides" className="rounded-lg px-3 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/5 hover:text-white">
             Guide
           </Link>
-          <a href="/#contact" className="font-medium hover:text-primary transition-colors">Contatti</a>
-          <div className="flex space-x-4 ml-4">
+          <div className="ml-2 flex items-center gap-2 border-l border-white/10 pl-3">
             <a
               href="https://www.instagram.com/prime_build_/"
               target="_blank"
               rel="noopener noreferrer"
               aria-label="Seguici su Instagram"
               onClick={() => handleSocialClick('Instagram', 'https://www.instagram.com/prime_build_/')}
-              className="bg-neutral-800 hover:bg-primary p-2 rounded-full flex items-center justify-center transition-all transform hover:-translate-y-1"
+              className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-neutral-300 transition hover:border-primary/40 hover:text-primary"
             >
               <FaInstagram aria-hidden="true" />
             </a>
@@ -124,10 +131,14 @@ const NavBar = () => {
               rel="noopener noreferrer"
               aria-label="Unisciti al nostro Discord"
               onClick={() => handleSocialClick('Discord', 'https://discord.gg/jBNk2vXKKd')}
-              className="bg-neutral-800 hover:bg-primary p-2 rounded-full flex items-center justify-center transition-all transform hover:-translate-y-1"
+              className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-neutral-300 transition hover:border-primary/40 hover:text-primary"
             >
               <FaDiscord aria-hidden="true" />
             </a>
+            <a href="/#contact" className="button-primary ml-1 min-h-9 px-4 py-2 text-sm">
+              Preventivo
+              <ArrowUpRight className="h-3.5 w-3.5" aria-hidden="true" />
+            </a>
           </div>
         </div>
 
@@ -138,7 +149,7 @@ const NavBar = () => {
           aria-expanded={isOpen}
           aria-controls="mobile-menu"
           aria-label={isOpen ? "Chiudi menu" : "Apri menu"}
-          className="md:hidden text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-md p-1 z-50"
+          className="z-50 flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-white md:hidden"
         >
           {isOpen ? <FaTimes className="text-2xl" aria-hidden="true" /> : <FaBars className="text-2xl" aria-hidden="true" />}
         </button>
@@ -150,29 +161,29 @@ const NavBar = () => {
           <motion.div
             ref={menuRef}
             id="mobile-menu"
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.3 }}
-            className="md:hidden bg-black bg-opacity-95 pb-4 px-4 overflow-hidden"
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+            className="mx-auto mt-2 max-w-7xl overflow-hidden rounded-2xl border border-white/10 bg-black/95 p-3 shadow-2xl backdrop-blur-xl md:hidden"
             role="menu"
           >
-            <a href="/#home" onClick={closeMenu} role="menuitem" className="block py-2 px-4 hover:bg-neutral-800 rounded focus-visible:ring-2 focus-visible:ring-primary">Home</a>
-            <a href="/#services" onClick={closeMenu} role="menuitem" className="block py-2 px-4 hover:bg-neutral-800 rounded focus-visible:ring-2 focus-visible:ring-primary">Servizi</a>
-            <a href="/#builds" onClick={closeMenu} role="menuitem" className="block py-2 px-4 hover:bg-neutral-800 rounded focus-visible:ring-2 focus-visible:ring-primary">Build</a>
-            <a href="/#apps" onClick={closeMenu} role="menuitem" className="block py-2 px-4 hover:bg-neutral-800 rounded focus-visible:ring-2 focus-visible:ring-primary">App</a>
-            <Link href="/guides" onClick={closeMenu} role="menuitem" className="block py-2 px-4 hover:bg-neutral-800 rounded focus-visible:ring-2 focus-visible:ring-primary">
+            <a href="/#home" onClick={closeMenu} role="menuitem" className="block rounded-xl px-4 py-3 font-medium text-neutral-200 hover:bg-white/5">Home</a>
+            <a href="/#services" onClick={closeMenu} role="menuitem" className="block rounded-xl px-4 py-3 font-medium text-neutral-200 hover:bg-white/5">Servizi</a>
+            <a href="/#builds" onClick={closeMenu} role="menuitem" className="block rounded-xl px-4 py-3 font-medium text-neutral-200 hover:bg-white/5">Build</a>
+            <a href="/#apps" onClick={closeMenu} role="menuitem" className="block rounded-xl px-4 py-3 font-medium text-neutral-200 hover:bg-white/5">App</a>
+            <Link href="/guides" onClick={closeMenu} role="menuitem" className="block rounded-xl px-4 py-3 font-medium text-neutral-200 hover:bg-white/5">
               Guide
             </Link>
-            <a href="/#contact" onClick={closeMenu} role="menuitem" className="block py-2 px-4 hover:bg-neutral-800 rounded focus-visible:ring-2 focus-visible:ring-primary">Contatti</a>
-            <div className="flex space-x-4 p-4">
+            <a href="/#contact" onClick={closeMenu} role="menuitem" className="button-primary mt-2 w-full">Richiedi preventivo</a>
+            <div className="mt-3 flex gap-3 border-t border-white/10 p-3 pt-4">
               <a
                 href="https://www.instagram.com/prime_build_/"
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label="Seguici su Instagram"
                 onClick={() => handleSocialClick('Instagram', 'https://www.instagram.com/prime_build_/')}
-                className="bg-neutral-800 hover:bg-primary p-2 rounded-full flex items-center justify-center transition-all focus-visible:ring-2 focus-visible:ring-primary"
+                className="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-neutral-300 hover:text-primary"
               >
                 <FaInstagram aria-hidden="true" />
               </a>
@@ -182,7 +193,7 @@ const NavBar = () => {
                 rel="noopener noreferrer"
                 aria-label="Unisciti al nostro Discord"
                 onClick={() => handleSocialClick('Discord', 'https://discord.gg/jBNk2vXKKd')}
-                className="bg-neutral-800 hover:bg-primary p-2 rounded-full flex items-center justify-center transition-all focus-visible:ring-2 focus-visible:ring-primary"
+                className="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-neutral-300 hover:text-primary"
               >
                 <FaDiscord aria-hidden="true" />
               </a>
diff --git a/client/src/components/SectionHeader.tsx b/client/src/components/SectionHeader.tsx
index fc41299..bea9911 100644
--- a/client/src/components/SectionHeader.tsx
+++ b/client/src/components/SectionHeader.tsx
@@ -3,6 +3,7 @@ interface SectionHeaderProps {
   highlight?: string;
   subtitle?: string;
   italicText?: string;
+  eyebrow?: string;
   alignment?: "left" | "center";
   underline?: boolean;
 }
@@ -12,13 +13,20 @@ export function SectionHeader({
   highlight,
   subtitle,
   italicText,
+  eyebrow,
   alignment = "center",
-  underline = true,
+  underline = false,
 }: SectionHeaderProps) {
   return (
-    <div className={`mb-16 ${alignment === "center" ? "text-center" : ""}`}>
+    <div className={`mb-12 md:mb-16 ${alignment === "center" ? "text-center" : ""}`}>
+      {eyebrow && (
+        <span className="eyebrow mb-5">
+          <span className="h-1.5 w-1.5 rounded-full bg-primary shadow-[0_0_12px_hsl(var(--primary))]" />
+          {eyebrow}
+        </span>
+      )}
       <h2
-        className={`text-3xl md:text-4xl font-bold font-montserrat mb-4 inline-block ${
+        className={`text-balance text-3xl font-bold tracking-[-0.035em] text-white sm:text-4xl md:text-5xl font-montserrat mb-5 inline-block ${
           underline ? "border-b-2 border-primary pb-2" : ""
         }`}
       >
@@ -26,10 +34,10 @@ export function SectionHeader({
         {highlight && <span className="text-primary">{highlight}</span>}
       </h2>
       {subtitle && (
-        <p className="text-lg max-w-2xl mx-auto text-neutral-300">{subtitle}</p>
+        <p className={`text-base leading-7 text-neutral-400 md:text-lg ${alignment === "center" ? "mx-auto max-w-2xl" : "max-w-xl"}`}>{subtitle}</p>
       )}
       {italicText && (
-        <p className="text-base max-w-2xl mx-auto text-neutral-400 mt-4 italic">
+        <p className={`mt-4 max-w-2xl text-sm text-neutral-500 ${alignment === "center" ? "mx-auto" : ""}`}>
           {italicText}
         </p>
       )}
diff --git a/client/src/components/ServicesSection.tsx b/client/src/components/ServicesSection.tsx
index 381db17..c977325 100644
--- a/client/src/components/ServicesSection.tsx
+++ b/client/src/components/ServicesSection.tsx
@@ -19,28 +19,32 @@ const ServiceCard = ({
   delay: number; 
 }) => {
   return (
-    <AnimatedElement delay={delay} className="service-card bg-black p-8 rounded-xl shadow-lg overflow-hidden relative h-full">
-      <div className="absolute top-0 right-0 w-20 h-20 bg-primary opacity-5 rounded-bl-full"></div>
-      <div className="text-4xl text-primary mb-6 transition-transform duration-300 group-hover:scale-110">
-        {icon}
+    <AnimatedElement delay={delay} className="group surface-card interactive-card h-full p-7 md:p-8">
+      <div className="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-primary/10 blur-3xl" />
+      <div className="relative z-10 flex h-full flex-col">
+        <div className="mb-7 flex h-12 w-12 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10 text-xl text-primary transition-transform duration-300 group-hover:scale-105">
+          {icon}
+        </div>
+        <h3 className="text-xl font-bold font-montserrat mb-3">{title}</h3>
+        <p className="text-sm leading-6 text-neutral-400 mb-6">{description}</p>
+        <ul className="mb-7 space-y-3 text-sm text-neutral-300">
+          {features.map((feature, index) => (
+            <li key={index} className="flex items-center gap-3">
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                <FaCheck className="text-[10px] text-primary" />
+              </span>
+              {feature}
+            </li>
+          ))}
+        </ul>
+        <a
+          href="#contact"
+          onClick={() => trackCTAClick(cta, 'services')}
+          className="mt-auto inline-flex items-center gap-2 font-semibold text-primary transition-colors hover:text-orange-300"
+        >
+          {cta} <FaArrowRight className="text-xs transition-transform group-hover:translate-x-1" />
+        </a>
       </div>
-      <h3 className="text-xl font-bold font-montserrat mb-4">{title}</h3>
-      <p className="text-neutral-400 mb-4">{description}</p>
-      <ul className="text-sm text-neutral-300 space-y-2 mb-6">
-        {features.map((feature, index) => (
-          <li key={index} className="flex items-center">
-            <FaCheck className="text-primary mr-2" />
-            {feature}
-          </li>
-        ))}
-      </ul>
-      <a
-        href="#contact"
-        onClick={() => trackCTAClick(cta, 'services')}
-        className="inline-block text-primary hover:underline font-medium group"
-      >
-        {cta} <FaArrowRight className="inline ml-1 transform group-hover:translate-x-1 transition-transform" />
-      </a>
     </AnimatedElement>
   );
 };
@@ -74,17 +78,20 @@ const ServicesSection = () => {
   ];
 
   return (
-    <section id="services" className="py-20 bg-neutral-900">
-      <div className="container mx-auto px-4">
+    <section id="services" className="section-shell relative overflow-hidden border-y border-white/5 bg-[#08090b]">
+      <div className="section-grid opacity-50" aria-hidden="true" />
+      <div className="section-glow -right-64 top-0 opacity-60" aria-hidden="true" />
+      <div className="site-container">
         <AnimatedElement>
           <SectionHeader
-            title=""
-            highlight="Servizi"
+            eyebrow="Servizi"
+            title="Un unico partner per"
+            highlight="tutto il tuo setup"
             subtitle="Offriamo una gamma completa di servizi per soddisfare ogni tua esigenza nel mondo PC Gaming"
           />
         </AnimatedElement>
         
-        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+        <div className="mx-auto grid max-w-6xl gap-5 md:grid-cols-3">
           {services.map((service, index) => (
             <ServiceCard key={index} {...service} />
           ))}
diff --git a/client/src/hooks/use-mobile.tsx b/client/src/hooks/use-mobile.tsx
deleted file mode 100644
index 2b0fe1d..0000000
--- a/client/src/hooks/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/client/src/index.css b/client/src/index.css
index 80f0af2..45470f3 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -6,6 +6,14 @@
   --primary: 24 100% 50%;
   --ring: 24 100% 50%;
   --orange: 24 100% 50%;
+  --background: 220 24% 4%;
+  --foreground: 30 25% 96%;
+  --border: 220 14% 18%;
+  --muted: 220 14% 12%;
+  --muted-foreground: 220 8% 65%;
+  --card: 220 18% 7%;
+  --card-foreground: 30 25% 96%;
+  --radius: 1rem;
 }
 
 .dark {
@@ -21,11 +29,30 @@
 
   body {
     @apply font-sans antialiased bg-background text-foreground;
+    min-width: 320px;
+    background:
+      radial-gradient(circle at 50% -10%, hsl(var(--primary) / 0.1), transparent 28rem),
+      hsl(var(--background));
+    color-scheme: dark;
+  }
+
+  html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 6rem;
+  }
+
+  ::selection {
+    color: #070707;
+    background: hsl(var(--primary));
+  }
+
+  :focus-visible {
+    outline: 2px solid hsl(var(--primary));
+    outline-offset: 4px;
   }
 
-  /* Respect user's reduced motion preferences (except marquee gallery) */
   @media (prefers-reduced-motion: reduce) {
-    *:not(.marquee-animate),
+    *,
     *::before,
     *::after {
       animation-duration: 0.01ms !important;
@@ -52,10 +79,79 @@
 @layer utilities {
   .no-scrollbar::-webkit-scrollbar { display: none; }
   .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .section-shell {
+    @apply relative py-20 md:py-28;
+  }
+
+  .site-container {
+    @apply container relative z-10 mx-auto px-4 sm:px-6 lg:px-8;
+  }
 }
 
 
 @layer components {
+  .surface-card {
+    @apply relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.045] shadow-2xl shadow-black/30 backdrop-blur-xl;
+  }
+
+  .surface-card::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 35%);
+    opacity: 0.55;
+  }
+
+  .interactive-card {
+    @apply transition duration-300 ease-out;
+  }
+
+  .interactive-card:hover,
+  .interactive-card:focus-within {
+    transform: translateY(-4px);
+    border-color: hsl(var(--primary) / 0.35);
+    box-shadow: 0 24px 80px -36px hsl(var(--primary) / 0.5);
+  }
+
+  .button-primary {
+    @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-primary px-6 py-3 font-semibold text-black shadow-lg shadow-primary/20 transition duration-200 hover:-translate-y-0.5 hover:bg-orange-400 hover:shadow-primary/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-black active:translate-y-0;
+  }
+
+  .button-secondary {
+    @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-full border border-white/15 bg-white/[0.05] px-6 py-3 font-semibold text-white backdrop-blur-md transition duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:bg-white/[0.09] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-black active:translate-y-0;
+  }
+
+  .eyebrow {
+    @apply inline-flex items-center gap-2 rounded-full border border-primary/25 bg-primary/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-orange-300;
+  }
+
+  .section-grid {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(hsl(0 0% 100% / 0.035) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(0 0% 100% / 0.035) 1px, transparent 1px);
+    background-size: 56px 56px;
+    mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
+  }
+
+  .section-glow {
+    position: absolute;
+    width: 32rem;
+    height: 32rem;
+    border-radius: 9999px;
+    pointer-events: none;
+    background: hsl(var(--primary) / 0.12);
+    filter: blur(110px);
+  }
+
   .glow-card {
     position: relative;
     --glow-color: hsl(var(--primary) / 0.5);
@@ -83,8 +179,9 @@
 
   /* Dark background gradient + optional subtle pattern */
   .bg-dark-gradient {
-    /* Slightly stronger center shade for visible depth */
-    background: radial-gradient(65% 55% at 50% 0%, #101010 0%, #000000 80%);
+    background:
+      radial-gradient(65% 55% at 50% 0%, hsl(var(--primary) / 0.09) 0%, transparent 70%),
+      linear-gradient(180deg, #090a0d 0%, #050506 100%);
   }
   .bg-diagonal-grid {
     position: relative;
@@ -96,9 +193,8 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    /* use normal blending with slightly higher alpha for visibility on black */
-    background-image: linear-gradient(transparent 0px, rgba(255,255,255,0.06) 1px), linear-gradient(90deg, transparent 0px, rgba(255,255,255,0.06) 1px);
-    background-size: 24px 24px, 24px 24px;
+    background-image: linear-gradient(transparent 0px, rgba(255,255,255,0.035) 1px), linear-gradient(90deg, transparent 0px, rgba(255,255,255,0.035) 1px);
+    background-size: 48px 48px, 48px 48px;
     z-index: 0;
   }
 
@@ -115,9 +211,22 @@
       radial-gradient(rgba(0,0,0,0.03) 1px, rgba(0,0,0,0) 1px);
     background-size: 3px 3px, 5px 5px, 7px 7px;
     background-position: 0 0, 1px 2px, 2px 1px;
-    opacity: 0.12; /* still subtle but visible on black */
+    opacity: 0.08;
     z-index: 0;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .interactive-card:hover,
+    .interactive-card:focus-within,
+    .button-primary:hover,
+    .button-secondary:hover {
+      transform: none;
+    }
+
+    .marquee-animate {
+      animation: none !important;
+    }
+  }
 }
 
 
diff --git a/client/src/lib/AnimatedElement.tsx b/client/src/lib/AnimatedElement.tsx
index f7c8eeb..b4b049c 100644
--- a/client/src/lib/AnimatedElement.tsx
+++ b/client/src/lib/AnimatedElement.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 
 interface AnimatedElementProps {
   children: ReactNode;
@@ -18,6 +18,8 @@ const AnimatedElement = ({
   direction = "up",
   once = true,
 }: AnimatedElementProps) => {
+  const shouldReduceMotion = useReducedMotion();
+
   const getInitialPosition = () => {
     switch (direction) {
       case "up":
@@ -49,13 +51,13 @@ const AnimatedElement = ({
   return (
     <motion.div
       className={className}
-      initial={getInitialPosition()}
+      initial={shouldReduceMotion ? { opacity: 1 } : getInitialPosition()}
       whileInView={getFinalPosition()}
-      viewport={{ once }}
+      viewport={{ once, amount: 0.15 }}
       transition={{
-        duration,
-        delay,
-        ease: "easeOut",
+        duration: shouldReduceMotion ? 0 : duration,
+        delay: shouldReduceMotion ? 0 : delay,
+        ease: [0.22, 1, 0.36, 1],
       }}
     >
       {children}
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index deb4da8..ae69536 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -53,10 +53,10 @@ const Home = () => {
   }, []);
 
   return (
-    <div className="overflow-hidden">
+    <div className="overflow-hidden bg-black">
       <HeroSection />
       
-      <Suspense fallback={<div className="h-64 flex items-center justify-center"><div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div></div>}>
+      <Suspense fallback={<div className="flex h-64 items-center justify-center bg-black"><div className="h-8 w-8 animate-spin rounded-full border-2 border-white/10 border-t-primary"></div></div>}>
         <ServicesSection />
         <GallerySection />
         <BuildsSection />
@@ -71,4 +71,3 @@ const Home = () => {
 
 export default Home;
 
-