Merge version_1 into main #2
@@ -52,7 +52,7 @@ export default function AboutPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -73,24 +73,16 @@ export default function AboutPage() {
|
||||
metrics={[
|
||||
{
|
||||
icon: Users,
|
||||
label: "Experienced Teachers",
|
||||
value: "20+",
|
||||
},
|
||||
label: "Experienced Teachers", value: "20+"},
|
||||
{
|
||||
icon: Heart,
|
||||
label: "Activity-Based Learning",
|
||||
value: "100%",
|
||||
},
|
||||
label: "Activity-Based Learning", value: "100%"},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Safe & Hygienic",
|
||||
value: "24/7",
|
||||
},
|
||||
label: "Safe & Hygienic", value: "24/7"},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
label: "Creativity Focus",
|
||||
value: "Daily",
|
||||
},
|
||||
label: "Creativity Focus", value: "Daily"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
@@ -101,43 +93,25 @@ export default function AboutPage() {
|
||||
<FeatureCardNine
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Caring & Trained Teachers",
|
||||
description: "Our experienced educators are trained in modern pedagogical methods and genuinely care about your child's development.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-girl-painting-her-palm_23-2148464635.jpg?_wi=4",
|
||||
imageAlt: "About classroom - teacher with children",
|
||||
},
|
||||
id: 1,
|
||||
title: "Caring & Trained Teachers", description: "Our experienced educators are trained in modern pedagogical methods and genuinely care about your child's development.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-girl-painting-her-palm_23-2148464635.jpg", imageAlt: "About classroom - teacher with children"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg?_wi=5",
|
||||
imageAlt: "Playgroup children engaging in activities",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg", imageAlt: "Playgroup children engaging in activities"},
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Activity-Based Curriculum",
|
||||
description: "Children learn through play, creativity, and hands-on exploration, making learning fun and engaging.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg?_wi=5",
|
||||
imageAlt: "Nursery children in creative activities",
|
||||
},
|
||||
id: 2,
|
||||
title: "Activity-Based Curriculum", description: "Children learn through play, creativity, and hands-on exploration, making learning fun and engaging.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg", imageAlt: "Nursery children in creative activities"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg?_wi=5",
|
||||
imageAlt: "KG students learning with tutor",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg", imageAlt: "KG students learning with tutor"},
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Safe & Hygienic Campus",
|
||||
description: "We maintain the highest standards of cleanliness and safety, with secure facilities and regular health checks.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg?_wi=5",
|
||||
imageAlt: "Daycare safe environment",
|
||||
},
|
||||
id: 3,
|
||||
title: "Safe & Hygienic Campus", description: "We maintain the highest standards of cleanliness and safety, with secure facilities and regular health checks.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg", imageAlt: "Daycare safe environment"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-child-sitting-grass_23-2147637030.jpg?_wi=4",
|
||||
imageAlt: "Happy children in preschool",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-child-sitting-grass_23-2147637030.jpg", imageAlt: "Happy children in preschool"},
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
|
||||
232
src/app/page.tsx
232
src/app/page.tsx
@@ -64,7 +64,7 @@ export default function HomePage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -86,49 +86,33 @@ export default function HomePage() {
|
||||
tag="Early Learning Excellence"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "aurora" }}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "📞 Call Now",
|
||||
href: "tel:08860620689",
|
||||
},
|
||||
text: "📞 Call Now", href: "tel:08860620689"},
|
||||
{
|
||||
text: "📝 Book School Visit",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "📝 Book School Visit", href: "/contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/cheerful-child-sitting-grass_23-2147637030.jpg?_wi=1",
|
||||
imageAlt: "Happy children playing in preschool",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/cheerful-child-sitting-grass_23-2147637030.jpg", imageAlt: "Happy children playing in preschool"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/high-angle-girl-painting-her-palm_23-2148464635.jpg?_wi=1",
|
||||
imageAlt: "Modern preschool classroom with learning activities",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/high-angle-girl-painting-her-palm_23-2148464635.jpg", imageAlt: "Modern preschool classroom with learning activities"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg?_wi=1",
|
||||
imageAlt: "Children engaged in playgroup activities",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg", imageAlt: "Children engaged in playgroup activities"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg?_wi=1",
|
||||
imageAlt: "Nursery children creating art projects",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg", imageAlt: "Nursery children creating art projects"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg?_wi=1",
|
||||
imageAlt: "KG students learning and preparing for primary school",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg", imageAlt: "KG students learning and preparing for primary school"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg?_wi=1",
|
||||
imageAlt: "Safe daycare environment for children",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg", imageAlt: "Safe daycare environment for children"},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -140,24 +124,16 @@ export default function HomePage() {
|
||||
metrics={[
|
||||
{
|
||||
icon: Users,
|
||||
label: "Experienced Teachers",
|
||||
value: "20+",
|
||||
},
|
||||
label: "Experienced Teachers", value: "20+"},
|
||||
{
|
||||
icon: Heart,
|
||||
label: "Activity-Based Learning",
|
||||
value: "100%",
|
||||
},
|
||||
label: "Activity-Based Learning", value: "100%"},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Safe & Hygienic",
|
||||
value: "24/7",
|
||||
},
|
||||
label: "Safe & Hygienic", value: "24/7"},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
label: "Creativity Focus",
|
||||
value: "Daily",
|
||||
},
|
||||
label: "Creativity Focus", value: "Daily"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
@@ -173,37 +149,17 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "playgroup",
|
||||
name: "Playgroup",
|
||||
price: "Age 2+",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg?_wi=2",
|
||||
imageAlt: "Playgroup children learning through play",
|
||||
},
|
||||
id: "playgroup", name: "Playgroup", price: "Age 2+", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg", imageAlt: "Playgroup children learning through play"},
|
||||
{
|
||||
id: "nursery",
|
||||
name: "Nursery",
|
||||
price: "Age 3+",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg?_wi=2",
|
||||
imageAlt: "Nursery children with creative activities",
|
||||
},
|
||||
id: "nursery", name: "Nursery", price: "Age 3+", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg", imageAlt: "Nursery children with creative activities"},
|
||||
{
|
||||
id: "kg",
|
||||
name: "KG",
|
||||
price: "Age 4-5",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg?_wi=2",
|
||||
imageAlt: "KG students preparing for primary school",
|
||||
},
|
||||
id: "kg", name: "KG", price: "Age 4-5", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg", imageAlt: "KG students preparing for primary school"},
|
||||
{
|
||||
id: "daycare",
|
||||
name: "Daycare",
|
||||
price: "All Ages",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg?_wi=2",
|
||||
imageAlt: "Safe daycare for working parents",
|
||||
},
|
||||
id: "daycare", name: "Daycare", price: "All Ages", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg", imageAlt: "Safe daycare for working parents"},
|
||||
]}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
@@ -211,9 +167,7 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore All Programs",
|
||||
href: "/programs",
|
||||
},
|
||||
text: "Explore All Programs", href: "/programs"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -227,46 +181,34 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Caring & Trained Teachers",
|
||||
description:
|
||||
"Our experienced educators are trained in modern pedagogical methods and genuinely care about your child's development.",
|
||||
phoneOne: {
|
||||
id: 1,
|
||||
title: "Caring & Trained Teachers", description:
|
||||
"Our experienced educators are trained in modern pedagogical methods and genuinely care about your child's development.", phoneOne: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/high-angle-girl-painting-her-palm_23-2148464635.jpg?_wi=2",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/high-angle-girl-painting-her-palm_23-2148464635.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg?_wi=3",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/boy-holding-green-container_23-2147664252.jpg"},
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Activity-Based Curriculum",
|
||||
description:
|
||||
"Children learn through play, creativity, and hands-on exploration, making learning fun and engaging.",
|
||||
phoneOne: {
|
||||
id: 2,
|
||||
title: "Activity-Based Curriculum", description:
|
||||
"Children learn through play, creativity, and hands-on exploration, making learning fun and engaging.", phoneOne: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg?_wi=3",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/young-woman-doing-speech-therapy-with-kids_23-2149110282.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg?_wi=3",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/side-view-child-home-being-tutored-through-laptop_23-2148524662.jpg"},
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Safe & Hygienic Campus",
|
||||
description:
|
||||
"We maintain the highest standards of cleanliness and safety, with secure facilities and regular health checks.",
|
||||
phoneOne: {
|
||||
id: 3,
|
||||
title: "Safe & Hygienic Campus", description:
|
||||
"We maintain the highest standards of cleanliness and safety, with secure facilities and regular health checks.", phoneOne: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg?_wi=3",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/young-boy-girl-playing-indoors-with-eco-toys_23-2150268062.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/cheerful-child-sitting-grass_23-2147637030.jpg?_wi=2",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/cheerful-child-sitting-grass_23-2147637030.jpg"},
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
@@ -285,65 +227,35 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Priya Sharma",
|
||||
handle: "@priyasharma",
|
||||
testimonial:
|
||||
"Teachers are very caring and supportive. My daughter loved going to school every day!",
|
||||
rating: 5,
|
||||
id: "1", name: "Priya Sharma", handle: "@priyasharma", testimonial:
|
||||
"Teachers are very caring and supportive. My daughter loved going to school every day!", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/happy-mother-daughter-laughing-together-outdoors_1153-7522.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/happy-mother-daughter-laughing-together-outdoors_1153-7522.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Rajesh Kumar",
|
||||
handle: "@rajeshk",
|
||||
testimonial:
|
||||
"Great environment for kids to grow. The activity-based learning approach is excellent.",
|
||||
rating: 5,
|
||||
id: "2", name: "Rajesh Kumar", handle: "@rajeshk", testimonial:
|
||||
"Great environment for kids to grow. The activity-based learning approach is excellent.", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/lgtbiq-family-enjoying-life-together_23-2149173418.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/lgtbiq-family-enjoying-life-together_23-2149173418.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Anita Singh",
|
||||
handle: "@anitasingh",
|
||||
testimonial:
|
||||
"Learning here feels like playing. My son's confidence and creativity have improved so much.",
|
||||
rating: 5,
|
||||
id: "3", name: "Anita Singh", handle: "@anitasingh", testimonial:
|
||||
"Learning here feels like playing. My son's confidence and creativity have improved so much.", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/mother-with-little-daughter-lying-plaid-summer-park_1157-27261.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/mother-with-little-daughter-lying-plaid-summer-park_1157-27261.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Vikram Patel",
|
||||
handle: "@vikramp",
|
||||
testimonial:
|
||||
"The staff is professional and the facilities are clean and safe. Highly recommended!",
|
||||
rating: 5,
|
||||
id: "4", name: "Vikram Patel", handle: "@vikramp", testimonial:
|
||||
"The staff is professional and the facilities are clean and safe. Highly recommended!", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/father-s-day-dad-son-reading-comic-book_23-2148511432.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/father-s-day-dad-son-reading-comic-book_23-2148511432.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Divya Gupta",
|
||||
handle: "@divyag",
|
||||
testimonial:
|
||||
"Regular parent communication and updates make us feel connected to our child's progress.",
|
||||
rating: 5,
|
||||
id: "5", name: "Divya Gupta", handle: "@divyag", testimonial:
|
||||
"Regular parent communication and updates make us feel connected to our child's progress.", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/mom-daughter-spending-mothers-day-together-out-park_23-2150293186.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/mom-daughter-spending-mothers-day-together-out-park_23-2150293186.jpg"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Arjun Mishra",
|
||||
handle: "@arjunm",
|
||||
testimonial:
|
||||
"Worth every penny. My kids have learned so much and made wonderful friends.",
|
||||
rating: 5,
|
||||
id: "6", name: "Arjun Mishra", handle: "@arjunm", testimonial:
|
||||
"Worth every penny. My kids have learned so much and made wonderful friends.", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/back-view-girl-holding-hands-with-mother_23-2149748250.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/back-view-girl-holding-hands-with-mother_23-2149748250.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
@@ -351,13 +263,31 @@ export default function HomePage() {
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Your Visit",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "Schedule Your Visit", href: "/contact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location">
|
||||
<MetricCardFourteen
|
||||
title="Visit Us Today - Located in the Heart of Ankur Vihar"
|
||||
tag="📍 Our Location"
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "address", value: "MM-6, Near Karawal Nagar", description: "DLF Ankur Vihar, Loni, Ghaziabad, UP 201102"},
|
||||
{
|
||||
id: "hours", value: "Open Daily", description: "Closes at 8 PM - Convenient for working parents"},
|
||||
{
|
||||
id: "service-areas", value: "5+ Areas", description: "Ankur Vihar, Sonia Vihar, Karawal Nagar, Loni & nearby"},
|
||||
{
|
||||
id: "contact", value: "088606 20689", description: "Call us for admissions, inquiries & directions"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta-section" data-section="cta-section">
|
||||
<ContactText
|
||||
text="Book a School Visit Today - Experience the Sanfort School difference firsthand. Limited seats available for new admissions!"
|
||||
@@ -365,13 +295,9 @@ export default function HomePage() {
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "📞 Call Now: 088606 20689",
|
||||
href: "tel:08860620689",
|
||||
},
|
||||
text: "📞 Call Now: 088606 20689", href: "tel:08860620689"},
|
||||
{
|
||||
text: "📅 Schedule Visit",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "📅 Schedule Visit", href: "/contact"},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
|
||||
@@ -1,51 +1,32 @@
|
||||
"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;
|
||||
}
|
||||
|
||||
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,
|
||||
className = "", textClassName = ""}) => {
|
||||
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 300 80"
|
||||
className={`w-full h-auto ${className}`}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
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"
|
||||
className={`fill-current font-bold text-2xl ${textClassName}`}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user