From f3e81454b20fb4caf4ee724f6bfd7f2b3ed29491 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 13 Mar 2026 13:15:26 +0000
Subject: [PATCH 1/2] Update src/app/page.tsx

---
 src/app/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b425973..06a0c44 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -78,7 +78,7 @@ export default function LandingPage() {
           description="Sono Flavia Esposito e da sempre il colore è il mio linguaggio naturale. La mia sensibilità nasce dall'amore per l'interior design e per gli spazi armonici: ho sempre cercato equilibrio, materia, luce.\n\nPer anni il colore è stato presenza silenziosa nella mia vita, fino a quando ho sentito il bisogno di sperimentare direttamente sulla tela.\n\nPer me il bello non è decorazione: è necessità, è bisogno estetico. Ad un certo punto il bisogno è diventato gesto.\n\nHo iniziato a sperimentare sulla tela, lasciando che il colore diventasse linguaggio personale. La mia pittura è fatta di equilibrio e vibrazione: blu profondi, sabbie leggere, linee sottili che suggeriscono orizzonti senza definirli.\n\nNon dipingo luoghi reali. Non impongo una lettura. Ogni opera è aperta.\n\nCredo che l'arte trovi compimento nello sguardo di chi la incontra."
           tag="Chi sono"
           tagAnimation="slide-up"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=13pabz"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=13pabz&_wi=1"
           imageAlt="Studio di Flavia Esposito"
           useInvertedBackground={false}
           ariaLabel="About section – artist biography and philosophy"
@@ -215,7 +215,7 @@ export default function LandingPage() {
               id: "process-1",              category: "Studio",              title: "Dettagli di texture e colore",              excerpt: "Ogni strato rivela la ricerca di equilibrio. I dettagli macro mostrano come il colore vibra e dialoga sulla superficie.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=25ufzx",              imageAlt: "Dettagli della texture pittorica",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r",              date: "2025"
             },
             {
-              id: "process-2",              category: "Lavoro",              title: "Lo spazio dello studio",              excerpt: "Uno studio ordinato e luminoso dove il colore prende forma. Qui nascono gli orizzonti lenti attraverso sperimentazione e ascolto.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=13pabz",              imageAlt: "Studio di lavoro e creazione artistica",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r",              date: "2025"
+              id: "process-2",              category: "Lavoro",              title: "Lo spazio dello studio",              excerpt: "Uno studio ordinato e luminoso dove il colore prende forma. Qui nascono gli orizzonti lenti attraverso sperimentazione e ascolto.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=13pabz&_wi=2",              imageAlt: "Studio di lavoro e creazione artistica",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r",              date: "2025"
             },
             {
               id: "process-3",              category: "Ricerca",              title: "La palette dei colori",              excerpt: "Blues profondi, sabbie leggere, accenti di verde salvia. La palette è curata e pensata per trasmettere calma e contemplazione.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xr9js5",              imageAlt: "Palette artistica con colori dell'artista",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r",              date: "2025"
-- 
2.49.1


From 7ed51af0d1764319dca4dcd056befe9026a5ba06 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 13 Mar 2026 13:15:28 +0000
Subject: [PATCH 2/2] Update src/app/page.tsx

---
 src/app/page.tsx | 416 ++++++++++++++++++++---------------------------
 1 file changed, 179 insertions(+), 237 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 06a0c44..d71c555 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,324 +1,266 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
-import ContactFaq from '@/components/sections/contact/ContactFaq';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Brush, Layers, Mail, Minus, Palette, Sparkles, Wind, Zap } from 'lucide-react';
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-bubble"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="mediumSizeLargeTitles"
-      background="blurBottom"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="largeSizeMediumTitles"
+      background="fluid"
+      cardStyle="solid"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
+        <NavbarLayoutFloatingInline
           brandName="Flavia Place Art"
           navItems={[
             { name: "Opere", id: "opere" },
-            { name: "Chi sono", id: "chi-sono" },
-            { name: "Tecnica", id: "tecnica" },
-            { name: "Processo creativo", id: "processo" },
-            { name: "Contatti", id: "contatti" }
+            { name: "Chi sono", id: "about" },
+            { name: "Tecnica", id: "technique" },
+            { name: "Processo", id: "process" },
+            { name: "Contatti", id: "contact" }
           ]}
-          button={{
-            text: "Richiedi informazioni",            href: "#contatti"
-          }}
-          className="backdrop-blur-md bg-opacity-80"
-          buttonClassName="hover:shadow-lg transition-shadow duration-300"
+          button={{ text: "Scopri le opere", href: "#opere" }}
+          animateOnLoad={true}
+          navItemClassName="text-sm font-light tracking-wide hover:opacity-60 transition-opacity duration-300"
+          buttonClassName="px-6 py-2 bg-gradient-to-r from-[var(--primary-cta)] to-[var(--secondary-cta)] text-[var(--primary-cta-text)] rounded-md hover:shadow-lg transition-shadow duration-300"
+          buttonTextClassName="font-semibold text-sm"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCarouselLogo
-          logoText="Il colore come linguaggio"
-          description="Scopri le opere di Flavia Esposito, pittrice contemporanea italiana specializzata in arte astratta. Un viaggio attraverso colore, equilibrio e spazi contemplativi."
-          buttons={[
-            { text: "Scopri le opere", href: "#opere" }
-          ]}
-          slides={[
+        <HeroBillboardCarousel
+          title="Il colore come linguaggio"
+          description="Scopri un percorso estetico attraverso la pittura astratta contemporanea. Ogni opera è un invito a rallentare lo sguardo e abitare lo spazio sottile tra memoria e presente."
+          background={{ variant: "plain" }}
+          buttons={[{ text: "Scopri le opere", href: "#opere" }]}
+          mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hpihv3",              imageAlt: "Flavia Esposito al lavoro nello studio con tela e pennello"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ri8f5t",              imageAlt: "Flavia Esposito, pittrice contemporanea, al lavoro nel suo studio"
             }
           ]}
