Files
dc1cdb45-907d-499e-9f19-ec2…/src/app/page.tsx
2026-03-11 07:03:20 +00:00

414 lines
14 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import Link from "next/link";
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeMediumTitles"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="ProdFound"
navItems={[
{ name: "Browse", id: "browse" },
{ name: "Categories", id: "categories" },
{ name: "Trending", id: "trending" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Explore Products",
href: "/browse",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
title="Discover Products Worth Finding"
description="Explore innovative, trending, and useful products from around the world. Your next favorite discovery is just a click away."
tag="Welcome to ProdFound"
tagAnimation="slide-up"
background={{ variant: "plain" }}
imageSrc="http://img.b2bpic.net/free-photo/selfcare-products-still-life_23-2149249572.jpg?_wi=1"
imageAlt="Featured innovative products display"
buttons={[
{
text: "Explore Products",
href: "/browse",
},
{
text: "Learn More",
href: "#",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="featured-products" data-section="featured-products">
<ProductCardTwo
title="Featured Products"
description="Handpicked selection of innovative products trending this month"
tag="Popular Picks"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "1",
brand: "TechFlow",
name: "SmartFlow Pro Wireless Earbuds",
price: "$129.99",
rating: 5,
reviewCount: "2.3k",
imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074264.jpg?_wi=1",
imageAlt: "SmartFlow Pro wireless earbuds",
},
{
id: "2",
brand: "LifeStyle Co",
name: "Minimal Design Desk Organizer",
price: "$49.99",
rating: 4,
reviewCount: "1.8k",
imageSrc: "http://img.b2bpic.net/free-photo/labels-plants-florist-shop_53876-134342.jpg?_wi=1",
imageAlt: "Minimalist desk organizer set",
},
{
id: "3",
brand: "Productivity Lab",
name: "Digital Task Manager Tablet",
price: "$299.99",
rating: 5,
reviewCount: "3.1k",
imageSrc: "http://img.b2bpic.net/free-photo/tablet-near-healthy-food_23-2147750796.jpg?_wi=1",
imageAlt: "Digital task manager tablet device",
},
]}
buttons={[
{
text: "View All Featured",
href: "/browse",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="category-highlights" data-section="category-highlights">
<FeatureCardTwentyOne
title="Shop by Category"
description="Explore our curated collections across different product categories"
tag="Categories"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/crowd-people-with-phones_53876-20883.jpg?_wi=1"
imageAlt="Product category showcase"
mediaAnimation="slide-up"
mediaPosition="right"
accordionItems={[
{
id: "tech",
title: "Tech & Gadgets",
content: "Latest innovative technology, smart devices, and cutting-edge gadgets from leading brands worldwide.",
},
{
id: "lifestyle",
title: "Lifestyle & Home",
content: "Transform your space with premium home decor, furniture, and lifestyle products that blend style with functionality.",
},
{
id: "productivity",
title: "Productivity Tools",
content: "Enhance your workflow with carefully selected productivity tools, organizers, and workspace essentials.",
},
{
id: "wellness",
title: "Wellness & Self-Care",
content: "Discover products designed to improve your wellbeing, health, and daily self-care routines.",
},
]}
buttons={[
{
text: "Explore All Categories",
href: "/browse",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="trending-products" data-section="trending-products">
<ProductCardTwo
title="Trending This Week"
description="What everyone is discovering and buying right now"
tag="Hot Products"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
products={[
{
id: "4",
brand: "EcoHome",
name: "Sustainable Bamboo Storage Set",
price: "$79.99",
rating: 5,
reviewCount: "892",
imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetics-bag-still-life_23-2151141453.jpg?_wi=1",
imageAlt: "Eco-friendly bamboo storage containers",
},
{
id: "5",
brand: "FitNow",
name: "Portable Smart Fitness Watch",
price: "$199.99",
rating: 4,
reviewCount: "1.5k",
imageSrc: "http://img.b2bpic.net/free-photo/women-wear-wristbands-exercise-stand-against-wall_1150-16546.jpg?_wi=1",
imageAlt: "Smart fitness tracking watch",
},
{
id: "6",
brand: "LightWorks",
name: "Adjustable LED Desk Lamp",
price: "$89.99",
rating: 5,
reviewCount: "743",
imageSrc: "http://img.b2bpic.net/free-photo/desk-arrangement-with-lamp-plants_23-2148745749.jpg?_wi=1",
imageAlt: "Modern adjustable LED desk lamp",
},
{
id: "7",
brand: "VoiceHub",
name: "Smart Home Voice Assistant",
price: "$149.99",
rating: 4,
reviewCount: "2.1k",
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-speaker-digital-assistant_23-2149108001.jpg?_wi=1",
imageAlt: "Smart home voice assistant device",
},
]}
buttons={[
{
text: "Discover More Trending",
href: "/browse",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="Customer Reviews & Community Feedback"
description="Real stories from our satisfied customers who discovered amazing products"
tag="Testimonials"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
testimonials={[
{
id: "1",
name: "Sarah Chen",
role: "Product Designer",
company: "Tech Startup",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=1",
imageAlt: "Sarah Chen profile photo",
},
{
id: "2",
name: "Marcus Johnson",
role: "Entrepreneur",
company: "Small Business Owner",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-male-manager-leaning-railings_1262-3653.jpg?_wi=1",
imageAlt: "Marcus Johnson profile photo",
},
{
id: "3",
name: "Emma Rodriguez",
role: "Creative Director",
company: "Design Agency",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smart-brunette-glasses-street-with-interesting-architecture-background_613910-14022.jpg?_wi=1",
imageAlt: "Emma Rodriguez profile photo",
},
{
id: "4",
name: "David Kim",
role: "Home Enthusiast",
company: "Interior Design",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/people-business-style-luxury-concept-picture-successful-young-european-bearded-man-wearing-expensive-wrist-watch-elegant-suit-relaxing-modern-luxurious-living-room-couch_343059-1777.jpg",
imageAlt: "David Kim profile photo",
},
{
id: "5",
name: "Lisa Anderson",
role: "Lifestyle Blogger",
company: "Digital Creator",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-artist-portrait_23-2149445986.jpg",
imageAlt: "Lisa Anderson profile photo",
},
{
id: "6",
name: "James Wilson",
role: "Tech Enthusiast",
company: "Freelancer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-executive-using-mobile-phone_1170-1116.jpg",
imageAlt: "James Wilson profile photo",
},
]}
buttons={[
{
text: "Read More Reviews",
href: "#",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="newsletter" data-section="newsletter">
<ContactText
text="Stay updated with the latest product discoveries. Join our community and get exclusive access to new finds, special offers, and insider tips."
animationType="entrance-slide"
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{
text: "Subscribe Now",
href: "#",
},
{
text: "Learn More",
href: "#",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="ProdFound"
columns={[
{
title: "Product",
items: [
{
label: "Browse All",
href: "/browse",
},
{
label: "Categories",
href: "/browse",
},
{
label: "Trending",
href: "/browse",
},
{
label: "Featured",
href: "#featured-products",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#",
},
{
label: "How It Works",
href: "#",
},
{
label: "Blog",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Help Center",
href: "#",
},
{
label: "Contact Us",
href: "#",
},
{
label: "FAQ",
href: "#",
},
{
label: "Shipping Info",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
{
label: "Cookie Policy",
href: "#",
},
{
label: "Return Policy",
href: "#",
},
],
},
]}
copyrightText="© 2025 ProdFound. All rights reserved. Discover Products Worth Finding."
/>
</div>
</ThemeProvider>
);
}