diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..6c5e9c7 --- /dev/null +++ b/src/app/about/page.tsx @@ -0,0 +1,148 @@ +"use client" + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard'; +import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout'; +import FeatureBento from '@/components/sections/feature/FeatureBento'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Award, Shield, Lock, CheckCircle, Globe, Heart } from 'lucide-react'; + +export default function AboutPage() { + return ( + + + +
+ +
+ +
+ +
+ +
+ +
+ + + + ); +} diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx new file mode 100644 index 0000000..fa2de0c --- /dev/null +++ b/src/app/cart/page.tsx @@ -0,0 +1,190 @@ +"use client" + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import HeroOverlay from '@/components/sections/hero/HeroOverlay'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog'; +import { ShoppingCart, Trash2 } from 'lucide-react'; +import { useState } from 'react'; + +export default function CartPage() { + const [cartItems, setCartItems] = useState([ + { + id: "serum-01", name: "Radiant Serum", price: "$65", rating: 5, + imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg", imageAlt: "Radiant Serum - vitamin-infused brightening serum" + }, + { + id: "moisturizer-01", name: "Hydration Cream", price: "$58", rating: 5, + imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg", imageAlt: "Hydration Cream - luxurious moisturizing cream" + } + ]); + + const handleRemoveItem = (itemId: string) => { + setCartItems(cartItems.filter(item => item.id !== itemId)); + }; + + const cartTotal = cartItems.reduce((total, item) => { + const price = parseFloat(item.price.replace('$', '')); + return total + price; + }, 0); + + return ( + + + +
+ +
+ +
+
+
+ {/* Cart Items */} +
+
+

+ + Cart Items ({cartItems.length}) +

+ + {cartItems.length === 0 ? ( +

Your cart is empty. Continue shopping to add items.

+ ) : ( +
+ {cartItems.map((item) => ( +
+ {item.imageAlt} +
+

{item.name}

+

{item.price}

+
+ +
+ ))} +
+ )} +
+
+ + {/* Order Summary */} +
+
+

Order Summary

+
+
+ Subtotal + ${cartTotal.toFixed(2)} +
+
+ Shipping + Free +
+
+ Tax + ${(cartTotal * 0.1).toFixed(2)} +
+
+
+ Total + ${(cartTotal + cartTotal * 0.1).toFixed(2)} +
+ + Proceed to Checkout + + + Continue Shopping + +
+
+
+
+
+ + + + ); +} \ No newline at end of file diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx new file mode 100644 index 0000000..86007d0 --- /dev/null +++ b/src/app/checkout/page.tsx @@ -0,0 +1,272 @@ +"use client" + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import HeroOverlay from '@/components/sections/hero/HeroOverlay'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import Input from '@/components/form/Input'; +import { CreditCard, Lock } from 'lucide-react'; +import { useState } from 'react'; + +export default function CheckoutPage() { + const [formData, setFormData] = useState({ + email: '', + firstName: '', + lastName: '', + address: '', + city: '', + state: '', + zipCode: '', + cardNumber: '', + cardExpiry: '', + cardCVC: '' + }); + + const cartTotal = 123.00; // Example total from cart + const tax = cartTotal * 0.1; + const finalTotal = cartTotal + tax; + + const handleInputChange = (field: string, value: string) => { + setFormData(prev => ({ + ...prev, + [field]: value + })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Handle payment processing + alert('Order placed successfully!'); + }; + + return ( + + + +
+ +
+ +
+
+
+ {/* Checkout Form */} +
+
+ {/* Shipping Information */} +
+

Shipping Information

+
+ handleInputChange('email', value)} + type="email" + placeholder="Email address" + required + /> +
+ handleInputChange('firstName', value)} + type="text" + placeholder="First Name" + required + /> + handleInputChange('lastName', value)} + type="text" + placeholder="Last Name" + required + /> +
+ handleInputChange('address', value)} + type="text" + placeholder="Street Address" + required + /> +
+ handleInputChange('city', value)} + type="text" + placeholder="City" + required + /> + handleInputChange('state', value)} + type="text" + placeholder="State" + required + /> +
+ handleInputChange('zipCode', value)} + type="text" + placeholder="ZIP Code" + required + /> +
+
+ + {/* Payment Information */} +
+
+ +

Payment Information

+
+
+
+ + Your payment is secure and encrypted +
+ handleInputChange('cardNumber', value)} + type="text" + placeholder="Card Number" + required + /> +
+ handleInputChange('cardExpiry', value)} + type="text" + placeholder="MM/YY" + required + /> + handleInputChange('cardCVC', value)} + type="text" + placeholder="CVC" + required + /> +
+
+
+
+
+ + {/* Order Summary */} +
+
+

