15 Commits

Author SHA1 Message Date
991029a66a Update src/app/page.tsx 2026-03-10 16:43:08 +00:00
5d680badc5 Update src/app/contact/page.tsx 2026-03-10 16:43:06 +00:00
3040ee7707 Update src/app/styles/variables.css 2026-03-10 16:38:02 +00:00
9a3f4d6c2c Update src/app/page.tsx 2026-03-10 16:38:00 +00:00
1a1ca65727 Update src/app/contact/page.tsx 2026-03-10 16:37:58 +00:00
e779a2f06d Update src/app/page.tsx 2026-03-10 16:09:35 +00:00
de509fb6f9 Update src/app/contact/page.tsx 2026-03-10 16:09:33 +00:00
fd1d1351d5 Add src/app/admin/page.tsx 2026-03-10 16:09:31 +00:00
d9cca644e1 Switch to version 5: remove src/app/service-request/page.tsx 2026-03-10 16:07:03 +00:00
83a1fc5e15 Switch to version 5: remove src/app/membership/page.tsx 2026-03-10 16:07:03 +00:00
6e3dc7d215 Switch to version 5: remove src/app/dashboard/page.tsx 2026-03-10 16:07:02 +00:00
4cd5edc456 Switch to version 5: modified src/app/page.tsx 2026-03-10 16:07:01 +00:00
03c0beff67 Switch to version 5: modified src/app/contact/page.tsx 2026-03-10 16:07:01 +00:00
86262a145e Merge version_7 into main
Merge version_7 into main
2026-03-10 16:05:22 +00:00
f46a8dcd39 Merge version_7 into main
Merge version_7 into main
2026-03-10 15:50:43 +00:00
7 changed files with 419 additions and 639 deletions

147
src/app/admin/page.tsx Normal file
View File

