Update src/app/page.tsx
This commit is contained in:
356
src/app/page.tsx
356
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Star, Eye } from "lucide-react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
@@ -31,22 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Story",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Gallery", id: "#products" },
|
||||
{ name: "Story", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Wall Perspective"
|
||||
/>
|
||||
@@ -54,333 +43,68 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Artistic Perspective"
|
||||
description="Redefining spaces with curated luxury art. Experience minimalism in its most elegant form."
|
||||
buttons={[{ text: "Explore Collection", href: "#products" }]}
|
||||
buttonClassName="bg-yellow-500 text-black border-2 border-yellow-600 font-bold hover:bg-yellow-400"
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-77936.jpg?_wi=1",
|
||||
imageAlt: "Art Piece 1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=1",
|
||||
imageAlt: "Art Piece 2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-floral-shirt-close-up_23-2148237610.jpg",
|
||||
imageAlt: "Art Piece 3",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg",
|
||||
imageAlt: "Art Piece 4",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-wearing-blue-dress-high-heels-sitting-fireplace_132075-12009.jpg",
|
||||
imageAlt: "Art Piece 5",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blank-frame-concept_23-2148804382.jpg",
|
||||
imageAlt: "Art Piece 6",
|
||||
},
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-77936.jpg?_wi=1", imageAlt: "Art Piece 1" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=1", imageAlt: "Art Piece 2" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/colorful-floral-shirt-close-up_23-2148237610.jpg", imageAlt: "Art Piece 3" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg", imageAlt: "Art Piece 4" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-wearing-blue-dress-high-heels-sitting-fireplace_132075-12009.jpg", imageAlt: "Art Piece 5" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blank-frame-concept_23-2148804382.jpg", imageAlt: "Art Piece 6" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
title="Featured Posters"
|
||||
description="A curated masonry gallery showcase of our finest luxury prints, ranging from abstract compositions to minimalist line art."
|
||||
products={[
|
||||
{ id: "m1", name: "Abstract Flux", price: "$450", variant: "Abstract", imageSrc: "http://img.b2bpic.net/free-photo/abstract-layered-wavy-terrain-shades-green-yellow_779267-3539.jpg" },
|
||||
{ id: "m2", name: "City Lines", price: "$380", variant: "Minimalist", imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151004978.jpg" },
|
||||
{ id: "m3", name: "Golden Hour", price: "$520", variant: "Photography", imageSrc: "http://img.b2bpic.net/free-photo/tropical-authentic-dining-room-interior-design-with-blank-picture-frame_53876-129845.jpg" },
|
||||
{ id: "m4", name: "Simple Void", price: "$310", variant: "Minimalist", imageSrc: "http://img.b2bpic.net/free-photo/empty-wooden-frame-standing-floor-have-sofa-decoration_41470-5116.jpg" }
|
||||
]}
|
||||
actionButtonClassName="hover:scale-105 transition-transform"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Curating Excellence"
|
||||
description="We believe that the walls of your home should reflect the depth of your character. Each piece is sourced for its timeless aesthetic and emotional resonance."
|
||||
metrics={[
|
||||
{
|
||||
value: "500+",
|
||||
title: "Artworks",
|
||||
},
|
||||
{
|
||||
value: "15",
|
||||
title: "Countries",
|
||||
},
|
||||
{
|
||||
value: "99%",
|
||||
title: "Satisfaction",
|
||||
},
|
||||
{ value: "500+", title: "Artworks" },
|
||||
{ value: "15", title: "Countries" },
|
||||
{ value: "99%", title: "Satisfaction" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-artist-sketching-skeleton-paper-with-pencil-workbench_23-2147889804.jpg"
|
||||
imageAlt="Artisan craftsmanship"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Midnight Stillness",
|
||||
price: "$340",
|
||||
variant: "Gallery Frame",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-desk-with-computer-flowers_23-2152003930.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Architectural Echo",
|
||||
price: "$280",
|
||||
variant: "Canvas Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151004978.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Distant Horizon",
|
||||
price: "$410",
|
||||
variant: "Metal Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tropical-authentic-dining-room-interior-design-with-blank-picture-frame_53876-129845.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Golden Geometry",
|
||||
price: "$310",
|
||||
variant: "Gallery Frame",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/home-plant-vase-decoration-composition_23-2149090621.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Nature's Shadow",
|
||||
price: "$295",
|
||||
variant: "Canvas Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-layered-wavy-terrain-shades-green-yellow_779267-3539.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Minimal Voice",
|
||||
price: "$220",
|
||||
variant: "Paper Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-wooden-frame-standing-floor-have-sofa-decoration_41470-5116.jpg",
|
||||
},
|
||||
]}
|
||||
title="Selected Gallery"
|
||||
description="Limited edition prints crafted with museum-grade precision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Museum Quality",
|
||||
description: "Archival paper and inks ensured to last a lifetime.",
|
||||
tag: "Quality",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16435.jpg",
|
||||
imageAlt: "professional headshot dark",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Sustainable",
|
||||
description: "Eco-friendly wood and recycled materials used in all frames.",
|
||||
tag: "Eco",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-77936.jpg?_wi=2",
|
||||
imageAlt: "professional headshot dark",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Global Shipping",
|
||||
description: "Secure, fast delivery to your door, anywhere in the world.",
|
||||
tag: "Logistics",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=2",
|
||||
imageAlt: "professional headshot dark",
|
||||
},
|
||||
]}
|
||||
title="Why Perspective"
|
||||
description="Dedicated to bringing professional art to your home environment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Our Impact"
|
||||
tag="Milestones"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "12K",
|
||||
description: "Happy Collectors",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "450",
|
||||
description: "Featured Artists",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "1.2M",
|
||||
description: "Art Enthusiasts",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Architect",
|
||||
company: "Studio Urban",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hyzzlt",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Liam Connor",
|
||||
role: "Designer",
|
||||
company: "Modern Life",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6ux7f3",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rossi",
|
||||
role: "Director",
|
||||
company: "Galleria Art",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jswwrk",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Marcus Chen",
|
||||
role: "Investor",
|
||||
company: "Sky Holdings",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7rqnpn",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Ava Sterling",
|
||||
role: "Photographer",
|
||||
company: "Vision Lab",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k78zm4",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
label: "Retention",
|
||||
},
|
||||
{
|
||||
value: "12K+",
|
||||
label: "Reviews",
|
||||
},
|
||||
]}
|
||||
title="Collector Feedback"
|
||||
description="Hear what our global community of collectors says."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you ship internationally?",
|
||||
content: "Yes, we ship to over 150 countries worldwide using secure art shipping partners.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How long is lead time?",
|
||||
content: "Prints are typically processed and shipped within 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer returns?",
|
||||
content: "Yes, we offer returns within 30 days of receiving your art piece in pristine condition.",
|
||||
},
|
||||
]}
|
||||
title="Questions?"
|
||||
description="We are here to assist with your art collection inquiries."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Join our collector's circle to receive exclusive art previews and curated monthly newsletters."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@wallperspective.com",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "mailto:hello@wallperspective.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Our Gallery",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "Our Gallery", href: "#products" }, { label: "About Us", href: "#about" }, { label: "Blog", href: "#" }] },
|
||||
{ items: [{ label: "Shipping", href: "#" }, { label: "Support", href: "#contact" }, { label: "Privacy", href: "#" }] },
|
||||
]}
|
||||
logoText="Wall Perspective"
|
||||
/>
|
||||
@@ -388,4 +112,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user