Order Summary

+ +
+
+ Subtotal + ${cartTotal.toFixed(2)} +
+
+ Shipping + Free +
+
+ Tax + ${tax.toFixed(2)} +
+
+ +
+ Total + ${finalTotal.toFixed(2)} +
+ + + +

+ By completing your purchase, you agree to our Terms of Service and Privacy Policy. +

+
+
+
+
+
+ + + + ); +} + +const cartTotal = 123.00; \ No newline at end of file diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx new file mode 100644 index 0000000..64866f1 --- /dev/null +++ b/src/app/contact/page.tsx @@ -0,0 +1,139 @@ +"use client" + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard'; +import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Mail } from 'lucide-react'; +import { useState } from 'react'; + +export default function ContactPage() { + const [formSubmitted, setFormSubmitted] = useState(false); + + const handleContactSubmit = (data: Record) => { + console.log('Contact form submitted:', data); + setFormSubmitted(true); + setTimeout(() => setFormSubmitted(false), 3000); + }; + + return ( + + + +
+ +
+ +
+ +
+ + + + ); +} diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx new file mode 100644 index 0000000..7cd9b90 --- /dev/null +++ b/src/app/login/page.tsx @@ -0,0 +1,344 @@ +"use client" + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import HeroOverlay from '@/components/sections/hero/HeroOverlay'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import Input from '@/components/form/Input'; +import { User, Lock, Mail, LogOut, Settings } from 'lucide-react'; +import { useState } from 'react'; + +export default function LoginPage() { + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [loginMode, setLoginMode] = useState<'login' | 'register'>('login'); + const [formData, setFormData] = useState({ + email: '', + password: '', + confirmPassword: '', + fullName: '' + }); + + const [userProfile, setUserProfile] = useState({ + name: 'Sarah Johnson', + email: 'sarah.johnson@example.com', + joinDate: 'January 2024' + }); + + const handleInputChange = (field: string, value: string) => { + setFormData(prev => ({ + ...prev, + [field]: value + })); + }; + + const handleLogin = (e: React.FormEvent) => { + e.preventDefault(); + if (loginMode === 'login' && formData.email && formData.password) { + setIsLoggedIn(true); + setFormData({ email: '', password: '', confirmPassword: '', fullName: '' }); + } else if (loginMode === 'register' && formData.email && formData.password && formData.fullName) { + setIsLoggedIn(true); + setUserProfile({ + name: formData.fullName, + email: formData.email, + joinDate: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long' }) + }); + setFormData({ email: '', password: '', confirmPassword: '', fullName: '' }); + } + }; + + const handleLogout = () => { + setIsLoggedIn(false); + setLoginMode('login'); + }; + + return ( + + + +
+ +
+ +
+
+ {!isLoggedIn ? ( + // Login / Register Form +
+
+ + +
+ +
+ {loginMode === 'register' && ( + handleInputChange('fullName', value)} + type="text" + placeholder="Full Name" + required + /> + )} + +
+ + handleInputChange('email', value)} + type="email" + placeholder="Email Address" + required + /> +
+ +
+ + handleInputChange('password', value)} + type="password" + placeholder="Password" + required + /> +
+ + {loginMode === 'register' && ( +
+ + handleInputChange('confirmPassword', value)} + type="password" + placeholder="Confirm Password" + required + /> +
+ )} + + {loginMode === 'login' && ( + + )} + + +
+ +

+ {loginMode === 'login' + ? "Don't have an account? " + : "Already have an account? "} + +

+
+ ) : ( + // User Account Dashboard +
+ {/* Profile Card */} +
+
+
+
+ +
+
+

{userProfile.name}

+

{userProfile.email}

+

Member since {userProfile.joinDate}

+
+
+ +
+
+ + {/* Account Sections */} +
+ {/* Orders Section */} +
+

+ + Recent Orders +

+
+
+
+ Order #12345 + Delivered +
+

3 products - $123.00

+
+
+
+ Order #12344 + Processing +
+

2 products - $98.00

+
+
+
+ + {/* Account Settings Section */} +
+

+ + Account Settings +

+
+ + + +
+
+
+ + {/* Preferences Section */} +
+

Email Preferences

+
+ + + +
+
+
+ )} +
+
+ + + + ); +} + +// Shopping Bag Icon (not from lucide-react, need to create) +const ShoppingBag = ({ className }: { className: string }) => ( + + + +); \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 50a18a4..e41e1e6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,7 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import ContactCenter from '@/components/sections/contact/ContactCenter'; import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; -import { Award, CheckCircle, Droplets, Heart, HelpCircle, Leaf, Sparkles, Zap } from 'lucide-react'; +import { Award, CheckCircle, Droplets, Heart, HelpCircle, Leaf, Sparkles, Zap, Shield, Lock, AlertCircle, Eye } from 'lucide-react'; export default function LandingPage() { return ( @@ -42,7 +42,7 @@ export default function LandingPage() {
@@ -186,14 +210,14 @@ export default function LandingPage() { @@ -214,8 +238,8 @@ export default function LandingPage() { title: "Company", items: [ { label: "About Us", href: "#about" }, { label: "Our Story", href: "#" }, - { label: "Sustainability", href: "#" }, - { label: "Careers", href: "#" } + { label: "Safety Standards", href: "#" }, + { label: "Sustainability", href: "#" } ] }, { @@ -234,10 +258,10 @@ export default function LandingPage() { ] } ]} - copyrightText="© 2025 Lumière Skincare. All rights reserved." + copyrightText="© 2025 Lumière Skincare. All rights reserved. Safety certified and dermatologist-tested." ariaLabel="Footer - Site navigation and information" /> ); -} \ No newline at end of file +} diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx new file mode 100644 index 0000000..d600a72 --- /dev/null +++ b/src/app/product/[id]/page.tsx @@ -0,0 +1,229 @@ +"use client" + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Heart, Star, ShoppingCart, Check } from 'lucide-react'; + +interface ProductDetailProps { + params: { id: string }; +} + +export default function ProductDetailPage({ params }: ProductDetailProps) { + const [quantity, setQuantity] = useState(1); + const [isFavorited, setIsFavorited] = useState(false); + const [isAddedToCart, setIsAddedToCart] = useState(false); + + const productData: Record = { + "serum-01": { + name: "Radiant Serum", price: "$65", rating: 4.8, + reviewCount: 245, + category: "Serums", description: "Illuminate your complexion with our vitamin-infused brightening serum. Formulated with natural botanical extracts and powerful antioxidants, this lightweight serum penetrates deep into the skin to reveal a luminous, radiant glow.", imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg", imageAlt: "Radiant Serum bottle on elegant surface", features: [ + "98% natural ingredients", "Brightens dull skin tone", "Reduces appearance of dark spots", "Lightweight and fast-absorbing", "Suitable for all skin types", "Cruelty-free and vegan" + ], + usage: "Apply 2-3 drops to clean, dry skin morning and night. Follow with your favorite moisturizer.", ingredients: "Water, Vitamin C (5%), Jojoba Oil, Aloe Vera Extract, Green Tea Extract, Hyaluronic Acid, Vitamin E" + }, + "moisturizer-01": { + name: "Hydration Cream", price: "$58", rating: 4.9, + reviewCount: 312, + category: "Moisturizers", description: "Experience luxurious hydration with our intensely moisturizing cream. Enriched with botanical oils and nourishing compounds, this rich formula locks in moisture for soft, supple, glowing skin.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg", imageAlt: "Hydration Cream jar with natural ingredients", features: [ + "Deep hydration for 24 hours", "Reduces fine lines and wrinkles", "Rich, luxurious texture", "Absorbs quickly without greasy residue", "Hypoallergenic formula", "Dermatologist tested" + ], + usage: "Apply a pea-sized amount to clean skin. Massage gently in upward strokes. Use morning and night.", ingredients: "Shea Butter, Coconut Oil, Rose Hip Oil, Vitamin A, Ceramides, Squalane, Natural Fragrance" + }, + "mask-01": { + name: "Renewal Mask", price: "$48", rating: 4.7, + reviewCount: 189, + category: "Masks", description: "Revitalize your skin with our detoxifying renewal mask. This purifying treatment draws out impurities while infusing the skin with vital nutrients for a clearer, more radiant complexion.", imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-with-creme-face_23-2147817006.jpg", imageAlt: "Renewal Mask applied on face", features: [ + "Deep cleansing and detoxifying", "Reduces pore appearance", "Improves skin texture", "Removes dead skin cells", "Calming and soothing", "Gentle enough for sensitive skin" + ], + usage: "Apply thin layer to clean face, avoiding eye area. Leave on for 10-15 minutes. Rinse with warm water.", ingredients: "Kaolin Clay, Activated Charcoal, Tea Tree Oil, Lavender Extract, Witch Hazel, Aloe Vera" + } + }; + + const product = productData[params.id] || productData["serum-01"]; + + const handleAddToCart = () => { + setIsAddedToCart(true); + setTimeout(() => setIsAddedToCart(false), 2000); + }; + + const handleFavorite = () => { + setIsFavorited(!isFavorited); + }; + + return ( + + + +
+
+
+ {/* Product Image Section */} +
+ {product.imageAlt} +
+ + {/* Product Information Section */} +
+ {/* Category and Title */} +
+

{product.category}

+

{product.name}

+

{product.description}

+
+ + {/* Rating and Reviews */} +
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+ {product.rating} + ({product.reviewCount} reviews) +
+ + {/* Price */} +
+

{product.price}

+
+ + {/* Features List */} +
+

Key Features

+
    + {product.features.map((feature: string, idx: number) => ( +
  • + + {feature} +
    • + ))} +
+
+ + {/* Quantity and Add to Cart */} +
+
+ + {quantity} + +
+ + +
+ + {/* Usage Instructions */} +
+

How to Use

+

{product.usage}

+
+ + {/* Ingredients */} +
+

Key Ingredients

+

{product.ingredients}

+
+
+
+
+
+ + + + ); +} \ No newline at end of file diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx new file mode 100644 index 0000000..dcfedd4 --- /dev/null +++ b/src/app/shop/page.tsx @@ -0,0 +1,140 @@ +"use client" + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Heart } from 'lucide-react'; + +export default function ShopPage() { + const [searchValue, setSearchValue] = useState(""); + const [selectedCategory, setSelectedCategory] = useState("all"); + const [selectedRating, setSelectedRating] = useState("all"); + + const allProducts = [ + { + id: "serum-01", category: "Serums", name: "Radiant Serum", price: "$65", rating: 4.8, + reviewCount: "245", imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg", imageAlt: "Radiant Serum - vitamin-infused brightening serum" + }, + { + id: "moisturizer-01", category: "Moisturizers", name: "Hydration Cream", price: "$58", rating: 4.9, + reviewCount: "312", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg", imageAlt: "Hydration Cream - luxurious moisturizing cream" + }, + { + id: "mask-01", category: "Masks", name: "Renewal Mask", price: "$48", rating: 4.7, + reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-with-creme-face_23-2147817006.jpg", imageAlt: "Renewal Mask - detoxifying treatment mask" + }, + { + id: "cleanser-01", category: "Cleansers", name: "Gentle Cleanser", price: "$35", rating: 4.6, + reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/skincare-spa-products-white-background_23-2148989970.jpg", imageAlt: "Gentle Cleanser - mild daily facial cleanser" + }, + { + id: "oil-01", category: "Oils", name: "Facial Oil Elixir", price: "$72", rating: 4.9, + reviewCount: "278", imageSrc: "http://img.b2bpic.net/free-photo/bottle-with-oil-white-background_23-2148989968.jpg", imageAlt: "Facial Oil Elixir - nourishing botanical oil blend" + }, + { + id: "treatment-01", category: "Treatments", name: "Night Recovery Cream", price: "$85", rating: 5, + reviewCount: "334", imageSrc: "http://img.b2bpic.net/free-photo/cream-jar-white-background_23-2148241838.jpg", imageAlt: "Night Recovery Cream - intensive overnight treatment" + } + ]; + + const filteredProducts = allProducts.filter(product => { + const matchesSearch = product.name.toLowerCase().includes(searchValue.toLowerCase()); + const matchesCategory = selectedCategory === "all" || product.category === selectedCategory; + const matchesRating = selectedRating === "all" || product.rating >= parseFloat(selectedRating); + return matchesSearch && matchesCategory && matchesRating; + }); + + return ( + + + +
+ +
+ + + + ); +} \ No newline at end of file diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index d45b6e6..a1b72e5 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -10,15 +10,15 @@ --accent: #ffffff; --background-accent: #ffffff; */ - --background: #fcf6ec; - --card: #f3ede2; - --foreground: #2e2521; - --primary-cta: #2e2521; + --background: #0a1929; + --card: #132f4c; + --foreground: #e3f2fd; + --primary-cta: #00bfff; --primary-cta-text: #fcf6ec; - --secondary-cta: #ffffff; + --secondary-cta: #1a2f4a; --secondary-cta-text: #2e2521; - --accent: #b2a28b; - --background-accent: #b2a28b; + --accent: #1e88e5; + --background-accent: #0288d1; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);