@@ -0,0 +1,147 @@
"use client";
import { ThemeProvider } from "@/components/theme/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import { ReactLenis } from "lenis/react";
interface Request {
id: string;
clientName: string;
address: string;
issueType: string;
membershipPlan: string;
status: "pending" | "in-progress" | "completed" | "cancelled";
}
const mockRequests: Request[] = [
{
id: "REQ-001", clientName: "John Smith", address: "123 Main St, Springfield, IL 62701", issueType: "Plumbing", membershipPlan: "Premium", status: "in-progress"},
{
id: "REQ-002", clientName: "Sarah Johnson", address: "456 Oak Ave, Chicago, IL 60601", issueType: "HVAC", membershipPlan: "Standard", status: "pending"},
{
id: "REQ-003", clientName: "Michael Chen", address: "789 Elm Rd, Naperville, IL 60540", issueType: "Electrical", membershipPlan: "Premium", status: "completed"},
{
id: "REQ-004", clientName: "Emma Davis", address: "321 Pine St, Evanston, IL 60201", issueType: "Roofing", membershipPlan: "Basic", status: "pending"},
{
id: "REQ-005", clientName: "Robert Wilson", address: "654 Maple Dr, Aurora, IL 60505", issueType: "Plumbing", membershipPlan: "Standard", status: "completed"},
];
const getStatusColor = (status: string) => {
switch (status) {
case "completed":
return "bg-green-100 text-green-800";
case "in-progress":
return "bg-blue-100 text-blue-800";
case "pending":
return "bg-yellow-100 text-yellow-800";
case "cancelled":
return "bg-red-100 text-red-800";
default:
return "bg-gray-100 text-gray-800";
}
};
export default function AdminDashboard() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<ReactLenis root>
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Dashboard", id: "/admin" },
{ name: "Settings", id: "#settings" },
{ name: "Support", id: "#support" },
]}
brandName="OW HomeShield"
button={{
text: "Logout", onClick: () => {
console.log("Logout clicked");
},
}}
animateOnLoad={true}
/>
<div id="admin-dashboard" data-section="admin-dashboard" className="min-h-screen bg-background pt-32 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-foreground mb-2">Admin Dashboard</h1>
<p className="text-foreground/60">Manage customer requests and track service status</p>
</div>
{/* Table Container */}
<div className="rounded-lg border border-card bg-card overflow-hidden shadow-sm">
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-background bg-background/50">
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Request ID</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Client Name</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Address</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Issue Type</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Membership Plan</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Status</th>
</tr>
</thead>
<tbody>
{mockRequests.map((request, index) => (
<tr
key={request.id}
className={`border-b border-background ${index % 2 === 0 ? "bg-white" : "bg-background/30"} hover:bg-background/50 transition-colors`}
>
<td className="px-6 py-4 text-sm text-foreground font-medium">{request.id}</td>
<td className="px-6 py-4 text-sm text-foreground">{request.clientName}</td>
<td className="px-6 py-4 text-sm text-foreground/80">{request.address}</td>
<td className="px-6 py-4 text-sm text-foreground">{request.issueType}</td>
<td className="px-6 py-4 text-sm text-foreground">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-cta/10 text-primary-cta">
{request.membershipPlan}
</span>
</td>
<td className="px-6 py-4 text-sm">
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(request.status)}`}>
{request.status.charAt(0).toUpperCase() + request.status.slice(1)}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Summary Stats */}
<div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
<div className="bg-card rounded-lg border border-background p-6">
<p className="text-sm text-foreground/60 mb-2">Total Requests</p>
<p className="text-3xl font-bold text-foreground">{mockRequests.length}</p>
</div>
<div className="bg-card rounded-lg border border-background p-6">
<p className="text-sm text-foreground/60 mb-2">Pending</p>
<p className="text-3xl font-bold text-yellow-600">{mockRequests.filter(r => r.status === "pending").length}</p>
</div>
<div className="bg-card rounded-lg border border-background p-6">
<p className="text-sm text-foreground/60 mb-2">In Progress</p>
<p className="text-3xl font-bold text-blue-600">{mockRequests.filter(r => r.status === "in-progress").length}</p>
</div>
<div className="bg-card rounded-lg border border-background p-6">
<p className="text-sm text-foreground/60 mb-2">Completed</p>
<p className="text-3xl font-bold text-green-600">{mockRequests.filter(r => r.status === "completed").length}</p>
</div>
</div>
</div>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -1,84 +1,260 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { ThemeProvider } from "@/components/theme/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
import { PricingCardTwo } from "@/components/sections/pricing/PricingCardTwo";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Mail, Phone, MapPin } from "lucide-react";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-elevated"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="OW HomeShield"
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" }
<NavbarStyleFullscreen
navItems={navItems}
brandName="OW HomeShield"
bottomLeftText="Available 24/7"
bottomRightText="support@owhomeshield.com"
/>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
title="Get in Touch with OW HomeShield"
description="We're here to help with all your home maintenance and repair needs. Contact us today for a consultation or to learn more about our membership plans."
tag="Contact Us"
background={{ variant: "glowing-orb" }}
imageSrc="/hero-contact.jpg"
imageAlt="Contact OW HomeShield"
mediaAnimation="slide-up"
testimonials={[
{
name: "John Miller", handle: "Homeowner", testimonial:
"OW HomeShield's support team responded within minutes. Professional and courteous service!", rating: 5,
imageSrc: "/avatar1.jpg"},
]}
buttons={[
{ text: "Call Now", href: "tel:1-800-123-4567" },
{ text: "Schedule Service", href: "#contact-form" },
]}
button={{
text: "Get Started", href: "tel:226-224-3573"
}}
animateOnLoad={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to protect your home? Join OW HomeShield today and experience the peace of mind that comes with reliable, professional home maintenance."
animationType="entrance-slide"
<div id="about" data-section="about">
<MediaAbout
title="Why Choose OW HomeShield?"
description="Over 20 years of trusted service. Our team of licensed technicians is dedicated to keeping your home in top condition with professional maintenance and rapid emergency response."
tag="Our Expertise"
imageSrc="/about-contact.jpg"
imageAlt="OW HomeShield team"
useInvertedBackground={false}
buttons={[
{ text: "Start Your Membership", href: "tel:226-224-3573" },
{ text: "Contact Us", href: "tel:226-224-3573" }
{ text: "Learn More", href: "#features" },
{ text: "View Plans", href: "#pricing" },
]}
background={{ variant: "plain" }}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwelve
title="Our Services"
description="Comprehensive home maintenance solutions tailored to your needs"
tag="What We Offer"
features={[
{
id: "maintenance", label: "Maintenance", title: "Regular Home Maintenance Plans", items: [
"Monthly inspections", "HVAC system checks", "Plumbing assessments", "Electrical safety reviews"],
buttons: [{ text: "Learn More", href: "#" }],
},
{
id: "emergency", label: "Emergency", title: "24/7 Emergency Repair Service", items: [
"Rapid response times", "Emergency hotline", "Licensed technicians", "Same-day service available"],
buttons: [{ text: "Get Help", href: "#" }],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
title="Service Packages"
description="Choose from our selection of professional home maintenance services"
tag="Available Services"
products={[
{
id: "1", name: "HVAC Maintenance", price: "$150", variant: "Quarterly Service", imageSrc: "/service1.jpg", imageAlt: "HVAC Service"},
{
id: "2", name: "Plumbing Inspection", price: "$120", variant: "Annual Check", imageSrc: "/service2.jpg", imageAlt: "Plumbing Service"},
{
id: "3", name: "Electrical Safety", price: "$180", variant: "Comprehensive Review", imageSrc: "/service3.jpg", imageAlt: "Electrical Service"},
{
id: "4", name: "Roofing Inspection", price: "$200", variant: "Professional Assessment", imageSrc: "/service4.jpg", imageAlt: "Roofing Service"},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Membership Plans"
description="Choose the perfect plan for your home maintenance needs"
tag="Pricing"
plans={[
{
id: "basic", title: "Basic", price: "$49", period: "/month", imageSrc: "/pricing-basic.jpg", imageAlt: "Basic Plan", button: { text: "Get Started", href: "#contact-form" },
features: [
"Monthly inspection", "Priority support", "10% service discount"],
},
{
id: "premium", title: "Premium", price: "$99", period: "/month", imageSrc: "/pricing-premium.jpg", imageAlt: "Premium Plan", button: { text: "Get Started", href: "#contact-form" },
features: [
"Quarterly inspections", "24/7 emergency support", "20% service discount", "Free diagnostics"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="pricing-cards" data-section="pricing-cards">
<PricingCardTwo
title="Annual Membership"
description="Save more with annual commitment"
tag="Best Value"
plans={[
{
id: "annual-basic", title: "Annual Basic", price: "$499", period: "/year", description: "Save $89 annually", button: { text: "Subscribe", href: "#contact-form" },
features: [
"Monthly inspections", "Priority support", "10% discount on services"],
highlighted: false,
},
{
id: "annual-premium", title: "Annual Premium", price: "$999", period: "/year", description: "Save $189 annually", button: { text: "Subscribe", href: "#contact-form" },
features: [
"Quarterly inspections", "24/7 emergency support", "20% discount on services", "Free annual diagnostics"],
highlighted: true,
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
testimonials={[
{
id: "1", name: "Sarah Johnson", handle: "Homeowner, Portland", testimonial:
"OW HomeShield has been a lifesaver! Their technicians are professional and the service is always on time. Highly recommend!", imageSrc: "/avatar-sarah.jpg", imageAlt: "Sarah Johnson"},
{
id: "2", name: "Michael Chen", handle: "Property Manager, Seattle", testimonial:
"Managing multiple properties is much easier with OW HomeShield handling maintenance. Reliable and cost-effective!", imageSrc: "/avatar-michael.jpg", imageAlt: "Michael Chen"},
{
id: "3", name: "Emma Davis", handle: "Homeowner, Vancouver", testimonial:
"The 24/7 emergency support is incredible. When our heating went out in winter, they were there within an hour.", imageSrc: "/avatar-emma.jpg", imageAlt: "Emma Davis"},
{
id: "4", name: "James Wilson", handle: "Real Estate Agent, Bellevue", testimonial:
"I recommend OW HomeShield to all my clients. Their membership plans provide excellent value and peace of mind.", imageSrc: "/avatar-james.jpg", imageAlt: "James Wilson"},
{
id: "5", name: "Lisa Anderson", handle: "Homeowner, Tacoma", testimonial:
"Prevention is better than cure, and OW HomeShield's maintenance plans keep my home running smoothly year-round.", imageSrc: "/avatar-lisa.jpg", imageAlt: "Lisa Anderson"},
{
id: "6", name: "Robert Martinez", handle: "Property Owner, Olympia", testimonial:
"Outstanding customer service and quality workmanship. OW HomeShield is the only choice for home maintenance in the region.", imageSrc: "/avatar-robert.jpg", imageAlt: "Robert Martinez"},
]}
title="What Our Customers Say"
description="Trusted by thousands of homeowners across the Pacific Northwest"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactSplit
tag="Get in Touch"
title="Ready to protect your home?"
description="Sign up for OW HomeShield today and get professional maintenance and repair support. Our team is ready to help you maintain your property and handle any emergency that comes up."
tagIcon={Mail}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
imageSrc="/contact-split.jpg"
imageAlt="OW HomeShield team"
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="Enter your email"
buttonText="Get Started"
termsText="We respect your privacy. Unsubscribe at any time."
onSubmit={(email) => console.log("Email submitted:", email)}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
<FooterBaseCard
logoText="OW HomeShield"
columns={[
{
title: "Services", items: [
{ label: "Plumbing", href: "services" },
{ label: "HVAC", href: "services" },
{ label: "Electrical", href: "services" },
{ label: "General Repairs", href: "services" }
]
title: "Product", items: [
{ label: "Membership Plans", href: "#pricing" },
{ label: "Services", href: "#services" },
{ label: "Pricing", href: "#pricing" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Contact", href: "contact" },
{ label: "Pricing", href: "pricing" },
{ label: "Blog", href: "#" }
]
{ label: "About Us", href: "#about" },
{ label: "Contact", href: "#contact-form" },
{ label: "Blog", href: "#blog" },
],
},
{
title: "Support", items: [
{ label: "Emergency", href: "tel:226-224-3573" },
{ label: "FAQ", href: "#" },
{ label: "Terms", href: "#" },
{ label: "Privacy", href: "#" }
]
}
{ label: "24/7 Hotline", href: "tel:1-800-123-4567" },
{ label: "Emergency Service", href: "tel:1-800-123-4567" },
{ label: "FAQ", href: "#faq" },
],
},
]}
copyrightText="© 2025 OW HomeShield. All rights reserved."
onPrivacyClick={() => console.log("Privacy clicked")}
/>
</div>
<div id="footer-simple" data-section="footer-simple">
<FooterSimple
text="© 2025 OW HomeShield. Professional home maintenance and repair services."
/>
</div>
</ThemeProvider>
);
}
}

View File

@@ -1,84 +0,0 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
export default function DashboardPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="OW HomeShield"
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" }
]}
button={{
text: "Get Started", href: "tel:226-224-3573"
}}
animateOnLoad={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Access your member dashboard to manage your home maintenance requests, view service history, and update your membership preferences."
animationType="entrance-slide"
buttons={[
{ text: "Go to Dashboard", href: "#" },
{ text: "Need Help?", href: "tel:226-224-3573" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="OW HomeShield"
columns={[
{
title: "Services", items: [
{ label: "Plumbing", href: "services" },
{ label: "HVAC", href: "services" },
{ label: "Electrical", href: "services" },
{ label: "General Repairs", href: "services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Contact", href: "contact" },
{ label: "Pricing", href: "pricing" },
{ label: "Blog", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Emergency", href: "tel:226-224-3573" },
{ label: "FAQ", href: "#" },
{ label: "Terms", href: "#" },
{ label: "Privacy", href: "#" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -1,130 +0,0 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, Package } from "lucide-react";
export default function MembershipPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="OW HomeShield"
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" }
]}
button={{
text: "Get Started", href: "tel:226-224-3573"
}}
animateOnLoad={true}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
title="Membership Plans"
description="Choose the perfect plan for your home protection needs"
tag="Pricing"
tagIcon={Package}
plans={[
{
id: "basic", price: "$44/month", name: "Basic Plan", buttons: [
{ text: "Get Started", href: "tel:226-224-3573" },
{ text: "Learn More", href: "#" }
],
features: [
"1 service visit per month", "10% renovation discount", "Email support", "Basic emergency response"
]
},
{
id: "standard", badge: "Most Popular", badgeIcon: Sparkles,
price: "$59/month", name: "Standard Plan", buttons: [
{ text: "Get Started", href: "tel:226-224-3573" },
{ text: "Learn More", href: "#" }
],
features: [
"2 service visits per month", "15% renovation discount", "Priority booking", "Phone & email support", "24/7 emergency support"
]
},
{
id: "premium", price: "$84/month", name: "Premium Plan", buttons: [
{ text: "Get Started", href: "tel:226-224-3573" },
{ text: "Learn More", href: "#" }
],
features: [
"Unlimited service requests", "20% renovation discount", "Premium scheduling", "Priority phone support", "24/7 emergency coverage", "Annual home inspection"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to join OW HomeShield and protect your home? Select a membership plan that works best for you and start receiving expert care today."
animationType="entrance-slide"
buttons={[
{ text: "Start Your Membership", href: "tel:226-224-3573" },
{ text: "Contact Us", href: "tel:226-224-3573" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="OW HomeShield"
columns={[
{
title: "Services", items: [
{ label: "Plumbing", href: "services" },
{ label: "HVAC", href: "services" },
{ label: "Electrical", href: "services" },
{ label: "General Repairs", href: "services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Contact", href: "contact" },
{ label: "Pricing", href: "pricing" },
{ label: "Blog", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Emergency", href: "tel:226-224-3573" },
{ label: "FAQ", href: "#" },
{ label: "Terms", href: "#" },
{ label: "Privacy", href: "#" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -1,304 +1,59 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, Target, Clock, Users, Package } from "lucide-react";
import { ThemeProvider } from "@/components/theme/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
export default function Home() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-elevated"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="OW HomeShield"
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" }
]}
button={{
text: "Get Started", href: "tel:226-224-3573"
}}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Home Protection Made Simple"
description="Professional home maintenance and repairs with affordable membership plans. 24/7 emergency support from licensed technicians."
tag="Premium Service"
tagIcon={Sparkles}
background={{ variant: "glowing-orb" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
imageAlt="OW HomeShield professional technician"
imagePosition="right"
mediaAnimation="blur-reveal"
buttons={[
{ text: "Start Your Membership", href: "#pricing" },
{ text: "Learn More", href: "#services" }
]}
buttonAnimation="slide-up"
tagAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentyFive
title="Our Services"
description="Comprehensive home maintenance and repair solutions tailored to your needs"
tag="What We Offer"
tagIcon={Package}
features={[
{
title: "Plumbing & Water", description: "Expert plumbing repairs, maintenance, and water system inspections", icon: Target,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Plumbing service"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Water system inspection"
}
]
},
{
title: "HVAC Solutions", description: "Heating, cooling, and ventilation system maintenance and repair", icon: Clock,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "HVAC maintenance"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "System inspection"
}
]
},
{
title: "Electrical Work", description: "Safe and reliable electrical repairs, upgrades, and inspections", icon: Sparkles,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Electrical service"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Electrical upgrade"
}
]
},
{
title: "General Repairs", description: "Drywall, flooring, doors, windows, and other general home maintenance", icon: Users,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "General repairs"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Home maintenance"
}
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<FeatureCardTwentyFive
title="Why Choose OW HomeShield?"
description="We're committed to providing the best home maintenance experience with professional service and competitive pricing"
tag="Our Commitment"
tagIcon={Sparkles}
features={[
{
title: "Expert Technicians", description: "Licensed, insured, and highly trained professionals with years of experience", icon: Users,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Expert team"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Professional service"
}
]
},
{
title: "24/7 Emergency Support", description: "Always available when you need help, day or night, holidays included", icon: Clock,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Emergency support"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Fast response"
}
]
},
{
title: "Affordable Plans", description: "Flexible membership options that fit any budget with transparent pricing", icon: Package,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Affordable pricing"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Value plans"
}
]
},
{
title: "Fast Response Times", description: "Quick turnaround on service requests and priority scheduling for members", icon: Target,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Quick response"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Priority service"
}
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
title="Membership Plans"
description="Choose the perfect plan for your home protection needs"
tag="Pricing"
tagIcon={Package}
plans={[
{
id: "basic", price: "$44/month", name: "Basic Plan", buttons: [
{ text: "Get Started", href: "tel:226-224-3573" },
{ text: "Learn More", href: "#" }
],
features: [
"1 service visit per month", "10% renovation discount", "Email support", "Basic emergency response"
]
},
{
id: "standard", badge: "Most Popular", badgeIcon: Sparkles,
price: "$59/month", name: "Standard Plan", buttons: [
{ text: "Get Started", href: "tel:226-224-3573" },
{ text: "Learn More", href: "#" }
],
features: [
"2 service visits per month", "15% renovation discount", "Priority booking", "Phone & email support", "24/7 emergency support"
]
},
{
id: "premium", price: "$84/month", name: "Premium Plan", buttons: [
{ text: "Get Started", href: "tel:226-224-3573" },
{ text: "Learn More", href: "#" }
],
features: [
"Unlimited service requests", "20% renovation discount", "Premium scheduling", "Priority phone support", "24/7 emergency coverage", "Annual home inspection"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="What Our Customers Say"
description="Real experiences from satisfied members of OW HomeShield"
tag="Testimonials"
tagIcon={Users}
testimonials={[
{
id: "1", name: "John Smith, Homeowner", date: "Date: 15 January 2025", title: "Outstanding Service and Support", quote: "The team at OW HomeShield was professional and efficient. They fixed my plumbing issue quickly at a fair price. I'm very impressed with their 24/7 support.", tag: "Premium Member", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Satisfied customer"
},
{
id: "2", name: "Sarah Johnson, Property Owner", date: "Date: 10 January 2025", title: "Peace of Mind with Every Service", quote: "I've been a member for 6 months and couldn't be happier. The maintenance visits are thorough, and the emergency support gives me peace of mind.", tag: "Standard Member", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Happy customer"
},
{
id: "3", name: "Michael Chen, Real Estate Investor", date: "Date: 5 January 2025", title: "Best Investment for My Properties", quote: "As someone managing multiple properties, OW HomeShield is invaluable. Fast response times and reliable technicians make property maintenance effortless.", tag: "Premium Member", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Professional customer"
},
{
id: "4", name: "Emily Rodriguez, Homeowner", date: "Date: 1 January 2025", title: "Affordable and Reliable", quote: "Great value for the price. The membership includes everything I need, and the technicians are always courteous and professional.", tag: "Basic Member", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Satisfied member"
},
{
id: "5", name: "David Thompson, Property Manager", date: "Date: 28 December 2024", title: "Exceptional Support and Expertise", quote: "I manage 15 properties and OW HomeShield handles maintenance for all of them. The consistency and quality are exceptional.", tag: "Premium Member", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Professional testimonial"
}
]}
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to protect your home? Join OW HomeShield today and experience the peace of mind that comes with reliable, professional home maintenance."
animationType="entrance-slide"
buttons={[
{ text: "Start Your Membership", href: "tel:226-224-3573" },
{ text: "Contact Us", href: "tel:226-224-3573" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="OW HomeShield"
copyrightText="© 2025 OW HomeShield Inc. All rights reserved."
columns={[
{
title: "Services", items: [
{ label: "Plumbing", href: "services" },
{ label: "HVAC", href: "services" },
{ label: "Electrical", href: "services" },
{ label: "General Repairs", href: "services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Contact", href: "contact" },
{ label: "Pricing", href: "pricing" },
{ label: "Blog", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Emergency", href: "tel:226-224-3573" },
{ label: "FAQ", href: "#" },
{ label: "Terms", href: "#" },
{ label: "Privacy", href: "#" }
]
}
]}
/>
</div>
<NavbarStyleFullscreen
navItems={navItems}
brandName="OW HomeShield"
bottomLeftText="Available 24/7"
bottomRightText="support@owhomeshield.com"
/>
<main>
<section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
<div className="text-center">
<h1 className="text-5xl font-bold text-gray-900 mb-4">
OW HomeShield
</h1>
<p className="text-xl text-gray-600 mb-8">
Professional Home Maintenance & Repair Services
</p>
<div className="flex gap-4 justify-center">
<a
href="/contact"
className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
>
Get Started
</a>
<a
href="#contact"
className="px-8 py-3 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition"
>
Learn More
</a>
</div>
</div>
</section>
</main>
</ThemeProvider>
);
}

View File

@@ -1,84 +0,0 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
export default function ServiceRequestPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="OW HomeShield"
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" }
]}
button={{
text: "Get Started", href: "tel:226-224-3573"
}}
animateOnLoad={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Request a service visit from our expert technicians. Whether it's an emergency or scheduled maintenance, we're here to help keep your home in perfect condition."
animationType="entrance-slide"
buttons={[
{ text: "Request Service", href: "tel:226-224-3573" },
{ text: "View Pricing", href: "pricing" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="OW HomeShield"
columns={[
{
title: "Services", items: [
{ label: "Plumbing", href: "services" },
{ label: "HVAC", href: "services" },
{ label: "Electrical", href: "services" },
{ label: "General Repairs", href: "services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Contact", href: "contact" },
{ label: "Pricing", href: "pricing" },
{ label: "Blog", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Emergency", href: "tel:226-224-3573" },
{ label: "FAQ", href: "#" },
{ label: "Terms", href: "#" },
{ label: "Privacy", href: "#" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #106EFB;
--background: #f7f6f7;
--card: #ffffff;
--foreground: #1a1a1a;
--primary-cta: #0798ff;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta: #ffffff;
--secondary-cta-text: #000612e6;
--accent: #e2e2e2;
--background-accent: #106EFB;
--accent: #93c7ff;
--background-accent: #a8cde8;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);