Merge version_1 into main #3
@@ -3,43 +3,40 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import Link from "next/link";
|
||||
import { Zap, Users, Heart } from "lucide-react";
|
||||
import { Zap, CreditCard, Mail } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "/features" },
|
||||
{ name: "Features", id: "/dashboard" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Docs", id: "https://docs.nextgen-intelligence.io" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Contact", id: "/" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{ label: "Features", href: "/features" },
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "Documentation", href: "https://docs.nextgen-intelligence.io" },
|
||||
{ label: "API Reference", href: "https://api.nextgen-intelligence.io" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Blog", href: "https://blog.nextgen-intelligence.io" },
|
||||
{ label: "Careers", href: "https://careers.nextgen-intelligence.io" },
|
||||
{ label: "Press", href: "https://press.nextgen-intelligence.io" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Tutorials", href: "https://tutorials.nextgen-intelligence.io" },
|
||||
{ label: "Community", href: "https://community.nextgen-intelligence.io" },
|
||||
{ label: "Support", href: "https://support.nextgen-intelligence.io" },
|
||||
@@ -47,8 +44,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "https://nextgen-intelligence.io/privacy" },
|
||||
{ label: "Terms of Service", href: "https://nextgen-intelligence.io/terms" },
|
||||
{ label: "Cookie Policy", href: "https://nextgen-intelligence.io/cookies" },
|
||||
@@ -79,215 +75,94 @@ export default function AboutPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<div id="about" data-section="about">
|
||||
<FeatureCardOne
|
||||
title="About NextGen Intelligence"
|
||||
description="Discover how our cutting-edge AI platform is transforming the way professionals work, think, and innovate across industries."
|
||||
tag="Our Story"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="none"
|
||||
features={[
|
||||
{
|
||||
title: "Smart AI Chat",
|
||||
description: "Natural, conversational interactions with streaming responses, markdown rendering, and context awareness. Perfect for creative brainstorming and quick answers.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-sleek-interface-showing-an-ai-chatbot--1773254740872-c8f36bac.png?_wi=7",
|
||||
imageAlt: "Smart AI Chat interface",
|
||||
},
|
||||
title: "Founded on Innovation", description: "NextGen Intelligence was born from a vision to democratize access to advanced AI capabilities. Our founding team recognized that powerful AI should be accessible to everyone, not just large enterprises.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-modern-ai-chatbot-dashboard-interface--1773254741264-26fb4668.png", imageAlt: "Innovation in AI technology"},
|
||||
{
|
||||
title: "Research Mode",
|
||||
description: "Comprehensive research capabilities with source aggregation, citations, and multi-step analysis. Ideal for deep dives into complex topics.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/an-advanced-research-mode-interface-show-1773254741364-55b3faff.png?_wi=8",
|
||||
imageAlt: "Research Mode interface",
|
||||
},
|
||||
title: "Mission-Driven Approach", description: "Our mission is to empower individuals and organizations with intelligent tools that enhance creativity, productivity, and decision-making. We're committed to responsible AI development and ethical practices.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-sleek-interface-showing-an-ai-chatbot--1773254740872-c8f36bac.png", imageAlt: "Mission-driven team collaboration"},
|
||||
{
|
||||
title: "Coding Assistant",
|
||||
description: "Expert programming support with syntax highlighting, debugging, and multi-language support. Your perfect pair programmer.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-sophisticated-code-generation-interfac-1773254741205-07d37bac.png?_wi=4",
|
||||
imageAlt: "Coding Assistant interface",
|
||||
},
|
||||
title: "Community-Focused", description: "We believe in building with our users, not for them. Regular feedback sessions, community forums, and collaborative development ensure our platform evolves to meet real-world needs.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/an-advanced-research-mode-interface-show-1773254741364-55b3faff.png", imageAlt: "Community engagement and collaboration"},
|
||||
{
|
||||
title: "Image Generation",
|
||||
description: "Create stunning visuals with advanced AI image generation. Customize styles, refine results, and build your visual content library.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-creative-image-generation-interface-sh-1773254741377-448209df.png?_wi=3",
|
||||
imageAlt: "Image Generation interface",
|
||||
},
|
||||
{
|
||||
title: "Business Intelligence",
|
||||
description: "Advanced analytics and predictive insights for data-driven decision making. Transform raw data into actionable intelligence.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-comprehensive-business-intelligence-da-1773254741352-60ccbb8f.png?_wi=6",
|
||||
imageAlt: "Business Intelligence interface",
|
||||
},
|
||||
{
|
||||
title: "Study Assistant",
|
||||
description: "Personalized learning support with adaptive explanations, practice problems, and concept mastery tracking.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/an-advanced-research-mode-interface-show-1773254741364-55b3faff.png?_wi=9",
|
||||
imageAlt: "Study Assistant interface",
|
||||
},
|
||||
title: "Continuous Innovation", description: "Our research and development team works tirelessly to incorporate the latest advancements in AI and machine learning, ensuring NextGen Intelligence stays at the cutting edge of technology.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-sophisticated-code-generation-interfac-1773254741205-07d37bac.png", imageAlt: "Research and development innovation"},
|
||||
]}
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
title="Powerful AI Modes for Every Use Case"
|
||||
description="Unlock the full potential of AI with our specialized modes designed for different workflows. From intelligent research to advanced coding, NextGen Intelligence adapts to your needs."
|
||||
tag="Features"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="entrance-slide"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
groups={[
|
||||
<div id="values" data-section="values">
|
||||
<FeatureCardOne
|
||||
title="Our Core Values"
|
||||
description="These principles guide every decision we make and shape our culture and commitment to excellence."
|
||||
tag="Values"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="none"
|
||||
features={[
|
||||
{
|
||||
id: "leadership",
|
||||
groupTitle: "Executive Team",
|
||||
members: [
|
||||
{
|
||||
id: "1",
|
||||
title: "Dr. Alexander Chen",
|
||||
subtitle: "Founder & CEO",
|
||||
detail: "alex@nextgen-intelligence.io",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-team-member-photo-tech-comp-1773254740529-9b73ad48.png?_wi=3",
|
||||
imageAlt: "Dr. Alexander Chen",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Dr. Priya Sharma",
|
||||
subtitle: "Chief AI Officer",
|
||||
detail: "priya@nextgen-intelligence.io",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-team-member-headshot-modern-1773254739415-0453edc4.png?_wi=3",
|
||||
imageAlt: "Dr. Priya Sharma",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Michael Johnson",
|
||||
subtitle: "Chief Technology Officer",
|
||||
detail: "michael@nextgen-intelligence.io",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-team-member-portrait-creati-1773254740701-9c5158fb.png?_wi=2",
|
||||
imageAlt: "Michael Johnson",
|
||||
},
|
||||
],
|
||||
title: "Integrity", description: "We operate with transparency and honesty in all our interactions, building trust with our users and partners.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-creative-image-generation-interface-sh-1773254741377-448209df.png", imageAlt: "Integrity and transparency"},
|
||||
{
|
||||
title: "Excellence", description: "We're dedicated to delivering the highest quality products and services, continuously pushing boundaries and raising standards.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-comprehensive-business-intelligence-da-1773254741352-60ccbb8f.png", imageAlt: "Excellence in service delivery"},
|
||||
]}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the perfect plan for your AI needs. Scale up anytime as your usage grows."
|
||||
tag="Pricing"
|
||||
tagIcon={CreditCard}
|
||||
tagAnimation="none"
|
||||
plans={[
|
||||
{
|
||||
id: "starter", title: "Starter", price: "$9", period: "/month", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-sleek-interface-showing-an-ai-chatbot--1773254740872-c8f36bac.png", imageAlt: "Starter plan interface", button: { text: "Get Started", href: "#signup" },
|
||||
features: [
|
||||
"100 daily conversations", "General AI mode", "Basic chat history", "Email support"],
|
||||
},
|
||||
{
|
||||
id: "research",
|
||||
groupTitle: "Research & Development",
|
||||
members: [
|
||||
{
|
||||
id: "4",
|
||||
title: "Dr. Sophie Dubois",
|
||||
subtitle: "Head of Research",
|
||||
detail: "sophie@nextgen-intelligence.io",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-team-member-headshot-friend-1773254741043-ec2c1fc4.png?_wi=2",
|
||||
imageAlt: "Dr. Sophie Dubois",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Dr. James Park",
|
||||
subtitle: "ML Engineer",
|
||||
detail: "james@nextgen-intelligence.io",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-team-member-photo-tech-comp-1773254740529-9b73ad48.png?_wi=4",
|
||||
imageAlt: "Dr. James Park",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Elena Rodriguez",
|
||||
subtitle: "AI Researcher",
|
||||
detail: "elena@nextgen-intelligence.io",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-team-member-headshot-modern-1773254739415-0453edc4.png?_wi=4",
|
||||
imageAlt: "Elena Rodriguez",
|
||||
},
|
||||
],
|
||||
id: "pro", title: "Professional", price: "$29", period: "/month", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/an-advanced-research-mode-interface-show-1773254741364-55b3faff.png", imageAlt: "Professional plan interface", button: { text: "Start Free Trial", href: "#signup" },
|
||||
features: [
|
||||
"Unlimited conversations", "All AI modes included", "Research & analysis", "Code generation", "Priority support"],
|
||||
},
|
||||
{
|
||||
id: "enterprise", title: "Enterprise", price: "Custom", period: "pricing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/a-comprehensive-business-intelligence-da-1773254741352-60ccbb8f.png", imageAlt: "Enterprise plan interface", button: {
|
||||
text: "Contact Sales", href: "mailto:sales@nextgen-intelligence.io"},
|
||||
features: [
|
||||
"Custom quotas", "API access", "Advanced analytics", "Dedicated support", "White-label options"],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Meet Our Exceptional Team"
|
||||
description="Brilliant minds dedicated to advancing AI technology and creating the future of intelligent computing."
|
||||
tag="Leadership"
|
||||
tagIcon={Users}
|
||||
tagAnimation="entrance-slide"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Chen, CEO of TechFlow",
|
||||
date: "Date: 15 November 2024",
|
||||
title: "Transformed our development workflow completely",
|
||||
quote: "NextGen Intelligence has become an integral part of our team's daily workflow. The coding assistant alone has increased our productivity by 40%, and the research mode helps us stay ahead of industry trends.",
|
||||
tag: "Enterprise",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-headshot-of-a-diverse-tech--1773254740571-20b986e6.png",
|
||||
avatarAlt: "Sarah Chen",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/modern-office-workspace-with-team-collab-1773254741162-d697589c.png?_wi=3",
|
||||
imageAlt: "TechFlow office workspace",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Rodriguez, Founder of DataViz Inc",
|
||||
date: "Date: 22 October 2024",
|
||||
title: "The best AI investment we've made",
|
||||
quote: "The business intelligence features are phenomenal. We can now analyze complex datasets and generate insights in minutes instead of hours. The ROI has been remarkable.",
|
||||
tag: "Scale-up",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-headshot-of-a-tech-entrepre-1773254740179-467020c0.png",
|
||||
avatarAlt: "Marcus Rodriguez",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/advanced-technology-interface-visualizat-1773254741128-2f457fac.png?_wi=3",
|
||||
imageAlt: "Data visualization interface",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Thompson, Senior Data Scientist",
|
||||
date: "Date: 10 November 2024",
|
||||
title: "Remarkable accuracy and reliability",
|
||||
quote: "I've tested many AI platforms, but NextGen Intelligence stands out for its accuracy, speed, and reliability. The research mode is particularly impressive for complex analysis tasks.",
|
||||
tag: "Professional",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-headshot-of-a-creative-prof-1773254740985-292bfb79.png",
|
||||
avatarAlt: "Emma Thompson",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-business-environment-with-t-1773254740596-41a2f59d.png?_wi=2",
|
||||
imageAlt: "Professional workspace",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim, Product Manager at Innovate Labs",
|
||||
date: "Date: 5 November 2024",
|
||||
title: "Game-changer for product development",
|
||||
quote: "From ideation to execution, NextGen Intelligence accelerates every stage of our product development process. The UI is intuitive and the results are consistently excellent.",
|
||||
tag: "Growth",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-headshot-of-a-business-exec-1773254739125-ea00cae5.png",
|
||||
avatarAlt: "David Kim",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/innovative-tech-startup-environment-crea-1773254741310-88740c4c.png?_wi=2",
|
||||
imageAlt: "Startup workspace",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa Yang, AI Research Lead",
|
||||
date: "Date: 28 October 2024",
|
||||
title: "The future of conversational AI",
|
||||
quote: "As an AI researcher, I'm impressed by the sophisticated architecture and seamless integration of multiple AI capabilities. NextGen Intelligence represents the next generation of AI platforms.",
|
||||
tag: "Research",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-headshot-of-an-ai-researche-1773254740222-0f78cb66.png",
|
||||
avatarAlt: "Lisa Yang",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/advanced-technology-interface-visualizat-1773254741128-2f457fac.png?_wi=4",
|
||||
imageAlt: "AI technology visualization",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "James Mitchell, CTO of Digital Solutions",
|
||||
date: "Date: 18 November 2024",
|
||||
title: "Exceptional support and continuous improvement",
|
||||
quote: "The team behind NextGen Intelligence is incredibly responsive and committed to improvement. The platform evolves constantly with user feedback. Highly recommended for any tech organization.",
|
||||
tag: "Enterprise",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/professional-headshot-of-a-diverse-tech--1773254740571-20b986e6.png",
|
||||
avatarAlt: "James Mitchell",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZwT4gfKw7HRJios7nT38aarwy/modern-office-workspace-with-team-collab-1773254741162-d697589c.png?_wi=4",
|
||||
imageAlt: "Team collaboration",
|
||||
},
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get Started"
|
||||
tagIcon={Mail}
|
||||
tagAnimation="none"
|
||||
title="Ready to Experience NextGen Intelligence?"
|
||||
description="Join thousands of professionals leveraging advanced AI to transform their work. Start your free trial today and unlock unlimited possibilities."
|
||||
buttons={[
|
||||
{ text: "Start Free Trial", href: "/dashboard" },
|
||||
{ text: "Schedule Demo", href: "mailto:hello@nextgen-intelligence.io" },
|
||||
]}
|
||||
title="Trusted by Innovators and Leaders"
|
||||
description="See how industry professionals are leveraging NextGen Intelligence to transform their work."
|
||||
tag="Success Stories"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="entrance-slide"
|
||||
textboxLayout="default"
|
||||
buttonAnimation="none"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,67 @@
|
||||
"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;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fontWeight?: string | number;
|
||||
fill?: string;
|
||||
strokeWidth?: number;
|
||||
stroke?: 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 = "", fontSize = 48,
|
||||
fontFamily = "Arial, sans-serif", fontWeight = 700,
|
||||
fill = "currentColor", strokeWidth = 0,
|
||||
stroke = "none"}) => {
|
||||
// Measure text width using a temporary SVG element
|
||||
const measureText = () => {
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
const textEl = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg", "text"
|
||||
);
|
||||
textEl.setAttribute("font-size", fontSize.toString());
|
||||
textEl.setAttribute("font-family", fontFamily);
|
||||
textEl.setAttribute("font-weight", fontWeight.toString());
|
||||
textEl.textContent = text;
|
||||
svg.appendChild(textEl);
|
||||
document.body.appendChild(svg);
|
||||
const bbox = textEl.getBBox();
|
||||
document.body.removeChild(svg);
|
||||
return bbox;
|
||||
};
|
||||
|
||||
const bbox = measureText();
|
||||
const padding = 10;
|
||||
const width = bbox.width + padding * 2;
|
||||
const height = bbox.height + padding * 2;
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x={padding - bbox.x}
|
||||
y={padding - bbox.y}
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
fontWeight={fontWeight}
|
||||
fill={fill}
|
||||
stroke={stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
dominantBaseline="hanging"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user