Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a5a5729ef0 | |||
| 52e71dbe16 | |||
| 764344cf9b | |||
| 33f47ee148 | |||
| 53cbc550eb | |||
| 283cbc8441 | |||
| 8e4a6f0594 | |||
| 7813c4d12c | |||
| d86585a83e | |||
| 7d9e0f70a9 |
@@ -1,251 +1,205 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Phone, Mail, MessageCircle, ArrowRight, Check } from "lucide-react";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { Linkedin, Twitter, Mail, CheckCircle, Zap, Shield } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const carouselItems = [
|
||||
{ id: "1", imageSrc: "/carousel-1.jpg", imageAlt: "Service 1" },
|
||||
{ id: "2", imageSrc: "/carousel-2.jpg", imageAlt: "Service 2" },
|
||||
{ id: "3", imageSrc: "/carousel-3.jpg", imageAlt: "Service 3" },
|
||||
{ id: "4", imageSrc: "/carousel-4.jpg", imageAlt: "Service 4" },
|
||||
{ id: "5", imageSrc: "/carousel-5.jpg", imageAlt: "Service 5" },
|
||||
{ id: "6", imageSrc: "/carousel-6.jpg", imageAlt: "Service 6" },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: "1", title: "Expert Consultation", descriptions: [
|
||||
"Our experienced team provides professional guidance", "We assess your needs thoroughly", "Personalized solutions for your situation"],
|
||||
imageSrc: "/feature-1.jpg", imageAlt: "Expert Consultation"},
|
||||
{
|
||||
id: "2", title: "24/7 Support", descriptions: [
|
||||
"Round-the-clock customer support", "Rapid response to urgent inquiries", "Dedicated support specialists"],
|
||||
imageSrc: "/feature-2.jpg", imageAlt: "24/7 Support"},
|
||||
{
|
||||
id: "3", title: "Quality Assurance", descriptions: [
|
||||
"Rigorous testing and verification", "Industry-leading standards compliance", "Continuous improvement processes"],
|
||||
imageSrc: "/feature-3.jpg", imageAlt: "Quality Assurance"},
|
||||
{
|
||||
id: "4", title: "Professional Team", descriptions: [
|
||||
"Certified and experienced professionals", "Ongoing training and development", "Commitment to excellence"],
|
||||
imageSrc: "/feature-4.jpg", imageAlt: "Professional Team"},
|
||||
];
|
||||
|
||||
const products = [
|
||||
{
|
||||
id: "1", name: "Premium Service Package", price: "$199", variant: "Comprehensive coverage", imageSrc: "/product-1.jpg", imageAlt: "Premium Package"},
|
||||
{
|
||||
id: "2", name: "Standard Service Package", price: "$99", variant: "Essential services", imageSrc: "/product-2.jpg", imageAlt: "Standard Package"},
|
||||
{
|
||||
id: "3", name: "Professional Service Package", price: "$149", variant: "Extended features", imageSrc: "/product-3.jpg", imageAlt: "Professional Package"},
|
||||
{
|
||||
id: "4", name: "Enterprise Service Package", price: "$299", variant: "Full suite access", imageSrc: "/product-4.jpg", imageAlt: "Enterprise Package"},
|
||||
];
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
id: "starter", title: "Starter", price: "$29", period: "/month", imageSrc: "/pricing-1.jpg", imageAlt: "Starter Plan", button: { text: "Get Started", href: "#contact" },
|
||||
features: ["Basic support", "Monthly consultations", "Email assistance"],
|
||||
},
|
||||
{
|
||||
id: "professional", title: "Professional", price: "$79", period: "/month", imageSrc: "/pricing-2.jpg", imageAlt: "Professional Plan", button: { text: "Choose Plan", href: "#contact" },
|
||||
features: [
|
||||
"Priority support", "Weekly consultations", "Phone and email support", "Dedicated account manager"],
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "/testimonial-1.jpg", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2", name: "Michael Chen", imageSrc: "/testimonial-2.jpg", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3", name: "Emma Davis", imageSrc: "/testimonial-3.jpg", imageAlt: "Emma Davis"},
|
||||
{
|
||||
id: "4", name: "James Wilson", imageSrc: "/testimonial-4.jpg", imageAlt: "James Wilson"},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
id: "1", title: "What services are included?", content:
|
||||
"Our comprehensive service package includes professional consultation, 24/7 support, quality assurance, and ongoing assistance from our experienced team."},
|
||||
{
|
||||
id: "2", title: "How quickly can you respond?", content:
|
||||
"We pride ourselves on rapid response times. Most inquiries are addressed within 24 hours, and urgent matters are handled immediately by our dedicated support team."},
|
||||
{
|
||||
id: "3", title: "Do you offer customized solutions?", content:
|
||||
"Yes! We provide personalized solutions tailored to your specific needs. Contact us to discuss your requirements and we'll create a customized plan."},
|
||||
{
|
||||
id: "4", title: "What are your pricing options?", content:
|
||||
"We offer flexible pricing plans ranging from basic to enterprise solutions. Choose the plan that best fits your needs, and upgrade or downgrade anytime."},
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Security", href: "#security" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Blog", href: "#blog" },
|
||||
{ label: "Careers", href: "#careers" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Help Center", href: "#help" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Status", href: "#status" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
brandName="ContactHub"
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="OW HomeShield Inc."
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Membership Plans", id: "pricing" },
|
||||
{ name: "Why Choose Us", id: "benefits" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Contact", id: "final-cta" }
|
||||
]}
|
||||
button={{
|
||||
text: "Call Now: 226-224-3573", href: "tel:226-224-3573"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Get in Touch with Our Team"
|
||||
description="We're here to help. Reach out to us with any questions or to schedule a consultation."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
<HeroOverlay
|
||||
title="Get in Touch with OW HomeShield"
|
||||
description="Have questions about our membership plans or need immediate assistance? We're here to help."
|
||||
tag="Contact Us"
|
||||
tagIcon={MessageCircle}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
|
||||
imageAlt="Contact our team"
|
||||
showBlur={true}
|
||||
showDimOverlay={false}
|
||||
buttons={[
|
||||
{ text: "Start Conversation", href: "#contact" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
{ text: "Call Now", href: "tel:226-224-3573" },
|
||||
{ text: "Email Us", href: "mailto:info@owhomeshield.com" }
|
||||
]}
|
||||
carouselItems={carouselItems}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Why Choose Us"
|
||||
description={[
|
||||
"We pride ourselves on delivering exceptional service with professionalism and integrity.", "Our dedicated team is committed to understanding your needs and providing tailored solutions.", "With years of experience, we've built lasting relationships with thousands of satisfied customers."]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#features" },
|
||||
{ text: "View Services", href: "#services" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
features={features}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
title="Our Services"
|
||||
description="Discover the comprehensive solutions we offer to meet your needs"
|
||||
tag="Services"
|
||||
tagIcon={Check}
|
||||
<div id="benefits" data-section="benefits">
|
||||
<SplitAbout
|
||||
title="Why Choose OW HomeShield?"
|
||||
description="We pride ourselves on delivering exceptional service across all areas"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
products={products}
|
||||
title="Service Packages"
|
||||
description="Choose the package that best fits your requirements"
|
||||
tag="Packages"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
imagePosition="right"
|
||||
mediaAnimation="blur-reveal"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
|
||||
imageAlt="Why choose us"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Expert Technicians", description: "Licensed and insured professionals with years of experience", icon: Shield
|
||||
},
|
||||
{
|
||||
title: "Fast Response", description: "Quick turnaround times for all service requests", icon: Zap
|
||||
},
|
||||
{
|
||||
title: "Satisfaction Guaranteed", description: "We stand behind our work with quality assurance", icon: CheckCircle
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
plans={pricingPlans}
|
||||
<PricingCardEight
|
||||
title="Our Membership Plans"
|
||||
description="Choose the perfect plan for your home protection needs"
|
||||
animationType="slide-up"
|
||||
title="Flexible Pricing Plans"
|
||||
description="Select the plan that works best for your budget and needs"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", badge: "Basic", price: "$44/month", subtitle: "Essential coverage", buttons: [{ text: "Choose Plan", href: "tel:226-224-3573" }],
|
||||
features: ["1 service visit per month", "10% renovation discount", "Email support"]
|
||||
},
|
||||
{
|
||||
id: "standard", badge: "Most Popular", price: "$59/month", subtitle: "Popular choice", buttons: [{ text: "Choose Plan", href: "tel:226-224-3573" }],
|
||||
features: ["2 service visits per month", "15% renovation discount", "Priority booking", "Phone support"]
|
||||
},
|
||||
{
|
||||
id: "premium", badge: "Premium", price: "$84/month", subtitle: "Full coverage", buttons: [{ text: "Choose Plan", href: "tel:226-224-3573" }],
|
||||
features: ["Unlimited service requests", "24/7 emergency support", "Priority scheduling", "Dedicated account manager"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureCardTwentyThree
|
||||
title="How Our Service Works"
|
||||
description="Simple steps to get your home protected"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Choose Your Plan", tags: ["Step 1"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Choose your plan"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Sign Up Online", tags: ["Step 2"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Sign up online"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Get Immediate Service", tags: ["Step 3"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Get immediate service"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust" data-section="trust">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={testimonials}
|
||||
cardTitle="Over 5,000 satisfied customers trust us for their needs"
|
||||
cardTag="See what they say"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "John Smith", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "John Smith"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Sarah Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Sarah Johnson"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Mike Davis", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Mike Davis"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Emily Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg", imageAlt: "Emily Chen"
|
||||
}
|
||||
]}
|
||||
cardTitle="Over 500+ satisfied customers trust us to keep their homes protected"
|
||||
cardTag="Customer Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
faqs={faqs}
|
||||
ctaTitle="Ready to Get Started?"
|
||||
ctaDescription="Let's discuss how we can help you achieve your goals."
|
||||
ctaButton={{ text: "Schedule a Call", href: "#contact" }}
|
||||
ctaIcon={Phone}
|
||||
<div id="final-cta" data-section="final-cta">
|
||||
<ContactCTA
|
||||
tag="Ready to Get Started?"
|
||||
title="Join OW HomeShield Today"
|
||||
description="Experience the peace of mind that comes with reliable home maintenance and emergency support available 24/7."
|
||||
buttons={[
|
||||
{ text: "Start Free Trial", href: "tel:226-224-3573" },
|
||||
{ text: "Call Us Now", href: "tel:226-224-3573" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
accordionAnimationType="smooth"
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-base" data-section="footer-base">
|
||||
<FooterBase
|
||||
columns={footerColumns}
|
||||
logoText="ContactHub"
|
||||
copyrightText="© 2025 | ContactHub. All rights reserved."
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
|
||||
imageAlt="OW HomeShield"
|
||||
logoText="OW HomeShield Inc."
|
||||
copyrightText="© 2025 OW HomeShield Inc. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "#benefits" },
|
||||
{ label: "Contact", href: "#final-cta" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Membership Plans", href: "#pricing" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Emergency Support", href: "tel:226-224-3573" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "Call: 226-224-3573", href: "tel:226-224-3573" },
|
||||
{ label: "Email: info@owhomeshield.com", href: "mailto:info@owhomeshield.com" },
|
||||
{ label: "Available 24/7", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-simple" data-section="footer-simple">
|
||||
<FooterSimple copyrightText="Privacy Policy • Terms of Service • Contact" />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,286 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { useState, useMemo } from "react";
|
||||
import { Search, Filter, ChevronUp, ChevronDown } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Membership", id: "/membership" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
];
|
||||
|
||||
interface ServiceRequest {
|
||||
requestId: string;
|
||||
clientName: string;
|
||||
address: string;
|
||||
issueType: string;
|
||||
membershipPlan: string;
|
||||
status: "pending" | "in-progress" | "completed" | "cancelled";
|
||||
date: string;
|
||||
}
|
||||
|
||||
const mockRequests: ServiceRequest[] = [
|
||||
{
|
||||
requestId: "SR-001", clientName: "John Smith", address: "123 Oak Avenue, Springfield", issueType: "Plumbing", membershipPlan: "Premium", status: "completed", date: "2025-01-15"},
|
||||
{
|
||||
requestId: "SR-002", clientName: "Sarah Johnson", address: "456 Elm Street, Shelbyville", issueType: "HVAC", membershipPlan: "Standard", status: "in-progress", date: "2025-01-18"},
|
||||
{
|
||||
requestId: "SR-003", clientName: "Michael Davis", address: "789 Maple Drive, Capital City", issueType: "Electrical", membershipPlan: "Elite", status: "pending", date: "2025-01-20"},
|
||||
{
|
||||
requestId: "SR-004", clientName: "Emily Wilson", address: "321 Pine Road, Shelbyville", issueType: "Roofing", membershipPlan: "Basic", status: "completed", date: "2025-01-10"},
|
||||
{
|
||||
requestId: "SR-005", clientName: "David Brown", address: "654 Cedar Lane, Springfield", issueType: "General Maintenance", membershipPlan: "Premium", status: "in-progress", date: "2025-01-19"},
|
||||
{
|
||||
requestId: "SR-006", clientName: "Jessica Martinez", address: "987 Birch Court, Capital City", issueType: "Emergency Repair", membershipPlan: "Elite", status: "pending", date: "2025-01-20"},
|
||||
];
|
||||
|
||||
type SortField = "requestId" | "clientName" | "address" | "issueType" | "membershipPlan" | "status" | "date";
|
||||
type SortOrder = "asc" | "desc";
|
||||
|
||||
const getStatusColor = (
|
||||
status: "pending" | "in-progress" | "completed" | "cancelled"
|
||||
): string => {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "bg-yellow-100 text-yellow-800";
|
||||
case "in-progress":
|
||||
return "bg-blue-100 text-blue-800";
|
||||
case "completed":
|
||||
return "bg-green-100 text-green-800";
|
||||
case "cancelled":
|
||||
return "bg-red-100 text-red-800";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800";
|
||||
}
|
||||
};
|
||||
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() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [sortField, setSortField] = useState<SortField>("date");
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
|
||||
const filteredAndSortedRequests = useMemo(() => {
|
||||
let filtered = mockRequests;
|
||||
|
||||
// Search filter
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter(
|
||||
(req) =>
|
||||
req.requestId.toLowerCase().includes(query) ||
|
||||
req.clientName.toLowerCase().includes(query) ||
|
||||
req.address.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (statusFilter !== "all") {
|
||||
filtered = filtered.filter((req) => req.status === statusFilter);
|
||||
}
|
||||
|
||||
// Sort
|
||||
filtered.sort((a, b) => {
|
||||
const aVal = a[sortField] || "";
|
||||
const bVal = b[sortField] || "";
|
||||
|
||||
if (aVal < bVal) return sortOrder === "asc" ? -1 : 1;
|
||||
if (aVal > bVal) return sortOrder === "asc" ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [searchQuery, sortField, sortOrder, statusFilter]);
|
||||
|
||||
const toggleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const SortIcon = ({ field }: { field: SortField }) => {
|
||||
if (sortField !== field) return null;
|
||||
return sortOrder === "asc" ? (
|
||||
<ChevronUp className="w-4 h-4 inline ml-1" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 inline ml-1" />
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="OW HomeShield"
|
||||
bottomLeftText="24/7 Support"
|
||||
bottomRightText="support@owhomeshield.com"
|
||||
/>
|
||||
<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 className="min-h-screen pt-20 pb-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-4">Service Requests Dashboard</h1>
|
||||
<p className="text-foreground/70 mb-8">
|
||||
Manage and track all service requests from clients.
|
||||
</p>
|
||||
<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>
|
||||
|
||||
{/* Filters and Search */}
|
||||
<div className="bg-card rounded-lg p-6 border border-foreground/10 mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by ID, name, or address..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-5 h-5 text-foreground/40" />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="in-progress">In Progress</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Results Count */}
|
||||
<div className="flex items-center justify-end">
|
||||
<span className="text-sm text-foreground/70">
|
||||
{filteredAndSortedRequests.length} requests
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="bg-card rounded-lg border border-foreground/10 overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-foreground/10 bg-background/50">
|
||||
<th className="px-6 py-4 text-left">
|
||||
<button
|
||||
onClick={() => toggleSort("requestId")}
|
||||
className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
|
||||
>
|
||||
Request ID
|
||||
<SortIcon field="requestId" />
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left">
|
||||
<button
|
||||
onClick={() => toggleSort("clientName")}
|
||||
className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
|
||||
>
|
||||
Client Name
|
||||
<SortIcon field="clientName" />
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left">
|
||||
<button
|
||||
onClick={() => toggleSort("address")}
|
||||
className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
|
||||
>
|
||||
Address
|
||||
<SortIcon field="address" />
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left">
|
||||
<button
|
||||
onClick={() => toggleSort("issueType")}
|
||||
className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
|
||||
>
|
||||
Issue Type
|
||||
<SortIcon field="issueType" />
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left">
|
||||
<button
|
||||
onClick={() => toggleSort("membershipPlan")}
|
||||
className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
|
||||
>
|
||||
Membership Plan
|
||||
<SortIcon field="membershipPlan" />
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left">
|
||||
<button
|
||||
onClick={() => toggleSort("status")}
|
||||
className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
|
||||
>
|
||||
Status
|
||||
<SortIcon field="status" />
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredAndSortedRequests.length > 0 ? (
|
||||
filteredAndSortedRequests.map((request) => (
|
||||
<tr
|
||||
key={request.requestId}
|
||||
className="border-b border-foreground/10 hover:bg-background/50 transition-colors"
|
||||
>
|
||||
<td className="px-6 py-4 text-sm font-medium">
|
||||
{request.requestId}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm">{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">{request.issueType}</td>
|
||||
<td className="px-6 py-4 text-sm">{request.membershipPlan}</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||
getStatusColor(request.status)
|
||||
}`}
|
||||
>
|
||||
{request.status.charAt(0).toUpperCase() +
|
||||
request.status.slice(1).replace("-", " ")}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-6 py-12 text-center text-foreground/50">
|
||||
No service requests found.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,254 +1,130 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { useState } from "react";
|
||||
import { Upload } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Membership", id: "/membership" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
];
|
||||
|
||||
interface MembershipFormData {
|
||||
fullName: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
homeAddress: string;
|
||||
propertyType: string;
|
||||
serviceDescription: string;
|
||||
photoFile: File | null;
|
||||
}
|
||||
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() {
|
||||
const [formData, setFormData] = useState<MembershipFormData>({
|
||||
fullName: "", phone: "", email: "", homeAddress: "", propertyType: "", serviceDescription: "", photoFile: null,
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
photoFile: e.target.files![0],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted:", formData);
|
||||
setSubmitted(true);
|
||||
setTimeout(() => {
|
||||
setFormData({
|
||||
fullName: "", phone: "", email: "", homeAddress: "", propertyType: "", serviceDescription: "", photoFile: null,
|
||||
});
|
||||
setSubmitted(false);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="OW HomeShield"
|
||||
bottomLeftText="24/7 Support"
|
||||
bottomRightText="support@owhomeshield.com"
|
||||
/>
|
||||
<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 className="min-h-screen pt-20 pb-20 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-4 text-center">
|
||||
New Member Signup
|
||||
</h1>
|
||||
<p className="text-center text-foreground/70 mb-12">
|
||||
Join OW HomeShield and get professional home maintenance and repair
|
||||
services.
|
||||
</p>
|
||||
<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 className="bg-card rounded-lg p-8 border border-foreground/10">
|
||||
{submitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-5xl mb-4">✓</div>
|
||||
<h2 className="text-2xl font-bold mb-2">
|
||||
Thank you for signing up!
|
||||
</h2>
|
||||
<p className="text-foreground/70">
|
||||
We'll review your information and contact you shortly.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Full Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* Phone */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Phone Number *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="(555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Home Address */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Home Address *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="homeAddress"
|
||||
value={formData.homeAddress}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="123 Main Street, City, State 12345"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Property Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Property Type *
|
||||
</label>
|
||||
<select
|
||||
name="propertyType"
|
||||
value={formData.propertyType}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
>
|
||||
<option value="">Select a property type</option>
|
||||
<option value="single-family">Single Family Home</option>
|
||||
<option value="condo">Condo/Townhouse</option>
|
||||
<option value="apartment">Apartment</option>
|
||||
<option value="multi-family">Multi-Family</option>
|
||||
<option value="commercial">Commercial</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Service Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Service Description *
|
||||
</label>
|
||||
<textarea
|
||||
name="serviceDescription"
|
||||
value={formData.serviceDescription}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="Describe the services you need..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Photo Upload */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Upload Photo (Optional)
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-foreground/20 rounded-lg p-6 text-center hover:border-primary-cta transition-colors">
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
onChange={handleFileChange}
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
id="photo-upload"
|
||||
/>
|
||||
<label
|
||||
htmlFor="photo-upload"
|
||||
className="cursor-pointer flex flex-col items-center gap-2"
|
||||
>
|
||||
<Upload className="w-8 h-8 text-primary-cta" />
|
||||
<span className="text-sm font-medium">
|
||||
{formData.photoFile
|
||||
? formData.photoFile.name
|
||||
: "Click to upload or drag and drop"}
|
||||
</span>
|
||||
<span className="text-xs text-foreground/50">
|
||||
PNG, JPG, GIF up to 10MB
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-white font-medium py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Submit Application
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
252
src/app/page.tsx
252
src/app/page.tsx
@@ -1,38 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
||||
import AboutMetric from "@/components/sections/about/AboutMetric";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
||||
import TeamCardOne from "@/components/sections/team/TeamCardOne";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { TrendingUp, ShoppingCart, Users, Globe } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Get Started", href: "/contact" }}
|
||||
brandName="OW HomeShield"
|
||||
/>
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<h1 className="text-4xl font-bold">Welcome to OW HomeShield</h1>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Webuild"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get Started", href: "contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Build Modern Web Experiences"
|
||||
description="Create stunning, responsive websites with our comprehensive component library and modern design system."
|
||||
tag="New Release"
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
|
||||
imageAlt="Webuild platform showcase"
|
||||
mediaAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Johnson", handle: "CEO, TechCorp", testimonial: "This platform transformed how we build web experiences. Incredibly intuitive and powerful.", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
|
||||
},
|
||||
{
|
||||
name: "Michael Chen", handle: "Product Designer, InnovateLabs", testimonial: "The component library saved us months of development time. Highly recommended!", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
|
||||
}
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "contact" },
|
||||
{ text: "Learn More", href: "#features" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Empowering developers to create amazing experiences with a comprehensive design system"
|
||||
metrics={[
|
||||
{ icon: TrendingUp, label: "Performance", value: "99.9%" },
|
||||
{ icon: ShoppingCart, label: "Trusted Since", value: "2020" },
|
||||
{ icon: Users, label: "Active Users", value: "50K+" },
|
||||
{ icon: Globe, label: "Global Reach", value: "120+" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
title="Powerful Features"
|
||||
description="Everything you need to build beautiful, scalable web applications"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Component Library", author: "By Webuild Team", description: "Access 100+ pre-built, customizable components ready for production use.", tags: ["Design", "Components"],
|
||||
imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=400&fit=crop"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Design System", author: "By Webuild Team", description: "Consistent design tokens and guidelines for scalable applications.", tags: ["Design", "System"],
|
||||
imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Developer Tools", author: "By Webuild Team", description: "Powerful CLI tools and integrations to streamline your workflow.", tags: ["Tools", "Development"],
|
||||
imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=400&fit=crop"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the perfect plan for your needs"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter", badge: "Starter", price: "$29/mo", subtitle: "Perfect for individuals", features: [
|
||||
"Unlimited projects", "20 component variations", "Community support", "Basic analytics"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "professional", badge: "Most Popular", badgeIcon: undefined,
|
||||
price: "$79/mo", subtitle: "For growing teams", features: [
|
||||
"Everything in Starter", "100+ components", "Priority email support", "Advanced analytics", "Team collaboration"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "enterprise", badge: "Enterprise", price: "Custom", subtitle: "For large organizations", features: [
|
||||
"Everything in Professional", "Custom components", "24/7 phone support", "Dedicated account manager", "On-premise deployment"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
title="Meet Our Team"
|
||||
description="The talented people behind Webuild"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Emily Watson", role: "Creative Director", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&h=300&fit=crop"
|
||||
},
|
||||
{
|
||||
id: "2", name: "James Rodriguez", role: "Lead Developer", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Sophia Lee", role: "UX Designer", imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Marcus Johnson", role: "Product Manager", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=300&fit=crop"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Webuild has completely revolutionized how we approach web development. The components are beautifully designed, well-documented, and save us incredible amounts of time. Our team productivity has increased by 40%."
|
||||
rating={5}
|
||||
author="David Park, CTO at StartupHub"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50&h=50&fit=crop", alt: "David Park"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=50&h=50&fit=crop", alt: "Team member"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop", alt: "Team member"
|
||||
}
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Newsletter"
|
||||
title="Stay Updated with the Latest Features"
|
||||
description="Subscribe to our newsletter to get exclusive updates, tips, and early access to new components."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe at any time."
|
||||
onSubmit={(email) => console.log("Subscribed:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Components", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Updates", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Team", href: "#team" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Support", href: "#contact" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Status", href: "#" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "License", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 Webuild. All rights reserved."
|
||||
bottomRightText="Made with Webuild"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -1,258 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { useState } from "react";
|
||||
import { Upload } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Membership", id: "/membership" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
];
|
||||
|
||||
interface ServiceRequestFormData {
|
||||
memberName: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
membershipPlan: string;
|
||||
issueType: string;
|
||||
description: string;
|
||||
photoFile: File | null;
|
||||
}
|
||||
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() {
|
||||
const [formData, setFormData] = useState<ServiceRequestFormData>({
|
||||
memberName: "", phone: "", address: "", membershipPlan: "", issueType: "", description: "", photoFile: null,
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
photoFile: e.target.files![0],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Service request submitted:", formData);
|
||||
setSubmitted(true);
|
||||
setTimeout(() => {
|
||||
setFormData({
|
||||
memberName: "", phone: "", address: "", membershipPlan: "", issueType: "", description: "", photoFile: null,
|
||||
});
|
||||
setSubmitted(false);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="OW HomeShield"
|
||||
bottomLeftText="24/7 Support"
|
||||
bottomRightText="support@owhomeshield.com"
|
||||
/>
|
||||
<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 className="min-h-screen pt-20 pb-20 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-4 text-center">
|
||||
Service Request
|
||||
</h1>
|
||||
<p className="text-center text-foreground/70 mb-12">
|
||||
Submit a service request and our team will respond within 24 hours.
|
||||
</p>
|
||||
<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 className="bg-card rounded-lg p-8 border border-foreground/10">
|
||||
{submitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-5xl mb-4">✓</div>
|
||||
<h2 className="text-2xl font-bold mb-2">
|
||||
Service Request Submitted!
|
||||
</h2>
|
||||
<p className="text-foreground/70">
|
||||
A technician will contact you within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Member Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Member Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="memberName"
|
||||
value={formData.memberName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Phone Number *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="(555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Service Address *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="123 Main Street, City, State 12345"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Membership Plan */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Membership Plan *
|
||||
</label>
|
||||
<select
|
||||
name="membershipPlan"
|
||||
value={formData.membershipPlan}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
>
|
||||
<option value="">Select a plan</option>
|
||||
<option value="basic">Basic Plan</option>
|
||||
<option value="standard">Standard Plan</option>
|
||||
<option value="premium">Premium Plan</option>
|
||||
<option value="elite">Elite Plan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Issue Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Issue Type *
|
||||
</label>
|
||||
<select
|
||||
name="issueType"
|
||||
value={formData.issueType}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
>
|
||||
<option value="">Select issue type</option>
|
||||
<option value="plumbing">Plumbing</option>
|
||||
<option value="electrical">Electrical</option>
|
||||
<option value="hvac">HVAC</option>
|
||||
<option value="roofing">Roofing</option>
|
||||
<option value="general">General Maintenance</option>
|
||||
<option value="emergency">Emergency Repair</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Issue Description *
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
|
||||
placeholder="Describe the issue in detail..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Photo Upload */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Upload Photo (Optional)
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-foreground/20 rounded-lg p-6 text-center hover:border-primary-cta transition-colors">
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
onChange={handleFileChange}
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
id="photo-upload"
|
||||
/>
|
||||
<label
|
||||
htmlFor="photo-upload"
|
||||
className="cursor-pointer flex flex-col items-center gap-2"
|
||||
>
|
||||
<Upload className="w-8 h-8 text-primary-cta" />
|
||||
<span className="text-sm font-medium">
|
||||
{formData.photoFile
|
||||
? formData.photoFile.name
|
||||
: "Click to upload or drag and drop"}
|
||||
</span>
|
||||
<span className="text-xs text-foreground/50">
|
||||
PNG, JPG, GIF up to 10MB
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-white font-medium py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Submit Service Request
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user