bender/a26e946f-7de7-42c2-8ac1-908a1e3d7d4e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 5 commits from version_1 into main 2026-03-11 13:36:26 +00:00
Conversation 0 Commits 5 Files Changed 5 +130 -402
5 changed files with 130 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/app/page.tsx
View File

@@ -22,8 +22,7 @@ export default function HomePage() {
const footerColumns = [
{
title: "Shop",
items: [
title: "Shop", items: [
{ label: "All Products", href: "/shop" },
{ label: "Prepare", href: "/shop?stage=prepare" },
{ label: "Build", href: "/shop?stage=build" },
@@ -33,8 +32,7 @@ export default function HomePage() {
],
},
{
title: "Resources",
items: [
title: "Resources", items: [
{ label: "Take the Quiz", href: "/" },
{ label: "Science & Research", href: "/" },
{ label: "Journal & Blog", href: "/" },
@@ -44,8 +42,7 @@ export default function HomePage() {
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Return Policy", href: "#" },
@@ -91,7 +88,7 @@ export default function HomePage() {
{ text: "Shop Now", href: "/shop" },
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/close-up-selfcare-routine-products_23-2149291868.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/close-up-selfcare-routine-products_23-2149291868.jpg"
imageAlt="KAYURA Premium Night Balm"
mediaAnimation="slide-up"
/>
@@ -103,10 +100,10 @@ export default function HomePage() {
description="Complete a 2-minute skin quiz to unlock personalized product recommendations and receive 10% off your first purchase or a complimentary cleanser."
tag="Personalization"
tagIcon={Target}
tagAnimation="entrance-slide"
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
buttons={[{ text: "Start Quiz", href: "/" }]}
imageSrc="http://img.b2bpic.net/free-photo/fair-skinned-adult-woman-uses-roller-massager-while-sitting-her-beautician-light-studio-home-spa-facial-concept_197531-31464.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/fair-skinned-adult-woman-uses-roller-massager-while-sitting-her-beautician-light-studio-home-spa-facial-concept_197531-31464.jpg"
imageAlt="Skincare Quiz Discovery"
/>
</div>
@@ -117,54 +114,24 @@ export default function HomePage() {
description="Think in terms of your skin's needs. Browse our complete catalog filtered by specific concerns like aging, pigmentation, acne, hydration, and more."
tag="Concern-Driven Navigation"
tagIcon={Filter}
tagAnimation="entrance-slide"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
products={[
{
id: "concern-aging",
name: "Aging & Firming",
price: "View Products",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-woman-using-serum_23-2149343874.jpg?_wi=1",
imageAlt: "Anti-Aging Skincare Collection",
},
id: "concern-aging", name: "Aging & Firming", price: "View Products", imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-woman-using-serum_23-2149343874.jpg", imageAlt: "Anti-Aging Skincare Collection"},
{
id: "concern-pigmentation",
name: "Pigmentation",
price: "View Products",
imageSrc: "http://img.b2bpic.net/free-photo/close-beauty-portrait-topless-woman-with-perfect-skin-natural-make-up-holds-serum-youth-skin-hydration-dropper-with-cosmetic-oil_343596-7827.jpg?_wi=1",
imageAlt: "Hyperpigmentation Treatment Collection",
},
id: "concern-pigmentation", name: "Pigmentation", price: "View Products", imageSrc: "http://img.b2bpic.net/free-photo/close-beauty-portrait-topless-woman-with-perfect-skin-natural-make-up-holds-serum-youth-skin-hydration-dropper-with-cosmetic-oil_343596-7827.jpg", imageAlt: "Hyperpigmentation Treatment Collection"},
{
id: "concern-acne",
name: "Acne & Microbiome",
price: "View Products",
imageSrc: "http://img.b2bpic.net/free-photo/person-dealing-with-rosacea_23-2150478613.jpg?_wi=1",
imageAlt: "Acne Treatment Collection",
},
id: "concern-acne", name: "Acne & Microbiome", price: "View Products", imageSrc: "http://img.b2bpic.net/free-photo/person-dealing-with-rosacea_23-2150478613.jpg", imageAlt: "Acne Treatment Collection"},
{
id: "concern-barrier",
name: "Sensitive Barrier",
price: "View Products",
imageSrc: "http://img.b2bpic.net/free-photo/woman-holds-jar-with-cosmetic-cream-her-hands_1150-11722.jpg?_wi=1",
imageAlt: "Sensitive Skin Care Collection",
},
id: "concern-barrier", name: "Sensitive Barrier", price: "View Products", imageSrc: "http://img.b2bpic.net/free-photo/woman-holds-jar-with-cosmetic-cream-her-hands_1150-11722.jpg", imageAlt: "Sensitive Skin Care Collection"},
{
id: "concern-hydration",
name: "Hydration",
price: "View Products",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-applying-serum_23-2149168563.jpg",
imageAlt: "Deep Hydration Collection",
},
id: "concern-hydration", name: "Hydration", price: "View Products", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-applying-serum_23-2149168563.jpg", imageAlt: "Deep Hydration Collection"},
{
id: "concern-eye",
name: "Eye Care",
price: "View Products",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-attractive-thoughtful-young-caucasian-woman-with-clean-skin-loose-brown-hair-touching-face-having-pensive-facial-expression-looking-ahead-her-recollecting-something_343059-2161.jpg",
imageAlt: "Eye Care Protocol Collection",
},
id: "concern-eye", name: "Eye Care", price: "View Products", imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-attractive-thoughtful-young-caucasian-woman-with-clean-skin-loose-brown-hair-touching-face-having-pensive-facial-expression-looking-ahead-her-recollecting-something_343059-2161.jpg", imageAlt: "Eye Care Protocol Collection"},
]}
/>
</div>
@@ -175,40 +142,20 @@ export default function HomePage() {
description="Discover the most-loved KAYURA formulations chosen by thousands of customers for visible results and exceptional quality."
tag="Customer Favorites"
tagIcon={Heart}
tagAnimation="entrance-slide"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
animationType="scale-rotate"
gridVariant="four-items-2x2-equal-grid"
products={[
{
id: "fs-foundation",
name: "Foundation Serum",
price: "$110",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg?_wi=1",
imageAlt: "Foundation Serum - Universal First Serum",
},
id: "fs-foundation", name: "Foundation Serum", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg", imageAlt: "Foundation Serum - Universal First Serum"},
{
id: "c1-cleanser",
name: "Exfoliating Cleanser",
price: "$62",
imageSrc: "http://img.b2bpic.net/free-photo/hand-cream-background-top-view_23-2148241929.jpg?_wi=1",
imageAlt: "Exfoliating Cleanser - Weekly Treatment",
},
id: "c1-cleanser", name: "Exfoliating Cleanser", price: "$62", imageSrc: "http://img.b2bpic.net/free-photo/hand-cream-background-top-view_23-2148241929.jpg", imageAlt: "Exfoliating Cleanser - Weekly Treatment"},
{
id: "s0-supplement",
name: "Foundation Supplement",
price: "$80",
imageSrc: "http://img.b2bpic.net/free-photo/photo-pleased-young-womann-with-curly-bushy-hair-keeps-hand-face-smiles-happily-has-eyes-closed-holds-green-plant-applies-beauty-patches-eyes-uses-natural-cosmetic-skin-care-concept_273609-60711.jpg?_wi=1",
imageAlt: "Foundation Supplement - Daily Systemic",
},
id: "s0-supplement", name: "Foundation Supplement", price: "$80", imageSrc: "http://img.b2bpic.net/free-photo/photo-pleased-young-womann-with-curly-bushy-hair-keeps-hand-face-smiles-happily-has-eyes-closed-holds-green-plant-applies-beauty-patches-eyes-uses-natural-cosmetic-skin-care-concept_273609-60711.jpg", imageAlt: "Foundation Supplement - Daily Systemic"},
{
id: "spf-mineral",
name: "Mineral SPF 50+",
price: "$58",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg?_wi=2",
imageAlt: "Mineral SPF 50+ - UV Protection",
},
id: "spf-mineral", name: "Mineral SPF 50+", price: "$58", imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg", imageAlt: "Mineral SPF 50+ - UV Protection"},
]}
/>
</div>
@@ -237,77 +184,17 @@ export default function HomePage() {
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Chen, Beauty Director",
date: "Date: 15 November 2024",
title: "My skin has never looked clearer",
quote: "The concern-driven approach to skincare finally made sense to me. I used the quiz to find products specifically for hyperpigmentation, and within 8 weeks I saw visible improvement in my dark spots. The Foundation Serum is now non-negotiable in my routine.",
tag: "Pigmentation Solution",
avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg",
avatarAlt: "Sarah Chen",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg?_wi=1",
imageAlt: "Sarah Chen testimonial",
},
id: "t1", name: "Sarah Chen, Beauty Director", date: "Date: 15 November 2024", title: "My skin has never looked clearer", quote: "The concern-driven approach to skincare finally made sense to me. I used the quiz to find products specifically for hyperpigmentation, and within 8 weeks I saw visible improvement in my dark spots. The Foundation Serum is now non-negotiable in my routine.", tag: "Pigmentation Solution", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg", avatarAlt: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg", imageAlt: "Sarah Chen testimonial"},
{
id: "t2",
name: "Marcus Williams, CEO",
date: "Date: 10 November 2024",
title: "Systemic + topical actually works",
quote: "I was skeptical about the supplement angle, but after 12 weeks on the Foundation Supplement paired with topical serums, my skin texture improved dramatically. This is the first skincare brand that treats skin health holistically.",
tag: "Systemic Approach",
avatarSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg",
avatarAlt: "Marcus Williams",
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg?_wi=1",
imageAlt: "Marcus Williams testimonial",
},
id: "t2", name: "Marcus Williams, CEO", date: "Date: 10 November 2024", title: "Systemic + topical actually works", quote: "I was skeptical about the supplement angle, but after 12 weeks on the Foundation Supplement paired with topical serums, my skin texture improved dramatically. This is the first skincare brand that treats skin health holistically.", tag: "Systemic Approach", avatarSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg", avatarAlt: "Marcus Williams", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg", imageAlt: "Marcus Williams testimonial"},
{
id: "t3",
name: "Amelia Rodriguez, Dermatologist",
date: "Date: 8 November 2024",
title: "Clinically sound formulations",
quote: "As a dermatologist, I'm impressed by KAYURA's attention to ingredient science and clinical validation. I now recommend their products to patients with specific skin concerns. The multi-taxonomy navigation empowers users to make informed choices.",
tag: "Professional Recommendation",
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg",
avatarAlt: "Amelia Rodriguez",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg?_wi=1",
imageAlt: "Amelia Rodriguez testimonial",
},
id: "t3", name: "Amelia Rodriguez, Dermatologist", date: "Date: 8 November 2024", title: "Clinically sound formulations", quote: "As a dermatologist, I'm impressed by KAYURA's attention to ingredient science and clinical validation. I now recommend their products to patients with specific skin concerns. The multi-taxonomy navigation empowers users to make informed choices.", tag: "Professional Recommendation", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg", avatarAlt: "Amelia Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg", imageAlt: "Amelia Rodriguez testimonial"},
{
id: "t4",
name: "James Park, Skincare Enthusiast",
date: "Date: 5 November 2024",
title: "Finally, a brand that understands nuance",
quote: "Most skincare brands treat all customers the same. KAYURA gets that everyone's skin is different. The quiz helped me find my exact routine, and 6 months later my acne is under control and my barrier is stronger than ever.",
tag: "Acne + Barrier Support",
avatarSrc: "http://img.b2bpic.net/free-photo/closeup-cute-young-caucasian-girl-with-closed-eyes-touches-her-face-light-background-emotion-concept_197531-31396.jpg",
avatarAlt: "James Park",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-cute-young-caucasian-girl-with-closed-eyes-touches-her-face-light-background-emotion-concept_197531-31396.jpg",
imageAlt: "James Park testimonial",
},
id: "t4", name: "James Park, Skincare Enthusiast", date: "Date: 5 November 2024", title: "Finally, a brand that understands nuance", quote: "Most skincare brands treat all customers the same. KAYURA gets that everyone's skin is different. The quiz helped me find my exact routine, and 6 months later my acne is under control and my barrier is stronger than ever.", tag: "Acne + Barrier Support", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-cute-young-caucasian-girl-with-closed-eyes-touches-her-face-light-background-emotion-concept_197531-31396.jpg", avatarAlt: "James Park", imageSrc: "http://img.b2bpic.net/free-photo/closeup-cute-young-caucasian-girl-with-closed-eyes-touches-her-face-light-background-emotion-concept_197531-31396.jpg", imageAlt: "James Park testimonial"},
{
id: "t5",
name: "Elena Ortiz, Wellness Coach",
date: "Date: 2 November 2024",
title: "Beauty from the inside out",
quote: "I combine KAYURA topicals with their systemic supplements in my wellness coaching practice. Clients see results faster because they're treating skin health at every level. The energy and clarity supplements are game-changers.",
tag: "Wellness Integration",
avatarSrc: "http://img.b2bpic.net/free-photo/woman-having-self-care-routine_23-2148976841.jpg",
avatarAlt: "Elena Ortiz",
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-self-care-routine_23-2148976841.jpg",
imageAlt: "Elena Ortiz testimonial",
},
id: "t5", name: "Elena Ortiz, Wellness Coach", date: "Date: 2 November 2024", title: "Beauty from the inside out", quote: "I combine KAYURA topicals with their systemic supplements in my wellness coaching practice. Clients see results faster because they're treating skin health at every level. The energy and clarity supplements are game-changers.", tag: "Wellness Integration", avatarSrc: "http://img.b2bpic.net/free-photo/woman-having-self-care-routine_23-2148976841.jpg", avatarAlt: "Elena Ortiz", imageSrc: "http://img.b2bpic.net/free-photo/woman-having-self-care-routine_23-2148976841.jpg", imageAlt: "Elena Ortiz testimonial"},
{
id: "t6",
name: "Sophia Dubois, Content Creator",
date: "Date: 30 October 2024",
title: "Transparent and science-backed",
quote: "I appreciate that KAYURA doesn't hide behind marketing fluff. Every product has clear clinical backing, ingredient lists are transparent, and the customer service team actually knows the science. My followers trust my recommendations because I trust the brand.",
tag: "Brand Transparency",
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-romantic-young-asian-woman-smiling-looking-happy-sitting-cozy_1258-134101.jpg",
avatarAlt: "Sophia Dubois",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-romantic-young-asian-woman-smiling-looking-happy-sitting-cozy_1258-134101.jpg",
imageAlt: "Sophia Dubois testimonial",
},
id: "t6", name: "Sophia Dubois, Content Creator", date: "Date: 30 October 2024", title: "Transparent and science-backed", quote: "I appreciate that KAYURA doesn't hide behind marketing fluff. Every product has clear clinical backing, ingredient lists are transparent, and the customer service team actually knows the science. My followers trust my recommendations because I trust the brand.", tag: "Brand Transparency", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-romantic-young-asian-woman-smiling-looking-happy-sitting-cozy_1258-134101.jpg", avatarAlt: "Sophia Dubois", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-romantic-young-asian-woman-smiling-looking-happy-sitting-cozy_1258-134101.jpg", imageAlt: "Sophia Dubois testimonial"},
]}
/>
</div>
@@ -317,57 +204,33 @@ export default function HomePage() {
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about KAYURA products, ordering, and skincare philosophy."
textPosition="left"
faqsAnimation="entrance-slide"
faqsAnimation="slide-up"
useInvertedBackground={false}
animationType="smooth"
faqs={[
{
id: "faq-1",
title: "What does 'concern-driven' skincare mean?",
content: "Instead of shopping by skin type alone, KAYURA products are organized by specific concerns (aging, pigmentation, acne, hydration, etc.). This means you can address exactly what matters to you. Take our quiz to get personalized recommendations based on your unique concerns.",
},
id: "faq-1", title: "What does 'concern-driven' skincare mean?", content: "Instead of shopping by skin type alone, KAYURA products are organized by specific concerns (aging, pigmentation, acne, hydration, etc.). This means you can address exactly what matters to you. Take our quiz to get personalized recommendations based on your unique concerns."},
{
id: "faq-2",
title: "Can I use topical and systemic products together?",
content: "Yes. In fact, we recommend it for best results. Topical products work on the skin surface while systemic supplements support skin health from within. Together, they create a comprehensive approach to beauty and wellness. Always start with our Foundation Serum and Foundation Supplement as your base.",
},
id: "faq-2", title: "Can I use topical and systemic products together?", content: "Yes. In fact, we recommend it for best results. Topical products work on the skin surface while systemic supplements support skin health from within. Together, they create a comprehensive approach to beauty and wellness. Always start with our Foundation Serum and Foundation Supplement as your base."},
{
id: "faq-3",
title: "How long before I see results?",
content: "Most customers notice improvement within 4-8 weeks for topical products and 8-12 weeks for systemic supplements. Consistency is key. Use products as directed and give your skin time to respond. Clinical trials show visible results by week 8 on average.",
},
id: "faq-3", title: "How long before I see results?", content: "Most customers notice improvement within 4-8 weeks for topical products and 8-12 weeks for systemic supplements. Consistency is key. Use products as directed and give your skin time to respond. Clinical trials show visible results by week 8 on average."},
{
id: "faq-4",
title: "Is KAYURA suitable for sensitive skin?",
content: "Yes. We have a dedicated sensitive/barrier-care category with gentle formulations. Our Amino Acid NMF Cleanser and Deep Hydration Serum are universal favorites for compromised barriers. Always start with patch testing and introduce one product at a time if your skin is reactive.",
},
id: "faq-4", title: "Is KAYURA suitable for sensitive skin?", content: "Yes. We have a dedicated sensitive/barrier-care category with gentle formulations. Our Amino Acid NMF Cleanser and Deep Hydration Serum are universal favorites for compromised barriers. Always start with patch testing and introduce one product at a time if your skin is reactive."},
{
id: "faq-5",
title: "What is your return policy?",
content: "We offer a 30-day money-back guarantee on all products. If you're not satisfied with results or fit, contact our team and we'll process a full refund. No questions asked. We're confident in our products and want you to feel secure in your purchase.",
},
id: "faq-5", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee on all products. If you're not satisfied with results or fit, contact our team and we'll process a full refund. No questions asked. We're confident in our products and want you to feel secure in your purchase."},
{
id: "faq-6",
title: "Do you ship internationally?",
content: "Yes, we ship to 45+ countries. International orders typically arrive within 10-15 business days. Customs duties and taxes may apply depending on destination. Free shipping on orders above $60 USD equivalent in your local currency.",
},
id: "faq-6", title: "Do you ship internationally?", content: "Yes, we ship to 45+ countries. International orders typically arrive within 10-15 business days. Customs duties and taxes may apply depending on destination. Free shipping on orders above $60 USD equivalent in your local currency."},
{
id: "faq-7",
title: "Are products cruelty-free and vegan?",
content: "We are certified cruelty-free and never test on animals. Many of our products are vegan, though some contain natural animal-derived ingredients (like Shea Butter). All vegan options are clearly labeled in the product tags and details.",
},
id: "faq-7", title: "Are products cruelty-free and vegan?", content: "We are certified cruelty-free and never test on animals. Many of our products are vegan, though some contain natural animal-derived ingredients (like Shea Butter). All vegan options are clearly labeled in the product tags and details."},
{
id: "faq-8",
title: "What makes KAYURA different from other skincare brands?",
content: "KAYURA combines concern-driven navigation with clinically-validated formulations and systemic + topical integration. We don't push one-size-fits-all routines. Instead, we empower you to build a routine that matches your specific concerns. Every product is backed by clinical trials and transparent ingredient research.",
},
id: "faq-8", title: "What makes KAYURA different from other skincare brands?", content: "KAYURA combines concern-driven navigation with clinically-validated formulations and systemic + topical integration. We don't push one-size-fits-all routines. Instead, we empower you to build a routine that matches your specific concerns. Every product is backed by clinical trials and transparent ingredient research."},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg"
imageAlt="KAYURA Premium Skincare Collection"
logoText="KAYURA"
copyrightText="© 2024 KAYURA | Premium Systemic & Topical Skincare"

