23 Commits

Author SHA1 Message Date
b6e8fd39e4 Update src/app/page.tsx 2026-03-21 22:15:09 +00:00
d3df6579b0 Update theme colors 2026-03-21 22:13:08 +00:00
182846cb1d Update theme colors 2026-03-21 22:12:36 +00:00
e400312d8f Update theme colors 2026-03-21 22:12:25 +00:00
ef571c8a0e Update theme colors 2026-03-21 22:11:44 +00:00
be789d5082 Update theme colors 2026-03-21 22:11:13 +00:00
e2139c8f43 Update src/app/page.tsx 2026-03-21 19:59:13 +00:00
14cb2c682c Update src/app/page.tsx 2026-03-21 19:58:48 +00:00
19833c1270 Merge version_4 into main
Merge version_4 into main
2026-03-21 19:53:38 +00:00
5c7c58d34d Update src/app/page.tsx 2026-03-21 19:53:34 +00:00
062c631aba Merge version_3 into main
Merge version_3 into main
2026-03-21 19:43:30 +00:00
6d1f8f8cd0 Update src/app/page.tsx 2026-03-21 19:43:26 +00:00
2a74fdee8a Merge version_3 into main
Merge version_3 into main
2026-03-21 19:42:38 +00:00
a00c2e8bd8 Update src/app/page.tsx 2026-03-21 19:42:34 +00:00
f776a943df Merge version_3 into main
Merge version_3 into main
2026-03-21 19:37:54 +00:00
2d3666ef22 Update src/app/page.tsx 2026-03-21 19:37:50 +00:00
e06f1a82b2 Merge version_3 into main
Merge version_3 into main
2026-03-21 19:37:19 +00:00
afac9a1f14 Update src/app/page.tsx 2026-03-21 19:37:15 +00:00
dde213dacd Merge version_3 into main
Merge version_3 into main
2026-03-21 19:36:52 +00:00
6934f2e1ce Update src/app/page.tsx 2026-03-21 19:36:48 +00:00
9320ebdcf0 Merge version_2 into main
Merge version_2 into main
2026-03-21 19:31:13 +00:00
6515c9af41 Update src/app/page.tsx 2026-03-21 19:31:09 +00:00
c7ea302f3a Merge version_1 into main
Merge version_1 into main
2026-03-21 19:15:14 +00:00
2 changed files with 198 additions and 35 deletions

View File

