Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5b507aea69 | |||
| 94f1f3809d | |||
| 475a766ef9 |
337
src/app/page.tsx
337
src/app/page.tsx
@@ -2,13 +2,12 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -25,258 +24,90 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "shop",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="E-Shop"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Products", id: "shop" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Footer", id: "footer" },
|
||||
]}
|
||||
brandName="E-Shop"
|
||||
button={{ text: "Cart", onClick: () => console.log("Cart clicked") }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
logoText="Discover Quality"
|
||||
description="Elevate your daily lifestyle with our premium curated collection of essential goods."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#shop",
|
||||
},
|
||||
{
|
||||
text: "View Reviews",
|
||||
href: "#testimonials",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smartphone-surface-with-face-mask-surgical-gloves_23-2148561108.jpg"
|
||||
imageAlt="Hero product display"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Premium Quality Essentials"
|
||||
description="Discover our curated collection designed for your modern lifestyle."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg?_wi=1", imageAlt: "Product 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915902.jpg?_wi=1", imageAlt: "Product 2" }
|
||||
]}
|
||||
buttons={[{ text: "Explore Now", href: "#shop" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Premium Gadget",
|
||||
price: "$89.00",
|
||||
variant: "Silver",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Modern Accessory",
|
||||
price: "$45.00",
|
||||
variant: "Matte Black",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/supermarket-trolleys-black-friday-gifts_23-2148663148.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Desk Essential",
|
||||
price: "$120.00",
|
||||
variant: "Wood Finish",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915902.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Minimalist Pack",
|
||||
price: "$65.00",
|
||||
variant: "Grey",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stacked-aesthetic-objects-still-life_23-2150230664.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Daily Utility",
|
||||
price: "$30.00",
|
||||
variant: "Blue",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/clothing-store-worker-helping-woman-choose-from-stylish-selection-clothes_482257-109184.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Elite Tech",
|
||||
price: "$199.00",
|
||||
variant: "Gold",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-friday-assortment-with-shopping-carts_23-2148666976.jpg",
|
||||
},
|
||||
]}
|
||||
title="Curated Essentials"
|
||||
description="Browse our latest premium arrivals designed for the modern user."
|
||||
/>
|
||||
</div>
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardOne
|
||||
title="Latest Arrivals"
|
||||
description="Upgrade your daily essentials with our top-tier picks."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Gadget Pro", price: "$99.00", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg?_wi=1" },
|
||||
{ id: "p2", name: "Elite Desk Mat", price: "$49.00", imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915902.jpg?_wi=1" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Google",
|
||||
"Microsoft",
|
||||
"Amazon",
|
||||
"Nike",
|
||||
"Apple",
|
||||
"Tesla",
|
||||
"Adobe",
|
||||
]}
|
||||
title="Trusted by Leaders"
|
||||
description="Our products are recognized and used by professionals worldwide."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
title="Trusted Worldwide"
|
||||
description="Industry leading partnerships."
|
||||
textboxLayout="default"
|
||||
names={["Acme Corp", "Global Tech", "Innovate Inc", "Future Solutions"]}
|
||||
useInvertedBackground={true}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Designer",
|
||||
testimonial: "The quality is unmatched. I love my new gear!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13339.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Chen",
|
||||
role: "Engineer",
|
||||
testimonial: "Excellent service and premium build quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-short-hair_273609-15371.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Marketing",
|
||||
testimonial: "Exactly what I needed for my daily workflow.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-portrait-handsome-stylish-young-man-sits-cafe-holds-mobile-phone-puts-wireless_1258-245413.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "James Bond",
|
||||
role: "Agent",
|
||||
testimonial: "Sophisticated and reliable products.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Linda Wu",
|
||||
role: "Product Manager",
|
||||
testimonial: "A seamless shopping experience from start to finish.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-freelancer-using-computer-plan-financial-analysis-with-business-charts-statistics-working-online-network-economy-growth-office-employee-planning-growth-strategy-close-up_482257-40931.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear what our amazing community says about our products."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Customer Favorites"
|
||||
description="See why thousands trust our quality standards."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex River",
|
||||
date: "Oct 2023",
|
||||
title: "Excellent!",
|
||||
quote: "Absolutely blown away by the build quality.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/lifestyle-portrait-handsome-stylish-young-man-sits-cafe-holds-mobile-phone-puts-wireless_1258-245413.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg?_wi=1"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Us"
|
||||
description="Excellence in every detail."
|
||||
features={[
|
||||
{
|
||||
title: "Fast Shipping",
|
||||
description: "Get your items in 2-3 business days.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Secure Payments",
|
||||
description: "We ensure your data is always safe.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/supermarket-trolleys-black-friday-gifts_23-2148663148.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Quality Assured",
|
||||
description: "Top tier materials for long-lasting use.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915902.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "24/7 Support",
|
||||
description: "Our team is here to help you anytime.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stacked-aesthetic-objects-still-life_23-2150230664.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Easy Returns",
|
||||
description: "No hassle returns within 30 days.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/clothing-store-worker-helping-woman-choose-from-stylish-selection-clothes_482257-109184.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="E-Shop"
|
||||
columns={[
|
||||
{
|
||||
title: "Store",
|
||||
items: [
|
||||
{
|
||||
label: "Shop",
|
||||
href: "#shop",
|
||||
},
|
||||
{
|
||||
label: "Categories",
|
||||
href: "#shop",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="E-Shop"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Products", href: "#shop" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2025 E-Shop"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user