content: add image and text to contact page

frontend/app/contact/page.tsx

@@ -1,34 +1,42 @@
 import { Hero } from "@/components/shared/Hero";
 import { SocialProofSection } from "@/components/templates/SocialProofSection";
-import { TwoColumn } from "@/components/shared/TwoColumn";
-import { Cta } from "@/components/shared/Cta";
 import { Footer } from "@/components/shared/Footer";
 import { Header } from "@/components/shared/Header";
 import { Main } from "@/components/shared/Main";
-import { services } from "@/content/services";
-import type { Metadata } from "next";
-import Image from "next/image";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { contact } from "@/content/contact";
+import { TwoColumn } from "@/components/shared/TwoColumn";
+import Image from "next/image";
 
-export default function Services() {
+export default function Contact() {
   return (
     <Main>
       <Header />
       <Hero content={contact.hero} />
-
       <h3 className="text-3xl lg:text-4xl text-center font-bold !leading-tigh">
         Contact Us
       </h3>
-
-      <div className="w-full py-8">
-        <div className="max-w-2xl bg-[#FCFCFF] bg-[#1F344A] border border-[#E6E6FF] dark:border-[#546C87] p-8 mx-auto rounded-lg flex flex-col gap-4 items-center">
-          <Input placeholder="Your name" />
-          <Input placeholder="Your email" />
-          <Textarea placeholder="Your message" />
-          <Button>Send your message</Button>
+      <p className="text-center w-1/2 mt-8">{contact.intro}</p>
+      <div className="container flex flex-col md:flex-row flex-col-reverse p-16 w-full align-center justify-center mx-auto gap-8">
+        <div className="flex flex-col my-auto mx-auto md:mx-0 gap-4">
+          <Image
+            src={contact.image}
+            width={200}
+            height={400}
+            alt=""
+            className="rounded-xl"
+          />
+          <p className="text-center italic">{contact.imageDescription}</p>
+        </div>
+        <div className="w-full md:w-1/2 mx-auto md:mx-0">
+          <div className="max-w-2xl bg-[#FCFCFF] bg-[#1F344A] border border-[#E6E6FF] dark:border-[#546C87] p-8 mx-auto rounded-lg flex flex-col gap-4 items-center">
+            <Input placeholder="Your name" />
+            <Input placeholder="Your email" />
+            <Textarea placeholder="Your message" />
+            <Button>Send your message</Button>
+          </div>
         </div>
       </div>
       <SocialProofSection />

frontend/content/contact.ts

@@ -8,4 +8,8 @@ export const contact = {
       ],
     },
   },
+  intro:
+    "Looking to work with Rocket Connect? Learn more about how we can collaborate or speak with an expert. Get in contact with us today and discover how we can help you leverage open-source solutions to connect, innovate, and succeed. Whether you’re interested in our enterprise solutions or community building initiatives, we’re here to answer your questions and explore potential partnerships.",
+  image: "/images/team.jpg",
+  imageDescription: "Connect with our team.",
 };