Merge version_1 into main #4
@@ -2,13 +2,12 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import { CheckCircle, Flame, ShieldCheck, Sparkles } from "lucide-react";
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Star, Leaf, BatteryCharging, Gem } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -25,300 +24,141 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
href: "/products",
|
||||
},
|
||||
{
|
||||
name: "Categories",
|
||||
id: "categories",
|
||||
href: "/categories",
|
||||
},
|
||||
{
|
||||
name: "Offers",
|
||||
id: "offers",
|
||||
href: "#offers",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="CaseBuddy"
|
||||
bottomLeftText="Upgrade Your Style"
|
||||
bottomRightText="Shop Now"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"
|
||||
},
|
||||
{
|
||||
name: "Products", id: "/products"
|
||||
},
|
||||
{
|
||||
name: "Categories", id: "/categories"
|
||||
},
|
||||
{
|
||||
name: "Offers", id: "#offers"
|
||||
},
|
||||
{
|
||||
name: "FAQ", id: "#faq"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "/contact"
|
||||
}
|
||||
]}
|
||||
brandName="CaseBuddy"
|
||||
bottomLeftText="Upgrade Your Style"
|
||||
bottomRightText="Shop Now"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-catalog" data-section="product-catalog">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sleek Black Shield",
|
||||
price: "₹699",
|
||||
rating: 4.8,
|
||||
reviewCount: "1.2k Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-sleek-black-phone-case-with-subtle-neo-1774493821192-72f52990.png?_wi=2",
|
||||
imageAlt: "Sleek black phone case",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Neon Aurora Clear Case",
|
||||
price: "₹799",
|
||||
rating: 4.7,
|
||||
reviewCount: "980 Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-clear-transparent-phone-case-with-a-fu-1774493821399-07ac0bdc.png?_wi=2",
|
||||
imageAlt: "Clear phone case with neon gradient",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Rugged Purple Defender",
|
||||
price: "₹849",
|
||||
rating: 4.9,
|
||||
reviewCount: "1.5k Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-durable-phone-case-with-a-bold-purple--1774493821521-ceaab251.png?_wi=2",
|
||||
imageAlt: "Durable purple patterned phone case",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Minimalist White Stripe",
|
||||
price: "₹649",
|
||||
rating: 4.5,
|
||||
reviewCount: "750 Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-minimalist-white-phone-case-with-a-sin-1774493820819-df96d2af.png?_wi=2",
|
||||
imageAlt: "White phone case with a single blue stripe",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Vibrant Gradient Sunset",
|
||||
price: "₹749",
|
||||
rating: 4.6,
|
||||
reviewCount: "890 Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-gradient-phone-case-transitioning-from-1774493820884-4c79d3c2.png?_wi=2",
|
||||
imageAlt: "Gradient phone case from blue to purple",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Matte Black GripPro",
|
||||
price: "₹729",
|
||||
rating: 4.8,
|
||||
reviewCount: "1.1k Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-textured-phone-case-with-a-grip-enhanc-1774493823010-5b418d9d.png?_wi=2",
|
||||
imageAlt: "Textured matte black phone case for grip",
|
||||
},
|
||||
]}
|
||||
searchPlaceholder="Search all cases..."
|
||||
emptyMessage="No products match your search."
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
title="Premium Cases for Every Device"
|
||||
description="Discover our exclusive collection of stylish and protective phone cases tailored for your favorite brands."
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
tag="Shop Now"
|
||||
rating={4.9}
|
||||
ratingText="500+ Happy Customers"
|
||||
mediaItems={[
|
||||
{ type: "image", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/stylish-and-protective-phone-case-minima-1774493822192-77fdb60a.png?_wi=6", imageAlt: "Premium iPhone case" },
|
||||
{ type: "image", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-clear-transparent-phone-case-with-a-fu-1774493821399-07ac0bdc.png?_wi=5", imageAlt: "Transparent Samsung case" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{ text: "View All Products", href: "/products" },
|
||||
{ text: "Custom Cases", href: "/contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-benefits" data-section="product-benefits">
|
||||
<FeatureHoverPattern
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Ultimate Protection",
|
||||
description: "Advanced materials safeguard against drops, scratches, and daily wear, keeping your device pristine.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Trendy Designs",
|
||||
description: "Stay ahead with our fashion-forward cases that complement your personal style and make a statement.",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Precision Fit",
|
||||
description: "Each case is meticulously engineered for a perfect fit, ensuring easy access to all ports and buttons.",
|
||||
},
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "Eco-Friendly Choices",
|
||||
description: "Explore our range of sustainable and responsibly sourced cases, caring for your phone and the planet.",
|
||||
},
|
||||
{
|
||||
icon: BatteryCharging,
|
||||
title: "Wireless Charging Compatible",
|
||||
description: "Our cases are designed to support wireless charging, so you never have to remove your cover.",
|
||||
},
|
||||
]}
|
||||
title="Why CaseBuddy Cases Stand Out"
|
||||
description="Experience the perfect blend of style, protection, and innovation with every case."
|
||||
tag="Our Commitment"
|
||||
tagIcon={Gem}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop All Cases",
|
||||
href: "/products",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="offers" data-section="offers">
|
||||
<PricingCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Exclusive Offers & Bundles"
|
||||
description="Grab the best deals on our premium phone cases and accessories."
|
||||
tag="Limited Time"
|
||||
tagIcon={Star}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Basic Protection", badgeIcon: Leaf,
|
||||
price: "₹499", subtitle: "Everyday essentials", features: ["Slim Fit Case", "Screen Protector"]
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Premium Shield", badgeIcon: BatteryCharging,
|
||||
price: "₹999", subtitle: "Advanced defense", features: ["Rugged Armor Case", "Tempered Glass", "Wireless Charger"]
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Ultimate Bundle", badgeIcon: Gem,
|
||||
price: "₹1499", subtitle: "Complete peace of mind", features: ["Custom Case Design", "Premium Tempered Glass", "Fast Charger", "Extended Warranty"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="popular-products" data-section="popular-products">
|
||||
<ProductCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "iPhone",
|
||||
name: "MagSafe Compatible Clear Case",
|
||||
price: "₹999",
|
||||
rating: 4.9,
|
||||
reviewCount: "2.1k Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/stylish-and-protective-phone-case-minima-1774493822192-77fdb60a.png?_wi=2",
|
||||
imageAlt: "iPhone case with MagSafe",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Samsung",
|
||||
name: "Galaxy Ultra Slim Fit",
|
||||
price: "₹899",
|
||||
rating: 4.7,
|
||||
reviewCount: "1.8k Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-gradient-phone-case-transitioning-from-1774493820884-4c79d3c2.png?_wi=3",
|
||||
imageAlt: "Samsung Galaxy slim case",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "OnePlus",
|
||||
name: "Nord Series Rugged Armor",
|
||||
price: "₹799",
|
||||
rating: 4.8,
|
||||
reviewCount: "1.5k Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-durable-phone-case-with-a-bold-purple--1774493821521-ceaab251.png?_wi=3",
|
||||
imageAlt: "OnePlus Nord rugged case",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Universal",
|
||||
name: "Universal Silicone Grip",
|
||||
price: "₹599",
|
||||
rating: 4.5,
|
||||
reviewCount: "1.3k Reviews",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-textured-phone-case-with-a-grip-enhanc-1774493823010-5b418d9d.png?_wi=3",
|
||||
imageAlt: "Universal silicone grip case",
|
||||
},
|
||||
]}
|
||||
title="Popular Picks & New Arrivals"
|
||||
description="Discover what's trending and our latest innovations in phone protection."
|
||||
tag="Hot Deals"
|
||||
tagIcon={Flame}
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Products",
|
||||
href: "/products",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="trending-products" data-section="trending-products">
|
||||
<ProductCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "CaseBuddy", name: "iPhone 15 Pro MagSafe Case", price: "₹1299", rating: 4.8,
|
||||
reviewCount: "245 Reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/stylish-and-protective-phone-case-minima-1774493822192-77fdb60a.png?_wi=7", imageAlt: "iPhone 15 Pro MagSafe Case"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "CaseBuddy", name: "Samsung S24 Ultra Clear Case", price: "₹1099", rating: 4.7,
|
||||
reviewCount: "180 Reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-clear-transparent-phone-case-with-a-fu-1774493821399-07ac0bdc.png?_wi=8", imageAlt: "Samsung S24 Ultra Clear Case"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "CaseBuddy", name: "OnePlus 12 Rugged Armor", price: "₹999", rating: 4.6,
|
||||
reviewCount: "110 Reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSsLGGxnv45WOzNAadCwZHfaFW/a-durable-phone-case-with-a-bold-purple--1774493821521-ceaab251.png?_wi=9", imageAlt: "OnePlus 12 Rugged Armor"
|
||||
}
|
||||
]}
|
||||
title="Our Bestselling Products"
|
||||
description="Explore the most popular and highly-rated cases by our customers."
|
||||
tag="Trending"
|
||||
tagIcon={Star}
|
||||
buttons={[
|
||||
{ text: "Shop All", href: "/products" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Have Questions?"
|
||||
title="We're Here to Help!"
|
||||
description="Our customer support team is ready to assist you with any queries about our cases or your order."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "iPhone Cases",
|
||||
href: "/categories#iphone",
|
||||
},
|
||||
{
|
||||
label: "Samsung Cases",
|
||||
href: "/categories#samsung",
|
||||
},
|
||||
{
|
||||
label: "OnePlus Cases",
|
||||
href: "/categories#oneplus",
|
||||
},
|
||||
{
|
||||
label: "Accessories",
|
||||
href: "/categories#accessories",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "/careers",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
label: "Order Tracking",
|
||||
href: "/order-tracking",
|
||||
},
|
||||
{
|
||||
label: "FAQs",
|
||||
href: "/faq",
|
||||
},
|
||||
{
|
||||
label: "Returns & Warranty",
|
||||
href: "/returns",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 CaseBuddy. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "iPhone Cases", href: "/categories#iphone" },
|
||||
{ label: "Samsung Cases", href: "/categories#samsung" },
|
||||
{ label: "OnePlus Cases", href: "/categories#oneplus" },
|
||||
{ label: "Accessories", href: "/categories#accessories" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "/careers" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Order Tracking", href: "/order-tracking" },
|
||||
{ label: "FAQs", href: "/faq" },
|
||||
{ label: "Returns & Warranty", href: "/returns" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 CaseBuddy. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user