Merge version_1 into main #2
281
src/app/page.tsx
281
src/app/page.tsx
@@ -70,52 +70,32 @@ export default function HomePage() {
|
||||
tag="New Collections"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "circleGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-indians-mans-customer-buyer-mobile-phone-making-selfie-by-monopod-stick-south-asian-peoples-technologies-concept-cellphone-shop_627829-1266.jpg?_wi=1",
|
||||
imageAlt: "Premium electronics collection",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-indians-mans-customer-buyer-mobile-phone-making-selfie-by-monopod-stick-south-asian-peoples-technologies-concept-cellphone-shop_627829-1266.jpg", imageAlt: "Premium electronics collection"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-siblings-outdoors-brothers-day-celebration_23-2150266830.jpg?_wi=1",
|
||||
imageAlt: "Latest fashion styles",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-siblings-outdoors-brothers-day-celebration_23-2150266830.jpg", imageAlt: "Latest fashion styles"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aromatic-candles-wooden-shelf_181624-23343.jpg?_wi=1",
|
||||
imageAlt: "Home essentials showcase",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aromatic-candles-wooden-shelf_181624-23343.jpg", imageAlt: "Home essentials showcase"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-beauty-products-different-recipients_23-2148761429.jpg?_wi=1",
|
||||
imageAlt: "Beauty and wellness products",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-beauty-products-different-recipients_23-2148761429.jpg", imageAlt: "Beauty and wellness products"},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-beauty-products-different-recipients_23-2148761429.jpg?_wi=2",
|
||||
imageAlt: "Skincare essentials",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-beauty-products-different-recipients_23-2148761429.jpg", imageAlt: "Skincare essentials"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-flat-lay_23-2148837355.jpg",
|
||||
imageAlt: "Trendy accessories",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-flat-lay_23-2148837355.jpg", imageAlt: "Trendy accessories"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-indians-mans-customer-buyer-mobile-phone-making-selfie-by-monopod-stick-south-asian-peoples-technologies-concept-cellphone-shop_627829-1266.jpg?_wi=2",
|
||||
imageAlt: "Tech gadgets",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-indians-mans-customer-buyer-mobile-phone-making-selfie-by-monopod-stick-south-asian-peoples-technologies-concept-cellphone-shop_627829-1266.jpg", imageAlt: "Tech gadgets"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aromatic-candles-wooden-shelf_181624-23343.jpg?_wi=2",
|
||||
imageAlt: "Home decor items",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aromatic-candles-wooden-shelf_181624-23343.jpg", imageAlt: "Home decor items"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "/products",
|
||||
},
|
||||
text: "Shop Now", href: "/products"},
|
||||
{
|
||||
text: "View Best Sellers",
|
||||
href: "#products",
|
||||
},
|
||||
text: "View Best Sellers", href: "#products"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
@@ -135,34 +115,19 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Electronics",
|
||||
description: "Latest tech gadgets and devices for every lifestyle",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Smartphone,
|
||||
title: "Electronics", description: "Latest tech gadgets and devices for every lifestyle", bentoComponent: "reveal-icon", icon: Smartphone,
|
||||
},
|
||||
{
|
||||
title: "Fashion",
|
||||
description: "Trendy apparel and styles for men and women",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: ShoppingBag,
|
||||
title: "Fashion", description: "Trendy apparel and styles for men and women", bentoComponent: "reveal-icon", icon: ShoppingBag,
|
||||
},
|
||||
{
|
||||
title: "Home Essentials",
|
||||
description: "Quality furnishings and decor for your space",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Home,
|
||||
title: "Home Essentials", description: "Quality furnishings and decor for your space", bentoComponent: "reveal-icon", icon: Home,
|
||||
},
|
||||
{
|
||||
title: "Beauty & Wellness",
|
||||
description: "Premium skincare and beauty products",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Sparkles,
|
||||
title: "Beauty & Wellness", description: "Premium skincare and beauty products", bentoComponent: "reveal-icon", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: "Accessories",
|
||||
description: "Fashion and lifestyle accessories",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Glasses,
|
||||
title: "Accessories", description: "Fashion and lifestyle accessories", bentoComponent: "reveal-icon", icon: Glasses,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -182,65 +147,23 @@ export default function HomePage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "TechPro",
|
||||
name: "Premium Wireless Headphones",
|
||||
price: "$149.99",
|
||||
rating: 5,
|
||||
reviewCount: "2.3k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072230.jpg?_wi=1",
|
||||
imageAlt: "Premium wireless headphones",
|
||||
},
|
||||
id: "1", brand: "TechPro", name: "Premium Wireless Headphones", price: "$149.99", rating: 5,
|
||||
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072230.jpg", imageAlt: "Premium wireless headphones"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "StyleWear",
|
||||
name: "Modern Casual Dress",
|
||||
price: "$79.99",
|
||||
rating: 5,
|
||||
reviewCount: "1.8k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-young-beautiful-smiling-blond-hipster-girls-trendy-summer-colorful-t-shirt-clothes_158538-1114.jpg?_wi=1",
|
||||
imageAlt: "Modern casual dress",
|
||||
},
|
||||
id: "2", brand: "StyleWear", name: "Modern Casual Dress", price: "$79.99", rating: 5,
|
||||
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/two-young-beautiful-smiling-blond-hipster-girls-trendy-summer-colorful-t-shirt-clothes_158538-1114.jpg", imageAlt: "Modern casual dress"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "HomeComfort",
|
||||
name: "Luxury Decorative Pillow",
|
||||
price: "$59.99",
|
||||
rating: 5,
|
||||
reviewCount: "945",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pillow-sofa_1339-5443.jpg?_wi=1",
|
||||
imageAlt: "Luxury decorative pillow",
|
||||
},
|
||||
id: "3", brand: "HomeComfort", name: "Luxury Decorative Pillow", price: "$59.99", rating: 5,
|
||||
reviewCount: "945", imageSrc: "http://img.b2bpic.net/free-photo/pillow-sofa_1339-5443.jpg", imageAlt: "Luxury decorative pillow"},
|
||||
{
|
||||
id: "4",
|
||||
brand: "BeautyLux",
|
||||
name: "Hydrating Facial Serum",
|
||||
price: "$89.99",
|
||||
rating: 5,
|
||||
reviewCount: "3.1k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-jojoba-oil-dropper_23-2149022364.jpg?_wi=1",
|
||||
imageAlt: "Hydrating facial serum",
|
||||
},
|
||||
id: "4", brand: "BeautyLux", name: "Hydrating Facial Serum", price: "$89.99", rating: 5,
|
||||
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/composition-jojoba-oil-dropper_23-2149022364.jpg", imageAlt: "Hydrating facial serum"},
|
||||
{
|
||||
id: "5",
|
||||
brand: "AccessoryCo",
|
||||
name: "Premium Leather Wallet",
|
||||
price: "$65.99",
|
||||
rating: 5,
|
||||
reviewCount: "1.2k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-82.jpg?_wi=1",
|
||||
imageAlt: "Premium leather wallet",
|
||||
},
|
||||
id: "5", brand: "AccessoryCo", name: "Premium Leather Wallet", price: "$65.99", rating: 5,
|
||||
reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-82.jpg", imageAlt: "Premium leather wallet"},
|
||||
{
|
||||
id: "6",
|
||||
brand: "TechPro",
|
||||
name: "Smart Watch Series",
|
||||
price: "$299.99",
|
||||
rating: 5,
|
||||
reviewCount: "4.5k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072230.jpg?_wi=2",
|
||||
imageAlt: "Smart watch series",
|
||||
},
|
||||
id: "6", brand: "TechPro", name: "Smart Watch Series", price: "$299.99", rating: 5,
|
||||
reviewCount: "4.5k", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072230.jpg", imageAlt: "Smart watch series"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -258,29 +181,17 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
icon: Users,
|
||||
title: "Happy Customers",
|
||||
value: "2.5M+",
|
||||
},
|
||||
id: "1", icon: Users,
|
||||
title: "Happy Customers", value: "2.5M+"},
|
||||
{
|
||||
id: "2",
|
||||
icon: Package,
|
||||
title: "Orders Shipped",
|
||||
value: "15M+",
|
||||
},
|
||||
id: "2", icon: Package,
|
||||
title: "Orders Shipped", value: "15M+"},
|
||||
{
|
||||
id: "3",
|
||||
icon: Star,
|
||||
title: "Avg Rating",
|
||||
value: "4.8/5",
|
||||
},
|
||||
id: "3", icon: Star,
|
||||
title: "Avg Rating", value: "4.8/5"},
|
||||
{
|
||||
id: "4",
|
||||
icon: Zap,
|
||||
title: "Fast Delivery",
|
||||
value: "2-3 Days",
|
||||
},
|
||||
id: "4", icon: Zap,
|
||||
title: "Fast Delivery", value: "2-3 Days"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -297,59 +208,17 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Outstanding Quality and Fast Shipping",
|
||||
quote: "I ordered multiple items and everything arrived in perfect condition. The quality exceeded my expectations and customer service was incredibly helpful when I had questions.",
|
||||
name: "Sarah Mitchell",
|
||||
role: "Verified Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-15972.jpg",
|
||||
imageAlt: "Sarah Mitchell",
|
||||
},
|
||||
id: "1", title: "Outstanding Quality and Fast Shipping", quote: "I ordered multiple items and everything arrived in perfect condition. The quality exceeded my expectations and customer service was incredibly helpful when I had questions.", name: "Sarah Mitchell", role: "Verified Buyer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-15972.jpg", imageAlt: "Sarah Mitchell"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Best Shopping Experience Ever",
|
||||
quote: "The variety of products is amazing, and the prices are competitive. I appreciate the detailed product descriptions and high-quality images that helped me make informed decisions.",
|
||||
name: "Marcus Johnson",
|
||||
role: "Verified Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-businessman-posing-with-arms-folded_74855-1985.jpg",
|
||||
imageAlt: "Marcus Johnson",
|
||||
},
|
||||
id: "2", title: "Best Shopping Experience Ever", quote: "The variety of products is amazing, and the prices are competitive. I appreciate the detailed product descriptions and high-quality images that helped me make informed decisions.", name: "Marcus Johnson", role: "Verified Buyer", imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-businessman-posing-with-arms-folded_74855-1985.jpg", imageAlt: "Marcus Johnson"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Reliable and Trustworthy",
|
||||
quote: "I've been a customer for over a year now and have never been disappointed. The site is easy to navigate, checkout is seamless, and returns are hassle-free.",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Verified Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
imageAlt: "Emily Rodriguez",
|
||||
},
|
||||
id: "3", title: "Reliable and Trustworthy", quote: "I've been a customer for over a year now and have never been disappointed. The site is easy to navigate, checkout is seamless, and returns are hassle-free.", name: "Emily Rodriguez", role: "Verified Buyer", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Emily Rodriguez"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Great Value for Money",
|
||||
quote: "I compared prices across multiple sites and ShopHub consistently offers the best deals. Combined with their excellent customer service, it's my go-to shopping destination.",
|
||||
name: "David Chen",
|
||||
role: "Verified Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",
|
||||
imageAlt: "David Chen",
|
||||
},
|
||||
id: "4", title: "Great Value for Money", quote: "I compared prices across multiple sites and ShopHub consistently offers the best deals. Combined with their excellent customer service, it's my go-to shopping destination.", name: "David Chen", role: "Verified Buyer", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", imageAlt: "David Chen"},
|
||||
{
|
||||
id: "5",
|
||||
title: "Mobile App is Game Changing",
|
||||
quote: "Their mobile app makes shopping on-the-go effortless. Push notifications about deals are helpful without being annoying, and the wishlist feature is fantastic.",
|
||||
name: "Jessica Williams",
|
||||
role: "Verified Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-diverse-women-different-ages_23-2151644631.jpg",
|
||||
imageAlt: "Jessica Williams",
|
||||
},
|
||||
id: "5", title: "Mobile App is Game Changing", quote: "Their mobile app makes shopping on-the-go effortless. Push notifications about deals are helpful without being annoying, and the wishlist feature is fantastic.", name: "Jessica Williams", role: "Verified Buyer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-diverse-women-different-ages_23-2151644631.jpg", imageAlt: "Jessica Williams"},
|
||||
{
|
||||
id: "6",
|
||||
title: "Exceptional Customer Support",
|
||||
quote: "Had an issue with an order and their support team resolved it within 24 hours. They really care about customer satisfaction and it shows in every interaction.",
|
||||
name: "Robert Taylor",
|
||||
role: "Verified Buyer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-portrait-white-shirt_158595-1477.jpg",
|
||||
imageAlt: "Robert Taylor",
|
||||
},
|
||||
id: "6", title: "Exceptional Customer Support", quote: "Had an issue with an order and their support team resolved it within 24 hours. They really care about customer satisfaction and it shows in every interaction.", name: "Robert Taylor", role: "Verified Buyer", imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-portrait-white-shirt_158595-1477.jpg", imageAlt: "Robert Taylor"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -362,17 +231,13 @@ export default function HomePage() {
|
||||
tag="Our Story"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/two-beautiful-women-with-bags-looking-each-other-with-smile-while-walking-clothing-store_146671-15849.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/two-beautiful-women-with-bags-looking-each-other-with-smile-while-walking-clothing-store_146671-15849.jpg"
|
||||
imageAlt="ShopHub warehouse and retail operations"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More About Us",
|
||||
href: "/about",
|
||||
},
|
||||
text: "Learn More About Us", href: "/about"},
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "Contact Us", href: "/contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -389,42 +254,24 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/support-agent-reviewing-feedback_482257-124716.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/support-agent-reviewing-feedback_482257-124716.jpg"
|
||||
imageAlt="Customer support team"
|
||||
mediaPosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day money-back guarantee on all products. If you're not satisfied, simply contact our customer service team with your order number for a hassle-free return or refund.",
|
||||
},
|
||||
id: "1", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee on all products. If you're not satisfied, simply contact our customer service team with your order number for a hassle-free return or refund."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long does shipping take?",
|
||||
content: "Standard shipping typically takes 5-7 business days. Express shipping (2-3 days) is available for an additional fee. Orders are processed within 24 hours of purchase.",
|
||||
},
|
||||
id: "2", title: "How long does shipping take?", content: "Standard shipping typically takes 5-7 business days. Express shipping (2-3 days) is available for an additional fee. Orders are processed within 24 hours of purchase."},
|
||||
{
|
||||
id: "3",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are secured with SSL encryption.",
|
||||
},
|
||||
id: "3", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are secured with SSL encryption."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we ship to over 150 countries worldwide. International shipping times vary by location (typically 10-21 business days). Customs duties may apply to international orders.",
|
||||
},
|
||||
id: "4", title: "Do you offer international shipping?", content: "Yes, we ship to over 150 countries worldwide. International shipping times vary by location (typically 10-21 business days). Customs duties may apply to international orders."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Is my personal information secure?",
|
||||
content: "Absolutely. We use industry-leading encryption and security protocols to protect your personal and payment information. We never share your data with third parties without consent.",
|
||||
},
|
||||
id: "5", title: "Is my personal information secure?", content: "Absolutely. We use industry-leading encryption and security protocols to protect your personal and payment information. We never share your data with third parties without consent."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Can I track my order?",
|
||||
content: "Yes, you'll receive a tracking number via email once your order ships. You can also check your order status anytime by logging into your account on our website or mobile app.",
|
||||
},
|
||||
id: "6", title: "Can I track my order?", content: "Yes, you'll receive a tracking number via email once your order ships. You can also check your order status anytime by logging into your account on our website or mobile app."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -439,13 +286,9 @@ export default function HomePage() {
|
||||
description="Join millions of satisfied customers enjoying quality products, competitive prices, and exceptional service. Sign up today to get exclusive deals and early access to new collections."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Shopping",
|
||||
href: "/products",
|
||||
},
|
||||
text: "Start Shopping", href: "/products"},
|
||||
{
|
||||
text: "Sign Up for Deals",
|
||||
href: "#",
|
||||
},
|
||||
text: "Sign Up for Deals", href: "#"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
@@ -461,24 +304,16 @@ export default function HomePage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com",
|
||||
ariaLabel: "ShopHub on Facebook",
|
||||
},
|
||||
href: "https://facebook.com", ariaLabel: "ShopHub on Facebook"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com",
|
||||
ariaLabel: "ShopHub on Twitter",
|
||||
},
|
||||
href: "https://twitter.com", ariaLabel: "ShopHub on Twitter"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com",
|
||||
ariaLabel: "ShopHub on Instagram",
|
||||
},
|
||||
href: "https://instagram.com", ariaLabel: "ShopHub on Instagram"},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com",
|
||||
ariaLabel: "ShopHub on LinkedIn",
|
||||
},
|
||||
href: "https://linkedin.com", ariaLabel: "ShopHub on LinkedIn"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,27 @@
|
||||
"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;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
export default function SvgTextLogo({ text, className = '' }: SvgTextLogoProps) {
|
||||
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 200 50"
|
||||
className={`h-8 w-auto ${className}`}
|
||||
aria-label={text}
|
||||
>
|
||||
<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"
|
||||
}}
|
||||
x="10"
|
||||
y="35"
|
||||
fontSize="32"
|
||||
fontWeight="bold"
|
||||
fill="currentColor"
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
}
|
||||
Reference in New Issue
Block a user