Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -40,7 +40,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" className="px-4 sm:px-6 md:px-8 lg:px-10">
         <HeroBillboardCarousel
           title="Frisco's Trusted Family Auto Repair"
           description="Expert automotive care for your vehicle. From routine maintenance to complex repairs, we deliver honest service you can trust. Over 15 years serving the Frisco community."
@@ -59,10 +59,14 @@ export default function LandingPage() {
             }
           ]}
           ariaLabel="Hero section showcasing Automotive ER services"
+          containerClassName="py-8 sm:py-12 md:py-16 lg:py-20"
+          titleClassName="text-2xl sm:text-3xl md:text-4xl lg:text-5xl break-words hyphens-auto"
+          descriptionClassName="text-sm sm:text-base md:text-lg break-words hyphens-auto leading-relaxed"
+          textBoxClassName="px-4 sm:px-6 md:px-8 py-6 sm:py-8"
         />
       </div>
 
-      <div id="services" data-section="services">
+      <div id="services" data-section="services" className="px-4 sm:px-6 md:px-8 lg:px-10">
         <FeatureCardTwentySeven
           title="Our Services"
           description="Complete automotive maintenance and repair services for all vehicle makes and models."
@@ -105,10 +109,16 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           ariaLabel="Services section listing all automotive repair offerings"
+          containerClassName="py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8"
+          textBoxClassName="px-4 sm:px-6 md:px-8 py-6 sm:py-8"
+          textBoxTitleClassName="text-2xl sm:text-3xl md:text-4xl break-words hyphens-auto"
+          textBoxDescriptionClassName="text-sm sm:text-base md:text-lg break-words hyphens-auto leading-relaxed"
+          cardTitleClassName="text-lg sm:text-xl md:text-2xl break-words hyphens-auto"
+          cardDescriptionClassName="text-xs sm:text-sm md:text-base break-words hyphens-auto leading-relaxed"
         />
       </div>
 
-      <div id="why-us" data-section="why-us">
+      <div id="why-us" data-section="why-us" className="px-4 sm:px-6 md:px-8 lg:px-10">
         <MetricCardThree
           title="Why Choose Automotive ER"
           description="We stand out because of our commitment to honest pricing, fast service, and family values."
@@ -130,10 +140,16 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           ariaLabel="Why Choose Us metrics highlighting key differentiators"
+          containerClassName="py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8"
+          textBoxClassName="px-4 sm:px-6 md:px-8 py-6 sm:py-8"
+          textBoxTitleClassName="text-2xl sm:text-3xl md:text-4xl break-words hyphens-auto"
+          textBoxDescriptionClassName="text-sm sm:text-base md:text-lg break-words hyphens-auto leading-relaxed"
+          metricTitleClassName="text-base sm:text-lg md:text-xl break-words hyphens-auto"
+          valueClassName="text-sm sm:text-base md:text-lg break-words hyphens-auto font-semibold"
         />
       </div>
 
-      <div id="reviews" data-section="reviews">
+      <div id="reviews" data-section="reviews" className="px-4 sm:px-6 md:px-8 lg:px-10">
         <TestimonialCardTwelve
           testimonials={[
             {
@@ -155,10 +171,13 @@ export default function LandingPage() {
           cardAnimation="slide-up"
           useInvertedBackground={false}
           ariaLabel="Customer testimonials and reviews section"
+          containerClassName="py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8"
+          cardTitleClassName="text-2xl sm:text-3xl md:text-4xl break-words hyphens-auto"
+          cardClassName="p-4 sm:p-6 md:p-8"
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" className="px-4 sm:px-6 md:px-8 lg:px-10">
         <ContactSplitForm
           title="Schedule Your Appointment"
           description="Contact us today to book your service. We're here to answer questions and get your vehicle back in top condition."
@@ -176,10 +195,15 @@ export default function LandingPage() {
           mediaAnimation="none"
           buttonText="Request Appointment"
           ariaLabel="Contact and appointment request form section"
+          containerClassName="py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8"
+          titleClassName="text-2xl sm:text-3xl md:text-4xl break-words hyphens-auto"
+          descriptionClassName="text-sm sm:text-base md:text-lg break-words hyphens-auto leading-relaxed"
+          formCardClassName="p-6 sm:p-8 md:p-10 space-y-4 sm:space-y-5"
+          buttonClassName="w-full py-3 sm:py-4"
         />
       </div>
 
-      <div id="contact-info" data-section="contact-info">
+      <div id="contact-info" data-section="contact-info" className="px-4 sm:px-6 md:px-8 lg:px-10">
         <MetricSplitMediaAbout
           title="Get in Touch"
           description="Visit us today or call to schedule your appointment. We're conveniently located in Frisco and ready to help with all your automotive needs."
@@ -192,6 +216,11 @@ export default function LandingPage() {
           mediaAnimation="none"
           metricsAnimation="slide-up"
           ariaLabel="Contact information and business hours"
+          containerClassName="py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8"
+          titleClassName="text-2xl sm:text-3xl md:text-4xl break-words hyphens-auto"
+          descriptionClassName="text-sm sm:text-base md:text-lg break-words hyphens-auto leading-relaxed"
+          metricValueClassName="text-lg sm:text-xl md:text-2xl break-words hyphens-auto font-semibold"
+          metricTitleClassName="text-sm sm:text-base md:text-lg break-words hyphens-auto"
         />
       </div>
 
@@ -205,6 +234,7 @@ export default function LandingPage() {
             text: "Contact Us",            href: "tel:9729899402"
           }}
           ariaLabel="Site footer with navigation and contact"
+          wrapperClassName="px-4 sm:px-6 md:px-8 py-6 sm:py-8 md:py-10"
         />
       </div>
     </ThemeProvider>

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #000f06e6;
+  --foreground: #000612e6;
-  --primary-cta: #0a7039;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000f06e6;
+  --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);