bender/6f9855e0-5d59-46c0-882e-65fb2cf777d4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 4 commits from version_1 into main 2026-03-12 13:50:39 +00:00
Conversation 0 Commits 4 Files Changed 4 +81 -243
4 changed files with 81 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/contact/page.tsx
View File

@@ -24,7 +24,7 @@ export default function ContactPage() {
borderRadius="rounded"
contentWidth="smallMedium"
sizing="mediumLargeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
@@ -49,7 +49,7 @@ export default function ContactPage() {
{ text: "Email Us", href: "mailto:hello@glowbeauty.com" },
{ text: "Back to Shop", href: "/shop" },
]}
background={{ variant: "aurora" }}
background={{ variant: "glowing-orb" }}
useInvertedBackground={false}
/>
</div>
@@ -60,37 +60,19 @@ export default function ContactPage() {
features={[
{
id: 1,
tag: "Email",
title: "Get in Touch via Email",
subtitle: "We respond within 24 hours",
description: "Send us your questions, custom order requests, or beauty recommendations. Our team at Glow Beauty is dedicated to providing personalized service and ensuring your satisfaction with every interaction.",
imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-bathrobe-with-towel-her-head-using-smartphone_1153-4078.jpg?_wi=2",
imageAlt: "Contact via email",
buttons: [
tag: "Email", title: "Get in Touch via Email", subtitle: "We respond within 24 hours", description: "Send us your questions, custom order requests, or beauty recommendations. Our team at Glow Beauty is dedicated to providing personalized service and ensuring your satisfaction with every interaction.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-bathrobe-with-towel-her-head-using-smartphone_1153-4078.jpg", imageAlt: "Contact via email", buttons: [
{ text: "Email", href: "mailto:hello@glowbeauty.com" }
]
},
{
id: 2,
tag: "Social",
title: "Follow Us on Social Media",
subtitle: "Join our beauty community",
description: "Connect with Glow Beauty on Instagram, Facebook, and TikTok for exclusive deals, beauty tips, product launches, and behind-the-scenes content. Our social community is where beauty lovers share inspiration and celebrate self-care together.",
imageSrc: "http://img.b2bpic.net/free-photo/good-morning-woman-drinks-coffe-lady-by-window_1157-44587.jpg?_wi=3",
imageAlt: "Social media connection",
buttons: [
tag: "Social", title: "Follow Us on Social Media", subtitle: "Join our beauty community", description: "Connect with Glow Beauty on Instagram, Facebook, and TikTok for exclusive deals, beauty tips, product launches, and behind-the-scenes content. Our social community is where beauty lovers share inspiration and celebrate self-care together.", imageSrc: "http://img.b2bpic.net/free-photo/good-morning-woman-drinks-coffe-lady-by-window_1157-44587.jpg", imageAlt: "Social media connection", buttons: [
{ text: "Visit Instagram", href: "https://instagram.com" }
]
},
{
id: 3,
tag: "Support",
title: "Customer Support",
subtitle: "We're here to help 24/7",
description: "Whether you need help with an order, have shipping questions, or want personalized beauty advice, our support team is here for you. We pride ourselves on fast response times and exceptional customer care.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hand-holding-lipstick-various-make-up-accessories-pink-background_23-2147970979.jpg",
imageAlt: "Customer support",
buttons: [
tag: "Support", title: "Customer Support", subtitle: "We're here to help 24/7", description: "Whether you need help with an order, have shipping questions, or want personalized beauty advice, our support team is here for you. We pride ourselves on fast response times and exceptional customer care.", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hand-holding-lipstick-various-make-up-accessories-pink-background_23-2147970979.jpg", imageAlt: "Customer support", buttons: [
{ text: "Contact Support", href: "mailto:hello@glowbeauty.com" }
]
},
@@ -111,21 +93,13 @@ export default function ContactPage() {
author="Nora El-Khoury, Customer"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-posing-white-background_231208-1813.jpg",
alt: "Customer testimonial 1",
},
src: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-posing-white-background_231208-1813.jpg", alt: "Customer testimonial 1"},
{
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
alt: "Customer testimonial 2",
},
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg", alt: "Customer testimonial 2"},
{
src: "http://img.b2bpic.net/free-photo/woman-casual-white-shirt-looking-thoughtful-aside-while-posing-outdoors-warm-sunny-day-selective-focus_544629-70.jpg",
alt: "Customer testimonial 3",
},
src: "http://img.b2bpic.net/free-photo/woman-casual-white-shirt-looking-thoughtful-aside-while-posing-outdoors-warm-sunny-day-selective-focus_544629-70.jpg", alt: "Customer testimonial 3"},
{
src: "http://img.b2bpic.net/free-photo/close-up-profile-image-fashionable-attractive-young-female-white-shirt-looking-down-feeling-shy-having-deep-thoughts-facial-expression_343059-2158.jpg",
alt: "Customer testimonial 4",
},
src: "http://img.b2bpic.net/free-photo/close-up-profile-image-fashionable-attractive-young-female-white-shirt-looking-down-feeling-shy-having-deep-thoughts-facial-expression_343059-2158.jpg", alt: "Customer testimonial 4"},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
@@ -141,19 +115,13 @@ export default function ContactPage() {
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com",
ariaLabel: "Instagram",
},
href: "https://instagram.com", ariaLabel: "Instagram"},
{
icon: Facebook,
href: "https://facebook.com",
ariaLabel: "Facebook",
},
href: "https://facebook.com", ariaLabel: "Facebook"},
{
icon: Mail,
href: "mailto:hello@glowbeauty.com",
ariaLabel: "Email",
},
href: "mailto:hello@glowbeauty.com", ariaLabel: "Email"},
]}
/>
</div>

