Merge version_1 into main #2
@@ -3,10 +3,23 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Instagram, Twitter, TikTok, Youtube, Trash2, Plus, Minus } from "lucide-react";
|
||||
import { Instagram, Twitter, Youtube, Trash2, Plus, Minus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.68v13.67a2.4 2.4 0 1 1-2.4-2.4c.34 0 .67.03 1 .09V9.41a7.12 7.12 0 0 0-1-.08C5.89 9.33 2 13.46 2 18.13s3.88 8.81 8.74 8.81c4.65 0 8.6-3.36 8.6-7.53 0-.13 0-.26 0-.39a5.5 5.5 0 0 0-.56-1.78h.09c4.87 0 8.82-3.37 8.82-7.53 0-4.16-3.96-7.53-8.82-7.53z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function CartPage() {
|
||||
const navItems = [
|
||||
{ name: "Shop", id: "products" },
|
||||
@@ -18,23 +31,13 @@ export default function CartPage() {
|
||||
|
||||
const [cartItems, setCartItems] = useState([
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic Black Hoodie",
|
||||
price: 89.99,
|
||||
id: "1", name: "Classic Black Hoodie", price: 89.99,
|
||||
quantity: 2,
|
||||
size: "L",
|
||||
color: "Black",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg?_wi=3",
|
||||
},
|
||||
size: "L", color: "Black", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Vintage Denim Jacket",
|
||||
price: 129.99,
|
||||
id: "2", name: "Vintage Denim Jacket", price: 129.99,
|
||||
quantity: 1,
|
||||
size: "M",
|
||||
color: "Indigo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg?_wi=4",
|
||||
},
|
||||
size: "M", color: "Indigo", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg"},
|
||||
]);
|
||||
|
||||
const handleQuantityChange = (id: string, change: number) => {
|
||||
@@ -223,7 +226,7 @@ export default function CartPage() {
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
|
||||
{ icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
|
||||
]}
|
||||
/>
|
||||
|
||||
198
src/app/page.tsx
198
src/app/page.tsx
@@ -37,7 +37,7 @@ export default function HomePage() {
|
||||
const socialLinks = [
|
||||
{ icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
|
||||
{ icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
|
||||
];
|
||||
|
||||
@@ -73,25 +73,15 @@ export default function HomePage() {
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-electric-scooter_23-2149356776.jpg?_wi=1",
|
||||
imageAlt: "Urban streetwear model wearing black jacket",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-electric-scooter_23-2149356776.jpg", imageAlt: "Urban streetwear model wearing black jacket"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-sale-template-flyer_23-2149201123.jpg",
|
||||
imageAlt: "Casual apparel collection flat lay",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-sale-template-flyer_23-2149201123.jpg", imageAlt: "Casual apparel collection flat lay"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-sitting-bench-central-part-old-city_1153-5758.jpg?_wi=1",
|
||||
imageAlt: "Model wearing premium hoodie and jeans",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-sitting-bench-central-part-old-city_1153-5758.jpg", imageAlt: "Model wearing premium hoodie and jeans"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-stylish-blond-smiling-woman-straw-red-hat-blouse-summer-fashion-outfit-with-smile-sensual_285396-8365.jpg?_wi=1",
|
||||
imageAlt: "Streetwear accessories and caps",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-stylish-blond-smiling-woman-straw-red-hat-blouse-summer-fashion-outfit-with-smile-sensual_285396-8365.jpg", imageAlt: "Streetwear accessories and caps"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neighborhood-lifestyle-friends_23-2149746741.jpg",
|
||||
imageAlt: "Dynamic street style photography",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neighborhood-lifestyle-friends_23-2149746741.jpg", imageAlt: "Dynamic street style photography"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "/shop" },
|
||||
@@ -111,47 +101,17 @@ export default function HomePage() {
|
||||
tagIcon={TrendingUp}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic Black Hoodie",
|
||||
price: "$89.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg?_wi=1",
|
||||
imageAlt: "Classic black oversized hoodie",
|
||||
},
|
||||
id: "1", name: "Classic Black Hoodie", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg", imageAlt: "Classic black oversized hoodie"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Vintage Denim Jacket",
|
||||
price: "$129.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg?_wi=1",
|
||||
imageAlt: "Vintage style denim jacket",
|
||||
},
|
||||
id: "2", name: "Vintage Denim Jacket", price: "$129.99", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg", imageAlt: "Vintage style denim jacket"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Cargo Pants - Khaki",
|
||||
price: "$79.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg?_wi=1",
|
||||
imageAlt: "Multi-pocket cargo pants in khaki",
|
||||
},
|
||||
id: "3", name: "Cargo Pants - Khaki", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg", imageAlt: "Multi-pocket cargo pants in khaki"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Oversized T-Shirt",
|
||||
price: "$49.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-boy-stylish-clothes-posing_23-2149085228.jpg?_wi=1",
|
||||
imageAlt: "Oversized premium cotton t-shirt",
|
||||
},
|
||||
id: "4", name: "Oversized T-Shirt", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/teenager-boy-stylish-clothes-posing_23-2149085228.jpg", imageAlt: "Oversized premium cotton t-shirt"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Leather Baseball Cap",
|
||||
price: "$39.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-charming-woman-red-beret-with-red-lips-sitting-outdoor-terrace_291650-520.jpg?_wi=1",
|
||||
imageAlt: "Premium leather baseball cap",
|
||||
},
|
||||
id: "5", name: "Leather Baseball Cap", price: "$39.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-charming-woman-red-beret-with-red-lips-sitting-outdoor-terrace_291650-520.jpg", imageAlt: "Premium leather baseball cap"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Track Pants - Forest",
|
||||
price: "$69.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-female-athlete-stretching-her-leg-steps_23-2147905354.jpg?_wi=1",
|
||||
imageAlt: "Comfortable track pants forest green",
|
||||
},
|
||||
id: "6", name: "Track Pants - Forest", price: "$69.99", imageSrc: "http://img.b2bpic.net/free-photo/two-female-athlete-stretching-her-leg-steps_23-2147905354.jpg", imageAlt: "Comfortable track pants forest green"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -169,33 +129,17 @@ export default function HomePage() {
|
||||
tag="Premium Quality"
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Premium Materials & Craftsmanship",
|
||||
tags: ["Quality", "Durability"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-owner-folding-sweat-shirt_23-2148175678.jpg?_wi=1",
|
||||
imageAlt: "Premium fabric and construction details",
|
||||
},
|
||||
id: "1", title: "Premium Materials & Craftsmanship", tags: ["Quality", "Durability"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-owner-folding-sweat-shirt_23-2148175678.jpg", imageAlt: "Premium fabric and construction details"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Authentic Streetwear Design",
|
||||
tags: ["Original", "Trend-Setting"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-fashion-designers-working-atelier-with-laptop_23-2148846761.jpg?_wi=1",
|
||||
imageAlt: "Unique streetwear design inspiration",
|
||||
},
|
||||
id: "2", title: "Authentic Streetwear Design", tags: ["Original", "Trend-Setting"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-fashion-designers-working-atelier-with-laptop_23-2148846761.jpg", imageAlt: "Unique streetwear design inspiration"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Perfect Fit & Sizing",
|
||||
tags: ["Comfort", "Expert Fit"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924132.jpg?_wi=1",
|
||||
imageAlt: "Model showing perfect garment fit",
|
||||
},
|
||||
id: "3", title: "Perfect Fit & Sizing", tags: ["Comfort", "Expert Fit"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924132.jpg", imageAlt: "Model showing perfect garment fit"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Fast & Reliable Shipping",
|
||||
tags: ["Delivery", "Tracking"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-female-courier-blue-uniform-holding-food-delivery-box-white-card-pink-desk-service-uniform-company-worker_140725-36129.jpg",
|
||||
imageAlt: "Packaged orders ready for delivery",
|
||||
},
|
||||
id: "4", title: "Fast & Reliable Shipping", tags: ["Delivery", "Tracking"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-female-courier-blue-uniform-holding-food-delivery-box-white-card-pink-desk-service-uniform-company-worker_140725-36129.jpg", imageAlt: "Packaged orders ready for delivery"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -212,65 +156,17 @@ export default function HomePage() {
|
||||
tag="Customer Reviews"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Marcus Johnson, Urban Fashion Enthusiast",
|
||||
date: "Date: 15 January 2025",
|
||||
title: "Best Quality Streetwear I've Found",
|
||||
quote: "The attention to detail is incredible. Every piece feels premium and the fit is perfect. I've been ordering from Umbra for months and haven't been disappointed once. This is the real deal for street style.",
|
||||
tag: "Premium Member",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-handsome-corporate-man_23-2148336855.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432374.jpg?_wi=1",
|
||||
},
|
||||
id: "1", name: "Marcus Johnson, Urban Fashion Enthusiast", date: "Date: 15 January 2025", title: "Best Quality Streetwear I've Found", quote: "The attention to detail is incredible. Every piece feels premium and the fit is perfect. I've been ordering from Umbra for months and haven't been disappointed once. This is the real deal for street style.", tag: "Premium Member", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-handsome-corporate-man_23-2148336855.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432374.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sofia Chen, Streetwear Collector",
|
||||
date: "Date: 12 January 2025",
|
||||
title: "Authentic Style, Authentic Quality",
|
||||
quote: "As someone who's been in the streetwear game for years, I can tell when a brand is genuine. Umbra gets it. The designs are original, the materials are top-notch, and the customer service is exceptional.",
|
||||
tag: "VIP Customer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-length-view-laughing-woman-trench-coat_197531-19713.jpg?_wi=1",
|
||||
},
|
||||
id: "2", name: "Sofia Chen, Streetwear Collector", date: "Date: 12 January 2025", title: "Authentic Style, Authentic Quality", quote: "As someone who's been in the streetwear game for years, I can tell when a brand is genuine. Umbra gets it. The designs are original, the materials are top-notch, and the customer service is exceptional.", tag: "VIP Customer", avatarSrc: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg", imageSrc: "http://img.b2bpic.net/free-photo/full-length-view-laughing-woman-trench-coat_197531-19713.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Alex Rivera, Fashion Designer",
|
||||
date: "Date: 08 January 2025",
|
||||
title: "Setting the Bar for Streetwear",
|
||||
quote: "From a design perspective, Umbra is doing everything right. The color palettes are bold yet wearable, and the silhouettes are timeless. Their commitment to quality while keeping prices reasonable is impressive.",
|
||||
tag: "Style Influencer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-handsome-corporate-man_23-2148336855.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-editing-her-product-photos_23-2149060884.jpg?_wi=1",
|
||||
},
|
||||
id: "3", name: "Alex Rivera, Fashion Designer", date: "Date: 08 January 2025", title: "Setting the Bar for Streetwear", quote: "From a design perspective, Umbra is doing everything right. The color palettes are bold yet wearable, and the silhouettes are timeless. Their commitment to quality while keeping prices reasonable is impressive.", tag: "Style Influencer", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-handsome-corporate-man_23-2148336855.jpg", imageSrc: "http://img.b2bpic.net/free-photo/woman-editing-her-product-photos_23-2149060884.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "James Mitchell, Casual Dresser",
|
||||
date: "Date: 05 January 2025",
|
||||
title: "Perfect Everyday Wear",
|
||||
quote: "I'm not into trends, just quality basics. Umbra has become my go-to for reliable, comfortable everyday clothes. Their hoodies and tees have become staples in my wardrobe.",
|
||||
tag: "Regular Customer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-sitting-against-wall-wearing-white-sweater-jeans-knitted-hat-scarf_285396-9224.jpg",
|
||||
},
|
||||
id: "4", name: "James Mitchell, Casual Dresser", date: "Date: 05 January 2025", title: "Perfect Everyday Wear", quote: "I'm not into trends, just quality basics. Umbra has become my go-to for reliable, comfortable everyday clothes. Their hoodies and tees have become staples in my wardrobe.", tag: "Regular Customer", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-sitting-against-wall-wearing-white-sweater-jeans-knitted-hat-scarf_285396-9224.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Priya Patel, Urban Explorer",
|
||||
date: "Date: 02 January 2025",
|
||||
title: "Durability That Lasts",
|
||||
quote: "I wear my Umbra pieces constantly - hiking, traveling, city exploring. They've proven to be incredibly durable and still look fresh months later. Great investment pieces.",
|
||||
tag: "Adventure Seeker",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-backpack_23-2149884276.jpg",
|
||||
},
|
||||
id: "5", name: "Priya Patel, Urban Explorer", date: "Date: 02 January 2025", title: "Durability That Lasts", quote: "I wear my Umbra pieces constantly - hiking, traveling, city exploring. They've proven to be incredibly durable and still look fresh months later. Great investment pieces.", tag: "Adventure Seeker", avatarSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-backpack_23-2149884276.jpg"},
|
||||
{
|
||||
id: "6",
|
||||
name: "David Kim, Minimalist Fashion",
|
||||
date: "Date: 30 December 2024",
|
||||
title: "Less is More - Perfectly Executed",
|
||||
quote: "Umbra understands minimalist streetwear. No unnecessary details, just clean designs in quality materials. Their monochrome collection has been a game-changer for my personal style.",
|
||||
tag: "Style Curator",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-posing-indoors_23-2151038493.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cool-brunet-bearded-man-sunglasses-beige-shorts-orange-jacket-leans-white-wall-outside-crosses-arms_197531-28761.jpg",
|
||||
},
|
||||
id: "6", name: "David Kim, Minimalist Fashion", date: "Date: 30 December 2024", title: "Less is More - Perfectly Executed", quote: "Umbra understands minimalist streetwear. No unnecessary details, just clean designs in quality materials. Their monochrome collection has been a game-changer for my personal style.", tag: "Style Curator", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-posing-indoors_23-2151038493.jpg", imageSrc: "http://img.b2bpic.net/free-photo/cool-brunet-bearded-man-sunglasses-beige-shorts-orange-jacket-leans-white-wall-outside-crosses-arms_197531-28761.jpg"},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -285,41 +181,23 @@ export default function HomePage() {
|
||||
textPosition="left"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I find my correct size?",
|
||||
content:
|
||||
"Use our size chart available on every product page. We recommend comparing the measurements with a garment you already own. Sizes typically run true to size, but refer to individual product descriptions for any variations.",
|
||||
},
|
||||
id: "1", title: "How do I find my correct size?", content:
|
||||
"Use our size chart available on every product page. We recommend comparing the measurements with a garment you already own. Sizes typically run true to size, but refer to individual product descriptions for any variations."},
|
||||
{
|
||||
id: "2",
|
||||
title: "What's the difference between regular and oversized fit?",
|
||||
content:
|
||||
"Regular fit follows standard proportions for comfortable everyday wear. Oversized fit is intentionally larger for a relaxed, streetwear aesthetic - typically 2-3 inches wider at the chest and longer in length.",
|
||||
},
|
||||
id: "2", title: "What's the difference between regular and oversized fit?", content:
|
||||
"Regular fit follows standard proportions for comfortable everyday wear. Oversized fit is intentionally larger for a relaxed, streetwear aesthetic - typically 2-3 inches wider at the chest and longer in length."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I exchange items for a different size?",
|
||||
content:
|
||||
"Yes, we offer free exchanges within 30 days of purchase. Simply contact our customer service team with your order number, and we'll arrange a quick exchange at no cost.",
|
||||
},
|
||||
id: "3", title: "Can I exchange items for a different size?", content:
|
||||
"Yes, we offer free exchanges within 30 days of purchase. Simply contact our customer service team with your order number, and we'll arrange a quick exchange at no cost."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How should I care for my Umbra pieces?",
|
||||
content:
|
||||
"Most items should be machine washed in cold water on a gentle cycle. Turn items inside out to preserve color and design. Air dry when possible to extend garment lifespan. See individual care labels for specific instructions.",
|
||||
},
|
||||
id: "4", title: "How should I care for my Umbra pieces?", content:
|
||||
"Most items should be machine washed in cold water on a gentle cycle. Turn items inside out to preserve color and design. Air dry when possible to extend garment lifespan. See individual care labels for specific instructions."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Do you offer international shipping?",
|
||||
content:
|
||||
"Yes, we ship to over 50 countries worldwide. Shipping rates and delivery times vary by location. You can calculate shipping costs at checkout before completing your purchase.",
|
||||
},
|
||||
id: "5", title: "Do you offer international shipping?", content:
|
||||
"Yes, we ship to over 50 countries worldwide. Shipping rates and delivery times vary by location. You can calculate shipping costs at checkout before completing your purchase."},
|
||||
{
|
||||
id: "6",
|
||||
title: "What's your return policy?",
|
||||
content:
|
||||
"We offer 30-day returns on all unused items with original packaging. Simply initiate a return through your account, and we'll provide a prepaid shipping label. Refunds are processed within 5-7 business days.",
|
||||
},
|
||||
id: "6", title: "What's your return policy?", content:
|
||||
"We offer 30-day returns on all unused items with original packaging. Simply initiate a return through your account, and we'll provide a prepaid shipping label. Refunds are processed within 5-7 business days."},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
|
||||
@@ -2,14 +2,24 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Instagram, Twitter, TikTok, Youtube } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Instagram, Twitter, Youtube, ShoppingCart, Heart } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.68v13.67a2.4 2.4 0 1 1-2.4-2.4c.34 0 .67.03 1 .09V9.41a7.12 7.12 0 0 0-1-.08C5.89 9.33 2 13.46 2 18.13s3.88 8.81 8.74 8.81c4.65 0 8.6-3.36 8.6-7.53 0-.13 0-.26 0-.39a5.5 5.5 0 0 0-.56-1.78h.09c4.87 0 8.82-3.37 8.82-7.53 0-4.16-3.96-7.53-8.82-7.53z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function ProductPage() {
|
||||
const navItems = [
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Collections", id: "collections" },
|
||||
@@ -18,86 +28,9 @@ export default function ProductDetailPage() {
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const relatedProducts = [
|
||||
{
|
||||
id: "2",
|
||||
name: "Vintage Denim Jacket",
|
||||
price: "$129.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg?_wi=3",
|
||||
imageAlt: "Vintage style denim jacket",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Cargo Pants - Khaki",
|
||||
price: "$79.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg?_wi=3",
|
||||
imageAlt: "Multi-pocket cargo pants in khaki",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Oversized T-Shirt",
|
||||
price: "$49.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-boy-stylish-clothes-posing_23-2149085228.jpg?_wi=3",
|
||||
imageAlt: "Oversized premium cotton t-shirt",
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Premium Materials & Craftsmanship",
|
||||
tags: ["Quality", "Durability"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-owner-folding-sweat-shirt_23-2148175678.jpg?_wi=2",
|
||||
imageAlt: "Premium fabric and construction details",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Authentic Streetwear Design",
|
||||
tags: ["Original", "Trend-Setting"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-fashion-designers-working-atelier-with-laptop_23-2148846761.jpg?_wi=2",
|
||||
imageAlt: "Unique streetwear design inspiration",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Perfect Fit & Sizing",
|
||||
tags: ["Comfort", "Expert Fit"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924132.jpg?_wi=2",
|
||||
imageAlt: "Model showing perfect garment fit",
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Marcus Johnson, Urban Fashion Enthusiast",
|
||||
date: "Date: 15 January 2025",
|
||||
title: "Best Quality Streetwear I've Found",
|
||||
quote: "The attention to detail is incredible. Every piece feels premium and the fit is perfect. I've been ordering from Umbra for months and haven't been disappointed once. This is the real deal for street style.",
|
||||
tag: "Premium Member",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-handsome-corporate-man_23-2148336855.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432374.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sofia Chen, Streetwear Collector",
|
||||
date: "Date: 12 January 2025",
|
||||
title: "Authentic Style, Authentic Quality",
|
||||
quote: "As someone who's been in the streetwear game for years, I can tell when a brand is genuine. Umbra gets it. The designs are original, the materials are top-notch, and the customer service is exceptional.",
|
||||
tag: "VIP Customer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-length-view-laughing-woman-trench-coat_197531-19713.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Alex Rivera, Fashion Designer",
|
||||
date: "Date: 08 January 2025",
|
||||
title: "Setting the Bar for Streetwear",
|
||||
quote: "From a design perspective, Umbra is doing everything right. The color palettes are bold yet wearable, and the silhouettes are timeless. Their commitment to quality while keeping prices reasonable is impressive.",
|
||||
tag: "Style Influencer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-handsome-corporate-man_23-2148336855.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-editing-her-product-photos_23-2149060884.jpg?_wi=2",
|
||||
},
|
||||
];
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
const [selectedSize, setSelectedSize] = useState("M");
|
||||
const [selectedColor, setSelectedColor] = useState("Black");
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -120,40 +53,61 @@ export default function ProductDetailPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-detail" data-section="product-detail" className="mx-auto px-4 md:px-6">
|
||||
<div id="product" data-section="product" className="mx-auto px-4 md:px-6">
|
||||
<div className="py-20">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Link href="/" className="text-accent hover:text-background-accent mb-8 inline-block">
|
||||
← Back to Home
|
||||
</Link>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-20">
|
||||
<div>
|
||||
<div className="aspect-square bg-card rounded-soft overflow-hidden">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
{/* Product Image */}
|
||||
<div className="relative">
|
||||
<div className="bg-card/50 border border-accent/20 rounded-soft overflow-hidden aspect-square">
|
||||
<img
|
||||
src="http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg"
|
||||
alt="Classic Black Hoodie"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className="absolute top-4 right-4 p-3 bg-card/80 backdrop-blur rounded-soft hover:bg-background-accent transition-colors"
|
||||
>
|
||||
<Heart
|
||||
size={24}
|
||||
className={isFavorited ? "fill-background-accent text-background-accent" : "text-foreground"}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-start">
|
||||
<span className="text-accent text-sm font-semibold mb-4">Premium Streetwear</span>
|
||||
<h1 className="text-4xl font-light mb-4 text-foreground">Classic Black Hoodie</h1>
|
||||
<p className="text-2xl font-semibold text-foreground mb-6">$89.99</p>
|
||||
|
||||
<p className="text-foreground/80 mb-8 text-lg leading-relaxed">
|
||||
Experience ultimate comfort with our signature Classic Black Hoodie. Crafted from premium heavyweight cotton blend, this piece combines authentic streetwear aesthetics with everyday wearability. Perfect for layering or wearing solo.
|
||||
</p>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col justify-start">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-foreground font-semibold mb-4">Size</h3>
|
||||
<div className="flex gap-3">
|
||||
<p className="text-accent text-sm font-semibold mb-2">UMBRA COLLECTION</p>
|
||||
<h1 className="text-4xl font-light text-foreground mb-4">Classic Black Hoodie</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-3xl font-bold text-background-accent">$89.99</span>
|
||||
<span className="text-foreground/50 line-through">$129.99</span>
|
||||
<span className="text-background-accent text-sm font-semibold">30% OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 pb-8 border-b border-accent/20">
|
||||
<p className="text-foreground/70 leading-relaxed">
|
||||
Experience ultimate comfort and style with our Classic Black Hoodie. Crafted from premium materials, this versatile piece is perfect for urban exploration. Features a relaxed fit, warm lining, and timeless design that works with any streetwear ensemble.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Size Selection */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-foreground font-semibold mb-4">Size</label>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{["XS", "S", "M", "L", "XL", "XXL"].map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
className="px-4 py-2 border border-accent/30 rounded-soft hover:bg-accent hover:text-primary-cta-text transition-colors"
|
||||
onClick={() => setSelectedSize(size)}
|
||||
className={`py-3 px-2 rounded-soft border-2 font-semibold text-sm transition-all ${
|
||||
selectedSize === size
|
||||
? "border-background-accent bg-background-accent text-primary-cta-text"
|
||||
: "border-accent/30 text-foreground hover:border-accent/50"
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
@@ -161,39 +115,51 @@ export default function ProductDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Selection */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-foreground font-semibold mb-4">Color</h3>
|
||||
<div className="flex gap-3">
|
||||
<button className="w-10 h-10 rounded-full bg-black border-2 border-background-accent"></button>
|
||||
<button className="w-10 h-10 rounded-full bg-gray-700 border-2 border-accent/30 hover:border-background-accent"></button>
|
||||
<button className="w-10 h-10 rounded-full bg-gray-900 border-2 border-accent/30 hover:border-background-accent"></button>
|
||||
<label className="block text-foreground font-semibold mb-4">Color</label>
|
||||
<div className="flex gap-4">
|
||||
{["Black", "Grey", "Navy"].map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => setSelectedColor(color)}
|
||||
className={`px-6 py-3 rounded-soft border-2 font-semibold transition-all ${
|
||||
selectedColor === color
|
||||
? "border-background-accent bg-background-accent text-primary-cta-text"
|
||||
: "border-accent/30 text-foreground hover:border-accent/50"
|
||||
}`}
|
||||
>
|
||||
{color}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full px-6 py-3 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta hover:text-primary-cta-text transition-colors mb-4">
|
||||
Add to Cart
|
||||
</button>
|
||||
|
||||
<button className="w-full px-6 py-3 border border-accent/50 text-foreground font-semibold rounded-soft hover:bg-accent/10 transition-colors">
|
||||
View Size Guide
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Add to Cart */}
|
||||
<div className="flex gap-4">
|
||||
<button className="flex-1 px-8 py-4 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta transition-colors flex items-center justify-center gap-2">
|
||||
<ShoppingCart size={20} />
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="px-8 py-4 border border-accent/50 text-foreground font-semibold rounded-soft hover:bg-accent/10 transition-colors">
|
||||
Buy Now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-20">
|
||||
<h2 className="text-2xl font-light mb-8 text-foreground">Product Details</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-card/50 p-6 rounded-soft border border-accent/20">
|
||||
<h4 className="text-foreground font-semibold mb-2">Material</h4>
|
||||
<p className="text-foreground/70">100% Premium Cotton Blend with reinforced stitching</p>
|
||||
</div>
|
||||
<div className="bg-card/50 p-6 rounded-soft border border-accent/20">
|
||||
<h4 className="text-foreground font-semibold mb-2">Care</h4>
|
||||
<p className="text-foreground/70">Machine wash cold. Air dry recommended. Inspect labels carefully.</p>
|
||||
</div>
|
||||
<div className="bg-card/50 p-6 rounded-soft border border-accent/20">
|
||||
<h4 className="text-foreground font-semibold mb-2">Fit</h4>
|
||||
<p className="text-foreground/70">Oversized relaxed fit. True to size or size down for fitted wear.</p>
|
||||
{/* Product Info */}
|
||||
<div className="mt-12 pt-8 border-t border-accent/20 space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground/70">SKU:</span>
|
||||
<span className="text-foreground font-semibold">UMBRA-BH-001</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground/70">Material:</span>
|
||||
<span className="text-foreground font-semibold">100% Premium Cotton</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground/70">Care:</span>
|
||||
<span className="text-foreground font-semibold">Machine wash cold</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -201,40 +167,6 @@ export default function ProductDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
products={relatedProducts}
|
||||
title="Related Products"
|
||||
description="Explore similar items from our collection"
|
||||
tag="Best Sellers"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
features={features}
|
||||
animationType="slide-up"
|
||||
title="Why Choose Umbra"
|
||||
description="Premium streetwear engineered for authenticity, comfort, and style. Discover what sets us apart."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
testimonials={testimonials}
|
||||
title="What Our Customers Love"
|
||||
description="Real feedback from real customers. See why Umbra is the go-to for authentic streetwear."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Umbra"
|
||||
@@ -242,7 +174,7 @@ export default function ProductDetailPage() {
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
|
||||
{ icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function ShopPage() {
|
||||
const socialLinks = [
|
||||
{ icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
|
||||
{ icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
|
||||
{ icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
|
||||
];
|
||||
|
||||
@@ -69,68 +69,23 @@ export default function ShopPage() {
|
||||
tagIcon={TrendingUp}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic Black Hoodie",
|
||||
price: "$89.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg?_wi=2",
|
||||
imageAlt: "Classic black oversized hoodie",
|
||||
},
|
||||
id: "1", name: "Classic Black Hoodie", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg", imageAlt: "Classic black oversized hoodie"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Vintage Denim Jacket",
|
||||
price: "$129.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg?_wi=2",
|
||||
imageAlt: "Vintage style denim jacket",
|
||||
},
|
||||
id: "2", name: "Vintage Denim Jacket", price: "$129.99", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg", imageAlt: "Vintage style denim jacket"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Cargo Pants - Khaki",
|
||||
price: "$79.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg?_wi=2",
|
||||
imageAlt: "Multi-pocket cargo pants in khaki",
|
||||
},
|
||||
id: "3", name: "Cargo Pants - Khaki", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg", imageAlt: "Multi-pocket cargo pants in khaki"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Oversized T-Shirt",
|
||||
price: "$49.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-boy-stylish-clothes-posing_23-2149085228.jpg?_wi=2",
|
||||
imageAlt: "Oversized premium cotton t-shirt",
|
||||
},
|
||||
id: "4", name: "Oversized T-Shirt", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/teenager-boy-stylish-clothes-posing_23-2149085228.jpg", imageAlt: "Oversized premium cotton t-shirt"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Leather Baseball Cap",
|
||||
price: "$39.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-charming-woman-red-beret-with-red-lips-sitting-outdoor-terrace_291650-520.jpg?_wi=2",
|
||||
imageAlt: "Premium leather baseball cap",
|
||||
},
|
||||
id: "5", name: "Leather Baseball Cap", price: "$39.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-charming-woman-red-beret-with-red-lips-sitting-outdoor-terrace_291650-520.jpg", imageAlt: "Premium leather baseball cap"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Track Pants - Forest",
|
||||
price: "$69.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-female-athlete-stretching-her-leg-steps_23-2147905354.jpg?_wi=2",
|
||||
imageAlt: "Comfortable track pants forest green",
|
||||
},
|
||||
id: "6", name: "Track Pants - Forest", price: "$69.99", imageSrc: "http://img.b2bpic.net/free-photo/two-female-athlete-stretching-her-leg-steps_23-2147905354.jpg", imageAlt: "Comfortable track pants forest green"},
|
||||
{
|
||||
id: "7",
|
||||
name: "Premium Crew Neck Sweater",
|
||||
price: "$94.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-electric-scooter_23-2149356776.jpg?_wi=2",
|
||||
imageAlt: "Premium crew neck sweater in charcoal",
|
||||
},
|
||||
id: "7", name: "Premium Crew Neck Sweater", price: "$94.99", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-electric-scooter_23-2149356776.jpg", imageAlt: "Premium crew neck sweater in charcoal"},
|
||||
{
|
||||
id: "8",
|
||||
name: "Relaxed Fit Chinos",
|
||||
price: "$74.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-sitting-bench-central-part-old-city_1153-5758.jpg?_wi=2",
|
||||
imageAlt: "Relaxed fit chinos in natural tan",
|
||||
},
|
||||
id: "8", name: "Relaxed Fit Chinos", price: "$74.99", imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-sitting-bench-central-part-old-city_1153-5758.jpg", imageAlt: "Relaxed fit chinos in natural tan"},
|
||||
{
|
||||
id: "9",
|
||||
name: "Wool Beanie - Black",
|
||||
price: "$29.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-stylish-blond-smiling-woman-straw-red-hat-blouse-summer-fashion-outfit-with-smile-sensual_285396-8365.jpg?_wi=2",
|
||||
imageAlt: "Warm wool beanie in classic black",
|
||||
},
|
||||
id: "9", name: "Wool Beanie - Black", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-stylish-blond-smiling-woman-straw-red-hat-blouse-summer-fashion-outfit-with-smile-sensual_285396-8365.jpg", imageAlt: "Warm wool beanie in classic black"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -148,41 +103,23 @@ export default function ShopPage() {
|
||||
textPosition="left"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What payment methods do you accept?",
|
||||
content:
|
||||
"We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Apple Pay. All transactions are secure and encrypted.",
|
||||
},
|
||||
id: "1", title: "What payment methods do you accept?", content:
|
||||
"We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Apple Pay. All transactions are secure and encrypted."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long does shipping take?",
|
||||
content:
|
||||
"Standard shipping typically takes 5-7 business days within the US. Expedited shipping (2-3 business days) and international shipping are also available. Orders are processed within 24 hours.",
|
||||
},
|
||||
id: "2", title: "How long does shipping take?", content:
|
||||
"Standard shipping typically takes 5-7 business days within the US. Expedited shipping (2-3 business days) and international shipping are also available. Orders are processed within 24 hours."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I track my order?",
|
||||
content:
|
||||
"Yes, once your order ships, you'll receive a tracking number via email. You can monitor your package status in real-time through the carrier's website.",
|
||||
},
|
||||
id: "3", title: "Can I track my order?", content:
|
||||
"Yes, once your order ships, you'll receive a tracking number via email. You can monitor your package status in real-time through the carrier's website."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Do you offer gift wrapping?",
|
||||
content:
|
||||
"We offer premium gift wrapping services for an additional $5. Select this option at checkout, and we'll beautifully wrap your order with custom Umbra branding.",
|
||||
},
|
||||
id: "4", title: "Do you offer gift wrapping?", content:
|
||||
"We offer premium gift wrapping services for an additional $5. Select this option at checkout, and we'll beautifully wrap your order with custom Umbra branding."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Can I modify or cancel my order?",
|
||||
content:
|
||||
"If your order hasn't shipped yet, we can modify or cancel it. Contact our support team immediately with your order number, and we'll assist you.",
|
||||
},
|
||||
id: "5", title: "Can I modify or cancel my order?", content:
|
||||
"If your order hasn't shipped yet, we can modify or cancel it. Contact our support team immediately with your order number, and we'll assist you."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Do you offer bulk or wholesale orders?",
|
||||
content:
|
||||
"Yes, we work with retailers and corporate clients. Contact our wholesale team at wholesale@umbra.com for pricing and terms.",
|
||||
},
|
||||
id: "6", title: "Do you offer bulk or wholesale orders?", content:
|
||||
"Yes, we work with retailers and corporate clients. Contact our wholesale team at wholesale@umbra.com for pricing and terms."},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
|
||||
@@ -1,51 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fill?: string;
|
||||
fontWeight?: string | number;
|
||||
fontFamily?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = '',
|
||||
fontSize = 32,
|
||||
fill = 'currentColor',
|
||||
fontWeight = 'bold',
|
||||
fontFamily = 'system-ui, -apple-system, sans-serif',
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${text.length * (fontSize * 0.6)} ${fontSize * 1.5}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
y={fontSize}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
fontFamily={fontFamily}
|
||||
fill={fill}
|
||||
dominantBaseline="auto"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user