diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 759cc49..e21a16e 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -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} /> @@ -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"}, ]} /> diff --git a/src/app/page.tsx b/src/app/page.tsx index 3753a57..342d8ea 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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} /> @@ -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() { @@ -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"}, ]} /> diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx index a988388..3db8f67 100644 --- a/src/app/shop/page.tsx +++ b/src/app/shop/page.tsx @@ -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} /> - + ); } \ No newline at end of file diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..b63efeb 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -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(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 ( - {logoText} + {text} ); -}); - -SvgTextLogo.displayName = "SvgTextLogo"; +}; export default SvgTextLogo;