bender/7dc2a228-e862-48eb-a433-cc308fe21534
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/app/contact/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-07 12:11:15 +00:00
parent 95d22ea2a2
commit 67b7302459
1 changed files with 51 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/app/contact/page.tsx
View File

@@ -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: "#" },
],