Update theme colors

Merge version_8 into main

src/app/api/contact/route.ts

@@ -1,104 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-export async function POST(request: NextRequest) {
-  try {
-    const { name, email, phone, message } = await request.json();
-
-    // Validate required fields
-    if (!name || !email || !message) {
-      return NextResponse.json(
-        { error: 'Missing required fields' },
-        { status: 400 }
-      );
-    }
-
-    // Email validation
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(email)) {
-      return NextResponse.json(
-        { error: 'Invalid email address' },
-        { status: 400 }
-      );
-    }
-
-    // Format the email content
-    const emailContent = `
-New Contact Form Submission from Earl Boys Services Website
-
-Name: ${name}
-Email: ${email}
-Phone: ${phone || 'Not provided'}
-
-Message:
-${message}
-
----
-This message was sent from your website contact form.
-    `;
-
-    // Send email notification (you'll need to configure your email service)
-    // This is a placeholder for your email sending logic
-    // You can use services like Nodemailer, SendGrid, AWS SES, etc.
-    
-    // Example with a generic webhook or internal email service:
-    const emailResponse = await sendEmailNotification({
-      to: 'info@earlboysservices.com',
-      subject: `New Contact Form Submission from ${name}`,
-      text: emailContent,
-      replyTo: email,
-    });
-
-    if (!emailResponse.success) {
-      console.error('Email sending failed:', emailResponse.error);
-      return NextResponse.json(
-        { error: 'Failed to send message' },
-        { status: 500 }
-      );
-    }
-
-    // Return success response
-    return NextResponse.json(
-      { message: 'Contact form submitted successfully' },
-      { status: 200 }
-    );
-  } catch (error) {
-    console.error('Contact form error:', error);
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    );
-  }
-}
-
-// Email notification function - implement based on your email service
-async function sendEmailNotification({
-  to,
-  subject,
-  text,
-  replyTo,
-}: {
-  to: string;
-  subject: string;
-  text: string;
-  replyTo: string;
-}): Promise<{ success: boolean; error?: string }> {
-  try {
-    // Placeholder for email service integration
-    // Configure your email service here (SendGrid, AWS SES, Nodemailer, etc.)
-    
-    // Example: Using fetch to call an external email service
-    // const response = await fetch('YOUR_EMAIL_SERVICE_ENDPOINT', {
-    //   method: 'POST',
-    //   headers: { 'Content-Type': 'application/json' },
-    //   body: JSON.stringify({ to, subject, text, replyTo }),
-    // });
-
-    // For now, return success (implement actual email service)
-    console.log(`Email notification: ${subject} to ${to}`);
-    
-    return { success: true };
-  } catch (error) {
-    console.error('Email notification error:', error);
-    return { success: false, error: String(error) };
-  }
-}

src/app/contact/page.tsx

@@ -3,11 +3,11 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
+import ContactForm from "@/components/form/ContactForm";
 import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Hammer, Wrench, Droplet, Paintbrush, Zap, MonitorPlay, Armchair, Layers, TrendingUp, Clock, Users, CheckCircle, Star, Facebook, Instagram, Phone, Quote } from "lucide-react";
+import { Hammer, Wrench, Mail, Star, Quote, Facebook, Instagram, Phone } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
@@ -17,10 +17,6 @@ export default function ContactPage() {
     { name: "Contact", id: "/contact" },
   ];
 
-  const contactButton = {
-    text: "Call Now",    href: "tel:804-938-0669"
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -74,7 +70,7 @@ export default function ContactPage() {
               text: "Call Now: 804-938-0669",              href: "tel:804-938-0669"
             },
             {
-              text: "Quick Contact Form",              href: "#contact-form"
+              text: "Send Message",              href: "#contact-form"
             },
           ]}
           buttonAnimation="slide-up"
@@ -82,67 +78,18 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="services" data-section="services">
-        <FeatureCardTwentyFive
-          title="How to Reach Us"
-          description="Multiple convenient ways to get in touch with Earl Boys Services. We're ready to discuss your project and provide expert recommendations."
-          tag="Contact Options"
-          tagIcon={Wrench}
-          features={[
-            {
-              title: "Phone Support",              description: "Call us directly for immediate assistance and emergency service requests.",              icon: Phone,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg",                  imageAlt: "Customer service support"
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg",                  imageAlt: "Professional communication"
-                },
-              ],
-            },
-            {
-              title: "Service Area Coverage",              description: "We proudly serve Richmond, VA and all surrounding areas with comprehensive home services.",              icon: Wrench,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-holding-push-pin-blur-map_23-2147958186.jpg",                  imageAlt: "Richmond virginia map location marker"
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-cleaning-office-together_23-2149345517.jpg",                  imageAlt: "Professional home services team working"
-                },
-              ],
-            },
-            {
-              title: "Free Estimates",              description: "Schedule a free consultation and estimate for your project with our experienced team.",              icon: CheckCircle,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg",                  imageAlt: "Home improvement project"
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-builder-men-with-smartphones_23-2148751993.jpg",                  imageAlt: "Professional consultation"
-                },
-              ],
-            },
-            {
-              title: "Licensed & Insured",              description: "All services fully licensed, insured, and bonded for your peace of mind.",              icon: CheckCircle,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/cheerful-grey-haired-logistic-worker-hardhat-uniform-standing-shelves-warehouse-with-arms-folded-looking-camera-smiling-vertical-shot-labor-blue-collar-portrait-concept_74855-14227.jpg",                  imageAlt: "Professional tradesman"
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/view-professional-cleaning-service-person-holding-supplies_23-2150520608.jpg",                  imageAlt: "Professional service team"
-                },
-              ],
-            },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
+      <div id="contact-form" data-section="contact-form">
+        <ContactForm
+          title="Send us a Message"
+          description="Fill out the form below and we'll get back to you within 24 hours with a response."
+          tag="Quick Contact"
+          tagIcon={Mail}
+          inputPlaceholder="Your email address"
+          buttonText="Send Message"
+          termsText="We'll never share your information and respect your privacy."
+          onSubmit={(email) => console.log('Form submitted with email:', email)}
+          centered={true}
           useInvertedBackground={false}
-          buttons={[
-            {
-              text: "Request Service",              href: "tel:804-938-0669"
-            },
-          ]}
-          buttonAnimation="slide-up"
         />
       </div>
 
@@ -173,8 +120,8 @@ export default function ContactPage() {
           showRating={true}
           animationType="slide-up"
           textboxLayout="default"
-          useInvertedBackground={false}
           carouselMode="buttons"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -204,8 +151,8 @@ export default function ContactPage() {
           ]}
           textPosition="left"
           faqsAnimation="slide-up"
-          useInvertedBackground={false}
           animationType="smooth"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -231,4 +178,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -7,7 +7,7 @@ import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
 import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Sparkles, CheckCircle, TrendingUp, Users, Shield, Zap, Globe } from "lucide-react";
+import { Sparkles, CheckCircle, TrendingUp, Users } from "lucide-react";
 
 export default function Home() {
   const navItems = [
@@ -178,4 +178,4 @@ export default function Home() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -12,11 +12,11 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --foreground: #120006e6;
+  --primary-cta: #e63946;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #120006e6;
   --accent: #e2e2e2;
   --background-accent: #c4c4c4;