From 453007217a39d1ac053ca1336cdfcb23043c8933 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 21 Jun 2026 14:59:41 +0000
Subject: [PATCH] Bob AI: Redesign contact header into a 3-column grid of cards

---
 src/pages/ContactPage.tsx                     | 62 ++++-------------
 .../ContactPage/sections/ContactMain.tsx      | 68 +++++++++++++++++++
 src/pages/ContactPage/sections/Metrics.tsx    | 40 +++++++++++
 3 files changed, 120 insertions(+), 50 deletions(-)
 create mode 100644 src/pages/ContactPage/sections/ContactMain.tsx
 create mode 100644 src/pages/ContactPage/sections/Metrics.tsx

diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
index d0fba0c..51ab30c 100644
--- a/src/pages/ContactPage.tsx
+++ b/src/pages/ContactPage.tsx
@@ -1,56 +1,18 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function ContactPage() {
+import React from 'react';
+import ContactMainSection from './ContactPage/sections/ContactMain';
+import MetricsSection from './ContactPage/sections/Metrics';
+
+export default function ContactPage(): React.JSX.Element {
   return (
-    <>
-  <div id="contact-main" data-section="contact-main">
-    <SectionErrorBoundary name="contact-main">
-          <ContactCta
-      tag="Let's Talk"
-      text="Call us: 07508 514 916 | hello@pulsepointmedia-ni.co.uk | Based in Belfast, serving Northern Ireland."
-      primaryButton={{
-        text: "Get Started",
-        href: "/contact",
-      }}
-      secondaryButton={{
-        text: "Email Us",
-        href: "mailto:hello@pulsepointmedia-ni.co.uk",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <ContactMainSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsFeatureCards
-      tag="Expectations"
-      title="Your Growth Journey"
-      description="Clear milestones for our partnership."
-      metrics={[
-        {
-          value: "30 Days",
-          title: "Initial Impact",
-          features: [
-            "Audit completion",
-            "Optimization start",
-            "Performance baseline",
-          ],
-        },
-        {
-          value: "90 Days",
-          title: "Steady Growth",
-          features: [
-            "Ranking movement",
-            "Lead volume increase",
-            "Review growth",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
     </>
   );
 }
diff --git a/src/pages/ContactPage/sections/ContactMain.tsx b/src/pages/ContactPage/sections/ContactMain.tsx
new file mode 100644
index 0000000..eb59948
--- /dev/null
+++ b/src/pages/ContactPage/sections/ContactMain.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Button from "@/components/ui/Button";
+
+const primaryButton = {
+  text: "Get Started",
+  href: "/contact"
+};
+const secondaryButton = {
+  text: "Email Us",
+  href: "mailto:hello@pulsepointmedia-ni.co.uk"
+};
+
+const ContactMainInline = () => {
+  return (
+    <section aria-label="Contact section" className="py-20">
+      <div className="w-content-width mx-auto">
+        <ScrollReveal variant="slide-up">
+          <div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card">
+            <div className="flex flex-col items-center gap-2">
+              <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+                <p>{"Let's Talk"}</p>
+              </div>
+
+              <TextAnimation
+                text={"Get in Touch"}
+                variant="slide-up"
+                gradientText={true}
+                tag="h2"
+                className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance"
+              />
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8 w-full max-w-5xl">
+                <div className="flex flex-col items-center gap-3 p-8 bg-background rounded-lg">
+                  <span className="text-accent font-semibold">Call Us</span>
+                  <p className="text-lg text-foreground text-center">07508 514 916</p>
+                </div>
+                <div className="flex flex-col items-center gap-3 p-8 bg-background rounded-lg">
+                  <span className="text-accent font-semibold">Email Us</span>
+                  <p className="text-lg text-foreground text-center break-all md:break-normal">hello@pulsepointmedia-ni.co.uk</p>
+                </div>
+                <div className="flex flex-col items-center gap-3 p-8 bg-background rounded-lg">
+                  <span className="text-accent font-semibold">Location</span>
+                  <p className="text-lg text-foreground text-center text-balance">Belfast, serving Northern Ireland</p>
+                </div>
+              </div>
+
+              <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+                <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
+                <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
+              </div>
+            </div>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function ContactMainSection() {
+  return (
+    <div data-webild-section="contact-main" id="contact-main">
+      <ContactMainInline />
+    </div>
+  );
+}
diff --git a/src/pages/ContactPage/sections/Metrics.tsx b/src/pages/ContactPage/sections/Metrics.tsx
new file mode 100644
index 0000000..128663f
--- /dev/null
+++ b/src/pages/ContactPage/sections/Metrics.tsx
@@ -0,0 +1,40 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsFeatureCards
+          tag="Expectations"
+          title="Your Growth Journey"
+          description="Clear milestones for our partnership."
+          metrics={[
+            {
+              value: "30 Days",
+              title: "Initial Impact",
+              features: [
+                "Audit completion",
+                "Optimization start",
+                "Performance baseline",
+              ],
+            },
+            {
+              value: "90 Days",
+              title: "Steady Growth",
+              features: [
+                "Ranking movement",
+                "Lead volume increase",
+                "Review growth",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
-- 
2.49.1