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 NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { MessageCircle, MapPin, Phone } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const handleWhatsAppClick = () => {
|
||||
window.open("https://wa.me/1234567890?text=Hello%20I%20would%20like%20to%20inquire", "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Daily Tracker"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Testimonials", id: "/testimonials" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "/" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-hero" data-section="contact-hero" className="py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h1 className="text-5xl font-bold mb-4">Get In Touch</h1>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Have questions or feedback? We'd love to hear from you. Reach out using any of the methods below.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-methods" data-section="contact-methods" className="py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center p-8 rounded-lg bg-gradient-to-br from-blue-50 to-indigo-50">
|
||||
<MapPin className="w-12 h-12 mx-auto mb-4 text-indigo-600" />
|
||||
<h3 className="text-xl font-semibold mb-2">Location</h3>
|
||||
<p className="text-gray-600">Our office is located worldwide. We serve clients globally with comprehensive wellness tracking solutions.</p>
|
||||
</div>
|
||||
<div className="text-center p-8 rounded-lg bg-gradient-to-br from-green-50 to-emerald-50">
|
||||
<MessageCircle className="w-12 h-12 mx-auto mb-4 text-green-600" />
|
||||
<h3 className="text-xl font-semibold mb-2">WhatsApp Support</h3>
|
||||
<p className="text-gray-600 mb-4">Get instant support via WhatsApp for quick inquiries and assistance with your account.</p>
|
||||
<button
|
||||
onClick={handleWhatsAppClick}
|
||||
className="inline-block px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
|
||||
>
|
||||
Message Us
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-center p-8 rounded-lg bg-gradient-to-br from-purple-50 to-pink-50">
|
||||
<Phone className="w-12 h-12 mx-auto mb-4 text-purple-600" />
|
||||
<h3 className="text-xl font-semibold mb-2">Contact Info</h3>
|
||||
<p className="text-gray-600">Email: support@dailytracker.com<br/>Phone: +1 (555) 123-4567</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map-section" data-section="map-section" className="py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-3xl font-bold text-center mb-10">Find Us</h2>
|
||||
<div className="rounded-lg overflow-hidden shadow-lg h-96 md:h-96">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00601631234567!3d40.71282331234567!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27ce2a7f69%3A0x27f07d430278a31!2sNew%20York%2C%20NY!5e0!3m2!1sen!2sus!4v1234567890"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Location Map"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactCTA
|
||||
tag="Let's Connect"
|
||||
tagIcon={MessageCircle}
|
||||
tagAnimation="slide-up"
|
||||
title="Ready to Start Your Wellness Journey?"
|
||||
description="Get in touch with our team to learn more about how Daily Tracker can transform your productivity and wellness. We're here to help!"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Message via WhatsApp", onClick: handleWhatsAppClick },
|
||||
{ text: "Send Email", href: "mailto:support@dailytracker.com" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Testimonials", href: "/testimonials" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Personal Daily Tracker Dashboard. All rights reserved."
|
||||
bottomRightText="Built for your wellness journey"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user