Merge version_1 into main #1
405
src/app/page.tsx
405
src/app/page.tsx
@@ -16,300 +16,137 @@ import { Award, Star, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "gallery",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="SpideyWeb"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="SpideyWeb"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Enter the Spider-Verse"
|
||||
description="Discover a collection of breathtaking imagery featuring your neighborhood wall-crawler in action."
|
||||
tag="New Collection"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-mystical-other-worldly-sky_23-2150946920.jpg",
|
||||
imageAlt: "Spiderman Night",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-spider-web_127675-2736.jpg",
|
||||
imageAlt: "Spiderman Action",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-scary-clown-make-up-neon-light_23-2150915413.jpg",
|
||||
imageAlt: "Hero Portrait",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-celebrating-hugging-day_23-2150976716.jpg",
|
||||
imageAlt: "Fan Celebration",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-selective-focus-shot-spider-web_181624-24561.jpg",
|
||||
imageAlt: "Web Macro",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Rated 5 stars by over 10,000 fans"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Enter the Spider-Verse"
|
||||
description="Discover a collection of breathtaking imagery featuring your neighborhood wall-crawler in action."
|
||||
tag="New Collection"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-mystical-other-worldly-sky_23-2150946920.jpg", imageAlt: "Spiderman Night" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-spider-web_127675-2736.jpg", imageAlt: "Spiderman Action" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Rated 5 stars by over 10,000 fans"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Universe Insights"
|
||||
metrics={[
|
||||
{
|
||||
icon: Star,
|
||||
label: "Images Captured",
|
||||
value: "500+",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Active Users",
|
||||
value: "1.2M",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Fan Favorites",
|
||||
value: "85k",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Universe Insights"
|
||||
metrics={[
|
||||
{ icon: Star, label: "Images Captured", value: "500+" },
|
||||
{ icon: Zap, label: "Active Users", value: "1.2M" },
|
||||
{ icon: Award, label: "Fan Favorites", value: "85k" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Suit Evolution",
|
||||
description: "From classic red/blue to high-tech metallic gear.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-79115.jpg",
|
||||
imageAlt: "Mask",
|
||||
},
|
||||
{
|
||||
title: "Iconic Poses",
|
||||
description: "Capturing the grace and strength of Spiderman.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/terrible-fantasy-scenes-digital-illustrations_456031-57.jpg",
|
||||
imageAlt: "Action",
|
||||
},
|
||||
{
|
||||
title: "Web Technology",
|
||||
description: "Innovative designs integrated into every wall-crawl.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-spider-web-halloween-texture-design_23-2151853386.jpg",
|
||||
imageAlt: "Tech",
|
||||
},
|
||||
]}
|
||||
title="Why Spidey Matters"
|
||||
description="Exploring the legend, the suits, and the stories."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Suit Evolution", description: "From classic red/blue to high-tech metallic gear.", imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-79115.jpg", imageAlt: "Mask" },
|
||||
{ title: "Iconic Poses", description: "Capturing the grace and strength of Spiderman.", imageSrc: "http://img.b2bpic.net/free-photo/terrible-fantasy-scenes-digital-illustrations_456031-57.jpg", imageAlt: "Action" },
|
||||
{ title: "Web Technology", description: "Innovative designs integrated into every wall-crawl.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-spider-web-halloween-texture-design_23-2151853386.jpg", imageAlt: "Tech" }
|
||||
]}
|
||||
title="Why Spidey Matters"
|
||||
description="Exploring the legend, the suits, and the stories."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Collector Figurine",
|
||||
price: "$49",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fantasy-male-creature-from-sea_23-2151609066.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Hero Case",
|
||||
price: "$29",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-dimensional-spider-with-poly-effect_23-2150963788.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Comic Set",
|
||||
price: "$199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-cool-superhero-suit_23-2150944772.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Action Pack",
|
||||
price: "$79",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flock-halloween-bats-paper-stripe-spider-opposite-side_23-2147908281.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Web Sneakers",
|
||||
price: "$129",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-girl-s-legs-red-keds-going-upstairs_176420-42223.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Urban Hoodie",
|
||||
price: "$69",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/superhero-monkey-man-looking-down_1368-6707.jpg",
|
||||
},
|
||||
]}
|
||||
title="Spidey Collection"
|
||||
description="Exclusive gear and memorabilia for every fan."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Collector Figurine", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fantasy-male-creature-from-sea_23-2151609066.jpg" },
|
||||
{ id: "p2", name: "Hero Case", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/three-dimensional-spider-with-poly-effect_23-2150963788.jpg" },
|
||||
{ id: "p3", name: "Comic Set", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-cool-superhero-suit_23-2150944772.jpg" }
|
||||
]}
|
||||
title="Spidey Collection"
|
||||
description="Exclusive gear and memorabilia for every fan."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
date: "2023",
|
||||
title: "Top Fan",
|
||||
quote: "The imagery is absolutely cinematic!",
|
||||
tag: "Fan",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/angry-young-superhero-guy-showing-thumbs-up-isolated-green_141793-94867.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crazy-hero-funny-expression_1194-4097.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mike L.",
|
||||
date: "2024",
|
||||
title: "Collector",
|
||||
quote: "Incredible details in every shot.",
|
||||
tag: "Pro",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-blonde-superwoman-red-cape-looking-front-isolated-white-wall_141793-74227.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/standing-female-serene-thoughtful-enjoyment_1134-1404.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily P.",
|
||||
date: "2024",
|
||||
title: "Gamer",
|
||||
quote: "Love the web designs featured here.",
|
||||
tag: "Gamer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/surprised-young-sporty-man-with-wrist-bandage-wearing-headphones-with-phone-arm-band-points-isolated-pink-wall_141793-78524.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-man-sitting-sofa-playing-video-game_23-2148152828.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
date: "2023",
|
||||
title: "Decorator",
|
||||
quote: "Best collection I've found online.",
|
||||
tag: "User",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/composition-waiting-baby-concept-space-text_185193-110111.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stressed-gesture-people-power-cape_1368-2040.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Linda M.",
|
||||
date: "2024",
|
||||
title: "Artist",
|
||||
quote: "Highly inspirational for my art.",
|
||||
tag: "Artist",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/monochrome-coloring-page-with-pirates-line-art-style_23-2151556608.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732551.jpg",
|
||||
},
|
||||
]}
|
||||
title="Fan Stories"
|
||||
description="Hear what others say about the Spider-Verse."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", date: "2023", title: "Top Fan", quote: "The imagery is absolutely cinematic!", tag: "Fan", avatarSrc: "http://img.b2bpic.net/free-photo/angry-young-superhero-guy-showing-thumbs-up-isolated-green_141793-94867.jpg" },
|
||||
{ id: "2", name: "Mike L.", date: "2024", title: "Collector", quote: "Incredible details in every shot.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-blonde-superwoman-red-cape-looking-front-isolated-white-wall_141793-74227.jpg" }
|
||||
]}
|
||||
title="Fan Stories"
|
||||
description="Hear what others say about the Spider-Verse."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is the gallery updated?",
|
||||
content: "Yes, new shots are added weekly.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Are products licensed?",
|
||||
content: "All items are 100% official merchandise.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I download images?",
|
||||
content: "Personal use downloads are available for free.",
|
||||
},
|
||||
]}
|
||||
title="Got Questions?"
|
||||
description="Common questions about our gallery and collection."
|
||||
faqsAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is the gallery updated?", content: "Yes, new shots are added weekly." },
|
||||
{ id: "q2", title: "Are products licensed?", content: "All items are 100% official merchandise." }
|
||||
]}
|
||||
title="Got Questions?"
|
||||
description="Common questions about our gallery and collection."
|
||||
faqsAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Contact"
|
||||
title="Join the Spider-Team"
|
||||
description="Get latest news and exclusive drop alerts."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Contact"
|
||||
title="Join the Spider-Team"
|
||||
description="Get latest news and exclusive drop alerts."
|
||||
buttons={[{ text: "Contact Support", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="SpideyWeb"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="SpideyWeb"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user