From c621257533d46f3a720dc1c5b27bb1640deaaf48 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Tue, 19 Nov 2024 21:31:55 +0700
Subject: [PATCH] feat: update About page layout with new InfoCard and improved
 grid structure

---
 src/app/about/infoCard.tsx |  2 +-
 src/app/about/page.tsx     | 36 +++++++++++++++++++++++++++++-------
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/app/about/infoCard.tsx b/src/app/about/infoCard.tsx
index 50acb32..32042ba 100644
--- a/src/app/about/infoCard.tsx
+++ b/src/app/about/infoCard.tsx
@@ -22,7 +22,7 @@ const InfoCard = ({ imageSrc, imageAlt, heading, content, link, buttonText }: Ca
         </p>
       ))}
       <Link href={link}>
-        <Button className="p-5 font-semibold text-base mt-5">{buttonText}</Button>
+        <Button className="p-6 font-semibold text-base mt-5">{buttonText}</Button>
       </Link>
     </div>
   );
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index a442bb0..f88b165 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,8 +1,5 @@
 "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() {
@@ -45,6 +42,7 @@ 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",
+    img3: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/entrepreneurs-a0ff450c2f3ba0cea82e2c55cd9265ad5612455c79ec831adaa2c94d09a0e617.png",
   };
 
   return (
@@ -60,7 +58,7 @@ export default function About() {
         </h1>
       </div>
       <div className="mt-10">
-        <div className="grid grid-cols-2">
+        <div className="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] gap-3">
           <InfoCard
             imageSrc={imageData.img1}
             imageAlt="Image1"
@@ -74,10 +72,34 @@ export default function About() {
             link="/deals"
             buttonText="Explore opportunities"
           />
-          <Separator orientation="vertical"></Separator>
-          <div></div>
+          <Separator orientation="vertical" />
+          <InfoCard
+            imageSrc={imageData.img2}
+            imageAlt="Image2"
+            heading="Accredited investors"
+            content={[
+              "The benefits of the Republic platform, optimized for",
+              "accredited investors. Access a curated investor",
+              "portal for unique private investment opportunities. ",
+            ]}
+            link="/dataroom/overview"
+            buttonText="Learn more"
+          />
         </div>
-        <div></div>
+        <Separator className="mt-5 mb-5" />
+        <InfoCard
+          imageSrc={imageData.img3}
+          imageAlt="Image3"
+          heading="Entrepreneurs"
+          content={[
+            "Seek funding from a wider base of diverse",
+            "investors while simultaneously growing a loyal",
+            "base and leveraging Republic’s private investment",
+            "network.",
+          ]}
+          link="/project/apply"
+          buttonText="Raise money"
+        />
       </div>
 
       {/* <div className="border border-border rounded-md">