bender/4c41339f-fdb2-42ae-9165-b7975fcf7ee2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 4 commits from version_1 into main 2026-03-11 03:23:39 +00:00
Conversation 0 Commits 4 Files Changed 4 +106 -257
4 changed files with 106 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/app/page.tsx
View File

@@ -16,15 +16,14 @@ export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "Contact", id: "contact" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Custom Decks", href: "/" },
{ label: "Siding Installation", href: "/" },
{ label: "Windows & Doors", href: "/" },
@@ -32,8 +31,7 @@ export default function HomePage() {
],
},
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Our Process", href: "#process" },
{ label: "Portfolio", href: "#portfolio" },
@@ -41,8 +39,7 @@ export default function HomePage() {
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Phone: (630) 555-0123", href: "tel:(630)555-0123" },
{ label: "Naperville, IL", href: "#" },
{ label: "Instagram", href: "https://instagram.com" },
@@ -69,9 +66,7 @@ export default function HomePage() {
brandName="Designed Companies"
navItems={navItems}
button={{
text: "Start Your Project",
href: "#cta",
}}
text: "Start Your Project", href: "#cta"}}
/>
</div>
@@ -90,18 +85,13 @@ export default function HomePage() {
buttonAnimation="slide-up"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-smiling-young-woman-sitting-rooftop_23-2147891092.jpg",
imageAlt: "Luxury custom deck with premium outdoor living space",
},
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-smiling-young-woman-sitting-rooftop_23-2147891092.jpg", imageAlt: "Luxury custom deck with premium outdoor living space"},
{
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg?_wi=1",
imageAlt: "Stunning home exterior transformation project",
},
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg", imageAlt: "Stunning home exterior transformation project"},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by homeowners who care"
useInvertedBackground={false}
/>
</div>
@@ -129,46 +119,22 @@ export default function HomePage() {
features={[
{
id: 1,
title: "Custom Decks",
description: "Trex and custom deck builds designed for beauty, comfort, durability, and everyday use.",
imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg?_wi=1",
imageAlt: "Custom Trex deck luxury residential",
},
title: "Custom Decks", description: "Trex and custom deck builds designed for beauty, comfort, durability, and everyday use.", imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg", imageAlt: "Custom Trex deck luxury residential"},
{
id: 2,
title: "Siding Installation",
description: "High-end siding upgrades including James Hardie and other premium materials that completely refresh the look of the home.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg?_wi=1",
imageAlt: "Premium James Hardie siding installation",
},
title: "Siding Installation", description: "High-end siding upgrades including James Hardie and other premium materials that completely refresh the look of the home.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg", imageAlt: "Premium James Hardie siding installation"},
{
id: 3,
title: "Windows",
description: "Window installation that improves both appearance and performance.",
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg?_wi=1",
imageAlt: "Luxury window installation and upgrade",
},
title: "Windows", description: "Window installation that improves both appearance and performance.", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg", imageAlt: "Luxury window installation and upgrade"},
{
id: 4,
title: "Gutters & Exterior Details",
description: "Functional exterior upgrades that complete the look and protect the home.",
imageSrc: "http://img.b2bpic.net/free-photo/modern-style-house-exterior-with-terrace_114579-2229.jpg?_wi=1",
imageAlt: "Premium gutter system exterior details",
},
title: "Gutters & Exterior Details", description: "Functional exterior upgrades that complete the look and protect the home.", imageSrc: "http://img.b2bpic.net/free-photo/modern-style-house-exterior-with-terrace_114579-2229.jpg", imageAlt: "Premium gutter system exterior details"},
{
id: 5,
title: "Cabana & Outdoor Structures",
description: "Refined outdoor living additions built with smart design and strong craftsmanship.",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg?_wi=1",
imageAlt: "Luxury outdoor cabana structure",
},
title: "Cabana & Outdoor Structures", description: "Refined outdoor living additions built with smart design and strong craftsmanship.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg", imageAlt: "Luxury outdoor cabana structure"},
{
id: 6,
title: "Exterior Remodels",
description: "From painted brick and column updates to full curb appeal transformations.",
imageSrc: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg?_wi=1",
imageAlt: "Complete exterior home transformation",
},
title: "Exterior Remodels", description: "From painted brick and column updates to full curb appeal transformations.", imageSrc: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg", imageAlt: "Complete exterior home transformation"},
]}
animationType="blur-reveal"
textboxLayout="default"
@@ -219,26 +185,11 @@ export default function HomePage() {
tagAnimation="slide-up"
products={[
{
id: "1",
name: "Premium Deck Installation",
price: "Custom Quote",
imageSrc: "http://img.b2bpic.net/free-photo/wooden-fall-with-cement-base_1136-76.jpg?_wi=1",
imageAlt: "Luxury custom deck project",
},
id: "1", name: "Premium Deck Installation", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/wooden-fall-with-cement-base_1136-76.jpg", imageAlt: "Luxury custom deck project"},
{
id: "2",
name: "Exterior Siding Upgrade",
price: "Custom Quote",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-clean-urban-environment_23-2149011425.jpg?_wi=1",
imageAlt: "Premium siding transformation",
},
id: "2", name: "Exterior Siding Upgrade", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-clean-urban-environment_23-2149011425.jpg", imageAlt: "Premium siding transformation"},
{
id: "3",
name: "Full Home Transformation",
price: "Custom Quote",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg?_wi=2",
imageAlt: "Complete exterior renovation",
},
id: "3", name: "Full Home Transformation", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg", imageAlt: "Complete exterior renovation"},
]}
gridVariant="three-columns-all-equal-width"
animationType="blur-reveal"
@@ -258,32 +209,16 @@ export default function HomePage() {
features={[
{
id: 1,
title: "Consultation",
description: "We learn what you want, what is not working, and what the home needs. Design-minded listening and discovery.",
imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg?_wi=2",
imageAlt: "Initial consultation",
},
title: "Consultation", description: "We learn what you want, what is not working, and what the home needs. Design-minded listening and discovery.", imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg", imageAlt: "Initial consultation"},
{
id: 2,
title: "Design Guidance",
description: "We bring ideas, practical suggestions, and material direction to shape the best outcome for your vision.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg?_wi=2",
imageAlt: "Design guidance phase",
},
title: "Design Guidance", description: "We bring ideas, practical suggestions, and material direction to shape the best outcome for your vision.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg", imageAlt: "Design guidance phase"},
{
id: 3,
title: "Clear Proposal",
description: "Straightforward pricing, no weird surprises, and a defined project scope you can trust.",
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg?_wi=2",
imageAlt: "Transparent proposal",
},
title: "Clear Proposal", description: "Straightforward pricing, no weird surprises, and a defined project scope you can trust.", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg", imageAlt: "Transparent proposal"},
{
id: 4,
title: "Build & Transform",
description: "Fast, clean, high-quality execution with respect for your home and your time. Results that exceed expectations.",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg?_wi=3",
imageAlt: "Exceptional execution",
},
title: "Build & Transform", description: "Fast, clean, high-quality execution with respect for your home and your time. Results that exceed expectations.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg", imageAlt: "Exceptional execution"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -315,7 +250,7 @@ export default function HomePage() {
description="Whether you are planning a custom deck, new siding, windows, gutters, or a full exterior refresh, Designed Companies brings the ideas, craftsmanship, and professionalism to make it happen beautifully."
background={{ variant: "plain" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg"
imageAlt="Luxury outdoor space"
mediaAnimation="slide-up"
mediaPosition="right"
@@ -327,7 +262,7 @@ export default function HomePage() {
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg"
imageAlt="Luxury outdoor entertaining space"
logoText="Designed Companies Inc."
copyrightText="© 2025 Designed Companies Inc. | Luxury Exterior Remodeling"

82
src/app/portfolio/page.tsx
View File

@@ -15,68 +15,36 @@ export default function PortfolioPage() {
{ name: "About", id: "/about" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "/contact" },
];
const portfolioProducts = [
{
id: "1",
name: "Premium Deck Installation",
price: "Custom Quote",
imageSrc: "http://img.b2bpic.net/free-photo/wooden-fall-with-cement-base_1136-76.jpg?_wi=2",
imageAlt: "Luxury custom deck project",
},
id: "1", name: "Premium Deck Installation", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/wooden-fall-with-cement-base_1136-76.jpg", imageAlt: "Luxury custom deck project"},
{
id: "2",
name: "Exterior Siding Upgrade",
price: "Custom Quote",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-clean-urban-environment_23-2149011425.jpg?_wi=2",
imageAlt: "Premium siding transformation",
},
id: "2", name: "Exterior Siding Upgrade", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-clean-urban-environment_23-2149011425.jpg", imageAlt: "Premium siding transformation"},
{
id: "3",
name: "Full Home Transformation",
price: "Custom Quote",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg?_wi=4",
imageAlt: "Complete exterior renovation",
},
id: "3", name: "Full Home Transformation", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg", imageAlt: "Complete exterior renovation"},
];
const processFeatures = [
{
id: "1",
title: "Consultation",
description: "We learn what you want, what is not working, and what the home needs. Design-minded listening and discovery.",
imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg?_wi=5",
imageAlt: "Initial consultation",
},
id: 1,
title: "Consultation", description: "We learn what you want, what is not working, and what the home needs. Design-minded listening and discovery.", imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg", imageAlt: "Initial consultation"},
{
id: "2",
title: "Design Guidance",
description: "We bring ideas, practical suggestions, and material direction to shape the best outcome for your vision.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg?_wi=5",
imageAlt: "Design guidance phase",
},
id: 2,
title: "Design Guidance", description: "We bring ideas, practical suggestions, and material direction to shape the best outcome for your vision.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg", imageAlt: "Design guidance phase"},
{
id: "3",
title: "Clear Proposal",
description: "Straightforward pricing, no weird surprises, and a defined project scope you can trust.",
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg?_wi=5",
imageAlt: "Transparent proposal",
},
id: 3,
title: "Clear Proposal", description: "Straightforward pricing, no weird surprises, and a defined project scope you can trust.", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg", imageAlt: "Transparent proposal"},
{
id: "4",
title: "Build & Transform",
description: "Fast, clean, high-quality execution with respect for your home and your time. Results that exceed expectations.",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg?_wi=5",
imageAlt: "Exceptional execution",
},
id: 4,
title: "Build & Transform", description: "Fast, clean, high-quality execution with respect for your home and your time. Results that exceed expectations.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-talking-phone-modern-office_23-2147668799.jpg", imageAlt: "Exceptional execution"},
];
const footerColumns = [
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Custom Decks", href: "/services" },
{ label: "Siding Installation", href: "/services" },
{ label: "Windows & Doors", href: "/services" },
@@ -84,8 +52,7 @@ export default function PortfolioPage() {
],
},
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Our Process", href: "/portfolio" },
{ label: "Portfolio", href: "/portfolio" },
@@ -93,8 +60,7 @@ export default function PortfolioPage() {
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Phone: (630) 555-0123", href: "tel:(630)555-0123" },
{ label: "Naperville, IL", href: "#" },
{ label: "Instagram", href: "https://instagram.com" },
@@ -121,9 +87,7 @@ export default function PortfolioPage() {
brandName="Designed Companies"
navItems={navItems}
button={{
text: "Start Your Project",
href: "/contact",
}}
text: "Start Your Project", href: "/contact"}}
/>
</div>
@@ -164,19 +128,13 @@ export default function PortfolioPage() {
metrics={[
{
icon: Palette,
label: "Design Vision",
value: "Elevated",
},
label: "Design Vision", value: "Elevated"},
{
icon: Hammer,
label: "Execution",
value: "Flawless",
},
label: "Execution", value: "Flawless"},
{
icon: Users,
label: "Client Communication",
value: "Expert",
},
label: "Client Communication", value: "Expert"},
]}
metricsAnimation="blur-reveal"
useInvertedBackground={false}
@@ -185,7 +143,7 @@ export default function PortfolioPage() {
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg?_wi=6"
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg"
imageAlt="Luxury outdoor entertainment space sunset"
logoText="Designed Companies Inc."
copyrightText="© 2025 Designed Companies Inc. | Luxury Exterior Remodeling"

97
src/app/services/page.tsx
View File

@@ -14,81 +14,48 @@ export default function ServicesPage() {
{ name: "About", id: "/about" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "/contact" },
];
const servicesFeatures = [
{
id: "1",
title: "Custom Decks",
description: "Trex and custom deck builds designed for beauty, comfort, durability, and everyday use.",
imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg?_wi=4",
imageAlt: "Custom Trex deck luxury residential",
},
id: 1,
title: "Custom Decks", description: "Trex and custom deck builds designed for beauty, comfort, durability, and everyday use.", imageSrc: "http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-1183.jpg", imageAlt: "Custom Trex deck luxury residential"},
{
id: "2",
title: "Siding Installation",
description: "High-end siding upgrades including James Hardie and other premium materials that completely refresh the look of the home.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg?_wi=4",
imageAlt: "Premium James Hardie siding installation",
},
id: 2,
title: "Siding Installation", description: "High-end siding upgrades including James Hardie and other premium materials that completely refresh the look of the home.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg", imageAlt: "Premium James Hardie siding installation"},
{
id: "3",
title: "Windows",
description: "Window installation that improves both appearance and performance.",
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg?_wi=4",
imageAlt: "Luxury window installation and upgrade",
},
id: 3,
title: "Windows", description: "Window installation that improves both appearance and performance.", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-563.jpg", imageAlt: "Luxury window installation and upgrade"},
{
id: "4",
title: "Gutters & Exterior Details",
description: "Functional exterior upgrades that complete the look and protect the home.",
imageSrc: "http://img.b2bpic.net/free-photo/modern-style-house-exterior-with-terrace_114579-2229.jpg?_wi=2",
imageAlt: "Premium gutter system exterior details",
},
id: 4,
title: "Gutters & Exterior Details", description: "Functional exterior upgrades that complete the look and protect the home.", imageSrc: "http://img.b2bpic.net/free-photo/modern-style-house-exterior-with-terrace_114579-2229.jpg", imageAlt: "Premium gutter system exterior details"},
{
id: "5",
title: "Cabana & Outdoor Structures",
description: "Refined outdoor living additions built with smart design and strong craftsmanship.",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg?_wi=2",
imageAlt: "Luxury outdoor cabana structure",
},
id: 5,
title: "Cabana & Outdoor Structures", description: "Refined outdoor living additions built with smart design and strong craftsmanship.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg", imageAlt: "Luxury outdoor cabana structure"},
{
id: "6",
title: "Exterior Remodels",
description: "From painted brick and column updates to full curb appeal transformations.",
imageSrc: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg?_wi=2",
imageAlt: "Complete exterior home transformation",
},
id: 6,
title: "Exterior Remodels", description: "From painted brick and column updates to full curb appeal transformations.", imageSrc: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg", imageAlt: "Complete exterior home transformation"},
];
const whyChooseMetrics = [
{
icon: Lightbulb,
label: "Design Guidance",
value: "Strategic",
},
label: "Design Guidance", value: "Strategic"},
{
icon: Zap,
label: "Quality Standard",
value: "Impeccable",
},
label: "Quality Standard", value: "Impeccable"},
{
icon: CheckCircle,
label: "Process",
value: "Transparent",
},
label: "Process", value: "Transparent"},
{
icon: Shield,
label: "Trust Factor",
value: "Guaranteed",
},
label: "Trust Factor", value: "Guaranteed"},
];
const footerColumns = [
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Custom Decks", href: "/services" },
{ label: "Siding Installation", href: "/services" },
{ label: "Windows & Doors", href: "/services" },
@@ -96,8 +63,7 @@ export default function ServicesPage() {
],
},
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Our Process", href: "/services" },
{ label: "Portfolio", href: "/portfolio" },
@@ -105,8 +71,7 @@ export default function ServicesPage() {
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Phone: (630) 555-0123", href: "tel:(630)555-0123" },
{ label: "Naperville, IL", href: "#" },
{ label: "Instagram", href: "https://instagram.com" },
@@ -133,9 +98,7 @@ export default function ServicesPage() {
brandName="Designed Companies"
navItems={navItems}
button={{
text: "Start Your Project",
href: "/contact",
}}
text: "Start Your Project", href: "/contact"}}
/>
</div>
@@ -169,24 +132,16 @@ export default function ServicesPage() {
metrics={[
{
icon: Palette,
label: "Design Vision",
value: "Elevated",
},
label: "Design Vision", value: "Elevated"},
{
icon: Hammer,
label: "Execution",
value: "Flawless",
},
label: "Execution", value: "Flawless"},
{
icon: Users,
label: "Client Communication",
value: "Expert",
},
label: "Client Communication", value: "Expert"},
{
icon: Trophy,
label: "Result",
value: "Premium",
},
label: "Result", value: "Premium"},
]}
metricsAnimation="blur-reveal"
useInvertedBackground={false}
@@ -195,7 +150,7 @@ export default function ServicesPage() {
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg?_wi=5"
imageSrc="http://img.b2bpic.net/free-photo/outdoor-with-circle-chair_1339-5465.jpg"
imageAlt="Luxury outdoor entertainment space sunset"
logoText="Designed Companies Inc."
copyrightText="© 2025 Designed Companies Inc. | Luxury Exterior Remodeling"

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

@@ -1,51 +1,52 @@
"use client";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
import React, { CSSProperties } from "react";
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
text: string;
fontSize?: number;
fontFamily?: string;
fontWeight?: number | string;
fill?: string;
textAnchor?: "start" | "middle" | "end";
dominantBaseline?: "auto" | "text-bottom" | "alphabetic" | "ideographic" | "middle" | "central" | "mathematical" | "hanging";
letterSpacing?: number;
className?: string;
style?: CSSProperties;
}
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,
fontSize = 32,
fontFamily = "Arial, sans-serif", fontWeight = "bold", fill = "currentColor", textAnchor = "middle", dominantBaseline = "middle", letterSpacing = 0,
className = "", style = {},
}) => {
const padding = 16;
const textWidth = text.length * (fontSize * 0.6) + letterSpacing * text.length;
const svgWidth = textWidth + padding * 2;
const svgHeight = fontSize + 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={svgWidth}
height={svgHeight}
viewBox={`0 0 ${svgWidth} ${svgHeight}`}
className={`inline-block ${className}`}
style={style}
>
<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={svgWidth / 2}
y={svgHeight / 2}
fontSize={fontSize}
fontFamily={fontFamily}
fontWeight={fontWeight}
fill={fill}
textAnchor={textAnchor}
dominantBaseline={dominantBaseline}
letterSpacing={letterSpacing}
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;