-          autoplayDelay={4000}
-          showDimOverlay={false}
-          ariaLabel="Hero section – artist and gallery introduction"
-          className="min-h-screen flex items-center justify-center"
-          containerClassName="w-full h-full"
-          contentContainerClassName="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
-          descriptionClassName="text-lg md:text-xl leading-relaxed opacity-90"
-          buttonContainerClassName="flex gap-4 mt-8"
-          buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all duration-300"
-          logoContainerClassName="mb-6"
-          logoClassName="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight"
-          mediaWrapperClassName="relative h-full min-h-96 md:min-h-full"
-          imageClassName="w-full h-full object-cover rounded-lg"
-          progressBarClassName="h-1 bg-opacity-30 rounded-full"
+          buttonAnimation="slide-up"
+          containerClassName="max-w-7xl mx-auto px-6 py-24"
+          titleClassName="text-5xl md:text-6xl font-bold leading-tight tracking-tight mb-6"
+          descriptionClassName="text-lg md:text-xl leading-relaxed text-gray-600 max-w-2xl mb-8"
+          buttonContainerClassName="flex gap-4"
+          buttonClassName="px-8 py-3 bg-gradient-to-r from-[var(--primary-cta)] to-pink-600 text-white rounded-md hover:shadow-xl transition-all duration-300"
+          buttonTextClassName="font-semibold"
+          mediaWrapperClassName="md:w-1/2 mt-12 md:mt-0"
         />
       </div>
 
-      <div id="chi-sono" data-section="chi-sono">
-        <MediaAbout
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
           title="Un linguaggio fatto di colore"
           description="Sono Flavia Esposito e da sempre il colore è il mio linguaggio naturale. La mia sensibilità nasce dall'amore per l'interior design e per gli spazi armonici: ho sempre cercato equilibrio, materia, luce.\n\nPer anni il colore è stato presenza silenziosa nella mia vita, fino a quando ho sentito il bisogno di sperimentare direttamente sulla tela.\n\nPer me il bello non è decorazione: è necessità, è bisogno estetico. Ad un certo punto il bisogno è diventato gesto.\n\nHo iniziato a sperimentare sulla tela, lasciando che il colore diventasse linguaggio personale. La mia pittura è fatta di equilibrio e vibrazione: blu profondi, sabbie leggere, linee sottili che suggeriscono orizzonti senza definirli.\n\nNon dipingo luoghi reali. Non impongo una lettura. Ogni opera è aperta.\n\nCredo che l'arte trovi compimento nello sguardo di chi la incontra."
