Merge version_1 into main #4
416
src/app/page.tsx
416
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"
|
||||
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", 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user