fixed mobile view

frontend/src/app/contatti/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 export default function Contatti() {
   return (
-    <div className="pt-32 pb-24 px-6 lg:px-8 max-w-7xl mx-auto overflow-x-hidden">
+    <div className="pt-24 sm:pt-32 pb-16 sm:pb-24 px-6 lg:px-8 max-w-7xl mx-auto overflow-x-hidden">
       {/* Hero Section - Priority render */}
       <section className="grid grid-cols-1 lg:grid-cols-12 mb-16 lg:mb-24">
         <div className="col-span-12 md:col-span-8">
@@ -20,7 +20,7 @@ export default function Contatti() {
           <div className="h-2 w-24 bg-primary mt-4" />
         </div>
         <div className="col-span-12 md:col-start-9 md:col-span-4 mt-8 md:mt-auto">
-          <p className="text-on-surface-variant font-medium text-lg lg:text-xl leading-relaxed">
+          <p className="text-on-surface-variant font-medium text-base sm:text-lg lg:text-xl leading-relaxed">
             Parliamo del tuo prossimo progetto. Nessun impegno, solo una conversazione.
           </p>
         </div>
@@ -42,7 +42,7 @@ export default function Contatti() {
                 whatsapp
               </p>
               <a
-                className="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300"
+                className="text-xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300"
                 href="tel:+393382451171"
               >
                 +39 338 245 1171
@@ -53,7 +53,7 @@ export default function Contatti() {
                 email
               </p>
               <a
-                className="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300 underline decoration-2 underline-offset-8"
+                className="text-xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300 underline decoration-2 underline-offset-8"
                 href="mailto:info@cimaprogetti.it"
               >
                 info@cimaprogetti.it
@@ -93,7 +93,7 @@ export default function Contatti() {
             <div className="bg-background py-12 pr-0 md:pr-12">
               <div className="flex flex-col h-full">
                 <div className="mb-6">
-                  <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
+                  <h3 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
                     Nicola Leone Ciardi
                   </h3>
                   <p className="text-primary font-bold uppercase text-[10px] tracking-[0.2em]">
@@ -111,7 +111,7 @@ export default function Contatti() {
                     <span className="material-symbols-outlined text-primary">
                       call
                     </span>
-                    <span className="font-bold tracking-tight">
+                    <span className="font-bold tracking-tight text-sm sm:text-base break-all sm:break-normal">
                       +39 338 245 1178
                     </span>
                   </a>
@@ -122,7 +122,7 @@ export default function Contatti() {
                     <span className="material-symbols-outlined text-primary">
                       mail
                     </span>
-                    <span className="font-bold tracking-tight">
+                    <span className="font-bold tracking-tight text-sm sm:text-base break-all sm:break-normal">
                       nicolaleone.ciardi@cimaprogetti.it
                     </span>
                   </a>
@@ -134,7 +134,7 @@ export default function Contatti() {
             <div className="bg-background py-12 md:pl-12 border-t md:border-t-0 md:border-l border-outline-variant/10">
               <div className="flex flex-col h-full">
                 <div className="mb-6">
-                  <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
+                  <h3 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
                     Valentina Madaudo
                   </h3>
                   <p className="text-primary font-bold uppercase text-[10px] tracking-[0.2em]">
@@ -152,7 +152,7 @@ export default function Contatti() {
                     <span className="material-symbols-outlined text-primary">
                       call
                     </span>
-                    <span className="font-bold tracking-tight">
+                    <span className="font-bold tracking-tight text-sm sm:text-base break-all sm:break-normal">
                       +39 339 358 0805
                     </span>
                   </a>
@@ -163,7 +163,7 @@ export default function Contatti() {
                     <span className="material-symbols-outlined text-primary">
                       mail
                     </span>
-                    <span className="font-bold tracking-tight">
+                    <span className="font-bold tracking-tight text-sm sm:text-base break-all sm:break-normal">
                       valentina.madaudo@cimaprogetti.it
                     </span>
                   </a>

frontend/src/app/globals.css

@@ -59,7 +59,7 @@ body {
 }
 
 .text-huge {
-  font-size: clamp(2.5rem, 8vw, 8rem);
+  font-size: clamp(2rem, 8vw, 8rem);
   line-height: 0.9;
   letter-spacing: -0.04em;
 }

frontend/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
@@ -9,6 +9,12 @@ const inter = Inter({
   variable: "--font-inter",
 });
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = {
   title: "CiMa Progetti | Digital Architecture & Integration",
   description:
@@ -64,7 +70,6 @@ export default function RootLayout({
         />
 
         {/* Optimize LCP by reducing render-blocking resources */}
-        <meta name="viewport" content="viewport-fit=cover" />
       </head>
       <body className="min-h-screen flex flex-col">
         <Navbar />

frontend/src/components/sections/AboutSection.tsx

@@ -57,7 +57,7 @@ export default function AboutSection() {
       {/* Content Overlay */}
       <div ref={textRef} className="max-w-3xl mx-auto text-center text-white relative z-10">
         <h2 className="text-huge font-black uppercase mb-8">Chi Siamo</h2>
-        <p className="text-lg lg:text-xl leading-relaxed mb-12">
+        <p className="text-base sm:text-lg lg:text-xl leading-relaxed mb-8 sm:mb-12">
           CiMa Progetti unisce architettura e software engineering. Costruiamo
           sistemi digitali solidi e scalabili per aziende che non accettano
           compromessi.
@@ -79,7 +79,7 @@ export default function AboutSection() {
         <div className="mt-12">
           <a
             href="/contatti"
-            className="inline-block border-2 border-white bg-white text-dark-bg px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:bg-transparent hover:text-white active:scale-[0.98]"
+            className="inline-block border-2 border-white bg-white text-dark-bg px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-transparent hover:text-white active:scale-[0.98]"
           >
             Lavora con Noi
           </a>

frontend/src/components/sections/ApproccioSection.tsx

@@ -46,14 +46,14 @@ export default function ApproccioSection() {
         <h2 className="text-huge font-black uppercase mb-8">
           Tutto Collegato
         </h2>
-        <p className="text-xl lg:text-2xl leading-relaxed text-on-background mb-12">
+        <p className="text-base sm:text-xl lg:text-2xl leading-relaxed text-on-background mb-8 sm:mb-12">
           Non software isolati, ma infrastrutture digitali portanti. Ogni
           componente dialoga con gli altri per creare un sistema unico,
           costruito attorno al vostro modo di lavorare.
         </p>
         <a
           href="#servizi"
-          className="inline-block border-2 border-on-background text-on-background px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:bg-on-background hover:text-background active:scale-[0.98]"
+          className="inline-block border-2 border-on-background text-on-background px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-on-background hover:text-background active:scale-[0.98]"
         >
           Scopri i Servizi
         </a>

frontend/src/components/sections/BeforeAfterSection.tsx

@@ -129,7 +129,7 @@ export default function BeforeAfterSection() {
         <div ref={ctaRef} className="text-center mt-12">
           <a
             href="/contatti"
-            className="inline-block bg-primary text-on-primary px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:brightness-110 active:scale-[0.98]"
+            className="inline-block bg-primary text-on-primary px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:brightness-110 active:scale-[0.98]"
           >
             Trasforma il tuo Business
           </a>

frontend/src/components/sections/CtaSection.tsx

@@ -48,7 +48,7 @@ export default function CtaSection() {
           <Link
             ref={buttonRef}
             href="/contatti"
-            className="inline-block border-2 border-white bg-white text-primary px-12 py-6 font-black uppercase tracking-widest text-lg lg:text-xl hover:bg-transparent hover:text-white hover:border-2 hover:border-white transition-colors"
+            className="inline-block border-2 border-white bg-white text-primary px-8 py-4 sm:px-12 sm:py-6 font-black uppercase tracking-widest text-sm sm:text-lg lg:text-xl hover:bg-transparent hover:text-white hover:border-2 hover:border-white transition-colors"
           >
             Contattaci
           </Link>

frontend/src/components/sections/FilosofiaSection.tsx

@@ -41,7 +41,7 @@ export default function FilosofiaSection() {
         <h2 className="text-sm font-bold uppercase tracking-[0.4em] text-primary">
           La nostra idea
         </h2>
-        <blockquote className="text-3xl md:text-4xl lg:text-6xl font-black leading-tight italic">
+        <blockquote className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl font-black leading-tight italic">
           &ldquo;La forma segue la funzione. La struttura la rende
           duratura.&rdquo;
         </blockquote>
@@ -51,7 +51,7 @@ export default function FilosofiaSection() {
         </p>
         <a
           href="/contatti"
-          className="inline-block border-2 border-white text-white px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:bg-white hover:text-dark-bg active:scale-[0.98]"
+          className="inline-block border-2 border-white text-white px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-white hover:text-dark-bg active:scale-[0.98]"
         >
           Inizia il Progetto
         </a>

frontend/src/components/sections/HeroSection.tsx

@@ -32,7 +32,7 @@ export default function HeroSection() {
       <div className="max-w-5xl mx-auto text-center">
         <h1
           ref={headlineRef}
-          className="text-huge font-black uppercase mb-12"
+          className="text-huge font-black uppercase mb-8 sm:mb-12"
         >
           La <span className="text-primary">struttura</span> digitale del
           tuo business.
@@ -40,13 +40,13 @@ export default function HeroSection() {
         <div ref={ctaRef} className="flex flex-col sm:flex-row gap-6 justify-center">
           <Link
             href="/contatti"
-            className="bg-primary text-on-primary px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:brightness-110 active:scale-[0.98] text-center"
+            className="bg-primary text-on-primary px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:brightness-110 active:scale-[0.98] text-center"
           >
             Inizia il Progetto
           </Link>
           <a
             href="#filosofia"
-            className="border-2 border-on-background text-on-background px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:bg-on-background hover:text-background active:scale-[0.98] text-center"
+            className="border-2 border-on-background text-on-background px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-on-background hover:text-background active:scale-[0.98] text-center"
           >
             Scopri il Metodo
           </a>

frontend/src/components/sections/ServicesSection.tsx

@@ -100,11 +100,11 @@ export default function ServicesSection() {
     >
       <div className="max-w-7xl mx-auto w-full">
         <div className="mb-16 text-center lg:text-left">
-          <h2 className="text-4xl lg:text-5xl font-black uppercase mb-6">
+          <h2 className="text-2xl sm:text-4xl lg:text-5xl font-black uppercase mb-4 sm:mb-6">
             Cosa Facciamo
           </h2>
           <div className="w-24 h-2 bg-primary mb-8 hidden lg:block" />
-          <p className="text-xl text-secondary leading-relaxed max-w-2xl">
+          <p className="text-base sm:text-xl text-secondary leading-relaxed max-w-2xl">
             Soluzioni su misura per il vostro metodo di lavoro. Automazione,
             gestione dati e competenze umane in un unico flusso.
           </p>
@@ -232,7 +232,7 @@ export default function ServicesSection() {
         <div className="text-center mt-12">
           <a
             href="/contatti"
-            className="inline-block bg-primary text-on-primary px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:brightness-110 active:scale-[0.98]"
+            className="inline-block bg-primary text-on-primary px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:brightness-110 active:scale-[0.98]"
           >
             Parliamo del tuo Progetto
           </a>