-          tag="Chi sono"
-          tagAnimation="slide-up"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=13pabz&_wi=1"
-          imageAlt="Studio di Flavia Esposito"
+          metrics={[
+            { value: "10+", title: "Anni di ricerca artistica" },
+            { value: "100+", title: "Opere create" },
+            { value: "Astratta", title: "Linguaggio artistico" }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ri27tm"
+          imageAlt="Dettagli della tecnica pittorica di Flavia Esposito"
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
           useInvertedBackground={false}
-          ariaLabel="About section – artist biography and philosophy"
-          className="py-20 md:py-28"
-          textBoxClassName="space-y-6 md:space-y-8"
-          titleClassName="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight"
-          descriptionClassName="text-base md:text-lg leading-relaxed opacity-90 space-y-4"
-          tagClassName="text-sm font-semibold uppercase tracking-wider opacity-70"
-          mediaWrapperClassName="relative h-96 md:h-full md:min-h-96 rounded-lg overflow-hidden"
-          mediaClassName="w-full h-full object-cover"
+          containerClassName="max-w-7xl mx-auto px-6 py-24"
+          titleClassName="text-4xl md:text-5xl font-bold mb-8"
+          descriptionClassName="text-base md:text-lg leading-relaxed text-gray-700 mb-12 max-w-3xl"
+          metricsContainerClassName="grid grid-cols-3 gap-8 mt-12"
+          metricCardClassName="text-center"
+          metricValueClassName="text-3xl font-bold text-[var(--primary-cta)] mb-2"
+          metricTitleClassName="text-sm uppercase tracking-widest text-gray-600"
         />
       </div>
 
       <div id="collection-intro" data-section="collection-intro">
-        <FeatureBento
+        <FeatureCardTwentyOne
           title="Collezione – Orizzonti Lenti"
           description="Con la collezione Orizzonti Lenti ho iniziato un percorso che unisce estetica, equilibrio e armonia. È un invito a rallentare lo sguardo, ad abitare lo spazio sottile tra cielo e terra, tra acqua e memoria.\n\nNon si tratta di paesaggi reali. Ogni opera è pensata per creare uno spazio emotivo in cui l'osservatore possa riconoscere qualcosa di proprio. Un orizzonte personale. Un tempo lento."
-          tag="La mia ricerca"
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          features={[
-            {
-              title: "Vibrazione del colore",              description: "Ogni opera è costruita attraverso strati di colore che dialogano fra loro, creando profondità e movimento visivo.",              bentoComponent: "icon-info-cards",              items: [
-                { icon: Palette, label: "Palette", value: "Blues, Sabbie, Salvia" },
-                { icon: Layers, label: "Tecnica", value: "Stratificazione" },
-                { icon: Sparkles, label: "Effetto", value: "Luminosità" }
-              ]
-            },
-            {
-              title: "Equilibrio e respiro",              description: "Lo spazio bianco e la composizione richiamano il principio di armonia, permettendo all'occhio di riposare e contemplare.",              bentoComponent: "reveal-icon",              icon: Zap
-            },
-            {
-              title: "Linee suggerite",              description: "Orizzonti sottili che non definiscono, ma suggeriscono. Uno spazio tra realtà e immaginazione.",              bentoComponent: "reveal-icon",              icon: Wind
-            }
+          accordionItems={[
+            { id: "collection-1", title: "Orizzonti Lenti", content: "La prima collezione, caratterizzata da composizioni orizzontali che suggeriscono paesaggi sospesi. Ogni opera esplora la stratificazione del colore e la delicatezza della linea." },
+            { id: "collection-2", title: "Evoluzione artistica", content: "Un continuo dialogo tra la ricerca estetica e la necessità espressiva. Ogni nuova collezione rappresenta una fase del mio percorso creativo." },
+            { id: "collection-3", title: "Nuove direzioni", content: "Futuro aperto a nuove sperimentazioni e collezioni, mantenendo sempre l'equilibrio e la ricerca di armonia come principi fondanti." }
           ]}
-          animationType="blur-reveal"
-          carouselMode="buttons"
-          ariaLabel="Collection introduction – artistic philosophy"
-          className="py-16 md:py-24"
-          textBoxTitleClassName="text-4xl md:text-5xl font-extrabold leading-tight"
-          textBoxClassName="max-w-3xl mx-auto space-y-4"
-          textBoxDescriptionClassName="text-base md:text-lg leading-relaxed opacity-85"
-          cardTitleClassName="text-xl md:text-2xl font-bold"
-          cardDescriptionClassName="text-sm md:text-base leading-relaxed opacity-80"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m8jwus"
+          imageAlt="Collezione Orizzonti Lenti - Dettaglio opera"
+          mediaAnimation="slide-up"
+          useInvertedBackground={true}
+          mediaPosition="right"
+          containerClassName="max-w-7xl mx-auto px-6 py-24"
+          titleClassName="text-4xl md:text-5xl font-bold mb-6"
+          descriptionClassName="text-base md:text-lg leading-relaxed text-gray-700 mb-10"
+          accordionContainerClassName="space-y-4"
+          accordionClassName="border-b border-gray-300 pb-4"
+          accordionTitleClassName="text-lg font-semibold cursor-pointer hover:text-[var(--primary-cta)] transition-colors"
+          accordionContentClassName="text-gray-600 mt-3 leading-relaxed"
         />
       </div>
 
-      <div id="opere" data-section="opere">
-        <ProductCardThree
-          title="Le mie opere"
-          description="Scopri la collezione Orizzonti Lenti. Ogni opera è un invito al silenzio contemplativo, uno spazio dove il colore diventa narrazione."
-          tag="Opere"
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
-          animationType="blur-reveal"
-          carouselMode="buttons"
+      <div id="gallery" data-section="gallery">
+        <ProductCardTwo
+          title="Collezione – Orizzonti Lenti"
+          description="Scopri le opere della collezione principale. Ogni quadro è unico e rappresenta un momento specifico della ricerca artistica."
           products={[
             {
-              id: "artwork-1",              name: "Orizzonte Blu Profondo",              price: "€ 1.800",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xe2l3d",              imageAlt: "Orizzonte Blu Profondo – pittura astratta con tonalità blu"
+              id: "artwork-01",              brand: "Orizzonti Lenti",              name: "Blu e Sabbia I",              price: "€ 2.800",              rating: 5,
+              reviewCount: "Su richiesta",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m8jwus",              imageAlt: "Blu e Sabbia I - Acrilico su tela, 100x80cm"
             },
             {
-              id: "artwork-2",              name: "Verde Salvia – Traccia",              price: "€ 1.600",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ri2vc3",              imageAlt: "Verde Salvia – Traccia – opera con accenti verdi"
+              id: "artwork-02",              brand: "Orizzonti Lenti",              name: "Verde Salvia e Crema",              price: "€ 3.200",              rating: 5,
+              reviewCount: "Su richiesta",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=do5tw7",              imageAlt: "Verde Salvia e Crema - Acrilico su tela, 120x90cm"
             },
             {
-              id: "artwork-3",              name: "Sabbie Leggere",              price: "€ 1.400",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kjnhrg",              imageAlt: "Sabbie Leggere – composizione beige e sabbia"
+              id: "artwork-03",              brand: "Orizzonti Lenti",              name: "Orizzonte Profondo",              price: "€ 2.500",              rating: 5,
+              reviewCount: "Su richiesta",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=clf9v5",              imageAlt: "Orizzonte Profondo - Acrilico su tela, 80x60cm"
             },
             {
-              id: "artwork-4",              name: "Blu Indaco – Memoria",              price: "€ 2.000",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y7dinw",              imageAlt: "Blu Indaco – Memoria – profondità e contemplazione"
+              id: "artwork-04",              brand: "Orizzonti Lenti",              name: "Stratificazioni Leggere",              price: "€ 3.500",              rating: 5,
+              reviewCount: "Su richiesta",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tpjito",              imageAlt: "Stratificazioni Leggere - Acrilico su tela, 130x100cm"
             },
             {
-              id: "artwork-5",              name: "Rosa Cipria – Equilibrio",              price: "€ 1.550",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fx9tkx",              imageAlt: "Rosa Cipria – Equilibrio – tonalità morbide"
+              id: "artwork-05",              brand: "Orizzonti Lenti",              name: "Linea dell'Orizzonte",              price: "€ 2.300",              rating: 5,
+              reviewCount: "Su richiesta",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dypjjx",              imageAlt: "Linea dell'Orizzonte - Acrilico su tela, 70x70cm"
             },
             {
-              id: "artwork-6",              name: "Orizzonte Sospeso",              price: "€ 1.750",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ghsyrv",              imageAlt: "Orizzonte Sospeso – linea sottile tra cielo e terra"
+              id: "artwork-06",              brand: "Orizzonti Lenti",              name: "Respiro Cromatico",              price: "€ 2.900",              rating: 5,
+              reviewCount: "Su richiesta",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vk5ubx",              imageAlt: "Respiro Cromatico - Acrilico su tela, 100x80cm"
             }
           ]}
-          ariaLabel="Gallery section – artworks collection"
-          className="py-20 md:py-28"
-          containerClassName="max-w-7xl mx-auto px-6"
-          textBoxTitleClassName="text-4xl md:text-5xl font-extrabold leading-tight mb-4"
-          textBoxDescriptionClassName="text-base md:text-lg leading-relaxed opacity-85 mb-12"
-          cardClassName="relative rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
-          imageClassName="w-full h-80 object-cover"
-          cardNameClassName="text-lg font-semibold mt-4"
-          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10"
-        />
-      </div>
-
-      <div id="tecnica" data-section="tecnica">
-        <FeatureBento
-          title="Materia e stratificazione"
-          description="Dipingo con acrilico su tela, lavorando per sottrazione e stratificazione. Stendo velature leggere, apro e chiudo superfici, lascio emergere segni essenziali. L'acrilico, con la sua asciugatura rapida e la sua luminosità naturale, mi permette di costruire orizzonti sospesi, dove ogni strato dialoga con quello precedente. Ogni gesto è memoria, ogni trasparenza è spazio."
-          tag="Tecnica"
-          tagAnimation="slide-up"
+          gridVariant="three-columns-all-equal-width"
+          animationType="blur-reveal"
           textboxLayout="default"
           useInvertedBackground={false}
-          features={[
-            {
-              title: "Acrilico su tela",              description: "La scelta del medium permette fluidità e velocità, essenziali per la ricerca di spontaneità.",              bentoComponent: "reveal-icon",              icon: Brush
-            },
-            {
-              title: "Stratificazione",              description: "Velature leggere che si sovrappongono, creando profondità e dialogo tra i colori.",              bentoComponent: "reveal-icon",              icon: Layers
-            },
-            {
-              title: "Sottrazione",              description: "Apro e chiudo superfici, lasciando emergere solo i segni essenziali e necessari.",              bentoComponent: "reveal-icon",              icon: Minus
-            }
-          ]}
-          animationType="blur-reveal"
-          carouselMode="buttons"
-          ariaLabel="Technique section – artistic method"
-          className="py-16 md:py-24"
-          textBoxTitleClassName="text-4xl md:text-5xl font-extrabold leading-tight"
-          textBoxClassName="max-w-3xl mx-auto space-y-4"
-          textBoxDescriptionClassName="text-base md:text-lg leading-relaxed opacity-85"
-          cardTitleClassName="text-xl md:text-2xl font-bold"
-          cardDescriptionClassName="text-sm md:text-base leading-relaxed opacity-80"
+          containerClassName="max-w-7xl mx-auto px-6 py-24"
+          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
+          textBoxDescriptionClassName="text-lg text-gray-600 mb-16 max-w-3xl"
+          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          cardClassName="group cursor-pointer"
+          imageClassName="w-full h-80 object-cover rounded-md mb-4 group-hover:opacity-90 transition-opacity duration-300"
+          cardNameClassName="text-xl font-semibold mb-2"
+          cardBrandClassName="text-sm text-gray-500 uppercase tracking-widest mb-2"
+          cardPriceClassName="text-lg font-semibold text-[var(--primary-cta)]"
         />
       </div>
 
-      <div id="processo" data-section="processo">
+      <div id="technique" data-section="technique">
+        <FeatureCardTwentyOne
+          title="Materia e stratificazione"
+          description="Dipingo con acrilico su tela, lavorando per sottrazione e stratificazione. Stendo velature leggere, apro e chiudo superfici, lascio emergere segni essenziali.\n\nL'acrilico, con la sua asciugatura rapida e la sua luminosità naturale, mi permette di costruire orizzonti sospesi, dove ogni strato dialoga con quello precedente. Ogni gesto è memoria, ogni trasparenza è spazio."
+          accordionItems={[
+            { id: "technique-1", title: "Materiali utilizzati", content: "Acrilico su tela. La scelta dell'acrilico è deliberata: permette velocità, correzione e una luminosità che i colori mantengono nel tempo." },
+            { id: "technique-2", title: "Processo di creazione", content: "Stratificazione progressiva: velature leggere che si sovrappongono, aperture che lasciano emergere i sottostanti, linee essenziali che suggeriscono forme." },
+            { id: "technique-3", title: "Filosofia della sottrazione", content: "Non aggiungo infinitamente. Cerco il punto di equilibrio dove ogni elemento è necessario, niente è superfluo. La sottrazione è altrettanto importante dell'aggiunta." }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tpm4fs"
+          imageAlt="Dettagli della tecnica di stratificazione nei quadri di Flavia Esposito"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+          mediaPosition="left"
+          containerClassName="max-w-7xl mx-auto px-6 py-24"
+          titleClassName="text-4xl md:text-5xl font-bold mb-6"
+          descriptionClassName="text-base md:text-lg leading-relaxed text-gray-700 mb-10"
+          accordionContainerClassName="space-y-4"
+          accordionClassName="border-b border-gray-300 pb-4"
+          accordionTitleClassName="text-lg font-semibold cursor-pointer hover:text-[var(--primary-cta)] transition-colors"
+          accordionContentClassName="text-gray-600 mt-3 leading-relaxed"
+        />
+      </div>
+
+      <div id="process" data-section="process">
         <BlogCardTwo
           title="Processo creativo"
-          description="Scopri il dietro le quinte del mio lavoro nello studio. Momenti di creazione, dettagli di texture, e la ricerca costante di armonia attraverso il colore."
-          tag="Studio"
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="blur-reveal"
+          description="Un viaggio dentro l'atelier, tra dettagli, texture e momenti di ricerca. Scopri come nasce ogni opera."
           blogs={[
             {
-              id: "process-1",              category: "Studio",              title: "Dettagli di texture e colore",              excerpt: "Ogni strato rivela la ricerca di equilibrio. I dettagli macro mostrano come il colore vibra e dialoga sulla superficie.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=25ufzx",              imageAlt: "Dettagli della texture pittorica",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r",              date: "2025"
+              id: "process-01",              category: "Studio",              title: "Dettagli della tela",              excerpt: "Lo studio della superficie come punto di partenza. Ogni texture racconta una storia di sperimentazione e ricerca.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ri27tm",              imageAlt: "Dettagli texture della tela in lavorazione",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ri8f5t",              date: "Processo in corso"
             },
             {
-              id: "process-2",              category: "Lavoro",              title: "Lo spazio dello studio",              excerpt: "Uno studio ordinato e luminoso dove il colore prende forma. Qui nascono gli orizzonti lenti attraverso sperimentazione e ascolto.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=13pabz&_wi=2",              imageAlt: "Studio di lavoro e creazione artistica",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r",              date: "2025"
+              id: "process-02",              category: "Studio",              title: "Stratificazione del colore",              excerpt: "La sovrapposizione consapevole di tonalità crea profondità. Ogni strato è una decisione, ogni trasparenza uno spazio.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=do5tw7",              imageAlt: "Stratificazione dei colori nel processo creativo",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ri8f5t",              date: "Ricerca continua"
             },
             {
-              id: "process-3",              category: "Ricerca",              title: "La palette dei colori",              excerpt: "Blues profondi, sabbie leggere, accenti di verde salvia. La palette è curata e pensata per trasmettere calma e contemplazione.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xr9js5",              imageAlt: "Palette artistica con colori dell'artista",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r",              date: "2025"
+              id: "process-03",              category: "Studio",              title: "Linee essenziali",              excerpt: "La sottrazione come tecnica principale. Scopri come le linee minime suggeriscono forme senza definirle integralmente.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tpjito",              imageAlt: "Linee essenziali sulla tela",              authorName: "Flavia Esposito",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ri8f5t",              date: "Filosofia artistica"
             }
           ]}
-          carouselMode="buttons"
-          ariaLabel="Creative process section – studio moments"
-          className="py-20 md:py-28"
-          containerClassName="max-w-6xl mx-auto px-6"
-          textBoxTitleClassName="text-4xl md:text-5xl font-extrabold leading-tight mb-4"
-          textBoxDescriptionClassName="text-base md:text-lg leading-relaxed opacity-85 mb-12"
-          cardClassName="rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
-          imageWrapperClassName="relative h-64 md:h-80 overflow-hidden"
-          imageClassName="w-full h-full object-cover"
-          cardTitleClassName="text-lg md:text-xl font-semibold mt-4"
-          excerptClassName="text-sm md:text-base leading-relaxed opacity-75 mt-2"
-          categoryClassName="text-xs font-semibold uppercase tracking-wider opacity-60 mb-3"
+          animationType="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          containerClassName="max-w-7xl mx-auto px-6 py-24"
+          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
+          textBoxDescriptionClassName="text-lg text-gray-600 mb-16 max-w-3xl"
+          gridClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
+          cardClassName="bg-white rounded-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
+          imageWrapperClassName="w-full h-64 overflow-hidden"
+          imageClassName="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          cardTitleClassName="text-xl font-semibold mt-4 px-4"
+          excerptClassName="text-gray-600 mt-2 px-4 text-sm leading-relaxed"
+          authorDateClassName="text-xs text-gray-500 mt-4 px-4 pb-4"
         />
       </div>
 
-      <div id="contatti" data-section="contatti">
-        <ContactFaq
-          ctaTitle="Richiedi informazioni"
-          ctaDescription="Se desideri informazioni su un'opera o vuoi sapere di più sul mio lavoro, contattami. Sono a disposizione per discussioni su commissioni, esposizioni e collaborazioni."
-          ctaButton={{
-            text: "Invia messaggio",            href: "mailto:info@flaviaplaceeart.it"
-          }}
-          ctaIcon={Mail}
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Richiedi informazioni\n\nSe desideri informazioni su un'opera, desideri commissioni, o vuoi semplicemente sapere di più sul mio lavoro, sono felice di ascoltare. Scrivimi qui sotto."
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          animationType="blur-reveal"
-          accordionAnimationType="smooth"
-          faqs={[
-            {
-              id: "faq-1",              title: "Come posso acquistare un'opera?",              content: "Puoi contattarmi direttamente per ricevere informazioni dettagliate su disponibilità, prezzi e condizioni di consegna. Ogni opera è unica e realizzata su tela."
-            },
-            {
-              id: "faq-2",              title: "Lavorate su commissione?",              content: "Sì, lavoro su commissione per progetti specifici. Discutiamo insieme le tue esigenze, lo spazio, i colori e le dimensioni per creare un'opera che sia perfetta per te."
-            },
-            {
-              id: "faq-3",              title: "Qual è il tempo di consegna?",              content: "Le opere in stock sono disponibili immediatamente. Per commissioni, il tempo dipende dalla complessità e dalle dimensioni, generalmente 4-8 settimane."
-            },
-            {
-              id: "faq-4",              title: "Come conservare le opere?",              content: "Le opere in acrilico su tela richiedono poca manutenzione. Tienile lontane da umidità eccessiva e luce diretta prolungata. Possono essere pulite delicatamente con un panno morbido."
-            },
-            {
-              id: "faq-5",              title: "Partecipate a esposizioni?",              content: "Sì, partecipo regolarmente a esposizioni e eventi. Contattami per ricevere informazioni sulle prossime mostre e rassegne dove sarà possibile vedere le mie opere."
-            }
-          ]}
-          ariaLabel="Contact and FAQ section"
-          className="py-20 md:py-28"
-          containerClassName="max-w-4xl mx-auto px-6"
-          ctaPanelClassName="bg-white rounded-lg p-8 md:p-12 shadow-sm mb-12"
-          ctaTitleClassName="text-3xl md:text-4xl font-extrabold mb-4"
-          ctaDescriptionClassName="text-base md:text-lg leading-relaxed opacity-85 mb-8"
-          ctaButtonClassName="px-8 py-3 rounded-lg font-semibold transition-all duration-300"
-          faqsPanelClassName="space-y-2"
-          accordionTitleClassName="text-lg font-semibold"
-          accordionContentClassName="text-base leading-relaxed opacity-80"
+          buttons={[{ text: "Compila il modulo", href: "#contact-form" }]}
+          containerClassName="max-w-4xl mx-auto px-6 py-24"
+          contentClassName="text-center"
+          textClassName="text-4xl md:text-5xl font-bold mb-8 leading-tight"
+          buttonContainerClassName="flex justify-center gap-4 mt-12"
+          buttonClassName="px-8 py-3 bg-gradient-to-r from-[var(--primary-cta)] to-pink-600 text-white rounded-md hover:shadow-xl transition-all duration-300"
+          buttonTextClassName="font-semibold"
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterMedia
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6av3r"
-          imageAlt="Flavia Place Art gallery"
-          logoText="Flavia Place Art"
-          copyrightText="© 2025 Flavia Place Art. Tutti i diritti riservati."
+        <FooterBaseReveal
           columns={[
             {
               title: "Navigazione",              items: [
                 { label: "Opere", href: "#opere" },
-                { label: "Chi sono", href: "#chi-sono" },
-                { label: "Tecnica", href: "#tecnica" },
-                { label: "Processo creativo", href: "#processo" }
+                { label: "Chi sono", href: "#about" },
+                { label: "Tecnica", href: "#technique" },
+                { label: "Contatti", href: "#contact" }
+              ]
+            },
+            {
+              title: "Informazioni",              items: [
+                { label: "Biografia", href: "#about" },
+                { label: "Collezione", href: "#collection-intro" },
+                { label: "Processo creativo", href: "#process" }
               ]
             },
             {
               title: "Contatti",              items: [
-                { label: "Email", href: "mailto:info@flaviaplaceeart.it" },
-                { label: "Instagram", href: "https://instagram.com" },
-                { label: "Richiedi informazioni", href: "#contatti" }
-              ]
-            },
-            {
-              title: "Legale",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Termini di servizio", href: "#" }
+                { label: "Email", href: "mailto:info@flaviaplaceart.com" },
+                { label: "Studio", href: "#" }
               ]
             }
           ]}
-          ariaLabel="Site footer"
-          className="border-t border-opacity-10"
-          containerClassName="max-w-7xl mx-auto px-6 py-12 md:py-16"
-          mediaWrapperClassName="mb-8 md:mb-12 flex justify-center"
-          mediaClassName="w-20 h-20 rounded-lg"
-          logoTextClassName="text-lg font-bold mb-4"
-          columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 mb-12"
-          columnTitleClassName="font-semibold text-base mb-4"
-          columnItemClassName="text-sm opacity-75 hover:opacity-100 transition-opacity mb-2"
-          copyrightContainerClassName="border-t border-opacity-10 pt-8 text-center"
-          copyrightTextClassName="text-sm opacity-60"
+          copyrightText="© 2024 Flavia Esposito - Flavia Place Art. Tutti i diritti riservati."
+          containerClassName="max-w-7xl mx-auto px-6 py-16"
+          columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12"
+          columnTitleClassName="font-bold text-lg mb-4"
+          columnItemClassName="text-gray-600 hover:text-[var(--primary-cta)] transition-colors text-sm"
+          copyrightTextClassName="text-gray-500 text-center text-sm"
         />
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1