Merge version_2 into main #1
246
src/app/page.tsx
246
src/app/page.tsx
@@ -9,7 +9,7 @@ import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
|
||||
@@ -22,31 +22,19 @@ export default function LandingPage() {
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="E-Shop"
|
||||
/>
|
||||
@@ -56,149 +44,45 @@ export default function LandingPage() {
|
||||
<HeroOverlay
|
||||
title="Welcome to Your One-Shop Stop"
|
||||
description="Discover thousands of products at the best prices, delivered right to your door. Shop electronics, fashion, home essentials, and more."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cyber-monday-sale-shopping-cart-copy-space_23-2148670011.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stuido-portrait-happy-cheerful-young-businessman_273609-12506.jpg",
|
||||
alt: "Happy customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/funny-african-man-with-bushy-curly-hair-blinking-his-eye-having-warm-broad-smile_273609-14063.jpg",
|
||||
alt: "Happy customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-african-guy-smiling-student-confident-his-future-career-head-hunter-dream-standing-white-wall_176420-12537.jpg",
|
||||
alt: "Happy customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-african-guy-smiling-white-wall-confident-student-young-businessman_176420-12535.jpg",
|
||||
alt: "Happy customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/feeling-happy-successful-confident-facing-challenge-saying-bring-it-welcoming-you_1194-632572.jpg",
|
||||
alt: "Happy customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 1M+ happy shoppers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
<ProductCardFour
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Brand X",
|
||||
name: "Wireless Earbuds",
|
||||
price: "$49.00",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-apartment-with-luxury-vibe-featuring-spacious-living-room_482257-120668.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Brand Y",
|
||||
name: "Modern Watch",
|
||||
price: "$129.00",
|
||||
rating: 4,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-man-reading-magazine_23-2147793091.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Brand Z",
|
||||
name: "Smart Speaker",
|
||||
price: "$79.00",
|
||||
rating: 5,
|
||||
reviewCount: "210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075990.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Brand A",
|
||||
name: "Gaming Mouse",
|
||||
price: "$35.00",
|
||||
rating: 4,
|
||||
reviewCount: "95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-blue-computer-mouse-with-yellow-background_23-2148226814.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Brand B",
|
||||
name: "USB-C Hub",
|
||||
price: "$25.00",
|
||||
rating: 5,
|
||||
reviewCount: "50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/usb-cable-white-isolated-background_58702-4502.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Brand C",
|
||||
name: "Keyboard Set",
|
||||
price: "$89.00",
|
||||
rating: 4,
|
||||
reviewCount: "150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-with-mouse-clock_23-2148557276.jpg",
|
||||
},
|
||||
{ id: "1", name: "Wireless Earbuds", price: "$49", variant: "S", imageSrc: "http://img.b2bpic.net/free-photo/modern-apartment-with-luxury-vibe-featuring-spacious-living-room_482257-120668.jpg" },
|
||||
{ id: "2", name: "Modern Watch", price: "$129", variant: "M", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-reading-magazine_23-2147793091.jpg" },
|
||||
{ id: "3", name: "Smart Speaker", price: "$79", variant: "L", imageSrc: "http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075990.jpg" },
|
||||
{ id: "4", name: "Gaming Mouse", price: "$35", variant: "S", imageSrc: "http://img.b2bpic.net/free-photo/top-view-blue-computer-mouse-with-yellow-background_23-2148226814.jpg" }
|
||||
]}
|
||||
title="Top Selling Products"
|
||||
description="Browse our curated list of items you'll love."
|
||||
description="Browse our premium selection."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Built for Quality and ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-vector/book-recommendation-icon_632498-3964.jpg",
|
||||
alt: "Quality icon",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Convenience.",
|
||||
},
|
||||
]}
|
||||
heading={[{ type: "text", content: "Built for Quality and Convenience." }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1M+",
|
||||
description: "Happy Customers",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50k+",
|
||||
description: "Products Available",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
description: "Satisfaction Rate",
|
||||
},
|
||||
{ id: "m1", value: "1M+", description: "Happy Customers" },
|
||||
{ id: "m2", value: "50k+", description: "Products Available" },
|
||||
{ id: "m3", value: "99%", description: "Satisfaction Rate" }
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="We are proud of our milestones and growth."
|
||||
@@ -207,19 +91,10 @@ export default function LandingPage() {
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Microsoft",
|
||||
"Google",
|
||||
"Apple",
|
||||
"Samsung",
|
||||
"Sony",
|
||||
"Nike",
|
||||
"Adidas",
|
||||
]}
|
||||
names={["Microsoft", "Google", "Apple", "Samsung", "Sony", "Nike", "Adidas"]}
|
||||
title="Trusted Partners"
|
||||
description="We work with top brands to bring you the best."
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -228,96 +103,33 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Amazing Service",
|
||||
quote: "The best shopping experience I've had.",
|
||||
name: "Sarah J.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-young-black-man-with-curly-hair-has-cheerful-expression_273609-8605.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Quick Delivery",
|
||||
quote: "My order arrived earlier than expected.",
|
||||
name: "Mark D.",
|
||||
role: "Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crazy-man-funny-expression_1194-3143.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Great Quality",
|
||||
quote: "Every item I've bought has been perfect.",
|
||||
name: "Emily P.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Helpful Support",
|
||||
quote: "They helped me with my return seamlessly.",
|
||||
name: "David L.",
|
||||
role: "Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Highly Recommended",
|
||||
quote: "I'll be shopping here again for sure.",
|
||||
name: "Julia M.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",
|
||||
},
|
||||
{ id: "t1", title: "Amazing Service", quote: "The best shopping experience I've had.", name: "Sarah J.", role: "Client" },
|
||||
{ id: "t2", title: "Quick Delivery", quote: "My order arrived earlier than expected.", name: "Mark D.", role: "Buyer" }
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="What our users say about us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you offer returns?",
|
||||
content: "Yes, we offer free returns within 30 days.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How long is delivery?",
|
||||
content: "Delivery usually takes 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we ship to over 50 countries worldwide.",
|
||||
},
|
||||
{ id: "q1", title: "Do you offer returns?", content: "Yes, we offer free returns within 30 days." },
|
||||
{ id: "q2", title: "How long is delivery?", content: "Delivery usually takes 3-5 business days." }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about shopping with us."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/slate-small-shopping-cart_23-2147719633.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Need Help?"
|
||||
description="Our support team is available 24/7."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Support", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -330,4 +142,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user