216 lines
7.7 KiB
TypeScript
216 lines
7.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import { Star, Heart } from "lucide-react";
|
|
|
|
export default function CartPage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reviews", id: "reviews" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="aurora"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={navItems}
|
|
brandName="Dittu"
|
|
button={{
|
|
text: "Shop Now",
|
|
href: "/products",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="cart-hero" data-section="cart-hero">
|
|
<HeroSplitKpi
|
|
title="Your Shopping Cart"
|
|
description="Review your selected premium skincare products and proceed to checkout for a seamless luxury shopping experience."
|
|
tag="Shopping"
|
|
background={{
|
|
variant: "aurora",
|
|
}}
|
|
kpis={[
|
|
{
|
|
value: "6",
|
|
label: "Products Available",
|
|
},
|
|
{
|
|
value: "50+",
|
|
label: "Product Variants",
|
|
},
|
|
{
|
|
value: "Free",
|
|
label: "Shipping on Orders",
|
|
},
|
|
]}
|
|
enableKpiAnimation={true}
|
|
buttons={[
|
|
{
|
|
text: "Continue Shopping",
|
|
href: "/products",
|
|
},
|
|
{
|
|
text: "View About Us",
|
|
href: "/about",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/arrangement-natural-argan-seeds_23-2149016658.jpg?_wi=2"
|
|
imageAlt="Luxury skincare collection for checkout"
|
|
mediaAnimation="blur-reveal"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-products" data-section="featured-products">
|
|
<ProductCardFour
|
|
title="Featured Products"
|
|
description="Handpicked essentials from our luxury skincare collection, curated for visible transformation"
|
|
tag="Best Sellers"
|
|
tagIcon={Star}
|
|
gridVariant="bento-grid"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "product-1",
|
|
name: "Luminous Hydration Serum",
|
|
price: "$89",
|
|
variant: "50ml / 100ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stack-white-rectangular-boxes-pyramid-formation_9975-133546.jpg?_wi=3",
|
|
imageAlt: "Luminous Hydration Serum bottle",
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "product-2",
|
|
name: "Rose Gold Face Mask",
|
|
price: "$65",
|
|
variant: "100ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-glass-bottle-with-tasty-strawberry-milkshake-it_181624-2363.jpg?_wi=3",
|
|
imageAlt: "Rose Gold Face Mask jar",
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "product-3",
|
|
name: "Silk Repair Cream",
|
|
price: "$120",
|
|
variant: "50ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-arrangement-skin-care-cream_23-2148761486.jpg?_wi=3",
|
|
imageAlt: "Silk Repair Cream luxe packaging",
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "product-4",
|
|
name: "Anti-Aging Night Elixir",
|
|
price: "$110",
|
|
variant: "30ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bottle-oils-with-pipette_23-2148317664.jpg?_wi=3",
|
|
imageAlt: "Anti-Aging Night Elixir premium bottle",
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "product-5",
|
|
name: "Vitamin C Brightening Oil",
|
|
price: "$78",
|
|
variant: "30ml / 50ml",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/night-intensively-revitalizing-facial_88138-120.jpg?_wi=3",
|
|
imageAlt: "Vitamin C Brightening Oil bottle",
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "product-6",
|
|
name: "Peptide Eye Revival",
|
|
price: "$95",
|
|
variant: "15ml",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/mandala-cards-premium-golden-style_1017-8498.jpg?_wi=3",
|
|
imageAlt: "Peptide Eye Revival luxury tube",
|
|
isFavorited: false,
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "View All Products",
|
|
href: "/products",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Why Our Customers Love Us"
|
|
description="Discover what makes Dittu the preferred choice for luxury skincare enthusiasts worldwide"
|
|
tag="Customer Love"
|
|
tagIcon={Heart}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Johnson",
|
|
handle: "@sarahglows",
|
|
testimonial: "The hydration serum completely transformed my complexion. My skin feels plump, radiant, and healthy for the first time in years.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg?_wi=4",
|
|
imageAlt: "Sarah Johnson testimonial",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Emma Rodriguez",
|
|
handle: "@emmacares",
|
|
testimonial: "As someone with sensitive skin, I was skeptical. But Dittu's gentle formulations have been a game-changer.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-gold-body-painting_23-2150466375.jpg?_wi=4",
|
|
imageAlt: "Emma Rodriguez testimonial",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Michael Chen",
|
|
handle: "@menskincare",
|
|
testimonial: "Professional quality skincare that actually works. The anti-aging results are remarkable, and the packaging feels genuinely luxurious.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-holding-face-cream_23-2148686062.jpg?_wi=4",
|
|
imageAlt: "Michael Chen testimonial",
|
|
icon: Star,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Dittu Skincare"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Terms & Conditions",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |