Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -41,23 +41,124 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
+        <div className="flex flex-col items-center justify-center w-full">
-          title="Maestri nei Colori, Leader nei Risultati"
+          {/* Text content section - centered and stacked vertically */}
-          description="Tinteggiatura civile e industriale con tecnologie all'avanguardia, piattaforme aeree e un parco mezzi unico nel territorio. Dove gli altri non arrivano, arriviamo noi."
+          <div className="w-full max-w-3xl mx-auto px-6 md:px-12 pt-20 md:pt-32 pb-12 md:pb-16 text-center">
-          tag="Dal 1990"
+            {/* Badge/Tag */}
-          background={{ variant: "plain" }}
+            <div 
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AicWC53vH80wLx71X1buQoZMgU/uploaded-1773091546923-m4ntmasg.png"
+              className="inline-flex items-center gap-2 mb-6 md:mb-8 px-4 py-2 rounded-full border border-accent/30 bg-card animate-fade-in-top"
-          imageAlt="Euro Pitture parco mezzi Suzzara"
+              style={{
-          imagePosition="right"
+                animation: 'fadeInTop 0.8s ease-out'
-          mediaAnimation="none"
+              }}
-          fixedMediaHeight={false}
+            >
-          buttons={[
+              <span className="text-sm font-medium text-foreground/75">Dal 1990</span>
-            { text: "Richiedi Preventivo", href: "#contact" },
+            </div>
-            { text: "Guarda i Lavori", href: "#portfolio" }
+
-          ]}
+            {/* Headline */}
-          mediaWrapperClassName="h-screen"
+            <h1 
-          imageClassName="w-full h-full object-cover"
+              className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 md:mb-8 leading-tight text-foreground animate-fade-in-top"
-        />
+              style={{
+                animation: 'fadeInTop 0.8s ease-out 0.1s both'
+              }}
+            >
+              Maestri nei Colori, Leader nei Risultati
+            </h1>
+
+            {/* Body text */}
+            <p 
+              className="text-lg md:text-xl text-foreground/80 mb-8 md:mb-12 leading-relaxed max-w-2xl mx-auto animate-fade-in-top"
+              style={{
+                animation: 'fadeInTop 0.8s ease-out 0.2s both'
+              }}
+            >
+              Tinteggiatura civile e industriale con tecnologie all'avanguardia, piattaforme aeree e un parco mezzi unico nel territorio. Dove gli altri non arrivano, arriviamo noi.
+            </p>
+
+            {/* CTA Buttons */}
+            <div 
+              className="flex flex-col sm:flex-row gap-4 md:gap-6 justify-center items-center animate-fade-in-top"
+              style={{
+                animation: 'fadeInTop 0.8s ease-out 0.3s both'
+              }}
+            >
+              <button 
+                onClick={() => {
+                  const contactSection = document.getElementById('contact');
+                  if (contactSection) contactSection.scrollIntoView({ behavior: 'smooth' });
+                }}
+                className="px-8 md:px-10 py-3 md:py-4 bg-primary-cta text-primary-cta-text rounded-full font-semibold hover:opacity-90 transition-opacity whitespace-nowrap"
+              >
+                Richiedi Preventivo
+              </button>
+              <button 
+                onClick={() => {
+                  const portfolioSection = document.getElementById('portfolio');
+                  if (portfolioSection) portfolioSection.scrollIntoView({ behavior: 'smooth' });
+                }}
+                className="px-8 md:px-10 py-3 md:py-4 bg-secondary-cta text-secondary-cta-text border-2 border-foreground/20 rounded-full font-semibold hover:border-foreground/40 transition-colors whitespace-nowrap"
+              >
+                Guarda i Lavori
+              </button>
+            </div>
+          </div>
+
+          {/* Full-width image section below with responsive heights */}
+          <div 
+            className="w-full animate-fade-in-bottom"
+            style={{
+              animation: 'fadeInBottom 0.8s ease-out 0.4s both',
+              height: 'clamp(220px, 100vw * 0.55, 480px)'
+            }}
+          >
+            <img
+              src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AicWC53vH80wLx71X1buQoZMgU/uploaded-1773091546923-m4ntmasg.png"
+              alt="Euro Pitture parco mezzi Suzzara"
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+
+        <style jsx>{`
+          @keyframes fadeInTop {
+            from {
+              opacity: 0;
+              transform: translateY(30px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+
+          @keyframes fadeInBottom {
+            from {
+              opacity: 0;
+              transform: translateY(-30px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+
+          @media (max-width: 640px) {
+            :global(body) {
+              /* Mobile: 220px height */
+            }
+          }
+
+          @media (min-width: 641px) and (max-width: 1024px) {
+            :global(body) {
+              /* Tablet: 360px height */
+            }
+          }
+
+          @media (min-width: 1025px) {
+            :global(body) {
+              /* Desktop: 480px height */
+            }
+          }
+        `}</style>
       </div>
 
       <div id="about" data-section="about">