Update src/app/page.tsx

This commit is contained in:
2026-05-15 15:34:30 +00:00
parent 63e6f264f0
commit 1230ebe19e

View File

@@ -23,386 +23,178 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Categories",
id: "city-car",
},
]}
brandName="AutoGuide"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "hero" },
{ name: "Categories", id: "city-car" },
]}
brandName="AutoGuide"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "gradient-bars",
}}
title="Guida alle Automobili"
description="Scopri il mondo dei motori: una panoramica completa sui vari tipi di veicoli, dalle agili city car alle potenti supercar."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=1",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-using-laptop_1170-1319.jpg",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/repairman-garage-cleans-customers-car_482257-76111.jpg",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-empty-room_23-2150528571.jpg",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-empty-room_23-2150528570.jpg",
imageAlt: "minimalist modern car garage clean background",
},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-white-toy-sports-car-black-surface_181624-17606.jpg",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-white-car-dark-background_181624-20300.jpg",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138966.jpg",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-white-luxury-car_181624-23559.jpg",
imageAlt: "minimalist modern car garage clean background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/mockup-laptop-with-blurry-background-serviceman-changing-old-car-gear-oil-with-new-one-repair-shop-isolated-screen-device-hardworking-woman-garage-using-equipment-vehicle-checkup_482257-70542.jpg",
imageAlt: "minimalist modern car garage clean background",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/woman-with-laptop-sitting-hood-car_23-2148155090.jpg",
alt: "Woman with laptop sitting on hood of car",
},
{
src: "http://img.b2bpic.net/free-photo/business-men-use-laptops-alongside-outdoor-vehicles_1359-1423.jpg",
alt: "Business men use laptops alongside outdoor vehicles",
},
{
src: "http://img.b2bpic.net/free-photo/engineer-does-checkup-client-car_482257-76153.jpg",
alt: "Engineer does checkup on client car",
},
{
src: "http://img.b2bpic.net/free-photo/worker-fixes-damaged-car-motor-using-vr_482257-91110.jpg",
alt: "Worker fixes damaged car motor using VR",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-laptop_23-2150171220.jpg",
alt: "Medium shot people looking at laptop",
},
]}
avatarText="Esperti del settore approvano"
marqueeItems={[
{
type: "text",
text: "Sicurezza",
},
{
type: "text",
text: "Innovazione",
},
{
type: "text",
text: "Performance",
},
{
type: "text",
text: "Sostenibilità",
},
{
type: "text",
text: "Design",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{ variant: "gradient-bars" }}
title="Guida alle Automobili"
description="Scopri il mondo dei motori: una panoramica completa sui vari tipi di veicoli, dalle agili city car alle potenti supercar."
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-using-laptop_1170-1319.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/repairman-garage-cleans-customers-car_482257-76111.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-empty-room_23-2150528571.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-empty-room_23-2150528570.jpg", imageAlt: "minimalist modern car garage clean background" }
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-white-toy-sports-car-black-surface_181624-17606.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-white-car-dark-background_181624-20300.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138966.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-white-luxury-car_181624-23559.jpg", imageAlt: "minimalist modern car garage clean background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/mockup-laptop-with-blurry-background-serviceman-changing-old-car-gear-oil-with-new-one-repair-shop-isolated-screen-device-hardworking-woman-garage-using-equipment-vehicle-checkup_482257-70542.jpg", imageAlt: "minimalist modern car garage clean background" }
]}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/woman-with-laptop-sitting-hood-car_23-2148155090.jpg", alt: "Woman with laptop sitting on hood of car" },
{ src: "http://img.b2bpic.net/free-photo/business-men-use-laptops-alongside-outdoor-vehicles_1359-1423.jpg", alt: "Business men use laptops alongside outdoor vehicles" },
{ src: "http://img.b2bpic.net/free-photo/engineer-does-checkup-client-car_482257-76153.jpg", alt: "Engineer does checkup on client car" },
{ src: "http://img.b2bpic.net/free-photo/worker-fixes-damaged-car-motor-using-vr_482257-91110.jpg", alt: "Worker fixes damaged car motor using VR" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-laptop_23-2150171220.jpg", alt: "Medium shot people looking at laptop" }
]}
avatarText="Esperti del settore approvano"
marqueeItems={[
{ type: "text", text: "Sicurezza" },
{ type: "text", text: "Innovazione" },
{ type: "text", text: "Performance" },
{ type: "text", text: "Sostenibilità" },
{ type: "text", text: "Design" }
]}
/>
</div>
<div id="city-car" data-section="city-car">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Agilità Urbana",
description: "Perfette per il traffico cittadino e spazi ristretti.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/silver-hatchback-driving-along-railway-line_169016-72780.jpg",
imageAlt: "modern city car compact design minimal",
},
items: [
{
icon: CheckCircle,
text: "Facile parcheggio",
},
{
icon: CheckCircle,
text: "Consumi ridotti",
},
{
icon: CheckCircle,
text: "Ottima manovrabilità",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=2",
imageAlt: "modern city car compact design minimal",
},
]}
title="City Car"
description="Le auto ideali per la mobilità urbana. Piccole, agili e facili da parcheggiare."
/>
</div>
<div id="city-car" data-section="city-car">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="City Car"
description="Le auto ideali per la mobilità urbana. Piccole, agili e facili da parcheggiare."
features={[
{
title: "Agilità Urbana", description: "Perfette per il traffico cittadino e spazi ristretti.", media: { imageSrc: "http://img.b2bpic.net/free-photo/silver-hatchback-driving-along-railway-line_169016-72780.jpg", imageAlt: "modern city car compact design minimal" },
items: [{ icon: CheckCircle, text: "Facile parcheggio" }, { icon: CheckCircle, text: "Consumi ridotti" }, { icon: CheckCircle, text: "Ottima manovrabilità" }],
reverse: false
}
]}
/>
</div>
<div id="utilitarie" data-section="utilitarie">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Versatilità Quotidiana",
description: "Un equilibrio perfetto tra spazio, comfort e affidabilità.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/man-s-hand-is-cleaning-waxing-car_1150-6628.jpg",
imageAlt: "compact utility car hatchback clean",
},
items: [
{
icon: CheckCircle,
text: "Spazio bagagliaio ottimizzato",
},
{
icon: CheckCircle,
text: "Ideale per pendolarismo",
},
{
icon: CheckCircle,
text: "Affidabilità collaudata",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=3",
imageAlt: "compact utility car hatchback clean",
},
]}
title="Utilitarie"
description="Versatilità e praticità per l'uso quotidiano in famiglia."
/>
</div>
<div id="utilitarie" data-section="utilitarie">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Utilitarie"
description="Versatilità e praticità per l'uso quotidiano in famiglia."
features={[
{
title: "Versatilità Quotidiana", description: "Un equilibrio perfetto tra spazio, comfort e affidabilità.", media: { imageSrc: "http://img.b2bpic.net/free-photo/man-s-hand-is-cleaning-waxing-car_1150-6628.jpg", imageAlt: "compact utility car hatchback clean" },
items: [{ icon: CheckCircle, text: "Spazio bagagliaio ottimizzato" }, { icon: CheckCircle, text: "Ideale per pendolarismo" }, { icon: CheckCircle, text: "Affidabilità collaudata" }],
reverse: true
}
]}
/>
</div>
<div id="berline" data-section="berline">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Stile e Comfort",
description: "Adatte a chi cerca un'esperienza di guida superiore e ricercata.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/old-fashioned-car-parked-rustic-sidewalk-dusk-generative-ai_188544-7911.jpg",
imageAlt: "elegant sedan luxury berline black studio",
},
items: [
{
icon: CheckCircle,
text: "Design raffinato",
},
{
icon: CheckCircle,
text: "Massimo comfort interno",
},
{
icon: CheckCircle,
text: "Ideali per viaggi lunghi",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=4",
imageAlt: "elegant sedan luxury berline black studio",
},
]}
title="Berline"
description="Il comfort e lo stile rappresentano il cuore di queste automobili."
/>
</div>
<div id="berline" data-section="berline">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Berline"
description="Il comfort e lo stile rappresentano il cuore di queste automobili."
features={[
{
title: "Stile e Comfort", description: "Adatte a chi cerca un'esperienza di guida superiore e ricercata.", media: { imageSrc: "http://img.b2bpic.net/free-photo/old-fashioned-car-parked-rustic-sidewalk-dusk-generative-ai_188544-7911.jpg", imageAlt: "elegant sedan luxury berline black studio" },
items: [{ icon: CheckCircle, text: "Design raffinato" }, { icon: CheckCircle, text: "Massimo comfort interno" }, { icon: CheckCircle, text: "Ideali per viaggi lunghi" }],
reverse: false
}
]}
/>
</div>
<div id="suv-crossover" data-section="suv-crossover">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Dominio Stradale",
description: "Altezza da terra elevata per una visibilità ottimale.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/woman-charging-her-electric-car-with-charging-pistol_1303-31597.jpg",
imageAlt: "white suv crossover modern outdoor",
},
items: [
{
icon: CheckCircle,
text: "Grande spazio interno",
},
{
icon: CheckCircle,
text: "Versatilità d'uso",
},
{
icon: CheckCircle,
text: "Assetto rialzato",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=5",
imageAlt: "white suv crossover modern outdoor",
},
]}
title="SUV e Crossover"
description="Potenza, spazio e versatilità su ogni tipo di terreno."
/>
</div>
<div id="suv-crossover" data-section="suv-crossover">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="SUV e Crossover"
description="Potenza, spazio e versatilità su ogni tipo di terreno."
features={[
{
title: "Dominio Stradale", description: "Altezza da terra elevata per una visibilità ottimale.", media: { imageSrc: "http://img.b2bpic.net/free-photo/woman-charging-her-electric-car-with-charging-pistol_1303-31597.jpg", imageAlt: "white suv crossover modern outdoor" },
items: [{ icon: CheckCircle, text: "Grande spazio interno" }, { icon: CheckCircle, text: "Versatilità d'uso" }, { icon: CheckCircle, text: "Assetto rialzato" }],
reverse: true
}
]}
/>
</div>
<div id="supercar-hypercar" data-section="supercar-hypercar">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Performance Pura",
description: "Disegnate per la velocità estrema e l'eccellenza aerodinamica.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/yellow-sport-car-render-3d-illustration_654080-1126.jpg",
imageAlt: "exotic supercar hypercar racing minimal",
},
items: [
{
icon: CheckCircle,
text: "Potenza senza limiti",
},
{
icon: CheckCircle,
text: "Materiali avanzati",
},
{
icon: CheckCircle,
text: "Esperienza esclusiva",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=6",
imageAlt: "exotic supercar hypercar racing minimal",
},
]}
title="Supercar e Hypercar"
description="L'apice dell'ingegneria automobilistica e della performance."
/>
</div>
<div id="supercar-hypercar" data-section="supercar-hypercar">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Supercar e Hypercar"
description="L'apice dell'ingegneria automobilistica e della performance."
features={[
{
title: "Performance Pura", description: "Disegnate per la velocità estrema e l'eccellenza aerodinamica.", media: { imageSrc: "http://img.b2bpic.net/free-photo/yellow-sport-car-render-3d-illustration_654080-1126.jpg", imageAlt: "exotic supercar hypercar racing minimal" },
items: [{ icon: CheckCircle, text: "Potenza senza limiti" }, { icon: CheckCircle, text: "Materiali avanzati" }, { icon: CheckCircle, text: "Esperienza esclusiva" }],
reverse: false
}
]}
/>
</div>
<div id="elettriche" data-section="elettriche">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Mobilità Sostenibile",
description: "Tecnologia a zero emissioni con una coppia immediata.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-ev-car-electrical-motor-preparing-be-resupplied-with-electricity_482257-118124.jpg",
imageAlt: "electric vehicle ev technology clean",
},
items: [
{
icon: CheckCircle,
text: "Zero emissioni",
},
{
icon: CheckCircle,
text: "Guida silenziosa",
},
{
icon: CheckCircle,
text: "Efficienza tecnologica",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=7",
imageAlt: "electric vehicle ev technology clean",
},
]}
title="Elettriche"
description="Il futuro sostenibile della mobilità automobilistica."
/>
</div>
<div id="elettriche" data-section="elettriche">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Elettriche"
description="Il futuro sostenibile della mobilità automobilistica."
features={[
{
title: "Mobilità Sostenibile", description: "Tecnologia a zero emissioni con una coppia immediata.", media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-ev-car-electrical-motor-preparing-be-resupplied-with-electricity_482257-118124.jpg", imageAlt: "electric vehicle ev technology clean" },
items: [{ icon: CheckCircle, text: "Zero emissioni" }, { icon: CheckCircle, text: "Guida silenziosa" }, { icon: CheckCircle, text: "Efficienza tecnologica" }],
reverse: true
}
]}
/>
</div>
<div id="fuoristrada" data-section="fuoristrada">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Avventura Estrema",
description: "Trazione integrale e solidità meccanica per il fuoristrada.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/landscape-with-lot-rocky-mountains-covered-with-snow-cloudy-sky_181624-19613.jpg",
imageAlt: "rugged offroad fuoristrada mountain trail",
},
items: [
{
icon: CheckCircle,
text: "Trazione 4x4 robusta",
},
{
icon: CheckCircle,
text: "Ideale per terreni impervi",
},
{
icon: CheckCircle,
text: "Costruzione ultra resistente",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/empty-room-background-with-white-walls_23-2151020116.jpg?_wi=8",
imageAlt: "rugged offroad fuoristrada mountain trail",
},
]}
title="Fuoristrada"
description="Progettati per superare ogni ostacolo in ogni ambiente."
/>
</div>
<div id="fuoristrada" data-section="fuoristrada">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Fuoristrada"
description="Progettati per superare ogni ostacolo in ogni ambiente."
features={[
{
title: "Avventura Estrema", description: "Trazione integrale e solidità meccanica per il fuoristrada.", media: { imageSrc: "http://img.b2bpic.net/free-photo/landscape-with-lot-rocky-mountains-covered-with-snow-cloudy-sky_181624-19613.jpg", imageAlt: "rugged offroad fuoristrada mountain trail" },
items: [{ icon: CheckCircle, text: "Trazione 4x4 robusta" }, { icon: CheckCircle, text: "Ideale per terreni impervi" }, { icon: CheckCircle, text: "Costruzione ultra resistente" }],
reverse: false
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="AutoGuide"
copyrightText="© 2025 AutoGuide. Tutti i diritti riservati."
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="AutoGuide"
copyrightText="© 2025 AutoGuide. Tutti i diritti riservati."
/>
</div>
</ReactLenis>
</ThemeProvider>
);