Add src/app/contact/page.tsx
This commit is contained in:
143
src/app/contact/page.tsx
Normal file
143
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Mail, Phone, MessageCircle } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Collections", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Craftsmanship", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "products" }}
|
||||
brandName="TimeLux"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact" className="py-20">
|
||||
<ContactFaq
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How can I contact customer support?", content: "You can reach our customer support team via email at support@timelux.com, phone at +41 (0) 44 XXX XXXX, or through our WhatsApp contact. We respond within 24 hours during business days."},
|
||||
{
|
||||
id: "2", title: "What are your business hours?", content: "Our customer support team is available Monday to Friday, 9:00 AM to 6:00 PM CET. For urgent matters outside these hours, please email us and we'll get back to you as soon as possible."},
|
||||
{
|
||||
id: "3", title: "Do you offer WhatsApp support?", content: "Yes! You can message us on WhatsApp at +41 XXXX XXXXX for quick inquiries, order updates, and general support. WhatsApp allows us to respond faster with images and detailed information."},
|
||||
{
|
||||
id: "4", title: "Can I visit your showroom?", content: "Absolutely. Our showroom is located in Zurich, Switzerland. We recommend scheduling an appointment to ensure our team can give you personalized attention. Please contact us in advance to arrange a visit."},
|
||||
{
|
||||
id: "5", title: "How do I track my order?", content: "After your purchase, you'll receive a confirmation email with a tracking number. You can use this number to monitor your shipment in real-time through our partner courier service."},
|
||||
{
|
||||
id: "6", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, bank transfers, and installment payment plans. Your payment information is encrypted and secure."},
|
||||
]}
|
||||
ctaTitle="Get in Touch"
|
||||
ctaDescription="Have questions about our watches? Reach out to our team via email, phone, WhatsApp, or visit our showroom for a personalized experience."
|
||||
ctaButton={{ text: "Contact Us", href: "mailto:support@timelux.com" }}
|
||||
ctaIcon={Mail}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="py-12 px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center">Contact Information</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Email */}
|
||||
<div className="flex flex-col items-center text-center p-6 rounded-lg bg-card">
|
||||
<Mail className="w-12 h-12 mb-4 text-primary-cta" />
|
||||
<h3 className="font-semibold mb-2">Email</h3>
|
||||
<p className="text-sm mb-3">support@timelux.com</p>
|
||||
<p className="text-xs text-foreground/70">Response time: Within 24 hours</p>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div className="flex flex-col items-center text-center p-6 rounded-lg bg-card">
|
||||
<Phone className="w-12 h-12 mb-4 text-primary-cta" />
|
||||
<h3 className="font-semibold mb-2">Phone</h3>
|
||||
<p className="text-sm mb-3">+41 (0) 44 XXX XXXX</p>
|
||||
<p className="text-xs text-foreground/70">Mon-Fri, 9:00 AM - 6:00 PM CET</p>
|
||||
</div>
|
||||
|
||||
{/* WhatsApp */}
|
||||
<div className="flex flex-col items-center text-center p-6 rounded-lg bg-card">
|
||||
<MessageCircle className="w-12 h-12 mb-4 text-primary-cta" />
|
||||
<h3 className="font-semibold mb-2">WhatsApp</h3>
|
||||
<p className="text-sm mb-3">+41 XXXX XXXXX</p>
|
||||
<p className="text-xs text-foreground/70">Quick replies & support</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links Section */}
|
||||
<div className="mt-12 pt-8 border-t border-accent/20">
|
||||
<h3 className="text-xl font-semibold mb-6 text-center">Follow Us</h3>
|
||||
<div className="flex justify-center gap-6">
|
||||
<a href="https://facebook.com/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
|
||||
<span className="text-sm font-medium">Facebook</span>
|
||||
</a>
|
||||
<a href="https://instagram.com/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
|
||||
<span className="text-sm font-medium">Instagram</span>
|
||||
</a>
|
||||
<a href="https://twitter.com/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
|
||||
<span className="text-sm font-medium">Twitter</span>
|
||||
</a>
|
||||
<a href="https://linkedin.com/company/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
|
||||
<span className="text-sm font-medium">LinkedIn</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Collections", href: "#products" },
|
||||
{ label: "New Arrivals", href: "#" },
|
||||
{ label: "Sale", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Warranty", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 TimeLux Watches. All rights reserved."
|
||||
bottomRightText="Crafted with precision and passion"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user