Update src/app/page.tsx
This commit is contained in:
249
src/app/page.tsx
249
src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "Stats",
|
||||
id: "metrics",
|
||||
},
|
||||
name: "Stats", id: "metrics"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="ShopLive"
|
||||
/>
|
||||
@@ -55,59 +47,23 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Shop Live, Rate Real-Time."
|
||||
description="The ultimate interactive shopping experience. Go live, showcase products, and get instant feedback from your community."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-attractive-woman-elegant-hotel-cafeteria_657883-403.jpg",
|
||||
alt: "user",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg",
|
||||
alt: "user",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-man-night-city-lights_23-2149024717.jpg",
|
||||
alt: "user",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg",
|
||||
alt: "user",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
|
||||
alt: "user",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-attractive-woman-elegant-hotel-cafeteria_657883-403.jpg", alt: "user" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg", alt: "user" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-man-night-city-lights_23-2149024717.jpg", alt: "user" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg", alt: "user" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg", alt: "user" }
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Bidding",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Verified Ratings",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Instant Analytics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Creator Tools",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Seamless Checkout",
|
||||
},
|
||||
{ type: "text", text: "Real-time Bidding" },
|
||||
{ type: "text", text: "Verified Ratings" },
|
||||
{ type: "text", text: "Instant Analytics" },
|
||||
{ type: "text", text: "Creator Tools" },
|
||||
{ type: "text", text: "Seamless Checkout" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -119,29 +75,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Live Streaming",
|
||||
description: "Stream directly to your storefront with low-latency tech integration.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Radio,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chat-message-box-front-side_187299-39406.jpg",
|
||||
imageAlt: "digital streaming icons tech",
|
||||
title: "Live Streaming", description: "Stream directly to your storefront with low-latency tech integration.", bentoComponent: "reveal-icon", icon: Radio
|
||||
},
|
||||
{
|
||||
title: "Real-time Ratings",
|
||||
description: "Watch the average rating climb as you demo your products live.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Star,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adha-shopping-trolley-phones-perspective-side-white-background_187299-39332.jpg?_wi=1",
|
||||
imageAlt: "digital streaming icons tech",
|
||||
title: "Real-time Ratings", description: "Watch the average rating climb as you demo your products live.", bentoComponent: "reveal-icon", icon: Star
|
||||
},
|
||||
{
|
||||
title: "In-Stream Buying",
|
||||
description: "Seamless purchase checkout while the stream is still going.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: ShoppingBag,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/groom-s-classy-shoes-lie-soft-armchair_8353-8463.jpg?_wi=1",
|
||||
imageAlt: "digital streaming icons tech",
|
||||
},
|
||||
title: "In-Stream Buying", description: "Seamless purchase checkout while the stream is still going.", bentoComponent: "reveal-icon", icon: ShoppingBag
|
||||
}
|
||||
]}
|
||||
title="Built for Creators"
|
||||
description="Engage your audience like never before with our seamless integration features."
|
||||
@@ -150,46 +91,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Retro Sneakers",
|
||||
price: "$120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/groom-s-classy-shoes-lie-soft-armchair_8353-8463.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Travel Handbag",
|
||||
price: "$299",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916679.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Sport Gear",
|
||||
price: "$85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-direction-speed-panel-car_114579-4067.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Premium Watch",
|
||||
price: "$450",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/artist-props-photography_23-2148885626.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Sunglasses",
|
||||
price: "$110",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-grey-brown-rucksack_181624-19122.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Classic Hat",
|
||||
price: "$45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hard-drive-with-red-light-still-life_23-2149417035.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Retro Sneakers", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/groom-s-classy-shoes-lie-soft-armchair_8353-8463.jpg" },
|
||||
{ id: "p2", name: "Travel Handbag", price: "$299", imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916679.jpg" },
|
||||
{ id: "p3", name: "Sport Gear", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/interior-direction-speed-panel-car_114579-4067.jpg" }
|
||||
]}
|
||||
title="Featured Listings"
|
||||
description="Browse the latest trending items from our top sellers."
|
||||
@@ -202,24 +111,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Users,
|
||||
title: "Avg. Viewers",
|
||||
value: "12.5k",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: ShoppingCart,
|
||||
title: "Total Sales",
|
||||
value: "84k",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Star,
|
||||
title: "Avg. Rating",
|
||||
value: "4.9/5",
|
||||
},
|
||||
{ id: "m1", icon: Users, title: "Avg. Viewers", value: "12.5k" },
|
||||
{ id: "m2", icon: ShoppingCart, title: "Total Sales", value: "84k" },
|
||||
{ id: "m3", icon: Star, title: "Avg. Rating", value: "4.9/5" }
|
||||
]}
|
||||
title="Performance at Scale"
|
||||
description="Watch your store grow with real-time analytics for every stream."
|
||||
@@ -232,45 +126,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Amazing UI",
|
||||
quote: "The live streaming integration is incredibly fast and smooth.",
|
||||
name: "Alex Smith",
|
||||
role: "Fashion Seller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
id: "t1", title: "Amazing UI", quote: "The live streaming integration is incredibly fast and smooth.", name: "Alex Smith", role: "Fashion Seller", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg"
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Game Changer",
|
||||
quote: "I tripled my sales in the first month using the live rating widget.",
|
||||
name: "Jane Doe",
|
||||
role: "Sneaker Reseller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg",
|
||||
id: "t2", title: "Game Changer", quote: "I tripled my sales in the first month using the live rating widget.", name: "Jane Doe", role: "Sneaker Reseller", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg"
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Top Performance",
|
||||
quote: "Professional features that actually help increase my conversion rates.",
|
||||
name: "Mark Wilson",
|
||||
role: "Auto Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-tattooed-man-summer-terrace-city-cafe-is-drinking-wine-street-cafe_1321-20.jpg",
|
||||
id: "t3", title: "Top Performance", quote: "Professional features that actually help increase my conversion rates.", name: "Mark Wilson", role: "Auto Trader", imageSrc: "http://img.b2bpic.net/free-photo/handsome-tattooed-man-summer-terrace-city-cafe-is-drinking-wine-street-cafe_1321-20.jpg"
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Easy Checkout",
|
||||
quote: "Customers love how easy it is to buy while watching.",
|
||||
name: "Sarah Lee",
|
||||
role: "Handbag Dealer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-away-medium-shot_23-2148225705.jpg",
|
||||
id: "t4", title: "Easy Checkout", quote: "Customers love how easy it is to buy while watching.", name: "Sarah Lee", role: "Handbag Dealer", imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-away-medium-shot_23-2148225705.jpg"
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Great Support",
|
||||
quote: "Fast help and constant feature updates.",
|
||||
name: "John Doe",
|
||||
role: "Gear Shop Owner",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-customer-with-paper-bags_23-2147652065.jpg",
|
||||
},
|
||||
id: "t5", title: "Great Support", quote: "Fast help and constant feature updates.", name: "John Doe", role: "Gear Shop Owner", imageSrc: "http://img.b2bpic.net/free-photo/pretty-customer-with-paper-bags_23-2147652065.jpg"
|
||||
}
|
||||
]}
|
||||
title="Trusted by Sellers"
|
||||
description="Join thousands of creators building their live business here."
|
||||
@@ -282,21 +151,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I get started?",
|
||||
content: "Create your seller account, verify your profile, and start your first live demo.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Which streaming API do you use?",
|
||||
content: "We support integrations with 100ms, Daily.co, and Mux for high-fidelity streaming.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are past streams saved?",
|
||||
content: "Yes, every stream is archived to your storefront automatically for future viewing.",
|
||||
},
|
||||
{ id: "f1", title: "How do I get started?", content: "Create your seller account, verify your profile, and start your first live demo." },
|
||||
{ id: "f2", title: "Which streaming API do you use?", content: "We support integrations with 100ms, Daily.co, and Mux for high-fidelity streaming." },
|
||||
{ id: "f3", title: "Are past streams saved?", content: "Yes, every stream is archived to your storefront automatically for future viewing." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about starting your live stream."
|
||||
@@ -307,13 +164,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Join Waitlist"
|
||||
title="Start Your First Stream"
|
||||
description="Ready to turn your live broadcast into a business? Contact our team for onboarding."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/adha-shopping-trolley-phones-perspective-side-white-background_187299-39332.jpg?_wi=2"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/adha-shopping-trolley-phones-perspective-side-white-background_187299-39332.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -324,35 +179,15 @@ export default function LandingPage() {
|
||||
logoText="ShopLive"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
title: "Platform", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user