59
src/app/protocol/page.tsx
View File

@@ -19,8 +19,7 @@ export default function ProtocolPage() {
const footerColumns = [
{
title: "Shop",
items: [
title: "Shop", items: [
{ label: "All Products", href: "/shop" },
{ label: "Prepare", href: "/shop?stage=prepare" },
{ label: "Build", href: "/shop?stage=build" },
@@ -30,8 +29,7 @@ export default function ProtocolPage() {
],
},
{
title: "Resources",
items: [
title: "Resources", items: [
{ label: "Take the Quiz", href: "/protocol" },
{ label: "Science & Research", href: "/science" },
{ label: "Journal & Blog", href: "/journal" },
@@ -41,8 +39,7 @@ export default function ProtocolPage() {
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Return Policy", href: "#" },
@@ -80,10 +77,10 @@ export default function ProtocolPage() {
description="Complete a 2-minute skin quiz to unlock personalized product recommendations and receive 10% off your first purchase or a complimentary cleanser."
tag="Personalization"
tagIcon={Target}
tagAnimation="entrance-slide"
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
buttons={[{ text: "Start Quiz", href: "/protocol" }]}
imageSrc="http://img.b2bpic.net/free-photo/fair-skinned-adult-woman-uses-roller-massager-while-sitting-her-beautician-light-studio-home-spa-facial-concept_197531-31464.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-photo/fair-skinned-adult-woman-uses-roller-massager-while-sitting-her-beautician-light-studio-home-spa-facial-concept_197531-31464.jpg"
imageAlt="Skincare Quiz Discovery"
mediaAnimation="slide-up"
/>
@@ -94,53 +91,35 @@ export default function ProtocolPage() {
sideTitle="About Our Skin Quiz"
sideDescription="Learn how KAYURA's personalized quiz helps you discover your perfect skincare routine based on your unique skin concerns and goals."
textPosition="left"
faqsAnimation="entrance-slide"
faqsAnimation="slide-up"
useInvertedBackground={false}
animationType="smooth"
faqs={[
{
id: "quiz-faq-1",
title: "How does the skin quiz work?",
content:
"Our quiz asks about your skin type, primary concerns (aging, acne, pigmentation, etc.), sensitivity level, and skincare goals. Based on your answers, we match you with our Foundation products and concern-specific treatments tailored to your needs.",
},
id: "quiz-faq-1", title: "How does the skin quiz work?", content:
"Our quiz asks about your skin type, primary concerns (aging, acne, pigmentation, etc.), sensitivity level, and skincare goals. Based on your answers, we match you with our Foundation products and concern-specific treatments tailored to your needs."},
{
id: "quiz-faq-2",
title: "How long does the quiz take?",
content:
"The quiz takes approximately 2-3 minutes. It's designed to be quick and straightforward so you can get personalized recommendations without unnecessary complexity.",
},
id: "quiz-faq-2", title: "How long does the quiz take?", content:
"The quiz takes approximately 2-3 minutes. It's designed to be quick and straightforward so you can get personalized recommendations without unnecessary complexity."},
{
id: "quiz-faq-3",
title: "Can I retake the quiz?",
content:
"Yes! You can retake the quiz anytime your skin needs change. As your skin evolves, your routine may need adjustment. We recommend reassessing every 6-12 months or when you notice significant changes.",
},
id: "quiz-faq-3", title: "Can I retake the quiz?", content:
"Yes! You can retake the quiz anytime your skin needs change. As your skin evolves, your routine may need adjustment. We recommend reassessing every 6-12 months or when you notice significant changes."},
{
id: "quiz-faq-4",
title: "What happens after I complete the quiz?",
content:
"You'll receive a personalized routine recommendation with a custom product bundle, a 10% discount code for your first purchase, and access to detailed skincare guidance specific to your concerns.",
},
id: "quiz-faq-4", title: "What happens after I complete the quiz?", content:
"You'll receive a personalized routine recommendation with a custom product bundle, a 10% discount code for your first purchase, and access to detailed skincare guidance specific to your concerns."},
{
id: "quiz-faq-5",
title: "Do I need to create an account to take the quiz?",
content:
"No account is required to take the quiz. However, creating an account helps us save your results, track your progress, and provide ongoing personalized recommendations.",
},
id: "quiz-faq-5", title: "Do I need to create an account to take the quiz?", content:
"No account is required to take the quiz. However, creating an account helps us save your results, track your progress, and provide ongoing personalized recommendations."},
{
id: "quiz-faq-6",
title: "What if my concerns span multiple categories?",
content:
"Most people have multiple concerns! Our quiz accounts for this. If you select multiple concerns, we'll recommend a layered routine that addresses all of them using our Foundation series plus targeted treatments.",
},
id: "quiz-faq-6", title: "What if my concerns span multiple categories?", content:
"Most people have multiple concerns! Our quiz accounts for this. If you select multiple concerns, we'll recommend a layered routine that addresses all of them using our Foundation series plus targeted treatments."},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg?_wi=3"
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg"
imageAlt="KAYURA Premium Skincare Collection"
logoText="KAYURA"
copyrightText="© 2024 KAYURA | Premium Systemic & Topical Skincare"

95
src/app/science/page.tsx
View File

@@ -20,8 +20,7 @@ export default function SciencePage() {
const footerColumns = [
{
title: "Shop",
items: [
title: "Shop", items: [
{ label: "All Products", href: "/shop" },
{ label: "Prepare", href: "/shop?stage=prepare" },
{ label: "Build", href: "/shop?stage=build" },
@@ -31,8 +30,7 @@ export default function SciencePage() {
],
},
{
title: "Resources",
items: [
title: "Resources", items: [
{ label: "Take the Quiz", href: "/protocol" },
{ label: "Science & Research", href: "/science" },
{ label: "Journal & Blog", href: "/journal" },
@@ -42,8 +40,7 @@ export default function SciencePage() {
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Return Policy", href: "#" },
@@ -85,16 +82,12 @@ export default function SciencePage() {
background={{ variant: "sparkles-gradient" }}
buttons={[
{
text: "Explore Research",
href: "/science",
},
text: "Explore Research", href: "/science"},
{
text: "Download White Papers",
href: "#",
},
text: "Download White Papers", href: "#"},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/close-up-selfcare-routine-products_23-2149291868.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-photo/close-up-selfcare-routine-products_23-2149291868.jpg"
imageAlt="KAYURA Research & Development"
mediaAnimation="slide-up"
/>
@@ -108,24 +101,16 @@ export default function SciencePage() {
metrics={[
{
icon: Beaker,
label: "Clinical Trials",
value: "10+",
},
label: "Clinical Trials", value: "10+"},
{
icon: Users,
label: "Active Members",
value: "50K+",
},
label: "Active Members", value: "50K+"},
{
icon: TrendingUp,
label: "Satisfaction Rate",
value: "94.7%",
},
label: "Satisfaction Rate", value: "94.7%"},
{
icon: Globe,
label: "Countries Shipped",
value: "45+",
},
label: "Countries Shipped", value: "45+"},
]}
/>
</div>
@@ -135,65 +120,41 @@ export default function SciencePage() {
sideTitle="Research & Clinical Evidence"
sideDescription="Understand the science behind KAYURA's formulations, clinical validation process, and how our research informs product development."
textPosition="left"
faqsAnimation="entrance-slide"
faqsAnimation="slide-up"
useInvertedBackground={true}
animationType="smooth"
faqs={[
{
id: "science-faq-1",
title: "How are KAYURA products tested?",
content:
"All KAYURA products undergo rigorous clinical trials involving dermatologist oversight, consumer testing panels, and instrumental analysis. We test for efficacy, safety, stability, and compatibility with various skin types. Results are published in peer-reviewed journals and available upon request.",
},
id: "science-faq-1", title: "How are KAYURA products tested?", content:
"All KAYURA products undergo rigorous clinical trials involving dermatologist oversight, consumer testing panels, and instrumental analysis. We test for efficacy, safety, stability, and compatibility with various skin types. Results are published in peer-reviewed journals and available upon request."},
{
id: "science-faq-2",
title: "What makes topical + systemic integration effective?",
content:
"Topical products work on the skin surface through active ingredients, while systemic supplements support skin health from within by nourishing collagen production, hydration, and cellular repair. Together, they create comprehensive coverage: outer barrier support + internal regeneration = faster, more visible results.",
},
id: "science-faq-2", title: "What makes topical + systemic integration effective?", content:
"Topical products work on the skin surface through active ingredients, while systemic supplements support skin health from within by nourishing collagen production, hydration, and cellular repair. Together, they create comprehensive coverage: outer barrier support + internal regeneration = faster, more visible results."},
{
id: "science-faq-3",
title: "Are KAYURA ingredients safe for sensitive skin?",
content:
"Yes. We prioritize clean, evidence-based ingredients and avoid common irritants. All products are dermatologist-tested and hypoallergenic. Our Sensitive Barrier collection is specifically formulated for compromised skin barriers using soothing botanicals, ceramides, and amino acids.",
},
id: "science-faq-3", title: "Are KAYURA ingredients safe for sensitive skin?", content:
"Yes. We prioritize clean, evidence-based ingredients and avoid common irritants. All products are dermatologist-tested and hypoallergenic. Our Sensitive Barrier collection is specifically formulated for compromised skin barriers using soothing botanicals, ceramides, and amino acids."},
{
id: "science-faq-4",
title: "How do you validate ingredient efficacy?",
content:
"Each active ingredient is validated through peer-reviewed research, clinical trials, and stability testing. We use therapeutic concentrations backed by published studies. Every ingredient percentage is disclosed, and we never hide formulation details behind proprietary blends.",
},
id: "science-faq-4", title: "How do you validate ingredient efficacy?", content:
"Each active ingredient is validated through peer-reviewed research, clinical trials, and stability testing. We use therapeutic concentrations backed by published studies. Every ingredient percentage is disclosed, and we never hide formulation details behind proprietary blends."},
{
id: "science-faq-5",
title: "What research supports the concern-driven approach?",
content:
"The concern-driven model is based on dermatological classification of skin conditions and targeted treatment protocols. Rather than one-size-fits-all routines, concern-specific formulations allow for precision medicine in skincare. This approach is supported by the American Academy of Dermatology and leading skincare research institutions.",
},
id: "science-faq-5", title: "What research supports the concern-driven approach?", content:
"The concern-driven model is based on dermatological classification of skin conditions and targeted treatment protocols. Rather than one-size-fits-all routines, concern-specific formulations allow for precision medicine in skincare. This approach is supported by the American Academy of Dermatology and leading skincare research institutions."},
{
id: "science-faq-6",
title: "Can I see the clinical trial results?",
content:
"Yes! We believe in transparency. White papers, clinical summaries, and efficacy data are available on our website and by request from our customer service team. Studies cover topics like anti-aging, pigmentation correction, acne reduction, and barrier repair.",
},
id: "science-faq-6", title: "Can I see the clinical trial results?", content:
"Yes! We believe in transparency. White papers, clinical summaries, and efficacy data are available on our website and by request from our customer service team. Studies cover topics like anti-aging, pigmentation correction, acne reduction, and barrier repair."},
{
id: "science-faq-7",
title: "How often do you update formulations based on research?",
content:
"We continuously monitor emerging skincare research and ingredient science. When evidence supports an improvement, we iterate formulations while maintaining backward compatibility for loyal customers. Major updates are announced via our Journal and community channels.",
},
id: "science-faq-7", title: "How often do you update formulations based on research?", content:
"We continuously monitor emerging skincare research and ingredient science. When evidence supports an improvement, we iterate formulations while maintaining backward compatibility for loyal customers. Major updates are announced via our Journal and community channels."},
{
id: "science-faq-8",
title: "What certifications does KAYURA hold?",
content:
"KAYURA is certified cruelty-free by PETA, holds ISO 9001 quality management certification, and complies with FDA cosmetic regulations and international beauty standards. We also maintain third-party laboratory testing for purity and potency validation.",
},
id: "science-faq-8", title: "What certifications does KAYURA hold?", content:
"KAYURA is certified cruelty-free by PETA, holds ISO 9001 quality management certification, and complies with FDA cosmetic regulations and international beauty standards. We also maintain third-party laboratory testing for purity and potency validation."},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg?_wi=4"
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg"
imageAlt="KAYURA Premium Skincare Collection"
logoText="KAYURA"
copyrightText="© 2024 KAYURA | Premium Systemic & Topical Skincare"

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

@@ -19,8 +19,7 @@ export default function ShopPage() {
const footerColumns = [
{
title: "Shop",
items: [
title: "Shop", items: [
{ label: "All Products", href: "/shop" },
{ label: "Prepare", href: "/shop?stage=prepare" },
{ label: "Build", href: "/shop?stage=build" },
@@ -30,8 +29,7 @@ export default function ShopPage() {
],
},
{
title: "Resources",
items: [
title: "Resources", items: [
{ label: "Take the Quiz", href: "/" },
{ label: "Science & Research", href: "/" },
{ label: "Journal & Blog", href: "/" },
@@ -41,8 +39,7 @@ export default function ShopPage() {
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Return Policy", href: "#" },
@@ -81,68 +78,28 @@ export default function ShopPage() {
description="Explore KAYURA's full range of clinically-formulated skincare solutions. Shop by concern, stage, or product type to find your perfect routine."
tag="All Products"
tagIcon={Heart}
tagAnimation="entrance-slide"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
products={[
{
id: "fs-foundation",
name: "Foundation Serum",
price: "$110",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg?_wi=3",
imageAlt: "Foundation Serum - Universal First Serum",
},
id: "fs-foundation", name: "Foundation Serum", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg", imageAlt: "Foundation Serum - Universal First Serum"},
{
id: "c1-cleanser",
name: "Exfoliating Cleanser",
price: "$62",
imageSrc: "http://img.b2bpic.net/free-photo/hand-cream-background-top-view_23-2148241929.jpg?_wi=2",
imageAlt: "Exfoliating Cleanser - Weekly Treatment",
},
id: "c1-cleanser", name: "Exfoliating Cleanser", price: "$62", imageSrc: "http://img.b2bpic.net/free-photo/hand-cream-background-top-view_23-2148241929.jpg", imageAlt: "Exfoliating Cleanser - Weekly Treatment"},
{
id: "s0-supplement",
name: "Foundation Supplement",
price: "$80",
imageSrc: "http://img.b2bpic.net/free-photo/photo-pleased-young-womann-with-curly-bushy-hair-keeps-hand-face-smiles-happily-has-eyes-closed-holds-green-plant-applies-beauty-patches-eyes-uses-natural-cosmetic-skin-care-concept_273609-60711.jpg?_wi=2",
imageAlt: "Foundation Supplement - Daily Systemic",
},
id: "s0-supplement", name: "Foundation Supplement", price: "$80", imageSrc: "http://img.b2bpic.net/free-photo/photo-pleased-young-womann-with-curly-bushy-hair-keeps-hand-face-smiles-happily-has-eyes-closed-holds-green-plant-applies-beauty-patches-eyes-uses-natural-cosmetic-skin-care-concept_273609-60711.jpg", imageAlt: "Foundation Supplement - Daily Systemic"},
{
id: "spf-mineral",
name: "Mineral SPF 50+",
price: "$58",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg?_wi=4",
imageAlt: "Mineral SPF 50+ - UV Protection",
},
id: "spf-mineral", name: "Mineral SPF 50+", price: "$58", imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-holding-ampoule-sunlight-with-window_181624-46555.jpg", imageAlt: "Mineral SPF 50+ - UV Protection"},
{
id: "aging-serum",
name: "Anti-Aging Firming Serum",
price: "$145",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-woman-using-serum_23-2149343874.jpg?_wi=2",
imageAlt: "Anti-Aging Firming Serum",
},
id: "aging-serum", name: "Anti-Aging Firming Serum", price: "$145", imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-woman-using-serum_23-2149343874.jpg", imageAlt: "Anti-Aging Firming Serum"},
{
id: "brightening-serum",
name: "Brightening Essence",
price: "$115",
imageSrc: "http://img.b2bpic.net/free-photo/close-beauty-portrait-topless-woman-with-perfect-skin-natural-make-up-holds-serum-youth-skin-hydration-dropper-with-cosmetic-oil_343596-7827.jpg?_wi=2",
imageAlt: "Brightening Essence - Pigmentation Solution",
},
id: "brightening-serum", name: "Brightening Essence", price: "$115", imageSrc: "http://img.b2bpic.net/free-photo/close-beauty-portrait-topless-woman-with-perfect-skin-natural-make-up-holds-serum-youth-skin-hydration-dropper-with-cosmetic-oil_343596-7827.jpg", imageAlt: "Brightening Essence - Pigmentation Solution"},
{
id: "acne-treatment",
name: "Microbiome Clarifying Serum",
price: "$95",
imageSrc: "http://img.b2bpic.net/free-photo/person-dealing-with-rosacea_23-2150478613.jpg?_wi=2",
imageAlt: "Microbiome Clarifying Serum",
},
id: "acne-treatment", name: "Microbiome Clarifying Serum", price: "$95", imageSrc: "http://img.b2bpic.net/free-photo/person-dealing-with-rosacea_23-2150478613.jpg", imageAlt: "Microbiome Clarifying Serum"},
{
id: "barrier-balm",
name: "Barrier Repair Balm",
price: "$88",
imageSrc: "http://img.b2bpic.net/free-photo/woman-holds-jar-with-cosmetic-cream-her-hands_1150-11722.jpg?_wi=2",
imageAlt: "Barrier Repair Balm - Sensitive Care",
},
id: "barrier-balm", name: "Barrier Repair Balm", price: "$88", imageSrc: "http://img.b2bpic.net/free-photo/woman-holds-jar-with-cosmetic-cream-her-hands_1150-11722.jpg", imageAlt: "Barrier Repair Balm - Sensitive Care"},
]}
/>
</div>
@@ -157,48 +114,18 @@ export default function ShopPage() {
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Chen, Beauty Director",
date: "Date: 15 November 2024",
title: "My skin has never looked clearer",
quote: "The concern-driven approach to skincare finally made sense to me. I used the quiz to find products specifically for hyperpigmentation, and within 8 weeks I saw visible improvement in my dark spots. The Foundation Serum is now non-negotiable in my routine.",
tag: "Verified Purchase",
avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg",
avatarAlt: "Sarah Chen",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg?_wi=2",
imageAlt: "Sarah Chen testimonial",
},
id: "t1", name: "Sarah Chen, Beauty Director", date: "Date: 15 November 2024", title: "My skin has never looked clearer", quote: "The concern-driven approach to skincare finally made sense to me. I used the quiz to find products specifically for hyperpigmentation, and within 8 weeks I saw visible improvement in my dark spots. The Foundation Serum is now non-negotiable in my routine.", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg", avatarAlt: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-s-day-concept_23-2148594291.jpg", imageAlt: "Sarah Chen testimonial"},
{
id: "t2",
name: "Marcus Williams, CEO",
date: "Date: 10 November 2024",
title: "Systemic + topical actually works",
quote: "I was skeptical about the supplement angle, but after 12 weeks on the Foundation Supplement paired with topical serums, my skin texture improved dramatically. This is the first skincare brand that treats skin health holistically.",
tag: "Verified Purchase",
avatarSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg",
avatarAlt: "Marcus Williams",
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg?_wi=2",
imageAlt: "Marcus Williams testimonial",
},
id: "t2", name: "Marcus Williams, CEO", date: "Date: 10 November 2024", title: "Systemic + topical actually works", quote: "I was skeptical about the supplement angle, but after 12 weeks on the Foundation Supplement paired with topical serums, my skin texture improved dramatically. This is the first skincare brand that treats skin health holistically.", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg", avatarAlt: "Marcus Williams", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-967.jpg", imageAlt: "Marcus Williams testimonial"},
{
id: "t3",
name: "Amelia Rodriguez, Dermatologist",
date: "Date: 8 November 2024",
title: "Clinically sound formulations",
quote: "As a dermatologist, I'm impressed by KAYURA's attention to ingredient science and clinical validation. I now recommend their products to patients with specific skin concerns. The multi-taxonomy navigation empowers users to make informed choices.",
tag: "Professional",
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg",
avatarAlt: "Amelia Rodriguez",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg?_wi=2",
imageAlt: "Amelia Rodriguez testimonial",
},
id: "t3", name: "Amelia Rodriguez, Dermatologist", date: "Date: 8 November 2024", title: "Clinically sound formulations", quote: "As a dermatologist, I'm impressed by KAYURA's attention to ingredient science and clinical validation. I now recommend their products to patients with specific skin concerns. The multi-taxonomy navigation empowers users to make informed choices.", tag: "Professional", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg", avatarAlt: "Amelia Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396202.jpg", imageAlt: "Amelia Rodriguez testimonial"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg"
imageAlt="KAYURA Premium Skincare Collection"
logoText="KAYURA"
copyrightText="© 2024 KAYURA | Premium Systemic & Topical Skincare"

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

@@ -1,51 +1,49 @@
"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;
width?: number;
height?: number;
fontSize?: number;
fontFamily?: string;
fill?: string;
stroke?: string;
strokeWidth?: number;
className?: string;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
width = 200,
height = 100,
fontSize = 48,
fontFamily = "Arial, sans-serif", fill = "currentColor", stroke = "none", strokeWidth = 0,
className = ""}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
xmlns="http://www.w3.org/2000/svg"
className={className}
role="img"
aria-label={`${logoText} logo`}
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="50%"
y="50%"
textAnchor="middle"
dominantBaseline="central"
fontSize={fontSize}
fontFamily={fontFamily}
fill={fill}
stroke={stroke}
strokeWidth={strokeWidth}
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;