From c9359ce41279972000daea875f8813ef86d82cf3 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Thu, 23 Apr 2026 11:40:54 +0300
Subject: [PATCH 1/2] Bob AI: Add contact page

---
 src/App.tsx               |  2 ++
 src/pages/ContactPage.tsx | 69 +++++++++++++++++++++++++++++++++++++++
 src/routes.ts             |  1 +
 3 files changed, 72 insertions(+)
 create mode 100644 src/pages/ContactPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4c8171c..fbc6d65 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
new file mode 100644
index 0000000..e89902f
--- /dev/null
+++ b/src/pages/ContactPage.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered"; // Corrected import path
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+const ContactPage = () => {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="Brand"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      <main className="flex-grow">
+        <ContactSplitForm
+          title="Get in touch"
+          description="We'd love to hear from you! Fill out the form below or reach out directly."
+          email="hello@example.com"
+          phone="+1 (555) 123-4567"
+          address="123 Main St, Anytown, USA 12345"
+          socialLinks={[
+            { name: "Twitter", href: "#" },
+            { name: "LinkedIn", href: "#" },
+          ]}
+        />
+
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 className="mb-8 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+              Find Us on the Map
+            </h2>
+            <div className="aspect-w-16 aspect-h-9 overflow-hidden rounded-lg shadow-xl">
+              <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="450"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Google Map Location"
+              ></iframe>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <FooterSimple
+        logo="Brand"
+        description="Building the future, one line of code at a time."
+        socialLinks={[
+          { name: "Twitter", href: "#" },
+          { name: "LinkedIn", href: "#" },
+          { name: "GitHub", href: "#" },
+        ]}
+        links={[
+          { name: "About", href: "/about" },
+          { name: "Services", href: "/services" },
+          { name: "Blog", href: "/blog" },
+          { name: "Contact", href: "/contact" },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default ContactPage;
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index c6ba84f..ee7f4f2 100644
--- a/src/routes.ts
+++ b/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' },
 ];
-- 
2.49.1


From c2bfa352bdc16cd937627b7a21af16326f2354ba Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Thu, 23 Apr 2026 11:42:47 +0300
Subject: [PATCH 2/2] Bob AI: Populate the newly-created page at
 src/pages/ContactPage.tsx

---
 src/pages/ContactPage.tsx | 109 +++++++++++++++++++++++++++-----------
 1 file changed, 77 insertions(+), 32 deletions(-)

diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
index e89902f..2e2c1b9 100644
--- a/src/pages/ContactPage.tsx
+++ b/src/pages/ContactPage.tsx
@@ -1,41 +1,62 @@
 import React from "react";
 import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered"; // Corrected import path
+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="Brand"
+        logo="FlowSync"
         navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Get Started", href: "/contact" }}
+        ctaButton={{ text: "Get Started", href: "/plans" }}
       />
 
       <main className="flex-grow">
-        <ContactSplitForm
-          title="Get in touch"
-          description="We'd love to hear from you! Fill out the form below or reach out directly."
-          email="hello@example.com"
-          phone="+1 (555) 123-4567"
-          address="123 Main St, Anytown, USA 12345"
-          socialLinks={[
-            { name: "Twitter", href: "#" },
-            { name: "LinkedIn", href: "#" },
-          ]}
+        <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"
         />
 
-        <section className="py-16 md:py-24">
-          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 className="mb-8 text-center text-3xl font-bold tracking-tight sm:text-4xl">
-              Find Us on the Map
-            </h2>
-            <div className="aspect-w-16 aspect-h-9 overflow-hidden rounded-lg shadow-xl">
+        <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="450"
+                height="100%"
                 style={{ border: 0 }}
                 allowFullScreen={true}
                 loading="lazy"
@@ -45,22 +66,46 @@ const ContactPage = () => {
             </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
-        logo="Brand"
-        description="Building the future, one line of code at a time."
-        socialLinks={[
-          { name: "Twitter", href: "#" },
-          { name: "LinkedIn", href: "#" },
-          { name: "GitHub", href: "#" },
-        ]}
-        links={[
-          { name: "About", href: "/about" },
-          { name: "Services", href: "/services" },
-          { name: "Blog", href: "/blog" },
-          { name: "Contact", href: "/contact" },
+        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>
   );
-- 
2.49.1