|
|
|
|
@@ -16,29 +16,24 @@ export default function LandingPage() {
|
|
|
|
|
defaultButtonVariant="text-stagger"
|
|
|
|
|
defaultTextAnimation="entrance-slide"
|
|
|
|
|
borderRadius="soft"
|
|
|
|
|
contentWidth="small"
|
|
|
|
|
contentWidth="mediumLarge"
|
|
|
|
|
sizing="largeSizeMediumTitles"
|
|
|
|
|
background="fluid"
|
|
|
|
|
background="none"
|
|
|
|
|
cardStyle="solid"
|
|
|
|
|
primaryButtonStyle="diagonal-gradient"
|
|
|
|
|
secondaryButtonStyle="radial-glow"
|
|
|
|
|
headingFontWeight="bold"
|
|
|
|
|
primaryButtonStyle="flat"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="semibold"
|
|
|
|
|
>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarLayoutFloatingInline
|
|
|
|
|
brandName="Flavia Place Art"
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Opere", id: "opere" },
|
|
|
|
|
{ name: "Opere", id: "gallery" },
|
|
|
|
|
{ name: "Chi sono", id: "about" },
|
|
|
|
|
{ name: "Tecnica", id: "technique" },
|
|
|
|
|
{ name: "Processo", id: "process" },
|
|
|
|
|
{ name: "Contatti", id: "contact" }
|
|
|
|
|
]}
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
@@ -47,19 +42,19 @@ export default function LandingPage() {
|
|
|
|
|
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" }]}
|
|
|
|
|
buttons={[{ text: "Scopri le opere", href: "#gallery" }]}
|
|
|
|
|
mediaItems={[
|
|
|
|
|
{
|
|
|
|
|
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"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
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"
|
|
|
|
|
containerClassName="max-w-7xl mx-auto px-6 py-32"
|
|
|
|
|
titleClassName="text-5xl md:text-7xl font-light leading-tight tracking-tight mb-6"
|
|
|
|
|
descriptionClassName="text-lg md:text-xl leading-relaxed text-gray-600 max-w-2xl mb-8 font-light"
|
|
|
|
|
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"
|
|
|
|
|
buttonClassName="px-8 py-3 bg-[var(--foreground)] text-[var(--background)] rounded-sm hover:opacity-80 transition-opacity duration-300"
|
|
|
|
|
buttonTextClassName="font-light text-sm"
|
|
|
|
|
mediaWrapperClassName="md:w-1/2 mt-12 md:mt-0"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -79,12 +74,12 @@ export default function LandingPage() {
|
|
|
|
|
metricsAnimation="slide-up"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
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"
|
|
|
|
|
titleClassName="text-4xl md:text-5xl font-light mb-8"
|
|
|
|
|
descriptionClassName="text-base md:text-lg leading-relaxed text-gray-600 mb-12 max-w-3xl font-light"
|
|
|
|
|
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"
|
|
|
|
|
metricValueClassName="text-3xl font-light text-[var(--foreground)] mb-2"
|
|
|
|
|
metricTitleClassName="text-xs uppercase tracking-widest text-gray-500 font-light"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -100,15 +95,15 @@ export default function LandingPage() {
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m8jwus&_wi=1"
|
|
|
|
|
imageAlt="Collezione Orizzonti Lenti - Dettaglio opera"
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
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"
|
|
|
|
|
titleClassName="text-4xl md:text-5xl font-light mb-6"
|
|
|
|
|
descriptionClassName="text-base md:text-lg leading-relaxed text-gray-600 mb-10 font-light"
|
|
|
|
|
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"
|
|
|
|
|
accordionClassName="border-b border-gray-200 pb-4"
|
|
|
|
|
accordionTitleClassName="text-lg font-light cursor-pointer hover:text-[var(--foreground)] transition-colors"
|
|
|
|
|
accordionContentClassName="text-gray-600 mt-3 leading-relaxed font-light"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -147,14 +142,14 @@ export default function LandingPage() {
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
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"
|
|
|
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-light mb-4"
|
|
|
|
|
textBoxDescriptionClassName="text-lg text-gray-600 mb-16 max-w-3xl font-light"
|
|
|
|
|
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)]"
|
|
|
|
|
imageClassName="w-full h-80 object-cover rounded-sm mb-4 group-hover:opacity-80 transition-opacity duration-300"
|
|
|
|
|
cardNameClassName="text-lg font-light mb-2"
|
|
|
|
|
cardBrandClassName="text-xs text-gray-500 uppercase tracking-widest mb-2 font-light"
|
|
|
|
|
cardPriceClassName="text-lg font-light text-[var(--foreground)]"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -173,12 +168,12 @@ export default function LandingPage() {
|
|
|
|
|
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"
|
|
|
|
|
titleClassName="text-4xl md:text-5xl font-light mb-6"
|
|
|
|
|
descriptionClassName="text-base md:text-lg leading-relaxed text-gray-600 mb-10 font-light"
|
|
|
|
|
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"
|
|
|
|
|
accordionClassName="border-b border-gray-200 pb-4"
|
|
|
|
|
accordionTitleClassName="text-lg font-light cursor-pointer hover:text-[var(--foreground)] transition-colors"
|
|
|
|
|
accordionContentClassName="text-gray-600 mt-3 leading-relaxed font-light"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -199,17 +194,17 @@ export default function LandingPage() {
|
|
|
|
|
]}
|
|
|
|
|
animationType="blur-reveal"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
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"
|
|
|
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-light mb-4"
|
|
|
|
|
textBoxDescriptionClassName="text-lg text-gray-600 mb-16 max-w-3xl font-light"
|
|
|
|
|
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"
|
|
|
|
|
cardClassName="bg-white rounded-sm overflow-hidden hover:shadow-md 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"
|
|
|
|
|
cardTitleClassName="text-lg font-light mt-4 px-4"
|
|
|
|
|
excerptClassName="text-gray-600 mt-2 px-4 text-sm leading-relaxed font-light"
|
|
|
|
|
authorDateClassName="text-xs text-gray-500 mt-4 px-4 pb-4 font-light"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -218,13 +213,13 @@ export default function LandingPage() {
|
|
|
|
|
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}
|
|
|
|
|
buttons={[{ text: "Compila il modulo", href: "#contact-form" }]}
|
|
|
|
|
buttons={[{ text: "Scrivi", href: "mailto:info@flaviaplaceart.com" }]}
|
|
|
|
|
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"
|
|
|
|
|
textClassName="text-4xl md:text-5xl font-light 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"
|
|
|
|
|
buttonClassName="px-8 py-3 bg-[var(--foreground)] text-[var(--background)] rounded-sm hover:opacity-80 transition-opacity duration-300"
|
|
|
|
|
buttonTextClassName="font-light text-sm"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -233,7 +228,7 @@ export default function LandingPage() {
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
|
title: "Navigazione", items: [
|
|
|
|
|
{ label: "Opere", href: "#opere" },
|
|
|
|
|
{ label: "Opere", href: "#gallery" },
|
|
|
|
|
{ label: "Chi sono", href: "#about" },
|
|
|
|
|
{ label: "Tecnica", href: "#technique" },
|
|
|
|
|
{ label: "Contatti", href: "#contact" }
|
|
|
|
|
@@ -256,9 +251,9 @@ export default function LandingPage() {
|
|
|
|
|
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"
|
|
|
|
|
columnTitleClassName="font-light text-lg mb-4"
|
|
|
|
|
columnItemClassName="text-gray-600 hover:text-[var(--foreground)] transition-colors text-sm font-light"
|
|
|
|
|
copyrightTextClassName="text-gray-500 text-center text-sm font-light"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
|