feat: enhance About page with new content, layout improvements, and add InfoCard component

next.config.mjs

@@ -26,8 +26,12 @@ const nextConfig = {
         hostname: "avatars.githubusercontent.com",
         pathname: "/**",
       },
+      {
+        protocol: "https",
+        hostname: "assets.republic.com",
+        pathname: "/**",
+      },
     ],
   },
 };
-
 export default nextConfig;

src/app/about/infoCard.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+
+type CardProps = {
+  imageSrc: string;
+  imageAlt: string;
+  heading: string;
+  content: string[];
+  link: string;
+  buttonText: string;
+};
+
+const InfoCard = ({ imageSrc, imageAlt, heading, content, link, buttonText }: CardProps) => {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <Image alt={imageAlt} width={460} height={460} className="w-36" src={imageSrc} />
+      <h1 className="text-2xl font-bold mt-3">{heading}</h1>
+      {content.map((text, index) => (
+        <p key={index} className={index === 0 ? "mt-3" : ""}>
+          {text}
+        </p>
+      ))}
+      <Link href={link}>
+        <Button className="p-5 font-semibold text-base mt-5">{buttonText}</Button>
+      </Link>
+    </div>
+  );
+};
+
+export default InfoCard;

src/app/about/page.tsx

@@ -1,5 +1,9 @@
+"use client";
 import Image from "next/image";
 import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import InfoCard from "./infoCard";
 
 export default function About() {
   // Static data for the cards
@@ -38,14 +42,42 @@ export default function About() {
     },
   ];
 
+  const imageData = {
+    img1: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/individual_investors-0e85dfd02359a24ac4b232be008c7168fc57d3437a2f526f5d5889b874b20221.png",
+    img2: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/accredited_investors-42d6aa046861adb7f0648f26ca3f798b07f3b13bf7024f7dc17c17acb78fdf2c.png",
+  };
+
   return (
     <div className="container max-w-screen-xl p-10">
       <div className="flex flex-col items-center justify-center">
-        <h1 className="mt-3 font-bold text-lg md:text-5xl font-black">Invest with the best</h1>
+        <h1 className="mt-3 font-bold text-lg md:text-5xl font-black">Growth opportunities for</h1>
+        <h1 className="mt-3 font-bold text-lg md:text-5xl font-black">all sides of the investment market</h1>
         <h1 className="text-gray-500 text-2xl mt-1">
-          B2DVentures Curates private investing opportunities with high-growth potential
+          B2DVentures is where both accredited and non-accredited investors meet entrepreneurs and
         </h1>
-        <h1 className="text-gray-500 text-2xl">Across startups, gaming, real estate.</h1>
+        <h1 className="text-gray-500 text-2xl">
+          access high-growth potential deals across a range of private markets.
+        </h1>
+      </div>
+      <div className="mt-10">
+        <div className="grid grid-cols-2">
+          <InfoCard
+            imageSrc={imageData.img1}
+            imageAlt="Image1"
+            heading="Individual investors"
+            content={[
+              "B2DVentures's success has been built off our hundreds",
+              "of sourced private deals, all available for",
+              "investment from you with as little as $10 or as ",
+              "much as $124,000.",
+            ]}
+            link="/deals"
+            buttonText="Explore opportunities"
+          />
+          <Separator orientation="vertical"></Separator>
+          <div></div>
+        </div>
+        <div></div>
       </div>
 
       {/* <div className="border border-border rounded-md">

src/components/siteFooter.tsx

@@ -16,15 +16,12 @@ export function SiteFooter() {
               Home
             </Link>
             <Link href="/about" className="hover:underline">
-              About Us
+              About
             </Link>
             <Link href="/services" className="hover:underline">
               Services
             </Link>
-            <Link
-              href="mailto:b2d.ventures.contact@gmail.com"
-              className="hover:underline"
-            >
+            <Link href="mailto:b2d.ventures.contact@gmail.com" className="hover:underline">
               Contact
             </Link>
           </div>