src/App.tsx

@@ -3,12 +3,14 @@ import HomePage from "@/pages/HomePage";
 import PlansPage from "@/pages/PlansPage";
 
 import AboutPage from "@/pages/AboutPage";
+import ContactPage from "@/pages/ContactPage";
 export default function App() {
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/plans" element={<PlansPage />} />
       <Route path="/about" element={<AboutPage />} />
+      <Route path="/contact" element={<ContactPage />} />
     </Routes>
   );
 }

src/pages/ContactPage.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+const ContactPage = () => {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="FlowSync"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/plans" }}
+      />
+
+      <main className="flex-grow">
+        <HeroBillboard
+          tag="Contact Us"
+          title="We're Here to Help"
+          description="Whether you have a question about features, pricing, or anything else, our team is ready to answer all your questions."
+          primaryButton={{ text: "Send a Message", href: "#form" }}
+          secondaryButton={{ text: "View FAQ", href: "#faq" }}
+          imageSrc="https://images.unsplash.com/photo-1516387938699-a93567ec168e?auto=format&fit=crop&w=1200&q=80"
+        />
+
+        <div id="form">
+          <ContactSplitForm
+            tag="Get in Touch"
+            title="Send Us a Message"
+            description="Fill out the form below and our team will get back to you within 24 hours."
+            inputs={[
+              { name: "firstName", type: "text", placeholder: "First Name", required: true },
+              { name: "lastName", type: "text", placeholder: "Last Name", required: true },
+              { name: "email", type: "email", placeholder: "Email Address", required: true },
+              { name: "company", type: "text", placeholder: "Company Name" }
+            ]}
+            textarea={{ name: "message", placeholder: "How can we help you?", rows: 5, required: true }}
+            buttonText="Send Message"
+            imageSrc="https://images.unsplash.com/photo-1596524430615-b46475ddff6e?auto=format&fit=crop&w=800&q=80"
+          />
+        </div>
+
+        <section className="py-20 bg-card text-foreground">
+          <div className="w-content-width mx-auto">
+            <div className="flex flex-col items-center gap-3 md:gap-2 mb-12">
+              <span className="px-3 py-1 text-sm card rounded bg-background">Location</span>
+              <h2 className="text-4xl md:text-5xl font-medium text-center text-balance">Find Us on the Map</h2>
+              <p className="md:max-w-6/10 text-lg leading-tight text-center opacity-75">
+                Come visit our headquarters in the heart of San Francisco.
+              </p>
+            </div>
+            <div className="w-full h-[400px] md:h-[600px] overflow-hidden rounded-lg shadow-xl border border-border">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.210452399676!2d-122.4194155846813!3d37.77492947975899!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808b1a3e3b3b%3A0x2a0d3e3b3b3b3b3b!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Google Map Location"
+              ></iframe>
+            </div>
+          </div>
+        </section>
+
+        <div id="faq">
+          <FaqSimple
+            tag="Support"
+            title="Frequently Asked Questions"
+            description="Find quick answers to common questions about our platform, pricing, and support."
+            items={[
+              {
+                question: "What is your typical response time?",
+                answer: "We aim to respond to all inquiries within 24 hours during regular business days. For enterprise customers, we offer 24/7 priority support with a 1-hour SLA."
+              },
+              {
+                question: "Do you offer technical support for integrations?",
+                answer: "Yes! Our engineering team is available to help you set up custom integrations. You can reach out to support@flowsync.com or use the contact form above."
+              },
+              {
+                question: "Can I upgrade or downgrade my plan at any time?",
+                answer: "Absolutely. You can change your plan directly from your account dashboard. Prorated charges or credits will be applied automatically to your next billing cycle."
+              }
+            ]}
+          />
+        </div>
+
+        <ContactCta
+          tag="Ready to start?"
+          text="Join thousands of teams already using FlowSync."
+          primaryButton={{ text: "Get Started Free", href: "/plans" }}
+          secondaryButton={{ text: "Talk to Sales", href: "#form" }}
+        />
+      </main>
+
+      <FooterSimple
+        brand="FlowSync"
+        columns={[
+          { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/plans" }, { label: "Security", href: "/#security" }] },
+          { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Careers", href: "/about" }, { label: "Blog", href: "/#blog" }] },
+          { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
+        ]}
+        copyright="© 2024 FlowSync Productivity Inc. All rights reserved."
+        links={[]}
+      />
+    </div>
+  );
+};
+
+export default ContactPage;

src/routes.ts

@@ -8,4 +8,5 @@ export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/plans', label: 'Plans', pageFile: 'PlansPage' },
   { path: '/about', label: 'About', pageFile: 'AboutPage' },
+  { path: '/contact', label: 'Contact', pageFile: 'ContactPage' },
 ];