@@ -10,9 +10,66 @@ import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Hammer, CheckCircle, Wrench, Droplet, Lightbulb, Drill, PaintBucket, Home, Image, Star, Phone } from "lucide-react";
import { Hammer, CheckCircle, Wrench, Droplet, Lightbulb, Drill, PaintBucket, Home, Image, Star, Phone, X } from "lucide-react";
import { useState } from "react";
export default function LandingPage() {
const [showContactForm, setShowContactForm] = useState(false);
const [formData, setFormData] = useState({
phone: "", email: "", address: ""
});
const [showGallery, setShowGallery] = useState(false);
const [galleryIndex, setGalleryIndex] = useState(0);
const galleryItems = [
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-using-hammer-nails_23-2148640275.jpg?_wi=1", imageAlt: "Professional handyman performing quality repair work"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-inviting-come-closer-making-gesture-with-hand-being-positive-friendly-isolated-orange-wall_141793-14019.jpg?_wi=1", imageAlt: "Completed bathroom renovation before and after"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/part-male-construction-worker_329181-3734.jpg?_wi=1", imageAlt: "Skilled handyman with professional tools"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-bathroom-with-big-mirror_1203-1497.jpg?_wi=1", imageAlt: "Modern bathroom fixture installation"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/father-daughter-kitchen-fathers-day_23-2148100499.jpg?_wi=1", imageAlt: "Kitchen countertop and cabinet repair"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg?_wi=1", imageAlt: "Professional deck building and repair"
}
];
const handleFormSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Form submitted:", formData);
setShowContactForm(false);
setFormData({ phone: "", email: "", address: "" });
};
const handleHeroButtonClick = () => {
setShowContactForm(true);
};
const handleOpenGallery = () => {
setShowGallery(true);
setGalleryIndex(0);
};
const handleNextGallery = () => {
setGalleryIndex((prev) => (prev + 1) % galleryItems.length);
};
const handlePrevGallery = () => {
setGalleryIndex((prev) => (prev - 1 + galleryItems.length) % galleryItems.length);
};
const handleCloseGallery = () => {
setShowGallery(false);
};
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -28,7 +85,6 @@ export default function LandingPage() {
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Busy Bs Handyman"
navItems={[
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
@@ -36,12 +92,116 @@ export default function LandingPage() {
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Get a Free Quote", href: "#contact"
}}
button={{ text: "Get a Free Quote", href: "#contact" }}
/>
</div>
{showContactForm && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg shadow-lg max-w-md w-full p-8">
<h2 className="text-2xl font-bold mb-4 text-foreground">Get Your Free Quote</h2>
<form onSubmit={handleFormSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
Phone Number
</label>
<input
type="tel"
required
value={formData.phone}
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
className="w-full px-4 py-2 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
placeholder="(123) 456-7890"
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
Email Address
</label>
<input
type="email"
required
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full px-4 py-2 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
placeholder="you@example.com"
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
Address
</label>
<input
type="text"
required
value={formData.address}
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
className="w-full px-4 py-2 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
placeholder="123 Main Street, Nampa, ID"
/>
</div>
<div className="flex gap-3 pt-4">
<button
type="submit"
className="flex-1 bg-primary-cta text-white py-2 rounded-lg font-medium hover:opacity-90 transition"
>
Submit
</button>
<button
type="button"
onClick={() => setShowContactForm(false)}
className="flex-1 bg-secondary-cta text-foreground py-2 rounded-lg font-medium hover:opacity-90 transition border border-accent"
>
Cancel
</button>
</div>
</form>
</div>
</div>
)}
{showGallery && (
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
<div className="relative max-w-4xl w-full">
<button
onClick={handleCloseGallery}
className="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 hover:bg-opacity-75 transition z-10"
aria-label="Close gallery"
>
<X size={24} />
</button>
<div className="relative w-full bg-black rounded-lg overflow-hidden">
<img
src={galleryItems[galleryIndex].imageSrc}
alt={galleryItems[galleryIndex].imageAlt}
className="w-full h-auto max-h-96 object-cover"
/>
</div>
<div className="flex items-center justify-between mt-4">
<button
onClick={handlePrevGallery}
className="bg-primary-cta text-white px-4 py-2 rounded-lg hover:opacity-90 transition"
aria-label="Previous image"
>
Previous
</button>
<span className="text-foreground font-medium">
{galleryIndex + 1} / {galleryItems.length}
</span>
<button
onClick={handleNextGallery}
className="bg-primary-cta text-white px-4 py-2 rounded-lg hover:opacity-90 transition"
aria-label="Next image"
>
Next
</button>
</div>
</div>
</div>
)}
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="Reliable Handyman Services You Can Trust"
@@ -50,28 +210,28 @@ export default function LandingPage() {
tagIcon={Hammer}
tagAnimation="slide-up"
buttons={[
{ text: "Get a Free Quote", href: "#contact" },
{ text: "View Our Work", href: "#gallery" }
{ text: "Get a Free Quote", onClick: handleHeroButtonClick },
{ text: "View Our Work", onClick: handleOpenGallery }
]}
buttonAnimation="slide-up"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-using-hammer-nails_23-2148640275.jpg", imageAlt: "Professional handyman performing quality repair work"
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-using-hammer-nails_23-2148640275.jpg?_wi=2", imageAlt: "Professional handyman performing quality repair work"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-inviting-come-closer-making-gesture-with-hand-being-positive-friendly-isolated-orange-wall_141793-14019.jpg", imageAlt: "Completed bathroom renovation before and after"
imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-inviting-come-closer-making-gesture-with-hand-being-positive-friendly-isolated-orange-wall_141793-14019.jpg?_wi=2", imageAlt: "Completed bathroom renovation before and after"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/part-male-construction-worker_329181-3734.jpg", imageAlt: "Skilled handyman with professional tools"
imageSrc: "http://img.b2bpic.net/free-photo/part-male-construction-worker_329181-3734.jpg?_wi=2", imageAlt: "Skilled handyman with professional tools"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-bathroom-with-big-mirror_1203-1497.jpg", imageAlt: "Modern bathroom fixture installation"
imageSrc: "http://img.b2bpic.net/free-photo/modern-bathroom-with-big-mirror_1203-1497.jpg?_wi=2", imageAlt: "Modern bathroom fixture installation"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/father-daughter-kitchen-fathers-day_23-2148100499.jpg", imageAlt: "Kitchen countertop and cabinet repair"
imageSrc: "http://img.b2bpic.net/free-photo/father-daughter-kitchen-fathers-day_23-2148100499.jpg?_wi=2", imageAlt: "Kitchen countertop and cabinet repair"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg", imageAlt: "Professional deck building and repair"
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg?_wi=2", imageAlt: "Professional deck building and repair"
}
]}
background={{ variant: "gradient-bars" }}
@@ -86,7 +246,7 @@ export default function LandingPage() {
tag="Trusted Local Service"
tagIcon={CheckCircle}
tagAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/close-up-students-fist-bumping_23-2149127111.jpg"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiAZWDji79X7atOCtPSK4CpOon/uploaded-1774131298313-1rm7b8oz.png"
imageAlt="Professional handyman team working on home improvement project"
useInvertedBackground={false}
buttons={[
@@ -150,22 +310,22 @@ export default function LandingPage() {
gridVariant="bento-grid"
products={[
{
id: "bathroom-1", name: "Bathroom Renovation", price: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/oval-bathtub-bowl-close-up-green-bathroom-minimal-aesthetic_169016-69646.jpg", imageAlt: "Bathroom before renovation with dated fixtures"
id: "bathroom-1", name: "Bathroom Renovation", price: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/oval-bathtub-bowl-close-up-green-bathroom-minimal-aesthetic_169016-69646.jpg", imageAlt: "Bathroom before renovation with dated fixtures", onProductClick: handleOpenGallery
},
{
id: "bathroom-2", name: "Bathroom Renovation", price: "Complete Remodel", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954766.jpg", imageAlt: "Completed bathroom with modern fixtures and design"
id: "bathroom-2", name: "Bathroom Renovation", price: "Complete Remodel", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954766.jpg", imageAlt: "Completed bathroom with modern fixtures and design", onProductClick: handleOpenGallery
},
{
id: "kitchen-1", name: "Kitchen Update", price: "Before Transformation", imageSrc: "http://img.b2bpic.net/free-photo/contrast-wood-stone-modern-furniture-premium-textures_169016-71185.jpg", imageAlt: "Kitchen before upgrade with old cabinets"
id: "kitchen-1", name: "Kitchen Update", price: "Before Transformation", imageSrc: "http://img.b2bpic.net/free-photo/contrast-wood-stone-modern-furniture-premium-textures_169016-71185.jpg", imageAlt: "Kitchen before upgrade with old cabinets", onProductClick: handleOpenGallery
},
{
id: "kitchen-2", name: "Kitchen Update", price: "After Completion", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-interior-with-stainless-steel-appliances-wood-cabinets_9975-33042.jpg", imageAlt: "New kitchen with upgraded cabinets and countertops"
id: "kitchen-2", name: "Kitchen Update", price: "After Completion", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-interior-with-stainless-steel-appliances-wood-cabinets_9975-33042.jpg", imageAlt: "New kitchen with upgraded cabinets and countertops", onProductClick: handleOpenGallery
},
{
id: "deck-1", name: "Deck Reconstruction", price: "Before Repair", imageSrc: "http://img.b2bpic.net/free-photo/senior-couple-with-dog-garden_23-2148060111.jpg", imageAlt: "Weathered deck boards requiring repair"
id: "deck-1", name: "Deck Reconstruction", price: "Before Repair", imageSrc: "http://img.b2bpic.net/free-photo/senior-couple-with-dog-garden_23-2148060111.jpg", imageAlt: "Weathered deck boards requiring repair", onProductClick: handleOpenGallery
},
{
id: "deck-2", name: "Deck Reconstruction", price: "New Installation", imageSrc: "http://img.b2bpic.net/free-photo/family-playing-their-caravan_23-2148659470.jpg", imageAlt: "Beautiful new deck with professional staining"
id: "deck-2", name: "Deck Reconstruction", price: "New Installation", imageSrc: "http://img.b2bpic.net/free-photo/family-playing-their-caravan_23-2148659470.jpg", imageAlt: "Beautiful new deck with professional staining", onProductClick: handleOpenGallery
}
]}
ariaLabel="Project gallery showcasing before and after transformations"
@@ -182,24 +342,27 @@ export default function LandingPage() {
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Join 500+ Happy Customers", href: "#contact" }
]}
testimonials={[
{
id: "testimonial-1", name: "Jennifer Martinez", role: "Homeowner", testimonial: "Busy B Handyman fixed our bathroom plumbing issue quickly and professionally. The attention to detail was incredible, and they cleaned up after themselves. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-green-shirt-smilin-with-happy-face-showing-thumbs-up-making-call-me-gesture_141793-54515.jpg", imageAlt: "Jennifer Martinez"
id: "testimonial-1", name: "Jennifer Martinez", role: "Homeowner", testimonial: "Busy B Handyman fixed our bathroom plumbing issue quickly and professionally. The attention to detail was incredible, and they cleaned up after themselves. Highly recommend!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiAZWDji79X7atOCtPSK4CpOon/uploaded-1774122108221-fzz1340l.jpg", imageAlt: "Jennifer Martinez"
},
{
id: "testimonial-2", name: "Robert Chen", role: "Property Owner", testimonial: "We've used their services for multiple properties in Nampa. Their reliability and quality work have saved us countless headaches. They're our go-to handyman team.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-positive-young-woman-with-pinkish-hair-sitting-home-against-golden-light-background-having-optimistic-happy-facial-expression-keeping-hands-chin-smiling-broadly-camera_343059-1907.jpg", imageAlt: "Robert Chen"
id: "testimonial-2", name: "Rose Chen", role: "Property Owner", testimonial: "We've used their services for multiple properties in Nampa. Their reliability and quality work have saved us countless headaches. They're our go-to handyman team.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-positive-young-woman-with-pinkish-hair-sitting-home-against-golden-light-background-having-optimistic-happy-facial-expression-keeping-hands-chin-smiling-broadly-camera_343059-1907.jpg", imageAlt: "Rose Chen"
},
{
id: "testimonial-3", name: "Sarah Thompson", role: "Homeowner", testimonial: "The kitchen renovation turned out even better than we imagined. The team was professional, courteous, and finished on schedule. Worth every penny!", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-hand-reaching-out_23-2148308600.jpg", imageAlt: "Sarah Thompson"
id: "testimonial-3", name: "Jack Thompson", role: "Homeowner", testimonial: "The kitchen renovation turned out even better than we imagined. The team was professional, courteous, and finished on schedule. Worth every penny!", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-hand-reaching-out_23-2148308600.jpg", imageAlt: "Jack Thompson"
},
{
id: "testimonial-4", name: "Michael Johnson", role: "Property Manager", testimonial: "Quick response time, fair pricing, and exceptional workmanship. Busy B Handyman has become our trusted contractor for all our rental property maintenance needs.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brunette-female-with-glad-expression-phone-outdoor-terrace-cafe_273609-2836.jpg", imageAlt: "Michael Johnson"
id: "testimonial-4", name: "Michelle Johnson", role: "Property Manager", testimonial: "Quick response time, fair pricing, and exceptional workmanship. Busy B Handyman has become our trusted contractor for all our rental property maintenance needs.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brunette-female-with-glad-expression-phone-outdoor-terrace-cafe_273609-2836.jpg", imageAlt: "Michelle Johnson"
},
{
id: "testimonial-5", name: "Patricia Gonzalez", role: "Homeowner", testimonial: "From deck building to interior repairs, they handle it all with precision. Their professionalism and friendly demeanor made the whole experience stress-free.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-photogenic-blonde-woman-wearing-headphones_23-2148397120.jpg", imageAlt: "Patricia Gonzalez"
},
{
id: "testimonial-6", name: "David Wilson", role: "Homeowner", testimonial: "Best handyman service in Nampa! They diagnosed our electrical issue immediately and fixed it properly. I trust them with my home completely.", imageSrc: "http://img.b2bpic.net/free-photo/woman-bed-showing-ok-gesture_23-2147767529.jpg", imageAlt: "David Wilson"
id: "testimonial-6", name: "Andrea Wilson", role: "Homeowner", testimonial: "Best handyman service in Nampa! They diagnosed our electrical issue immediately and fixed it properly. I trust them with my home completely.", imageSrc: "http://img.b2bpic.net/free-photo/woman-bed-showing-ok-gesture_23-2147767529.jpg", imageAlt: "Andrea Wilson"
}
]}
ariaLabel="Testimonials section featuring five-star client reviews"
@@ -306,4 +469,4 @@ export default function LandingPage() {
</div>
</ThemeProvider>
);
}
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #15479c;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta-text: #000612e6;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
--background: #080000;
--card: #1e0d0d;
--foreground: #ffe6e6;
--primary-cta: #ff7a7a;
--primary-cta-text: #080000;
--secondary-cta: #1e0909;
--secondary-cta-text: #ffe6e6;
--accent: #7b4242;
--background-accent: #65292c;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);