Merge version_1 into main #2
258
src/app/page.tsx
258
src/app/page.tsx
@@ -37,8 +37,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
@@ -46,8 +45,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{ label: "Company Formation", href: "/services" },
|
||||
{ label: "Tax Consulting", href: "/services" },
|
||||
{ label: "Business Registration", href: "/services" },
|
||||
@@ -55,17 +53,12 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone: 093993 95256", href: "tel:+919399395256" },
|
||||
{
|
||||
label: "Email: info@thestartupconnect.com",
|
||||
href: "mailto:info@thestartupconnect.com",
|
||||
},
|
||||
label: "Email: info@thestartupconnect.com", href: "mailto:info@thestartupconnect.com"},
|
||||
{
|
||||
label: "Address: LIG C-5, 90 Quarter, Sanjeevani Nagar, Jabalpur",
|
||||
href: "#",
|
||||
},
|
||||
label: "Address: LIG C-5, 90 Quarter, Sanjeevani Nagar, Jabalpur", href: "#"},
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
@@ -78,7 +71,7 @@ export default function HomePage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
@@ -89,9 +82,7 @@ export default function HomePage() {
|
||||
brandName="Technomate"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Get In Touch",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Get In Touch", href: "#contact"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -103,33 +94,23 @@ export default function HomePage() {
|
||||
tag="Trusted Local Expert"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "noiseDiagonalGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-modern-professional-office-workspace-w-1773343224869-8c585505.png",
|
||||
imageAlt: "Professional office environment",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-modern-professional-office-workspace-w-1773343224869-8c585505.png", imageAlt: "Professional office environment"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-professional-business-consultation-mee-1773343221967-573e6d3f.png",
|
||||
imageAlt: "Business consultation session",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-professional-business-consultation-mee-1773343221967-573e6d3f.png", imageAlt: "Business consultation session"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-diverse-team-of-business-professionals-1773343224056-9496bcea.png",
|
||||
imageAlt: "Team collaboration meeting",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-diverse-team-of-business-professionals-1773343224056-9496bcea.png", imageAlt: "Team collaboration meeting"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/close-up-of-organized-business-documents-1773343225075-d49fe911.png",
|
||||
imageAlt: "Business documents and compliance",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/close-up-of-organized-business-documents-1773343225075-d49fe911.png", imageAlt: "Business documents and compliance"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/happy-entrepreneur-or-business-owner-cel-1773343224505-bbc63038.png",
|
||||
imageAlt: "Successful startup partnership",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/happy-entrepreneur-or-business-owner-cel-1773343224505-bbc63038.png", imageAlt: "Successful startup partnership"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Schedule Consultation", href: "#contact" },
|
||||
@@ -145,10 +126,7 @@ export default function HomePage() {
|
||||
heading={[
|
||||
{ type: "text", content: "Why Choose " },
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-professional-company-badge-or-seal-for-1773343222627-35677243.png",
|
||||
alt: "Technomate Badge",
|
||||
},
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-professional-company-badge-or-seal-for-1773343222627-35677243.png", alt: "Technomate Badge"},
|
||||
{ type: "text", content: " for Your Startup Needs" },
|
||||
]}
|
||||
buttons={[
|
||||
@@ -169,71 +147,43 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Company Formation & Registration",
|
||||
description:
|
||||
"Expert guidance through the complete company incorporation process, including documentation, legal compliance, and government filing.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Company Formation & Registration", description:
|
||||
"Expert guidance through the complete company incorporation process, including documentation, legal compliance, and government filing.", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Quick Processing",
|
||||
value: "10-15 Days",
|
||||
},
|
||||
label: "Quick Processing", value: "10-15 Days"},
|
||||
{ icon: Shield, label: "Full Compliance", value: "100% Legal" },
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Expert Support",
|
||||
value: "Dedicated Team",
|
||||
},
|
||||
label: "Expert Support", value: "Dedicated Team"},
|
||||
],
|
||||
button: {
|
||||
text: "Learn More",
|
||||
href: "/services",
|
||||
},
|
||||
text: "Learn More", href: "/services"},
|
||||
},
|
||||
{
|
||||
title: "Tax Consulting & Financial Advisory",
|
||||
description:
|
||||
"Optimize your business finances with strategic tax planning, financial forecasting, and compliance support.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
button: {
|
||||
text: "Explore",
|
||||
href: "/services",
|
||||
},
|
||||
title: "Tax Consulting & Financial Advisory", description:
|
||||
"Optimize your business finances with strategic tax planning, financial forecasting, and compliance support.", bentoComponent: "animated-bar-chart", button: {
|
||||
text: "Explore", href: "/services"},
|
||||
},
|
||||
{
|
||||
title: "Business Registration & Licenses",
|
||||
description:
|
||||
"Navigate the complex landscape of business licenses, permits, and regulatory requirements with ease.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Business Registration & Licenses", description:
|
||||
"Navigate the complex landscape of business licenses, permits, and regulatory requirements with ease.", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: FileCheck,
|
||||
label: "All Permits",
|
||||
value: "Complete",
|
||||
},
|
||||
label: "All Permits", value: "Complete"},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Timely Filing",
|
||||
value: "On Schedule",
|
||||
},
|
||||
label: "Timely Filing", value: "On Schedule"},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Expert Guidance",
|
||||
value: "Personal Touch",
|
||||
},
|
||||
label: "Expert Guidance", value: "Personal Touch"},
|
||||
],
|
||||
button: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Get Started", href: "#contact"},
|
||||
},
|
||||
{
|
||||
title: "Startup Advisory & Mentoring",
|
||||
description:
|
||||
"Personalized guidance from experienced consultants who understand the local business ecosystem.",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Lightbulb,
|
||||
title: "Startup Advisory & Mentoring", description:
|
||||
"Personalized guidance from experienced consultants who understand the local business ecosystem.", bentoComponent: "orbiting-icons", centerIcon: Lightbulb,
|
||||
items: [
|
||||
{ icon: TrendingUp, ring: 1 },
|
||||
{ icon: Users, ring: 2 },
|
||||
@@ -241,9 +191,7 @@ export default function HomePage() {
|
||||
{ icon: Award, ring: 2 },
|
||||
],
|
||||
button: {
|
||||
text: "Schedule Meeting",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Schedule Meeting", href: "#contact"},
|
||||
},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
@@ -262,71 +210,35 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Rajesh Sharma",
|
||||
handle: "@rajesh_tech",
|
||||
testimonial:
|
||||
"Technomate helped me navigate the entire company formation process seamlessly. Their team was incredibly responsive and guided me through every step. Highly recommended!",
|
||||
rating: 5,
|
||||
id: "1", name: "Rajesh Sharma", handle: "@rajesh_tech", testimonial:
|
||||
"Technomate helped me navigate the entire company formation process seamlessly. Their team was incredibly responsive and guided me through every step. Highly recommended!", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-male--1773343221466-0cadec0e.png",
|
||||
imageAlt: "Rajesh Sharma",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-male--1773343221466-0cadec0e.png", imageAlt: "Rajesh Sharma"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Priya Gupta",
|
||||
handle: "@priya_entrepreneur",
|
||||
testimonial:
|
||||
"As a first-time entrepreneur, I was overwhelmed with tax compliance requirements. Technomate's expertise made everything clear and manageable. Great service!",
|
||||
rating: 5,
|
||||
id: "2", name: "Priya Gupta", handle: "@priya_entrepreneur", testimonial:
|
||||
"As a first-time entrepreneur, I was overwhelmed with tax compliance requirements. Technomate's expertise made everything clear and manageable. Great service!", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-femal-1773343223704-5d86c366.png",
|
||||
imageAlt: "Priya Gupta",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-femal-1773343223704-5d86c366.png", imageAlt: "Priya Gupta"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Amit Kumar",
|
||||
handle: "@amit_business",
|
||||
testimonial:
|
||||
"Quick turnaround, professional service, and affordable pricing. Technomate truly cares about their clients' success. Worth every penny!",
|
||||
rating: 5,
|
||||
id: "3", name: "Amit Kumar", handle: "@amit_business", testimonial:
|
||||
"Quick turnaround, professional service, and affordable pricing. Technomate truly cares about their clients' success. Worth every penny!", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-male--1773343222000-42f65b95.png",
|
||||
imageAlt: "Amit Kumar",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-male--1773343222000-42f65b95.png", imageAlt: "Amit Kumar"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Neha Patel",
|
||||
handle: "@neha_founder",
|
||||
testimonial:
|
||||
"The team's local knowledge combined with professional expertise is unbeatable. They helped us save time and money while ensuring complete compliance.",
|
||||
rating: 5,
|
||||
id: "4", name: "Neha Patel", handle: "@neha_founder", testimonial:
|
||||
"The team's local knowledge combined with professional expertise is unbeatable. They helped us save time and money while ensuring complete compliance.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-femal-1773343223187-7f584641.png",
|
||||
imageAlt: "Neha Patel",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-femal-1773343223187-7f584641.png", imageAlt: "Neha Patel"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Vikram Singh",
|
||||
handle: "@vikram_startup",
|
||||
testimonial:
|
||||
"Exceptional support throughout our startup journey. The consultants were always available to answer questions and provide strategic advice.",
|
||||
rating: 5,
|
||||
id: "5", name: "Vikram Singh", handle: "@vikram_startup", testimonial:
|
||||
"Exceptional support throughout our startup journey. The consultants were always available to answer questions and provide strategic advice.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-male--1773343223381-5b817303.png",
|
||||
imageAlt: "Vikram Singh",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-male--1773343223381-5b817303.png", imageAlt: "Vikram Singh"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Divya Joshi",
|
||||
handle: "@divya_ventures",
|
||||
testimonial:
|
||||
"Technomate's personalized approach to business advisory is what sets them apart. They genuinely care about our success and it shows in their work.",
|
||||
rating: 5,
|
||||
id: "6", name: "Divya Joshi", handle: "@divya_ventures", testimonial:
|
||||
"Technomate's personalized approach to business advisory is what sets them apart. They genuinely care about our success and it shows in their work.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-femal-1773343221169-ffcde841.png",
|
||||
imageAlt: "Divya Joshi",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/professional-headshot-of-an-indian-femal-1773343221169-ffcde841.png", imageAlt: "Divya Joshi"},
|
||||
]}
|
||||
showRating={true}
|
||||
carouselMode="buttons"
|
||||
@@ -345,36 +257,16 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Companies Incorporated",
|
||||
subtitle: "Successful business formations in Jabalpur and region",
|
||||
category: "Formations",
|
||||
value: "500+",
|
||||
buttons: [{ text: "Get Started", href: "#contact" }],
|
||||
id: "1", title: "Companies Incorporated", subtitle: "Successful business formations in Jabalpur and region", category: "Formations", value: "500+", buttons: [{ text: "Get Started", href: "#contact" }],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Client Retention Rate",
|
||||
subtitle: "Long-term partnerships and repeat clients",
|
||||
category: "Success",
|
||||
value: "95%",
|
||||
buttons: [{ text: "Join Us", href: "#contact" }],
|
||||
id: "2", title: "Client Retention Rate", subtitle: "Long-term partnerships and repeat clients", category: "Success", value: "95%", buttons: [{ text: "Join Us", href: "#contact" }],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Years of Experience",
|
||||
subtitle: "Combined expertise in startup consultancy",
|
||||
category: "Expertise",
|
||||
value: "15+",
|
||||
buttons: [{ text: "Learn More", href: "/about" }],
|
||||
id: "3", title: "Years of Experience", subtitle: "Combined expertise in startup consultancy", category: "Expertise", value: "15+", buttons: [{ text: "Learn More", href: "/about" }],
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Average Response Time",
|
||||
subtitle: "Quick turnaround on consultancy requests",
|
||||
category: "Service",
|
||||
value: "24 Hours",
|
||||
buttons: [{ text: "Contact Now", href: "#contact" }],
|
||||
id: "4", title: "Average Response Time", subtitle: "Quick turnaround on consultancy requests", category: "Service", value: "24 Hours", buttons: [{ text: "Contact Now", href: "#contact" }],
|
||||
},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
@@ -393,43 +285,25 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long does company formation take?",
|
||||
content:
|
||||
"Typically, we complete the company formation process within 10-15 business days from the date you submit all required documents. This includes name approval, GST registration, and all necessary government filings.",
|
||||
},
|
||||
id: "1", title: "How long does company formation take?", content:
|
||||
"Typically, we complete the company formation process within 10-15 business days from the date you submit all required documents. This includes name approval, GST registration, and all necessary government filings."},
|
||||
{
|
||||
id: "2",
|
||||
title: "What documents do I need for company registration?",
|
||||
content:
|
||||
"You'll need PAN and Aadhaar of the proposed directors, address proof, and initial capital information. Our team will provide you with a complete checklist during your consultation.",
|
||||
},
|
||||
id: "2", title: "What documents do I need for company registration?", content:
|
||||
"You'll need PAN and Aadhaar of the proposed directors, address proof, and initial capital information. Our team will provide you with a complete checklist during your consultation."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer virtual consultations?",
|
||||
content:
|
||||
"Yes, we offer both in-person and virtual consultations. You can schedule a call at your convenience, and our team will guide you through the entire process remotely.",
|
||||
},
|
||||
id: "3", title: "Do you offer virtual consultations?", content:
|
||||
"Yes, we offer both in-person and virtual consultations. You can schedule a call at your convenience, and our team will guide you through the entire process remotely."},
|
||||
{
|
||||
id: "4",
|
||||
title: "What are your service fees?",
|
||||
content:
|
||||
"Our fees are competitive and transparent. Different services have different pricing based on complexity. Contact us for a customized quote based on your specific needs.",
|
||||
},
|
||||
id: "4", title: "What are your service fees?", content:
|
||||
"Our fees are competitive and transparent. Different services have different pricing based on complexity. Contact us for a customized quote based on your specific needs."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Can you help with tax planning for startups?",
|
||||
content:
|
||||
"Absolutely! We provide comprehensive tax planning strategies to help you minimize liability while ensuring full compliance. Our team will help you optimize your business structure for maximum benefits.",
|
||||
},
|
||||
id: "5", title: "Can you help with tax planning for startups?", content:
|
||||
"Absolutely! We provide comprehensive tax planning strategies to help you minimize liability while ensuring full compliance. Our team will help you optimize your business structure for maximum benefits."},
|
||||
{
|
||||
id: "6",
|
||||
title: "How do I stay compliant after incorporation?",
|
||||
content:
|
||||
"We offer ongoing compliance support including annual filings, tax returns, audit preparation, and regulatory updates. We'll ensure you stay on track with all statutory requirements.",
|
||||
},
|
||||
id: "6", title: "How do I stay compliant after incorporation?", content:
|
||||
"We offer ongoing compliance support including annual filings, tax returns, audit preparation, and regulatory updates. We'll ensure you stay on track with all statutory requirements."},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-professional-customer-support-represen-1773343224450-bba6b96a.png?_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArFkULhbOzFTIreGpyXLSgQES9/a-professional-customer-support-represen-1773343224450-bba6b96a.png"
|
||||
imageAlt="FAQ support representative"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
|
||||
@@ -1,51 +1,38 @@
|
||||
"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;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
fontSize = 48,
|
||||
fontFamily = 'Arial, sans-serif',
|
||||
className = '',
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 300 100"
|
||||
className={className}
|
||||
>
|
||||
<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%"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
fill="currentColor"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user