Merge version_1 into main #1
386
src/app/page.tsx
386
src/app/page.tsx
@@ -10,7 +10,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Award } from "lucide-react";
|
||||
import { Award, Palette, Home, Hammer, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -18,290 +18,124 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "gallery",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Keller Custom Painting"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Keller Custom Painting"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Keller Custom Painting"
|
||||
description="Transform Your Home with Expert Painting. Family-owned. 18+ years of experience. Free estimates."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Our Work",
|
||||
href: "#gallery",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/low-angle-architectural-structure-city_23-2148798659.jpg"
|
||||
imageAlt="Professional interior painting residential home"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Keller Custom Painting"
|
||||
description="Transform Your Home with Expert Painting. Family-owned. 18+ years of experience. Free estimates."
|
||||
buttons={[
|
||||
{ text: "Get a Free Quote", href: "#contact" },
|
||||
{ text: "View Our Work", href: "#gallery" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/low-angle-architectural-structure-city_23-2148798659.jpg"
|
||||
imageAlt="Professional interior painting residential home"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Family Owned, 18+ Years of Excellence"
|
||||
tag="Our Story"
|
||||
tagIcon={Award}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Family Owned, 18+ Years of Excellence"
|
||||
tag="Our Story"
|
||||
tagIcon={Award}
|
||||
buttons={[{ text: "Learn More", href: "#services" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Interior Painting",
|
||||
description: "High-quality, meticulous interior paint jobs that bring new life to your rooms.",
|
||||
buttonIcon: "Palette",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/buckets-paint-floor_53876-63281.jpg",
|
||||
},
|
||||
{
|
||||
title: "Exterior Painting",
|
||||
description: "Protect and enhance your home's curb appeal with our durable exterior solutions.",
|
||||
buttonIcon: "Home",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/latin-beautiful-woman-getting-order-from-entrance-young-brunette-female-customer-squatting-smiling-taking-cardboard-boxes-with-both-hands-delivery-service-online-shopping-concept_74855-11855.jpg",
|
||||
},
|
||||
{
|
||||
title: "Door & Trim Painting",
|
||||
description: "Precision paint finishes for doors, frames, and intricate trim work.",
|
||||
buttonIcon: "Hammer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/painting-wooden-cabinet-blue-with-paintbrush_23-2151988652.jpg",
|
||||
},
|
||||
{
|
||||
title: "Prep & Cleanup",
|
||||
description: "We ensure meticulous prep work and a clean job site when we finish.",
|
||||
buttonIcon: "CheckCircle",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/repair-man-singing-roller-brush-with-blue-paint-home-renovation-dancing-construction-repairing-working-redecoration-home-construction-while-renovating-improving-repair-deco_482257-14168.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive painting solutions for your residential needs in Fenton and beyond."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Interior Painting", description: "High-quality, meticulous interior paint jobs that bring new life to your rooms.", buttonIcon: Palette },
|
||||
{ title: "Exterior Painting", description: "Protect and enhance your home's curb appeal with our durable exterior solutions.", buttonIcon: Home },
|
||||
{ title: "Door & Trim Painting", description: "Precision paint finishes for doors, frames, and intricate trim work.", buttonIcon: Hammer },
|
||||
{ title: "Prep & Cleanup", description: "We ensure meticulous prep work and a clean job site when we finish.", buttonIcon: CheckCircle },
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive painting solutions for your residential needs in Fenton and beyond."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "g1",
|
||||
name: "Kitchen Transformation",
|
||||
price: "Interior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-painted-wall-background_23-2148261969.jpg",
|
||||
},
|
||||
{
|
||||
id: "g2",
|
||||
name: "Exterior Refresh",
|
||||
price: "Exterior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-posing-street-dress-with-backpack_1296-805.jpg",
|
||||
},
|
||||
{
|
||||
id: "g3",
|
||||
name: "Living Room Colors",
|
||||
price: "Interior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cool-man-with-paint-equipment_23-2147703593.jpg",
|
||||
},
|
||||
{
|
||||
id: "g4",
|
||||
name: "Siding Paint Job",
|
||||
price: "Exterior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-painting-car-door_23-2149714300.jpg",
|
||||
},
|
||||
{
|
||||
id: "g5",
|
||||
name: "Trim Detailing",
|
||||
price: "Trim",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-designer-work-indoors_23-2149837031.jpg",
|
||||
},
|
||||
{
|
||||
id: "g6",
|
||||
name: "Bedroom Redesign",
|
||||
price: "Interior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bed-arrangements-still-life_23-2150532993.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Recent Projects"
|
||||
description="Browse our before-and-after transformations."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "g1", name: "Kitchen Transformation", price: "Interior", imageSrc: "http://img.b2bpic.net/free-photo/abstract-painted-wall-background_23-2148261969.jpg" },
|
||||
{ id: "g2", name: "Exterior Refresh", price: "Exterior", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-posing-street-dress-with-backpack_1296-805.jpg" },
|
||||
{ id: "g3", name: "Living Room Colors", price: "Interior", imageSrc: "http://img.b2bpic.net/free-photo/cool-man-with-paint-equipment_23-2147703593.jpg" },
|
||||
{ id: "g4", name: "Siding Paint Job", price: "Exterior", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-painting-car-door_23-2149714300.jpg" },
|
||||
]}
|
||||
title="Our Recent Projects"
|
||||
description="Browse our before-and-after transformations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Homeowner",
|
||||
company: "Fenton, MI",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-smiling_23-2148454539.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "John Doe",
|
||||
role: "Homeowner",
|
||||
company: "Grand Blanc, MI",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-smiling-young-woman-standing-kitchen_23-2147916396.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Smith",
|
||||
role: "Homeowner",
|
||||
company: "Fenton, MI",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-african-student-woman-with-dark-wavy-hair-green-cardigan-sitting-cafe-drinking-cup-coffee-smiling-camera-woman-waiting-her-boyfriend-after-university_176420-12329.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Robert Kent",
|
||||
role: "Homeowner",
|
||||
company: "Hartland, MI",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2148563421.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Paul",
|
||||
role: "Homeowner",
|
||||
company: "Fenton, MI",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
|
||||
},
|
||||
]}
|
||||
title="Rated 4.9 Stars from 205 Reviews"
|
||||
description="See why our customers love our work."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "Homeowner", company: "Fenton, MI", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-smiling_23-2148454539.jpg" },
|
||||
{ id: "2", name: "John Doe", role: "Homeowner", company: "Grand Blanc, MI", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-smiling-young-woman-standing-kitchen_23-2147916396.jpg" },
|
||||
]}
|
||||
title="Rated 4.9 Stars from 205 Reviews"
|
||||
description="See why our customers love our work."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Request a Free Estimate"
|
||||
description="Ready to get started? Contact us today for a free estimate."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Project Details",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086833.jpg"
|
||||
imageAlt="Professional painting contractor handshake"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Request a Free Estimate"
|
||||
description="Ready to get started? Contact us today for a free estimate."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Your Phone", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Project Details", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086833.jpg"
|
||||
imageAlt="Professional painting contractor handshake"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Gallery",
|
||||
href: "#gallery",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Use",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Keller Custom Painting"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Keller Custom Painting"
|
||||
columns={[
|
||||
{ items: [{ label: "Services", href: "#services" }, { label: "Gallery", href: "#gallery" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Facebook", href: "#" }, { label: "Instagram", href: "#" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user