diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..93e278e --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,214 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; +import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard"; +import ProductCardFour from "@/components/sections/product/ProductCardFour"; +import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo"; +import FooterSimple from "@/components/sections/footer/FooterSimple"; +import { House, MessageSquareText, Settings, Sparkles, CircleDollarSign, ArrowLeftRight, Send, Package, ShoppingCart, BarChart3, TrendingUp } from "lucide-react"; + +export default function AdminDashboard() { + return ( + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 393185a..1c13f14 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,9 +10,68 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia import SocialProofOne from "@/components/sections/socialProof/SocialProofOne"; import ContactCenter from "@/components/sections/contact/ContactCenter"; import FooterSimple from "@/components/sections/footer/FooterSimple"; -import { Mail, Sparkles } from "lucide-react"; +import { Mail, Sparkles, Palette, Maximize2 } from "lucide-react"; +import { useState } from "react"; + +interface ProductCustomization { + id: string; + colors: string[]; + sizes: string[]; +} export default function LandingPage() { + const [selectedCustomizations, setSelectedCustomizations] = useState<{ + [key: string]: { color: string; size: string }; + }>({ + "1": { color: "Black", size: "Medium" }, + "2": { color: "Ivory", size: "One Size" }, + "3": { color: "Stainless Steel", size: "Standard" } + }); + + const productCustomizations: { [key: string]: ProductCustomization } = { + "1": { + id: "1", colors: ["Black", "Cognac", "Navy", "Taupe"], + sizes: ["Small", "Medium", "Large", "Extra Large"] + }, + "2": { + id: "2", colors: ["Ivory", "Charcoal", "Sage", "Burgundy", "Gold"], + sizes: ["One Size"] + }, + "3": { + id: "3", colors: ["Stainless Steel", "Rose Gold", "White Gold"], + sizes: ["Standard"] + } + }; + + const handleColorChange = (productId: string, color: string) => { + setSelectedCustomizations((prev) => ({ + ...prev, + [productId]: { ...prev[productId], color } + })); + }; + + const handleSizeChange = (productId: string, size: string) => { + setSelectedCustomizations((prev) => ({ + ...prev, + [productId]: { ...prev[productId], size } + })); + }; + + const enhancedProducts = [ + { + id: "1", name: "Premium Leather Tote", price: "$285", variant: `${selectedCustomizations["1"].color} • ${selectedCustomizations["1"].size}`, + imageSrc: "http://img.b2bpic.net/free-photo/closeup-ornamental-plants-home-decor-female-hand-shop-window_169016-50350.jpg", imageAlt: "premium luxury product shot professional", isFavorited: false + }, + { + id: "2", name: "Elegant Silk Scarf", price: "$165", variant: `${selectedCustomizations["2"].color}`, + imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409245.jpg", imageAlt: "luxury retail product on display", isFavorited: false + }, + { + id: "3", name: "Luxury Timepiece", price: "$425", variant: `${selectedCustomizations["3"].color}`, + imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-pink-nail-polish_23-2149030370.jpg", imageAlt: "premium luxury store product display", isFavorited: false + } + ]; + return (
- +
+ + + {/* Customization UI Section */} +
+
+
+ +

Customize Your Selection

+
+ +
+ {/* Product 1 - Tote Bag */} +
+

Premium Leather Tote

+ +
+ +
+ {productCustomizations["1"].colors.map((color) => ( + + ))} +
+
+ +
+ +
+ {productCustomizations["1"].sizes.map((size) => ( + + ))} +
+
+
+ + {/* Product 2 - Scarf */} +
+

Elegant Silk Scarf

+ +
+ +
+ {productCustomizations["2"].colors.map((color) => ( + + ))} +
+
+ +
+ One Size Fits All +
+
+ + {/* Product 3 - Timepiece */} +
+

Luxury Timepiece

+ +
+ +
+ {productCustomizations["3"].colors.map((color) => ( + + ))} +
+
+ +
+ Standard Size +
+
+
+ + {/* Responsive Notice */} +
+

Customization options are displayed responsively. On mobile devices, scroll horizontally to view all options.

+
+
+
+
@@ -194,4 +373,4 @@ export default function LandingPage() {
); -} +} \ No newline at end of file diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index 8cff76c..3aa2aac 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -10,15 +10,15 @@ --accent: #ffffff; --background-accent: #ffffff; */ - --background: #efebe5; - --card: #f7f2ea; + --background: #ffffff; + --card: #f5f5f5; --foreground: #000000; --primary-cta: #000000; --primary-cta-text: #efebe5; --secondary-cta: #ffffff; --secondary-cta-text: #000000; - --accent: #ffffff; - --background-accent: #e1b875; + --accent: #e0e0e0; + --background-accent: #d0d0d0; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);