145
src/app/page.tsx
View File

@@ -27,7 +27,7 @@ export default function HomePage() {
borderRadius="rounded"
contentWidth="smallMedium"
sizing="mediumLargeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
@@ -50,40 +50,25 @@ export default function HomePage() {
description="Explore our curated collection of premium mirrors, skincare essentials, beauty accessories, and self-care products. Elevate your daily routine with Glow Beauty."
tag="Welcome to Glow Beauty"
tagIcon={Star}
imageSrc="http://img.b2bpic.net/free-photo/top-view-arrangement-with-make-up-products-notebook_23-2148299571.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/top-view-arrangement-with-make-up-products-notebook_23-2148299571.jpg"
imageAlt="Beauty products and accessories"
mediaAnimation="slide-up"
testimonials={[
{
name: "Layla Hassan",
handle: "Beauty Enthusiast",
testimonial: "The quality and aesthetic of every product is absolutely stunning. Glow Beauty has become my go-to store!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-posing-white-background_231208-1813.jpg",
imageAlt: "Layla Hassan",
},
name: "Layla Hassan", handle: "Beauty Enthusiast", testimonial: "The quality and aesthetic of every product is absolutely stunning. Glow Beauty has become my go-to store!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-posing-white-background_231208-1813.jpg", imageAlt: "Layla Hassan"},
{
name: "Mona Khalil",
handle: "Skincare Lover",
testimonial: "Fast delivery and beautifully packaged products. I'm obsessed with my new skincare routine from Glow!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
imageAlt: "Mona Khalil",
},
name: "Mona Khalil", handle: "Skincare Lover", testimonial: "Fast delivery and beautifully packaged products. I'm obsessed with my new skincare routine from Glow!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg", imageAlt: "Mona Khalil"},
{
name: "Rima Abdo",
handle: "Beauty Blogger",
testimonial: "As a beauty blogger, I recommend Glow Beauty to all my followers. The products are premium and affordable.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-casual-white-shirt-looking-thoughtful-aside-while-posing-outdoors-warm-sunny-day-selective-focus_544629-70.jpg",
imageAlt: "Rima Abdo",
},
name: "Rima Abdo", handle: "Beauty Blogger", testimonial: "As a beauty blogger, I recommend Glow Beauty to all my followers. The products are premium and affordable.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-casual-white-shirt-looking-thoughtful-aside-while-posing-outdoors-warm-sunny-day-selective-focus_544629-70.jpg", imageAlt: "Rima Abdo"},
]}
buttons={[
{ text: "Shop Now", href: "/shop" },
{ text: "Learn More", href: "#about" },
]}
background={{ variant: "aurora" }}
background={{ variant: "glowing-orb" }}
useInvertedBackground={false}
/>
</div>
@@ -95,24 +80,16 @@ export default function HomePage() {
metrics={[
{
icon: Heart,
label: "Premium Products",
value: "500+",
},
label: "Premium Products", value: "500+"},
{
icon: Users,
label: "Happy Customers",
value: "5K+",
},
label: "Happy Customers", value: "5K+"},
{
icon: Globe,
label: "Shipping Across",
value: "Lebanon",
},
label: "Shipping Across", value: "Lebanon"},
{
icon: Star,
label: "Average Rating",
value: "4.9/5",
},
label: "Average Rating", value: "4.9/5"},
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
@@ -124,52 +101,22 @@ export default function HomePage() {
<ProductCardThree
products={[
{
id: "1",
name: "Rose Gold Vanity Mirror",
price: "$45.00",
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-as-greek-goddess-front-view_23-2150099231.jpg?_wi=1",
imageAlt: "Rose Gold Vanity Mirror",
initialQuantity: 1,
id: "1", name: "Rose Gold Vanity Mirror", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-as-greek-goddess-front-view_23-2150099231.jpg", imageAlt: "Rose Gold Vanity Mirror", initialQuantity: 1,
},
{
id: "2",
name: "Luxury Skincare Kit",
price: "$89.00",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg?_wi=1",
imageAlt: "Luxury Skincare Kit",
initialQuantity: 1,
id: "2", name: "Luxury Skincare Kit", price: "$89.00", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg", imageAlt: "Luxury Skincare Kit", initialQuantity: 1,
},
{
id: "3",
name: "Professional Makeup Brushes",
price: "$65.00",
imageSrc: "http://img.b2bpic.net/free-photo/march-inscription-with-small-paper-rose-petals_23-2148055169.jpg?_wi=1",
imageAlt: "Professional Makeup Brushes",
initialQuantity: 1,
id: "3", name: "Professional Makeup Brushes", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/march-inscription-with-small-paper-rose-petals_23-2148055169.jpg", imageAlt: "Professional Makeup Brushes", initialQuantity: 1,
},
{
id: "4",
name: "Premium Self-Care Set",
price: "$79.00",
imageSrc: "http://img.b2bpic.net/free-photo/good-morning-woman-drinks-coffe-lady-by-window_1157-44587.jpg?_wi=1",
imageAlt: "Premium Self-Care Set",
initialQuantity: 1,
id: "4", name: "Premium Self-Care Set", price: "$79.00", imageSrc: "http://img.b2bpic.net/free-photo/good-morning-woman-drinks-coffe-lady-by-window_1157-44587.jpg", imageAlt: "Premium Self-Care Set", initialQuantity: 1,
},
{
id: "5",
name: "Elegant Table Mirror",
price: "$55.00",
imageSrc: "http://img.b2bpic.net/free-photo/bed-arrangements-still-life_23-2150532984.jpg?_wi=1",
imageAlt: "Elegant Table Mirror",
initialQuantity: 1,
id: "5", name: "Elegant Table Mirror", price: "$55.00", imageSrc: "http://img.b2bpic.net/free-photo/bed-arrangements-still-life_23-2150532984.jpg", imageAlt: "Elegant Table Mirror", initialQuantity: 1,
},
{
id: "6",
name: "Hydrating Serum Collection",
price: "$72.00",
imageSrc: "http://img.b2bpic.net/free-photo/natural-products-arrangement-flat-lay_23-2148899418.jpg?_wi=1",
imageAlt: "Hydrating Serum Collection",
initialQuantity: 1,
id: "6", name: "Hydrating Serum Collection", price: "$72.00", imageSrc: "http://img.b2bpic.net/free-photo/natural-products-arrangement-flat-lay_23-2148899418.jpg", imageAlt: "Hydrating Serum Collection", initialQuantity: 1,
},
]}
gridVariant="three-columns-all-equal-width"
@@ -189,31 +136,13 @@ export default function HomePage() {
features={[
{
id: 1,
tag: "Discovery",
title: "Browse & Explore",
subtitle: "Find your perfect products",
description: "Browse through our carefully curated collection of mirrors, skincare, accessories, and self-care products. Each item is selected for quality and aesthetic appeal to match your unique style.",
imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-bathrobe-with-towel-her-head-using-smartphone_1153-4078.jpg?_wi=1",
imageAlt: "Browse beauty products online",
},
tag: "Discovery", title: "Browse & Explore", subtitle: "Find your perfect products", description: "Browse through our carefully curated collection of mirrors, skincare, accessories, and self-care products. Each item is selected for quality and aesthetic appeal to match your unique style.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-bathrobe-with-towel-her-head-using-smartphone_1153-4078.jpg", imageAlt: "Browse beauty products online"},
{
id: 2,
tag: "Delivery",
title: "Fast & Secure",
subtitle: "Your order arrives beautifully packaged",
description: "We handle your order with care, packaging each item beautifully to ensure it arrives in perfect condition. Fast shipping across Lebanon with tracking information provided.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-paper-bag-with-toilet-paper-rolls_23-2148524914.jpg",
imageAlt: "Beauty package delivery",
},
tag: "Delivery", title: "Fast & Secure", subtitle: "Your order arrives beautifully packaged", description: "We handle your order with care, packaging each item beautifully to ensure it arrives in perfect condition. Fast shipping across Lebanon with tracking information provided.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-paper-bag-with-toilet-paper-rolls_23-2148524914.jpg", imageAlt: "Beauty package delivery"},
{
id: 3,
tag: "Enjoyment",
title: "Glow & Radiate",
subtitle: "Elevate your beauty routine",
description: "Unbox your beautifully packaged products and start your journey to radiant skin and enhanced beauty. Share your experience with our community and discover new beauty inspiration daily.",
imageSrc: "http://img.b2bpic.net/free-photo/foundation-bottles-advertising-arrangement_23-2149511243.jpg?_wi=1",
imageAlt: "Beauty products arrangement",
},
tag: "Enjoyment", title: "Glow & Radiate", subtitle: "Elevate your beauty routine", description: "Unbox your beautifully packaged products and start your journey to radiant skin and enhanced beauty. Share your experience with our community and discover new beauty inspiration daily.", imageSrc: "http://img.b2bpic.net/free-photo/foundation-bottles-advertising-arrangement_23-2149511243.jpg", imageAlt: "Beauty products arrangement"},
]}
title="Your Beauty Journey with Glow"
description="Experience our seamless process from discovery to delivery"
@@ -231,21 +160,13 @@ export default function HomePage() {
author="Sara Nasrallah, Beauty Influencer"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-posing-white-background_231208-1813.jpg",
alt: "Customer testimonial 1",
},
src: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-posing-white-background_231208-1813.jpg", alt: "Customer testimonial 1"},
{
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
alt: "Customer testimonial 2",
},
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg", alt: "Customer testimonial 2"},
{
src: "http://img.b2bpic.net/free-photo/woman-casual-white-shirt-looking-thoughtful-aside-while-posing-outdoors-warm-sunny-day-selective-focus_544629-70.jpg",
alt: "Customer testimonial 3",
},
src: "http://img.b2bpic.net/free-photo/woman-casual-white-shirt-looking-thoughtful-aside-while-posing-outdoors-warm-sunny-day-selective-focus_544629-70.jpg", alt: "Customer testimonial 3"},
{
src: "http://img.b2bpic.net/free-photo/close-up-profile-image-fashionable-attractive-young-female-white-shirt-looking-down-feeling-shy-having-deep-thoughts-facial-expression_343059-2158.jpg",
alt: "Customer testimonial 4",
},
src: "http://img.b2bpic.net/free-photo/close-up-profile-image-fashionable-attractive-young-female-white-shirt-looking-down-feeling-shy-having-deep-thoughts-facial-expression_343059-2158.jpg", alt: "Customer testimonial 4"},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
@@ -262,7 +183,7 @@ export default function HomePage() {
{ text: "Contact Us", href: "/contact" },
{ text: "Email Now", href: "mailto:hello@glowbeauty.com" },
]}
background={{ variant: "aurora" }}
background={{ variant: "glowing-orb" }}
useInvertedBackground={false}
/>
</div>
@@ -275,19 +196,13 @@ export default function HomePage() {
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com",
ariaLabel: "Instagram",
},
href: "https://instagram.com", ariaLabel: "Instagram"},
{
icon: Facebook,
href: "https://facebook.com",
ariaLabel: "Facebook",
},
href: "https://facebook.com", ariaLabel: "Facebook"},
{
icon: Mail,
href: "mailto:hello@glowbeauty.com",
ariaLabel: "Email",
},
href: "mailto:hello@glowbeauty.com", ariaLabel: "Email"},
]}
/>
</div>

