Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6fc8ee1fcd | |||
| 33f451177f | |||
| 8e5d5e3b54 | |||
| bf992f4ad6 | |||
| 793b80c8dd | |||
| c33fe11a0b | |||
| 4dafe71207 | |||
| bbd5b6da9f | |||
| 470c93e42f | |||
| b42430ab58 | |||
| 138375d171 | |||
| f3496f3f13 | |||
| f6acee9608 | |||
| 64aa7c513f | |||
| 18a262d195 | |||
| 041fb7cdbf | |||
| 8fcec1e903 | |||
| fe951e1ae3 | |||
| ccb50f9087 |
86
src/app/cart/page.tsx
Normal file
86
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import ProductCart from '@/components/ecommerce/cart/ProductCart';
|
||||||
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
export default function CartPage() {
|
||||||
|
const [cartItems, setCartItems] = useState([
|
||||||
|
{
|
||||||
|
id: "prod-1", name: "Saffron Elixir Serum", price: "$120.00", quantity: 1,
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-make-up-container_23-2149030340.jpg?_wi=2", imageAlt: "Saffron Elixir Serum bottle"},
|
||||||
|
{
|
||||||
|
id: "prod-2", name: "Rose Hydrating Mist", price: "$65.00", quantity: 2,
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669138.jpg?_wi=2", imageAlt: "Rose Hydrating Mist spray bottle"},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleQuantityChange = (id: string, newQuantity: number) => {
|
||||||
|
setCartItems((prevItems) =>
|
||||||
|
prevItems.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveItem = (id: string) => {
|
||||||
|
setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateTotal = () => {
|
||||||
|
return cartItems
|
||||||
|
.reduce((sum, item) => sum + parseFloat(item.price.replace('$', '')) * item.quantity, 0)
|
||||||
|
.toFixed(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "Skincare", id: "#skincare" },
|
||||||
|
{ name: "IranPour Men", id: "#iranpour" },
|
||||||
|
{ name: "Wholesale", id: "#wholesale" },
|
||||||
|
{ name: "Contact", id: "#wholesale" },
|
||||||
|
{ name: "Cart", id: "/cart" }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="directional-hover"
|
||||||
|
defaultTextAnimation="reveal-blur"
|
||||||
|
borderRadius="rounded"
|
||||||
|
contentWidth="smallMedium"
|
||||||
|
sizing="large"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="subtle-shadow"
|
||||||
|
primaryButtonStyle="radial-glow"
|
||||||
|
secondaryButtonStyle="glass"
|
||||||
|
headingFontWeight="semibold"
|
||||||
|
>
|
||||||
|
<ReactLenis root>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarStyleFullscreen
|
||||||
|
navItems={navItems}
|
||||||
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udbkoo"
|
||||||
|
logoAlt="IranDokht logo"
|
||||||
|
brandName="IranDokht"
|
||||||
|
bottomLeftText="Global Luxury Community"
|
||||||
|
bottomRightText="contact@irandokht.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="cart-content" data-section="cart-content" className="min-h-screen pt-24 pb-12 flex justify-center items-center">
|
||||||
|
<ProductCart
|
||||||
|
isOpen={true} // Always open on this dedicated cart page
|
||||||
|
onClose={() => {}} // No specific close action for a dedicated page
|
||||||
|
items={cartItems}
|
||||||
|
onQuantityChange={handleQuantityChange}
|
||||||
|
onRemove={handleRemoveItem}
|
||||||
|
total={`$${calculateTotal()}`}
|
||||||
|
buttons={[
|
||||||
|
{ text: "Continue Shopping", href: "/" },
|
||||||
|
{ text: "Proceed to Checkout", href: "/checkout" }
|
||||||
|
]}
|
||||||
|
title="Your Shopping Cart"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
|
|||||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||||
@@ -16,16 +16,16 @@ import { Droplet, Leaf, ShieldCheck, Sparkles, Tag } from "lucide-react";
|
|||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-shift"
|
defaultButtonVariant="directional-hover"
|
||||||
defaultTextAnimation="background-highlight"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="rounded"
|
borderRadius="rounded"
|
||||||
contentWidth="smallMedium"
|
contentWidth="smallMedium"
|
||||||
sizing="large"
|
sizing="large"
|
||||||
background="circleGradient"
|
background="circleGradient"
|
||||||
cardStyle="subtle-shadow"
|
cardStyle="subtle-shadow"
|
||||||
primaryButtonStyle="diagonal-gradient"
|
primaryButtonStyle="radial-glow"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="medium"
|
headingFontWeight="semibold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
@@ -40,7 +40,7 @@ export default function LandingPage() {
|
|||||||
{
|
{
|
||||||
name: "Wholesale", id: "#wholesale"},
|
name: "Wholesale", id: "#wholesale"},
|
||||||
{
|
{
|
||||||
name: "Contact", id: "#contact"},
|
name: "Contact", id: "#wholesale"},
|
||||||
]}
|
]}
|
||||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udbkoo"
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udbkoo"
|
||||||
logoAlt="IranDokht logo"
|
logoAlt="IranDokht logo"
|
||||||
@@ -132,9 +132,9 @@ export default function LandingPage() {
|
|||||||
carouselMode="buttons"
|
carouselMode="buttons"
|
||||||
products={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "prod-1", name: "Saffron Elixir Serum", price: "$120.00", variant: "30ml", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-make-up-container_23-2149030340.jpg", imageAlt: "Saffron Elixir Serum bottle"},
|
id: "prod-1", name: "Saffron Elixir Serum", price: "$120.00", variant: "30ml", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-make-up-container_23-2149030340.jpg?_wi=1", imageAlt: "Saffron Elixir Serum bottle"},
|
||||||
{
|
{
|
||||||
id: "prod-2", name: "Rose Hydrating Mist", price: "$65.00", variant: "100ml", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669138.jpg", imageAlt: "Rose Hydrating Mist spray bottle"},
|
id: "prod-2", name: "Rose Hydrating Mist", price: "$65.00", variant: "100ml", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669138.jpg?_wi=1", imageAlt: "Rose Hydrating Mist spray bottle"},
|
||||||
{
|
{
|
||||||
id: "prod-3", name: "Persian Silk Face Cream", price: "$150.00", variant: "50g", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg", imageAlt: "Persian Silk Face Cream jar"},
|
id: "prod-3", name: "Persian Silk Face Cream", price: "$150.00", variant: "50g", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg", imageAlt: "Persian Silk Face Cream jar"},
|
||||||
{
|
{
|
||||||
@@ -195,7 +195,7 @@ export default function LandingPage() {
|
|||||||
{
|
{
|
||||||
id: "4", title: "The Gold Standard", quote: "From sourcing to customer service, IranDokht sets the gold standard. My go-to for premium beauty.", name: "Mr. Amir Nassiri", role: "Gallery Owner", imageSrc: "http://img.b2bpic.net/free-photo/relaxed-positive-young-woman-keeps-eyes-closed-daydreams-about-something-smiles-pleasantly-keeps-hands-head-wears-comfortable-knitted-sweater-poses-against-pink-background-happy-feelings_273609-57269.jpg", imageAlt: "Mr. Amir Nassiri"},
|
id: "4", title: "The Gold Standard", quote: "From sourcing to customer service, IranDokht sets the gold standard. My go-to for premium beauty.", name: "Mr. Amir Nassiri", role: "Gallery Owner", imageSrc: "http://img.b2bpic.net/free-photo/relaxed-positive-young-woman-keeps-eyes-closed-daydreams-about-something-smiles-pleasantly-keeps-hands-head-wears-comfortable-knitted-sweater-poses-against-pink-background-happy-feelings_273609-57269.jpg", imageAlt: "Mr. Amir Nassiri"},
|
||||||
{
|
{
|
||||||
id: "5", title: "Unparalleled Quality", quote: "The K-Beauty selection is fantastic, and the European imports are divine. I trust IranDokht completely.", name: "Dr. Lena Dubois", role: "Cosmetic Scientist", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-portrait-blondie-straight-hair_633478-1294.jpg", imageAlt: "Dr. Lena Dubois"},
|
id: "5", title: "Unparalleled Quality", quote: "The K-Beauty selection is fantastic, and the European imports are divine. I trust IranDokht completely.", name: "Dr. Lena Dubois", role: "Cosmetic Scientist", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-portrait-blondie-straight-hair_633478-1294.jpg", imageAlt: "Dr. Lena Dubois"}
|
||||||
]}
|
]}
|
||||||
title="Voices of Distinction"
|
title="Voices of Distinction"
|
||||||
description="Our clients share their unparalleled experiences with IranDokht, reflecting the essence of luxury and satisfaction."
|
description="Our clients share their unparalleled experiences with IranDokht, reflecting the essence of luxury and satisfaction."
|
||||||
@@ -253,14 +253,51 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoEmphasis
|
||||||
logoSrc="http://img.b2bpic.net/free-vector/illustration-business-shop-logo-stamp-banner_53876-3734.jpg"
|
logoSrc="http://img.b2bpic.net/free-vector/illustration-business-shop-logo-stamp-banner_53876-3734.jpg"
|
||||||
logoAlt="IranDokht logo"
|
logoAlt="IranDokht logo"
|
||||||
logoText="IranDokht"
|
logoText="IranDokht"
|
||||||
leftLink={{
|
columns={[
|
||||||
text: "Privacy Policy", href: "#"}}
|
{
|
||||||
rightLink={{
|
items: [
|
||||||
text: "Terms of Service", href: "#"}}
|
{
|
||||||
|
label: "FAQ", href: "#faq"},
|
||||||
|
{
|
||||||
|
label: "Wholesale", href: "#wholesale"},
|
||||||
|
{
|
||||||
|
label: "Contact Us", href: "#wholesale"},
|
||||||
|
]},
|
||||||
|
{
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: "Home", href: "#home"},
|
||||||
|
{
|
||||||
|
label: "Skincare", href: "#skincare"},
|
||||||
|
{
|
||||||
|
label: "IranPour Men", href: "#iranpour"},
|
||||||
|
{
|
||||||
|
label: "Testimonials", href: "#testimonials"},
|
||||||
|
{
|
||||||
|
label: "Social Proof", href: "#social-proof"},
|
||||||
|
]},
|
||||||
|
{
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: "WhatsApp", href: "#"},
|
||||||
|
{
|
||||||
|
label: "Instagram", href: "#"},
|
||||||
|
{
|
||||||
|
label: "Facebook", href: "#"},
|
||||||
|
]},
|
||||||
|
{
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: "Stay Connected", href: "#"},
|
||||||
|
{
|
||||||
|
label: "Subscribe for updates", href: "#"},
|
||||||
|
]}
|
||||||
|
]}
|
||||||
|
className="bg-[#2F4F4F] text-[var(--background)]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-archivo), sans-serif;
|
font-family: var(--font-inter), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-archivo), sans-serif;
|
font-family: var(--font-montserrat), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
|
|
||||||
--background: #F5F5DC;
|
--background: #F5F5DC;
|
||||||
--card: #ffffff;
|
--card: #ffffff;
|
||||||
--foreground: #0A5C3D;
|
--foreground: #3A5F40;
|
||||||
--primary-cta: #C42B36;
|
--primary-cta: #B8001F;
|
||||||
--primary-cta-text: #ffffff;
|
--primary-cta-text: #ffffff;
|
||||||
--secondary-cta: #F5F5DC;
|
--secondary-cta: #F5F5DC;
|
||||||
--secondary-cta-text: #0A5C3D;
|
--secondary-cta-text: #3A5F40;
|
||||||
--accent: #C19A6B;
|
--accent: #C19A6B;
|
||||||
--background-accent: #D4B996;
|
--background-accent: #D4B996;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user