Update src/app/contact/page.tsx
This commit is contained in:
@@ -1,21 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import { Heart, HelpCircle } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
|
||||
import { MessageSquare, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Meal Plans", id: "meal-plans" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const handleContactSubmit = (data: Record<string, string>) => {
|
||||
console.log("Contact form submitted:", data);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
@@ -29,84 +32,111 @@ export default function ContactPage() {
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="NutriFlow"
|
||||
navItems={navItems}
|
||||
brandName="NutriFlow"
|
||||
button={{
|
||||
text: "Order Now",
|
||||
href: "/meal-plans",
|
||||
text: "Order Now", href: "/meal-plans"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CTA/Contact Section */}
|
||||
<div id="cta" data-section="cta">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<ContactCenter
|
||||
tag="Ready to Transform?"
|
||||
title="Start Your Health Journey Today"
|
||||
description="Join thousands of satisfied customers who have transformed their lives with NutriFlow. Sign up now to get your first week at 20% off."
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Get Started"
|
||||
/>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Get in Touch with NutriFlow"
|
||||
description="Have questions about our meal plans or services? We'd love to hear from you. Our dedicated support team is here to help you on your wellness journey."
|
||||
tag="Contact Us"
|
||||
tagIcon={MessageSquare}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "View Meal Plans", href: "/meal-plans"
|
||||
}
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/customer-support-agent-with-headphones_53876-24718.jpg?_wi=1"
|
||||
imageAlt="Customer support professional"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
background={{
|
||||
variant: "radial-gradient"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplitForm
|
||||
title="Send Us a Message"
|
||||
description="Fill out the form below and our team will get back to you as soon as possible. We typically respond within 24 hours."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true
|
||||
},
|
||||
{
|
||||
name: "phone", type: "tel", placeholder: "Your Phone Number", required: false
|
||||
},
|
||||
{
|
||||
name: "subject", type: "text", placeholder: "Subject", required: true
|
||||
}
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us how we can help you...", rows: 6,
|
||||
required: true
|
||||
}}
|
||||
buttonText="Send Message"
|
||||
onSubmit={handleContactSubmit}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/diverse-team-working-together-office-environment_53876-24750.jpg?_wi=1"
|
||||
imageAlt="NutriFlow team in office"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<div className="py-16 md:py-24 relative">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Other Ways to Reach Us</h2>
|
||||
<p className="text-lg text-muted-foreground">We're available through multiple channels to best serve your needs</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center p-6 rounded-lg border border-border hover:bg-card/50 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<Mail className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Email</h3>
|
||||
<p className="text-muted-foreground">support@nutriflow.com</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">We respond within 24 hours</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 rounded-lg border border-border hover:bg-card/50 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<Phone className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Phone</h3>
|
||||
<p className="text-muted-foreground">1-800-NUTRIFLOW</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Mon-Fri, 9AM-6PM EST</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 rounded-lg border border-border hover:bg-card/50 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<MapPin className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Location</h3>
|
||||
<p className="text-muted-foreground">123 Wellness Ave</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">San Francisco, CA 94102</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div id="faq" data-section="faq">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about NutriFlow and getting started."
|
||||
tag="Got Questions?"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I place my first order?",
|
||||
content: "Simply choose your meal plan above, enter your email to get started, and follow our quick onboarding process. You'll select your meals and delivery preferences, and your first box ships within 48 hours.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Apple Pay. Your payment is secure and encrypted.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What is your refund policy?",
|
||||
content: "We offer a 100% satisfaction guarantee. If you're not happy with your first order, contact us within 7 days for a full refund, no questions asked.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "How quickly will I see results?",
|
||||
content: "Most customers report noticeable changes within 2-3 weeks. Results vary based on your current fitness level, diet adherence, and individual metabolism. Our nutrition team can help track your progress.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Do you ship internationally?",
|
||||
content: "Currently, we deliver to all continental US addresses. International shipping is coming soon! Sign up for our newsletter to be notified when we expand to your region.",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "How can I contact customer support?",
|
||||
content: "You can reach our support team via email at support@nutriflow.com or call 1-800-NUTRIFLOW. We're available Monday-Friday, 9am-6pm EST. Chat support is available on our website during business hours.",
|
||||
},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="NutriFlow"
|
||||
@@ -114,24 +144,20 @@ export default function ContactPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com/nutriflow",
|
||||
ariaLabel: "Visit our Facebook",
|
||||
href: "https://facebook.com/nutriflow", ariaLabel: "Visit our Facebook"
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com/nutriflow",
|
||||
ariaLabel: "Visit our Instagram",
|
||||
href: "https://instagram.com/nutriflow", ariaLabel: "Visit our Instagram"
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com/nutriflow",
|
||||
ariaLabel: "Visit our Twitter",
|
||||
href: "https://twitter.com/nutriflow", ariaLabel: "Visit our Twitter"
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com/company/nutriflow",
|
||||
ariaLabel: "Visit our LinkedIn",
|
||||
},
|
||||
href: "https://linkedin.com/company/nutriflow", ariaLabel: "Visit our LinkedIn"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user