Merge version_1 into main #2
@@ -25,7 +25,7 @@ export default function ContactPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -47,45 +47,28 @@ export default function ContactPage() {
|
||||
tag="Local Menasha, WI"
|
||||
tagIcon={MapPin}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eub4v2&_wi=2"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eub4v2"
|
||||
imageAlt="Beautiful well-maintained lawn and landscaping"
|
||||
mediaAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Thompson",
|
||||
handle: "Homeowner, Menasha",
|
||||
testimonial: "Joe transformed our yard! Professional, reliable, and affordable. Highly recommended!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p1plag&_wi=2",
|
||||
imageAlt: "Sarah Thompson",
|
||||
},
|
||||
name: "Sarah Thompson", handle: "Homeowner, Menasha", testimonial: "Joe transformed our yard! Professional, reliable, and affordable. Highly recommended!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p1plag", imageAlt: "Sarah Thompson"},
|
||||
{
|
||||
name: "Mike Johnson",
|
||||
handle: "Business Owner",
|
||||
testimonial: "Best lawn service in the area. They handle everything we need with attention to detail.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u3u35&_wi=2",
|
||||
imageAlt: "Mike Johnson",
|
||||
},
|
||||
name: "Mike Johnson", handle: "Business Owner", testimonial: "Best lawn service in the area. They handle everything we need with attention to detail.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u3u35", imageAlt: "Mike Johnson"},
|
||||
{
|
||||
name: "Jessica Martinez",
|
||||
handle: "Property Manager",
|
||||
testimonial: "Consistently excellent work. Joe's team is punctual and thorough every time.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2o2oz5&_wi=2",
|
||||
imageAlt: "Jessica Martinez",
|
||||
},
|
||||
name: "Jessica Martinez", handle: "Property Manager", testimonial: "Consistently excellent work. Joe's team is punctual and thorough every time.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2o2oz5", imageAlt: "Jessica Martinez"},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "Get a Free Quote", href: "/contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "fluid" }}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -110,19 +93,13 @@ export default function ContactPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com/joeslandscaping",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
href: "https://facebook.com/joeslandscaping", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Phone,
|
||||
href: "tel:9202771277",
|
||||
ariaLabel: "Call Us",
|
||||
},
|
||||
href: "tel:9202771277", ariaLabel: "Call Us"},
|
||||
{
|
||||
icon: Mail,
|
||||
href: "mailto:info@joeslandscaping.com",
|
||||
ariaLabel: "Email Us",
|
||||
},
|
||||
href: "mailto:info@joeslandscaping.com", ariaLabel: "Email Us"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
184
src/app/page.tsx
184
src/app/page.tsx
@@ -9,7 +9,7 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import Link from "next/link";
|
||||
import { Facebook, Phone, Mail, MapPin, Sprout } from "lucide-react";
|
||||
import { Facebook, Phone, Mail, MapPin, Sprout, Leaf, Image, Star } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
@@ -28,7 +28,7 @@ export default function HomePage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -53,51 +53,31 @@ export default function HomePage() {
|
||||
tag="Local Menasha, WI"
|
||||
tagIcon={MapPin}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eub4v2&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eub4v2"
|
||||
imageAlt="Beautiful well-maintained lawn and landscaping"
|
||||
mediaAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Thompson",
|
||||
handle: "Homeowner, Menasha",
|
||||
testimonial: "Joe transformed our yard! Professional, reliable, and affordable. Highly recommended!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p1plag&_wi=1",
|
||||
imageAlt: "Sarah Thompson",
|
||||
},
|
||||
name: "Sarah Thompson", handle: "Homeowner, Menasha", testimonial: "Joe transformed our yard! Professional, reliable, and affordable. Highly recommended!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p1plag", imageAlt: "Sarah Thompson"},
|
||||
{
|
||||
name: "Mike Johnson",
|
||||
handle: "Business Owner",
|
||||
testimonial: "Best lawn service in the area. They handle everything we need with attention to detail.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u3u35&_wi=1",
|
||||
imageAlt: "Mike Johnson",
|
||||
},
|
||||
name: "Mike Johnson", handle: "Business Owner", testimonial: "Best lawn service in the area. They handle everything we need with attention to detail.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u3u35", imageAlt: "Mike Johnson"},
|
||||
{
|
||||
name: "Jessica Martinez",
|
||||
handle: "Property Manager",
|
||||
testimonial: "Consistently excellent work. Joe's team is punctual and thorough every time.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2o2oz5&_wi=1",
|
||||
imageAlt: "Jessica Martinez",
|
||||
},
|
||||
name: "Jessica Martinez", handle: "Property Manager", testimonial: "Consistently excellent work. Joe's team is punctual and thorough every time.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2o2oz5", imageAlt: "Jessica Martinez"},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "Get a Free Quote", href: "/contact"},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "/services",
|
||||
},
|
||||
text: "View Services", href: "/services"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{
|
||||
variant: "fluid",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -106,15 +86,13 @@ export default function HomePage() {
|
||||
title="Why Choose Joe's Landscaping"
|
||||
description="With over 15 years of experience serving the Menasha community, Joe's Landscaping delivers exceptional results backed by professionalism, reliability, and competitive pricing. We treat every lawn and landscape like it's our own, ensuring your outdoor space looks its best year-round."
|
||||
tag="About Us"
|
||||
tagIcon={Sprout}
|
||||
tagIcon={Leaf}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=renmqo&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=renmqo"
|
||||
imageAlt="Joe's landscaping team providing professional service"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "/about",
|
||||
},
|
||||
text: "Learn More", href: "/about"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -126,40 +104,22 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Lawn Mowing",
|
||||
description: "Regular weekly or bi-weekly mowing with precision cutting, edging, and cleanup. Keep your lawn looking pristine throughout the season.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixfcye&_wi=1",
|
||||
},
|
||||
title: "Lawn Mowing", description: "Regular weekly or bi-weekly mowing with precision cutting, edging, and cleanup. Keep your lawn looking pristine throughout the season.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixfcye"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Landscaping Design",
|
||||
description: "Custom landscape designs that enhance curb appeal and increase property value. From plantings to hardscaping, we create beautiful outdoor spaces.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8lsbzb&_wi=1",
|
||||
},
|
||||
title: "Landscaping Design", description: "Custom landscape designs that enhance curb appeal and increase property value. From plantings to hardscaping, we create beautiful outdoor spaces.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8lsbzb"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Hedge Trimming & Pruning",
|
||||
description: "Professional shrub and hedge trimming for a polished appearance. We maintain healthy growth while creating clean, defined lines.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ilyaq2&_wi=1",
|
||||
},
|
||||
title: "Hedge Trimming & Pruning", description: "Professional shrub and hedge trimming for a polished appearance. We maintain healthy growth while creating clean, defined lines.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ilyaq2"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Mulching & Bed Work",
|
||||
description: "Fresh mulch installation, bed edging, and weed control. Enhance planting areas while protecting soil and plant health.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=41rnez&_wi=1",
|
||||
},
|
||||
title: "Mulching & Bed Work", description: "Fresh mulch installation, bed edging, and weed control. Enhance planting areas while protecting soil and plant health.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=41rnez"},
|
||||
{
|
||||
id: 5,
|
||||
title: "Yard Cleanup",
|
||||
description: "Spring and fall cleanups, leaf removal, debris hauling, and yard preparation. We handle all the heavy lifting for seasonal maintenance.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t25fy7&_wi=1",
|
||||
},
|
||||
title: "Yard Cleanup", description: "Spring and fall cleanups, leaf removal, debris hauling, and yard preparation. We handle all the heavy lifting for seasonal maintenance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t25fy7"},
|
||||
{
|
||||
id: 6,
|
||||
title: "Seasonal Lawn Care",
|
||||
description: "Comprehensive seasonal services including aeration, seeding, fertilization, and pest management for year-round lawn health.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6hpz4c&_wi=1",
|
||||
},
|
||||
title: "Seasonal Lawn Care", description: "Comprehensive seasonal services including aeration, seeding, fertilization, and pest management for year-round lawn health.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6hpz4c"},
|
||||
]}
|
||||
title="Our Landscaping Services"
|
||||
description="Complete lawn and landscape solutions tailored to your needs"
|
||||
@@ -180,14 +140,7 @@ export default function HomePage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Residential Properties",
|
||||
"Commercial Grounds",
|
||||
"HOA Communities",
|
||||
"Property Managers",
|
||||
"Real Estate Companies",
|
||||
"Municipal Properties",
|
||||
"Landscaping Contractors",
|
||||
]}
|
||||
"Residential Properties", "Commercial Grounds", "HOA Communities", "Property Managers", "Real Estate Companies", "Municipal Properties", "Landscaping Contractors"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
@@ -197,58 +150,22 @@ export default function HomePage() {
|
||||
<ProductCardFour
|
||||
products={[
|
||||
{
|
||||
id: "project-1",
|
||||
name: "Spring Lawn Transformation",
|
||||
price: "Before & After",
|
||||
variant: "Complete Yard Renovation",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gblcfi&_wi=1",
|
||||
imageAlt: "Before and after lawn transformation",
|
||||
},
|
||||
id: "project-1", name: "Spring Lawn Transformation", price: "Before & After", variant: "Complete Yard Renovation", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gblcfi", imageAlt: "Before and after lawn transformation"},
|
||||
{
|
||||
id: "project-2",
|
||||
name: "Landscaping Design",
|
||||
price: "Before & After",
|
||||
variant: "Custom Flower Beds & Plantings",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zf4hwb&_wi=1",
|
||||
imageAlt: "Professional landscaping design project",
|
||||
},
|
||||
id: "project-2", name: "Landscaping Design", price: "Before & After", variant: "Custom Flower Beds & Plantings", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zf4hwb", imageAlt: "Professional landscaping design project"},
|
||||
{
|
||||
id: "project-3",
|
||||
name: "Hedge & Shrub Care",
|
||||
price: "Before & After",
|
||||
variant: "Trimming & Maintenance",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a4j2fl&_wi=1",
|
||||
imageAlt: "Well-maintained hedges and shrubs",
|
||||
},
|
||||
id: "project-3", name: "Hedge & Shrub Care", price: "Before & After", variant: "Trimming & Maintenance", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a4j2fl", imageAlt: "Well-maintained hedges and shrubs"},
|
||||
{
|
||||
id: "project-4",
|
||||
name: "Mulch & Bed Installation",
|
||||
price: "Before & After",
|
||||
variant: "Fresh Mulch & Edging",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qmoj8d&_wi=1",
|
||||
imageAlt: "Professional mulch installation",
|
||||
},
|
||||
id: "project-4", name: "Mulch & Bed Installation", price: "Before & After", variant: "Fresh Mulch & Edging", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qmoj8d", imageAlt: "Professional mulch installation"},
|
||||
{
|
||||
id: "project-5",
|
||||
name: "Yard Cleanup Service",
|
||||
price: "Before & After",
|
||||
variant: "Fall Cleanup & Preparation",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2nkbr7&_wi=1",
|
||||
imageAlt: "Completed yard cleanup project",
|
||||
},
|
||||
id: "project-5", name: "Yard Cleanup Service", price: "Before & After", variant: "Fall Cleanup & Preparation", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2nkbr7", imageAlt: "Completed yard cleanup project"},
|
||||
{
|
||||
id: "project-6",
|
||||
name: "Seasonal Lawn Care",
|
||||
price: "Before & After",
|
||||
variant: "Spring Aeration & Seeding",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jk0m5p&_wi=1",
|
||||
imageAlt: "Healthy green lawn after seasonal care",
|
||||
},
|
||||
id: "project-6", name: "Seasonal Lawn Care", price: "Before & After", variant: "Spring Aeration & Seeding", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jk0m5p", imageAlt: "Healthy green lawn after seasonal care"},
|
||||
]}
|
||||
title="Before & After Gallery"
|
||||
description="See the transformation we deliver in every project"
|
||||
tag="Gallery"
|
||||
tagIcon={MapPin}
|
||||
tagIcon={Image}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="bento-grid"
|
||||
@@ -256,6 +173,37 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="What Our Customers Say"
|
||||
description="Real feedback from homeowners and businesses who trust Joe's Landscaping"
|
||||
tag="Reviews"
|
||||
tagIcon={Star}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "review-1", name: "Jennifer Davis", role: "Homeowner", company: "Menasha, WI", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=281xtn", imageAlt: "Jennifer Davis testimonial"},
|
||||
{
|
||||
id: "review-2", name: "Robert Chen", role: "Property Manager", company: "Fox Crossing Properties", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kby5yq", imageAlt: "Robert Chen testimonial"},
|
||||
{
|
||||
id: "review-3", name: "Amanda Wilson", role: "Homeowner", company: "Appleton, WI", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lk8qtl", imageAlt: "Amanda Wilson testimonial"},
|
||||
{
|
||||
id: "review-4", name: "David Martinez", role: "HOA Manager", company: "Meadow Ridge Community", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2n4rof", imageAlt: "David Martinez testimonial"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "500+", label: "Happy Customers Served" },
|
||||
{ value: "15+", label: "Years of Experience" },
|
||||
{ value: "100%", label: "Satisfaction Guaranteed" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Joe's Landscaping"
|
||||
@@ -263,19 +211,13 @@ export default function HomePage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com/joeslandscaping",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
href: "https://facebook.com/joeslandscaping", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Phone,
|
||||
href: "tel:9202771277",
|
||||
ariaLabel: "Call Us",
|
||||
},
|
||||
href: "tel:9202771277", ariaLabel: "Call Us"},
|
||||
{
|
||||
icon: Mail,
|
||||
href: "mailto:info@joeslandscaping.com",
|
||||
ariaLabel: "Email Us",
|
||||
},
|
||||
href: "mailto:info@joeslandscaping.com", ariaLabel: "Email Us"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: number | string;
|
||||
fill?: string;
|
||||
fontFamily?: 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 = 32,
|
||||
fontWeight = "bold", fill = "currentColor", fontFamily = "system-ui, -apple-system, sans-serif"}) => {
|
||||
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 100"
|
||||
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="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
fill={fill}
|
||||
fontFamily={fontFamily}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user