Update apps, gallery images, and improve UI

Added new gallery images (18.webp, 19.webp) and updated the gallery to use .webp files. Refined the AppsSection with new app (ZapTweaks), updated download/repo URLs, improved card layout for horizontal scrolling, and enhanced button styling. Adjusted CSS to allow marquee animation even with reduced motion preferences.

Author: PrimeBuild-pc

client/public/18.webp

@@ -26,30 +26,39 @@ const handlePayPalClick = () => {
 const AppsSection = () => {
   const apps: App[] = [
     {
-      name: "TreadPilot",
+      name: "ThreadPilot",
       description:
         "Alternativa open source a Process Lasso per Windows. Modifiche di sistema per utenti esperti.",
       features: ["Open-source", "Affinità processi su core", "Gestione powerplans"],
-  url: "https://github.com/PrimeBuild-pc/TreadPilot/releases/download/beta/ThreadPilot-v1.0-Windows-x64-Portable.zip",
-  repoUrl: "https://github.com/PrimeBuild-pc/TreadPilot",
+      url: "https://github.com/PrimeBuild-pc/ThreadPilot/releases/download/v0.1.0-beta/ThreadPilot_Setup.exe",
+      repoUrl: "https://github.com/PrimeBuild-pc/ThreadPilot",
       comingSoon: false,
     },
     {
       name: "LightCrosshair",
       description:
         "Overlay di mirino leggero e personalizzabile per migliorare la precisione nei giochi FPS.",
       features: ["Overlay trasparente", "Mirino personalizzabile", "Profilo per gioco"],
-  url: "https://github.com/PrimeBuild-pc/LightCrosshair/releases/download/beta/LightCrosshair-beta-win-x64-portable.zip",
-  repoUrl: "https://github.com/PrimeBuild-pc/LightCrosshair",
+      url: "https://github.com/PrimeBuild-pc/LightCrosshair/releases/download/v1.0.0/LightCrosshair-Setup.exe",
+      repoUrl: "https://github.com/PrimeBuild-pc/LightCrosshair",
       comingSoon: false,
     },
     {
       name: "TweakHub",
       description:
         "Centro di controllo all-in-one per modifiche e ottimizzazioni di Windows 11.",
       features: ["Affinità processi su core", "Gestione powerplans", "Controllo estremo"],
-  url: "https://github.com/PrimeBuild-pc/TweakHub/releases/download/beta/TweakHub-v1.0.0-win-x64-portable.zip",
-  repoUrl: "https://github.com/PrimeBuild-pc/TweakHub",
+      url: "https://github.com/PrimeBuild-pc/TweakHub/releases/download/v0.1.0-beta/TweakHub-Setup-0.1.0-beta.exe",
+      repoUrl: "https://github.com/PrimeBuild-pc/TweakHub",
+      comingSoon: false,
+    },
+    {
+      name: "ZapTweaks",
+      description:
+        "App per veloci tweaks su Windows 11, ideale per ottimizzazioni base su una fresh install.",
+      features: ["Tweaks rapidi", "Ottimizzazione Win11", "Fresh install"],
+      url: "https://github.com/PrimeBuild-pc/ZapTweaks/releases/download/v1.0.0/ZapTweaks_v1.0.0_Setup.exe",
+      repoUrl: "https://github.com/PrimeBuild-pc/ZapTweaks",
       comingSoon: false,
     },
   ];
@@ -66,11 +75,12 @@ const AppsSection = () => {
           </p>
         </AnimatedElement>
 
-        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+        <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">
           {apps.map((app, index) => (
             <AnimatedElement
               key={index}
-              className="glow-card relative pb-14 bg-neutral-900 rounded-xl overflow-hidden h-full flex flex-col
+              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-[#ff7514]
                          transition-transform hover:scale-105 focus-within:scale-105"
               delay={0.1 * index}
@@ -88,17 +98,17 @@ const AppsSection = () => {
                   ))}
                 </ul>
 
-                {/* spinge il blocco pulsante in fondo alla card; download centrato e repo in basso a destra */}
-                <div className="mt-auto relative pt-4">
-                  {/* Repo button - bottom-left (always shown when repoUrl exists) */}
+                {/* Pulsanti in fondo alla card */}
+                <div className="mt-auto pt-4 flex items-center justify-between gap-2">
+                  {/* Repo button */}
                   {app.repoUrl && (
                     <a
                       href={app.repoUrl}
                       target="_blank"
                       rel="noopener noreferrer"
                       onClick={() => handleRepoClick(app.name, app.repoUrl!)}
                       aria-label={`Visualizza repository GitHub di ${app.name}`}
-                      className="absolute left-4 bottom10 inline-flex items-center gap-2 bg-[#24292f] hover:bg-[#444d56] text-white px-4 py-1.5 rounded-md text-sm min-h-[32px]"
+                      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]"
                     >
                       <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" />
@@ -107,9 +117,9 @@ const AppsSection = () => {
                     </a>
                   )}
 
-                  {/* Download button - bottom-right (only when available) */}
+                  {/* Download button */}
                   {app.comingSoon ? (
-                    <span className="absolute right-1 bottom10 inline-block bg-neutral-800 text-neutral-300 px-4 py-2 rounded-md text-sm min-h-[32px]">
+                    <span className="inline-block bg-neutral-800 text-neutral-300 px-3 py-1.5 rounded-md text-sm min-h-[32px]">
                       In arrivo
                     </span>
                   ) : (
@@ -120,9 +130,9 @@ const AppsSection = () => {
                         rel="noopener noreferrer"
                         onClick={() => handleDownloadClick(app.name, app.url)}
                         aria-label={`Scarica ${app.name}`}
-                        className="absolute right-4 bottom10 inline-flex items-center gap-2 bg-[#ff7514] hover:bg-[#e06500] text-black font-semibold px-4 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-[#ff7514] focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900"
+                        className="inline-flex items-center gap-1.5 bg-[#ff7514] hover:bg-[#e06500] 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-[#ff7514] focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900"
                       >
-                        <FaDownload className="inline mr-2" aria-hidden="true" /> Download
+                        <FaDownload aria-hidden="true" /> Download
                       </a>
                     )
                   )}

client/public/19.webp

@@ -9,23 +9,25 @@ const SCROLL_SPEED_PX_PER_SEC = 300; // configurabile (px/s)
 
 export default function GallerySection() {
   const images: GalleryImage[] = [
-    { src: "/1.jpg", alt: "Workstation potente assemblata a Montegrotto Terme" },
-    { src: "/2.jpg", alt: "Dettaglio interno PC gaming RGB Padova" },
-    { src: "/3.jpg", alt: "Setup gaming compatto custom build" },
-    { src: "/4.jpg", alt: "Illuminazione LED laterale PC gaming Veneto" },
-    { src: "/5.jpg", alt: "Cable management ordinato Prime Build" },
-    { src: "/6.jpg", alt: "Ventole RGB sincronizzate assemblaggio PC Padova" },
-    { src: "/7.jpg", alt: "Case mid tower in vetro temperato" },
-    { src: "/8.jpg", alt: "Raffreddamento a liquido AIO installato a Montegrotto" },
-    { src: "/9.jpg", alt: "Setup produttività multi-monitor professionale" },
-    { src: "/10.jpg", alt: "Scheda video gaming alta fascia" },
-    { src: "/11.jpg", alt: "PC gaming minimalista bianco" },
-    { src: "/12.jpg", alt: "Dissipatore ad aria ottimizzato" },
-    { src: "/13.jpg", alt: "Build PC full white custom" },
-    { src: "/14.jpg", alt: "Case high airflow per massime prestazioni" },
-    { src: "/15.jpg", alt: "Cavi sleevati custom PC Padova" },
-    { src: "/16.jpg", alt: "Installazione SSD NVMe veloce" },
-    { src: "/17.jpg", alt: "Postazione gaming completa Prime Build" }
+    { src: "/1.webp", alt: "Workstation potente assemblata a Montegrotto Terme" },
+    { src: "/2.webp", alt: "Dettaglio interno PC gaming RGB Padova" },
+    { src: "/3.webp", alt: "Setup gaming compatto custom build" },
+    { src: "/4.webp", alt: "Illuminazione LED laterale PC gaming Veneto" },
+    { src: "/5.webp", alt: "Cable management ordinato Prime Build" },
+    { src: "/6.webp", alt: "Ventole RGB sincronizzate assemblaggio PC Padova" },
+    { src: "/7.webp", alt: "Case mid tower in vetro temperato" },
+    { src: "/8.webp", alt: "Raffreddamento a liquido AIO installato a Montegrotto" },
+    { src: "/9.webp", alt: "Setup produttività multi-monitor professionale" },
+    { src: "/10.webp", alt: "Scheda video gaming alta fascia" },
+    { src: "/11.webp", alt: "PC gaming minimalista bianco" },
+    { src: "/12.webp", alt: "Dissipatore ad aria ottimizzato" },
+    { src: "/13.webp", alt: "Build PC full white custom" },
+    { src: "/14.webp", alt: "Case high airflow per massime prestazioni" },
+    { src: "/15.webp", alt: "Cavi sleevati custom PC Padova" },
+    { src: "/16.webp", alt: "Installazione SSD NVMe veloce" },
+    { src: "/17.webp", alt: "Postazione gaming completa Prime Build" },
+    { src: "/18.webp", alt: "PC gaming con illuminazione LED arancione e GeForce RTX" },
+    { src: "/19.webp", alt: "PC gaming con illuminazione LED rossa e Radeon" },
   ];
 
   // Duplicate once for seamless CSS marquee
@@ -87,7 +89,7 @@ export default function GallerySection() {
           <style>{`
             @keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-distance))); } }
           `}</style>
-          <div ref={trackRef} className="flex gap-4 flex-nowrap will-change-transform" style={{ ...styleVars, animation: `marqueeX var(--marquee-duration) linear infinite` }}>
+          <div ref={trackRef} className="marquee-animate flex gap-4 flex-nowrap will-change-transform" style={{ ...styleVars, animation: `marqueeX var(--marquee-duration) linear infinite` }}>
             {loopImages.map((img, i) => (
               <div
                 key={i}

client/src/components/AppsSection.tsx

@@ -11,9 +11,9 @@
     @apply font-sans antialiased bg-background text-foreground;
   }
 
-  /* Respect user's reduced motion preferences */
+  /* Respect user's reduced motion preferences (except marquee gallery) */
   @media (prefers-reduced-motion: reduce) {
-    *,
+    *:not(.marquee-animate),
     *::before,
     *::after {
       animation-duration: 0.01ms !important;