From 67b7302459ee92a0e69f2d44b875ae9b36708db4 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 12:11:15 +0000
Subject: [PATCH] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 106 +++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 55 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 1095aa8..760702b 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,9 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Mail, MapPin, Phone, MessageCircle } from "lucide-react";
+import { Phone, Mail, MapPin, MessageCircle } from "lucide-react";
 
 export default function ContactPage() {
   return (
@@ -14,7 +15,7 @@ export default function ContactPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -24,10 +25,11 @@ export default function ContactPage() {
         <NavbarLayoutFloatingInline
           brandName="AirPods"
           navItems={[
-            { name: "Products", id: "products" },
-            { name: "Features", id: "features" },
-            { name: "Why AirPods", id: "metrics" },
-            { name: "Support", id: "faq" },
+            { name: "Products", id: "/" },
+            { name: "Features", id: "/" },
+            { name: "Why AirPods", id: "/" },
+            { name: "Support", id: "/" },
+            { name: "Reviews", id: "/reviews" },
             { name: "About", id: "/about" },
             { name: "Pricing", id: "/pricing" },
             { name: "Contact", id: "/contact" },
@@ -37,60 +39,54 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
           tag="Get in Touch"
           tagIcon={MessageCircle}
           tagAnimation="slide-up"
-          title="We'd Love to Hear From You"
-          description="Have questions about AirPods or need support? Our team is here to help. Reach out to us and we'll get back to you as soon as possible."
-          background={{ variant: "animated-grid" }}
+          title="Contact Our Support Team"
+          description="Have questions about AirPods? We're here to help with product inquiries, technical support, and customer service."
+          buttons={[
+            { text: "Email Us", href: "mailto:support@airpods.com" },
+            { text: "Live Chat", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email address"
-          buttonText="Subscribe"
-          onSubmit={(email) => console.log("Email submitted:", email)}
         />
       </div>
 
-      <div id="contact-info" data-section="contact-info">
-        <div className="py-20">
-          <div className="mx-auto max-w-7xl px-4">
-            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-              <div className="flex flex-col items-start space-y-4">
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
-                  <Mail className="h-6 w-6 text-primary-cta" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold">Email</h3>
-                  <p className="mt-1 text-foreground/75">support@airpods.com</p>
-                  <p className="text-sm text-foreground/60">We'll respond within 24 hours</p>
-                </div>
-              </div>
-
-              <div className="flex flex-col items-start space-y-4">
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
-                  <Phone className="h-6 w-6 text-primary-cta" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold">Phone</h3>
-                  <p className="mt-1 text-foreground/75">1-800-MY-APPLE</p>
-                  <p className="text-sm text-foreground/60">Available Monday to Friday, 9am-6pm EST</p>
-                </div>
-              </div>
-
-              <div className="flex flex-col items-start space-y-4">
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
-                  <MapPin className="h-6 w-6 text-primary-cta" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold">Visit Us</h3>
-                  <p className="mt-1 text-foreground/75">Apple Retail Stores</p>
-                  <p className="text-sm text-foreground/60">Find your nearest store worldwide</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+      <div id="contact-faq" data-section="contact-faq">
+        <ContactFaq
+          faqs={[
+            {
+              id: "1",              title: "What are your business hours?",              content: "Our customer support team is available Monday to Friday, 9 AM to 6 PM EST. We also offer 24/7 online chat support through our website."
+            },
+            {
+              id: "2",              title: "How quickly will I receive a response?",              content: "We aim to respond to all inquiries within 24 hours. For urgent issues, please use our live chat feature for immediate assistance."
+            },
+            {
+              id: "3",              title: "Do you offer phone support?",              content: "Yes, phone support is available for customers with active accounts. Call our support line at 1-800-AIRPODS during business hours."
+            },
+            {
+              id: "4",              title: "Can I return my AirPods?",              content: "We offer a 30-day money-back guarantee on all AirPods purchases. Please visit our returns portal or contact support for assistance."
+            },
+            {
+              id: "5",              title: "What about warranty coverage?",              content: "All AirPods come with a 1-year limited warranty covering manufacturing defects. Extended warranty options are also available."
+            },
+            {
+              id: "6",              title: "How do I track my order?",              content: "You can track your order using the tracking number sent to your email after purchase. Visit our orders page or contact support for details."
+            },
+          ]}
+          ctaTitle="Schedule a Call"
+          ctaDescription="Get personalized assistance from our product specialists"
+          ctaButton={{ text: "Book a Call", href: "#" }}
+          ctaIcon={Phone}
+          useInvertedBackground={false}
+          animationType="slide-up"
+          accordionAnimationType="smooth"
+          showCard={true}
+        />
       </div>
 
       <div id="footer" data-section="footer">
@@ -115,7 +111,7 @@ export default function ContactPage() {
             {
               title: "Company",              items: [
                 { label: "About Us", href: "/about" },
-                { label: "Blog", href: "#" },
+                { label: "Reviews", href: "/reviews" },
                 { label: "Careers", href: "#" },
                 { label: "News", href: "#" },
               ],