Merge version_1 into main #2
@@ -20,7 +20,7 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
@@ -46,7 +46,7 @@ export default function LandingPage() {
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Surrey's Most Reliable Fencing & Landscaping Solutions"
|
||||
description="From custom cedar enclosures to premium metal fencing, Karamjit and his team bring your outdoor vision to life—rain or shine. Expert craftsmanship, weather-ready reliability, and professional service you can count on."
|
||||
background={{ variant: "aurora" }}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Premium Outdoor Services"
|
||||
tagIcon={Leaf}
|
||||
tagAnimation="slide-up"
|
||||
@@ -57,22 +57,22 @@ export default function LandingPage() {
|
||||
buttonAnimation="slide-up"
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-stripes-surface-design_23-2148252805.jpg?_wi=1", imageAlt: "Precision black metal fence installation"
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-stripes-surface-design_23-2148252805.jpg", imageAlt: "Precision black metal fence installation"
|
||||
},
|
||||
{
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/street-texture-retro-tuscany-city_1203-5049.jpg", imageAlt: "Lush manicured garden landscape"
|
||||
},
|
||||
{
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg?_wi=1", imageAlt: "Cedar wood fencing installation"
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg", imageAlt: "Cedar wood fencing installation"
|
||||
},
|
||||
{
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg?_wi=1", imageAlt: "Modern metal fencing design"
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg", imageAlt: "Modern metal fencing design"
|
||||
},
|
||||
{
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg?_wi=1", imageAlt: "Professional landscape design"
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg", imageAlt: "Professional landscape design"
|
||||
},
|
||||
{
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-stripes-surface-design_23-2148252805.jpg?_wi=2", imageAlt: "Quality fence installation detail"
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-stripes-surface-design_23-2148252805.jpg", imageAlt: "Quality fence installation detail"
|
||||
}
|
||||
]}
|
||||
autoPlay={true}
|
||||
@@ -93,15 +93,15 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Precision Installation", description: "Expert craftsmanship that stands the test of time. Every fence, every landscape detail, installed with meticulous attention to quality and durability.", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg?_wi=2", imageAlt: "Precision metal fence installation"
|
||||
title: "Precision Installation", description: "Expert craftsmanship that stands the test of time. Every fence, every landscape detail, installed with meticulous attention to quality and durability.", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg", imageAlt: "Precision metal fence installation"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Weather-Ready Reliability", description: "BC's rain is no challenge for us. We use premium materials and proven techniques to ensure your outdoor investment withstands every season.", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg?_wi=2", imageAlt: "Weather-resistant cedar fencing"
|
||||
title: "Weather-Ready Reliability", description: "BC's rain is no challenge for us. We use premium materials and proven techniques to ensure your outdoor investment withstands every season.", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg", imageAlt: "Weather-resistant cedar fencing"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "The Karamjit Guarantee", description: "Professional, polite, and prompt service every time. We treat your property with the same care we'd give our own. Warranty support when you need it.", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg?_wi=2", imageAlt: "Professional landscaping maintenance"
|
||||
title: "The Karamjit Guarantee", description: "Professional, polite, and prompt service every time. We treat your property with the same care we'd give our own. Warranty support when you need it.", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg", imageAlt: "Professional landscaping maintenance"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
@@ -122,13 +122,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "cedar-1", name: "Cedar Privacy Enclosure", price: "Starting at $3,500", variant: "Custom cedar wood, various heights available", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg?_wi=3", imageAlt: "Cedar privacy fence installation Surrey"
|
||||
id: "cedar-1", name: "Cedar Privacy Enclosure", price: "Starting at $3,500", variant: "Custom cedar wood, various heights available", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg", imageAlt: "Cedar privacy fence installation Surrey"
|
||||
},
|
||||
{
|
||||
id: "metal-1", name: "Modern Black Metal Fence", price: "Starting at $4,200", variant: "Precision steel construction, horizontal design", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg?_wi=3", imageAlt: "Contemporary metal fence installation"
|
||||
id: "metal-1", name: "Modern Black Metal Fence", price: "Starting at $4,200", variant: "Precision steel construction, horizontal design", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg", imageAlt: "Contemporary metal fence installation"
|
||||
},
|
||||
{
|
||||
id: "landscape-1", name: "Complete Landscape Design & Installation", price: "Custom quote", variant: "Full garden design, planting, hardscaping", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg?_wi=3", imageAlt: "Professional landscape design project"
|
||||
id: "landscape-1", name: "Complete Landscape Design & Installation", price: "Custom quote", variant: "Full garden design, planting, hardscaping", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg", imageAlt: "Professional landscape design project"
|
||||
}
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
@@ -178,22 +178,22 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Morrison, Homeowner - Surrey", date: "Date: November 2024", title: "Outstanding Service and Quality", quote: "Karamjit installed our cedar fence between the rain breaks. Professional, punctual, and the quality is exceptional. Exactly what we needed for privacy and curb appeal.", tag: "Premium Service", avatarSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-young-woman-moving-new-apartment-standing-front-heap-opened-carton-boxes-looking-camera_74855-9954.jpg", avatarAlt: "Sarah Morrison", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg?_wi=4", imageAlt: "Cedar fence installation testimonial"
|
||||
id: "1", name: "Sarah Morrison, Homeowner - Surrey", date: "Date: November 2024", title: "Outstanding Service and Quality", quote: "Karamjit installed our cedar fence between the rain breaks. Professional, punctual, and the quality is exceptional. Exactly what we needed for privacy and curb appeal.", tag: "Premium Service", avatarSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-young-woman-moving-new-apartment-standing-front-heap-opened-carton-boxes-looking-camera_74855-9954.jpg", avatarAlt: "Sarah Morrison", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg", imageAlt: "Cedar fence installation testimonial"
|
||||
},
|
||||
{
|
||||
id: "2", name: "David Chen, Property Manager - Delta", date: "Date: October 2024", title: "Rapid Response & Professional Crew", quote: "We needed urgent fencing repairs. Karamjit came out quickly, assessed the damage, and had everything fixed within two days. His team worked efficiently and left the site spotless.", tag: "Fast Turnaround", avatarSrc: "http://img.b2bpic.net/free-photo/successful-young-businessman-formal-outfit-using-tablet_181624-33464.jpg", avatarAlt: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg?_wi=4", imageAlt: "Metal fence repair project"
|
||||
id: "2", name: "David Chen, Property Manager - Delta", date: "Date: October 2024", title: "Rapid Response & Professional Crew", quote: "We needed urgent fencing repairs. Karamjit came out quickly, assessed the damage, and had everything fixed within two days. His team worked efficiently and left the site spotless.", tag: "Fast Turnaround", avatarSrc: "http://img.b2bpic.net/free-photo/successful-young-businessman-formal-outfit-using-tablet_181624-33464.jpg", avatarAlt: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg", imageAlt: "Metal fence repair project"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Jennifer Lopez, Homeowner - White Rock", date: "Date: September 2024", title: "Complete Landscape Transformation", quote: "Our backyard was overgrown and ugly. Karamjit transformed it into a beautiful garden oasis. The design is stunning, and everything is thriving. Highly recommend.", tag: "Landscape Design", avatarSrc: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg", avatarAlt: "Jennifer Lopez", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg?_wi=4", imageAlt: "Landscape design transformation"
|
||||
id: "3", name: "Jennifer Lopez, Homeowner - White Rock", date: "Date: September 2024", title: "Complete Landscape Transformation", quote: "Our backyard was overgrown and ugly. Karamjit transformed it into a beautiful garden oasis. The design is stunning, and everything is thriving. Highly recommend.", tag: "Landscape Design", avatarSrc: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg", avatarAlt: "Jennifer Lopez", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg", imageAlt: "Landscape design transformation"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Michael Brown, Contractor - Surrey", date: "Date: August 2024", title: "Reliable Partner for Property Work", quote: "I work with Karamjit on rental properties regularly. Always delivers quality work on schedule, and his pricing is fair. He's become our go-to fencing contractor.", tag: "Professional Contractor", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg", avatarAlt: "Michael Brown", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg?_wi=5", imageAlt: "Professional fence installation"
|
||||
id: "4", name: "Michael Brown, Contractor - Surrey", date: "Date: August 2024", title: "Reliable Partner for Property Work", quote: "I work with Karamjit on rental properties regularly. Always delivers quality work on schedule, and his pricing is fair. He's become our go-to fencing contractor.", tag: "Professional Contractor", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg", avatarAlt: "Michael Brown", imageSrc: "http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg", imageAlt: "Professional fence installation"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Brent Percival, Property Owner - Surrey", date: "Date: July 2024", title: "Warranty Support You Can Trust", quote: "I needed warranty work done on my fence after a year. Karamjit prioritized my request and fixed everything promptly. That's the kind of service that keeps me coming back.", tag: "Warranty Service", avatarSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", avatarAlt: "Brent Percival", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg?_wi=5", imageAlt: "Warranty service completed"
|
||||
id: "5", name: "Brent Percival, Property Owner - Surrey", date: "Date: July 2024", title: "Warranty Support You Can Trust", quote: "I needed warranty work done on my fence after a year. Karamjit prioritized my request and fixed everything promptly. That's the kind of service that keeps me coming back.", tag: "Warranty Service", avatarSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", avatarAlt: "Brent Percival", imageSrc: "http://img.b2bpic.net/free-photo/view-windows-row_23-2148252756.jpg", imageAlt: "Warranty service completed"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Lisa Thompson, Homeowner - Delta", date: "Date: June 2024", title: "Polite, Professional, Punctual—The Karamjit Promise", quote: "Everything promised was delivered. Polite crew, respectful of our property, finished exactly when they said they would. Five stars all the way.", tag: "Exceptional Service", avatarSrc: "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804575.jpg", avatarAlt: "Lisa Thompson", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg?_wi=5", imageAlt: "Professional service completed"
|
||||
id: "6", name: "Lisa Thompson, Homeowner - Delta", date: "Date: June 2024", title: "Polite, Professional, Punctual—The Karamjit Promise", quote: "Everything promised was delivered. Polite crew, respectful of our property, finished exactly when they said they would. Five stars all the way.", tag: "Exceptional Service", avatarSrc: "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804575.jpg", avatarAlt: "Lisa Thompson", imageSrc: "http://img.b2bpic.net/free-photo/couple-standing-holding-hands-garden_1157-1388.jpg", imageAlt: "Professional service completed"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -1,51 +1,29 @@
|
||||
"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;
|
||||
}
|
||||
|
||||
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, className = '' }) => {
|
||||
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 200 50"
|
||||
className={`w-full h-auto ${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="10"
|
||||
y="35"
|
||||
fontSize="32"
|
||||
fontWeight="bold"
|
||||
fill="currentColor"
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user