65
src/app/shop/page.tsx
View File

@@ -15,7 +15,7 @@ export default function ShopPage() {
borderRadius="rounded"
contentWidth="smallMedium"
sizing="mediumLargeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
@@ -42,52 +42,22 @@ export default function ShopPage() {
tag="Bestsellers"
products={[
{
id: "1",
name: "Rose Gold Vanity Mirror",
price: "$45.00",
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-as-greek-goddess-front-view_23-2150099231.jpg?_wi=2",
imageAlt: "Rose Gold Vanity Mirror",
initialQuantity: 1
id: "1", name: "Rose Gold Vanity Mirror", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-as-greek-goddess-front-view_23-2150099231.jpg", imageAlt: "Rose Gold Vanity Mirror", initialQuantity: 1
},
{
id: "2",
name: "Luxury Skincare Kit",
price: "$89.00",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg?_wi=2",
imageAlt: "Luxury Skincare Kit",
initialQuantity: 1
id: "2", name: "Luxury Skincare Kit", price: "$89.00", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg", imageAlt: "Luxury Skincare Kit", initialQuantity: 1
},
{
id: "3",
name: "Professional Makeup Brushes",
price: "$65.00",
imageSrc: "http://img.b2bpic.net/free-photo/march-inscription-with-small-paper-rose-petals_23-2148055169.jpg?_wi=2",
imageAlt: "Professional Makeup Brushes",
initialQuantity: 1
id: "3", name: "Professional Makeup Brushes", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/march-inscription-with-small-paper-rose-petals_23-2148055169.jpg", imageAlt: "Professional Makeup Brushes", initialQuantity: 1
},
{
id: "4",
name: "Premium Self-Care Set",
price: "$79.00",
imageSrc: "http://img.b2bpic.net/free-photo/good-morning-woman-drinks-coffe-lady-by-window_1157-44587.jpg?_wi=2",
imageAlt: "Premium Self-Care Set",
initialQuantity: 1
id: "4", name: "Premium Self-Care Set", price: "$79.00", imageSrc: "http://img.b2bpic.net/free-photo/good-morning-woman-drinks-coffe-lady-by-window_1157-44587.jpg", imageAlt: "Premium Self-Care Set", initialQuantity: 1
},
{
id: "5",
name: "Elegant Table Mirror",
price: "$55.00",
imageSrc: "http://img.b2bpic.net/free-photo/bed-arrangements-still-life_23-2150532984.jpg?_wi=2",
imageAlt: "Elegant Table Mirror",
initialQuantity: 1
id: "5", name: "Elegant Table Mirror", price: "$55.00", imageSrc: "http://img.b2bpic.net/free-photo/bed-arrangements-still-life_23-2150532984.jpg", imageAlt: "Elegant Table Mirror", initialQuantity: 1
},
{
id: "6",
name: "Hydrating Serum Collection",
price: "$72.00",
imageSrc: "http://img.b2bpic.net/free-photo/natural-products-arrangement-flat-lay_23-2148899418.jpg?_wi=2",
imageAlt: "Hydrating Serum Collection",
initialQuantity: 1
id: "6", name: "Hydrating Serum Collection", price: "$72.00", imageSrc: "http://img.b2bpic.net/free-photo/natural-products-arrangement-flat-lay_23-2148899418.jpg", imageAlt: "Hydrating Serum Collection", initialQuantity: 1
}
]}
gridVariant="three-columns-all-equal-width"
@@ -103,44 +73,39 @@ export default function ShopPage() {
animationType="entrance-slide"
buttons={[
{
text: "Get Recommendations",
href: "/contact"
text: "Get Recommendations", href: "/contact"
},
{
text: "Chat with Us",
href: "mailto:hello@glowbeauty.com"
text: "Chat with Us", href: "mailto:hello@glowbeauty.com"
}
]}
background={{
variant: "aurora"
variant: "glowing-orb"
}}
useInvertedBackground={false}
/>
</div>
<footer id="footer" data-section="footer">
<div id="footer" data-section="footer">
<FooterCard
logoText="Glow Beauty"
copyrightText="© 2025 Glow Beauty. All rights reserved. Made with ✨ in Lebanon."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com",
ariaLabel: "Instagram"
href: "https://instagram.com", ariaLabel: "Instagram"
},
{
icon: Facebook,
href: "https://facebook.com",
ariaLabel: "Facebook"
href: "https://facebook.com", ariaLabel: "Facebook"
},
{
icon: Mail,
href: "mailto:hello@glowbeauty.com",
ariaLabel: "Email"
href: "mailto:hello@glowbeauty.com", ariaLabel: "Email"
}
]}
/>
</footer>
</div>
</ThemeProvider>
);
}

58
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -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;
textClassName?: string;
size?: 'sm' | 'md' | 'lg';
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo = ({ text, className = '', textClassName = '', size = 'md' }: SvgTextLogoProps) => {
const sizeMap = {
sm: { fontSize: 16, viewBox: '0 0 200 50' },
md: { fontSize: 24, viewBox: '0 0 300 70' },
lg: { fontSize: 32, viewBox: '0 0 400 100' },
};
const { fontSize, viewBox } = sizeMap[size];
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
className={`w-full h-auto ${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"
}}
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="middle"
fontSize={fontSize}
fontWeight="bold"
className={textClassName}
fill="currentColor"
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;