feat: add FounderCard component and update About page with founder information and new layout

next.config.mjs

@@ -31,6 +31,11 @@ const nextConfig = {
         hostname: "assets.republic.com",
         pathname: "/**",
       },
+      {
+        protocol: "https",
+        hostname: "media.licdn.com",
+        pathname: "/**",
+      },
     ],
   },
 };

src/app/(legal)/about/founderCard.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+interface FounderCardProps {
+  image: string;
+  name: string;
+  position: string;
+  background: string;
+}
+
+export default function FounderCard(props: FounderCardProps) {
+  return (
+    <div className="flex flex-col justify-center items-center p-3 border-3">
+      <Image src={props.image} alt="profile" width={160} height={160} className="rounded-full w-32" />
+      <h1 className="font-bold text-2xl mt-5">{props.name}</h1>
+      <p className="text-sm text-neutral-500">{props.position}</p>
+      <span className="max-w-xs break-words text-base mt-5 justify-self-center">{props.background}</span>
+    </div>
+  );
+}

src/app/(legal)/about/page.tsx

@@ -1,54 +1,29 @@
 "use client";
 import { Separator } from "@/components/ui/separator";
 import InfoCard from "./infoCard";
+import FounderCard from "./founderCard";
 
 export default function About() {
   // Static data for the cards
-  const cardData = [
-    {
-      imageSrc: "https://avatars.githubusercontent.com/u/86756025",
-      name: "Pattadon Loyprasert",
-      description:
-        "Driven by a passion for innovation, Pattadon leads B2D Ventures with the belief that" +
-        "every great idea deserves the resources and support to thrive. He’s dedicated to" +
-        "helping entrepreneurs turn visions into reality.",
-    },
-    {
-      imageSrc: "https://avatars.githubusercontent.com/u/22256420",
-      name: "Sirin Puenggun",
-      description:
-        "Sirin brings a wealth of experience in empowering entrepreneurs, aiming to" +
-        "create an ecosystem where bold ideas meet the right partners. He’s committed to" +
-        "making a lasting impact on the entrepreneurial world.",
-    },
-    {
-      imageSrc: "https://avatars.githubusercontent.com/u/108450436",
-      name: "Naytitorn Chaovirachot",
-      description:
-        "With a strong foundation in collaboration and trust, Naytitorn is focused" +
-        "on building lasting partnerships that help drive the success of both investors and founders." +
-        "He thrives on turning challenges into growth opportunities.",
-    },
-    {
-      imageSrc: "https://avatars.githubusercontent.com/u/114897362",
-      name: "Nantawat Sukrisunt",
-      description:
-        "Nantawat is a passionate advocate for innovation and teamwork." +
-        "He strives to foster a community where both investors and startups can achieve" +
-        "their full potential, creating a future where collaboration leads to success.",
-    },
-  ];
-
   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",
   };
+  const founderData = [
+    {
+      name: "Sirisilp Kongsilp",
+      position: "Tech, Business",
+      profileLogo:
+        "https://media.licdn.com/dms/image/v2/C5603AQE6NwFfhOWqrw/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1642637269980?e=1737590400&v=beta&t=zh3GpG_d5lSxxZyFn6_RMgVtjz7lacqlpDwZ84BRpAA",
+      background:
+        "Founder and CEO of Perception, a holographic computer startup focused on innovative technologies like VR/AR and human-computer interaction. ",
+    },
+  ];
 
   return (
-    <div>
+    <div className="container">
-      <div className="container  bg-neutral-100">
+      <div className=" bg-neutral-100 dark:bg-neutral-800 w-full pb-5">
-        <div className="">
         <div className="flex flex-col items-center justify-center">
           <h1 className="mt-3  text-lg md:text-5xl font-black">Growth opportunities for all sides </h1>
           <h1 className="mt-3 text-lg md:text-5xl font-black">of the investment market</h1>
@@ -61,7 +36,7 @@ export default function About() {
           <h1 className="text-gray-500 text-2xl">of private markets.</h1>
         </div>
         <div className="mt-10">
-            <div className="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] gap-3">
+          <div className="grid grid-cols-1 md:grid-cols-[0.5fr,auto,0.5fr] gap-3">
             <InfoCard
               imageSrc={imageData.img1}
               imageAlt="Image1"
@@ -75,7 +50,7 @@ export default function About() {
               link="/deals"
               buttonText="Explore opportunities"
             />
-              <Separator orientation="vertical" />
+            <Separator orientation="vertical" className="dark:bg-white" />
             <InfoCard
               imageSrc={imageData.img2}
               imageAlt="Image2"
@@ -89,7 +64,7 @@ export default function About() {
               buttonText="Learn more"
             />
           </div>
-            <Separator className="mt-5 mb-5" />
+          <Separator className="mt-5 mb-5 dark:bg-white" />
           <InfoCard
             imageSrc={imageData.img3}
             imageAlt="Image3"
@@ -97,7 +72,7 @@ export default function About() {
             content={[
               "Seek funding from a wider base of diverse",
               "investors while simultaneously growing a loyal",
-                "base and leveraging Republic’s private investment",
+              "base and leveraging Republic's private investment",
               "network.",
             ]}
             link="/project/apply"
@@ -105,45 +80,26 @@ export default function About() {
           />
         </div>
       </div>
-      </div>
+      <div className="flex flex-col items-center justify-center mt-24">
-      <div className="flex flex-col items-center justify-center mt-10">
+        <h1 className="font-black text-5xl ">Built by an experience team with deep </h1>
-        <h1 className="font-black text-5xl ">Built by a diverse team with deep </h1>
         <h1 className="font-black text-5xl ">expertise in private investing</h1>
-      </div>
+        <h1 className="text-gray-500 text-2xl mt-2">B2D Ventures was established by innovators with experience in</h1>
-
+        <h1 className="text-gray-500 text-2xl">top investment platforms and entrepreneurial ecosystems. Since then,</h1>
-      {/* <div className="border border-border rounded-md">
+        <h1 className="text-gray-500 text-2xl">we have built a team and a network of the top people from</h1>
-        <p className="p-5">
+        <h1 className="text-gray-500 text-2xl">the startup, venture capital, and investment worlds.</h1>
-          Welcome to B2D Ventures! We&apos;re a dynamic platform committed to bridging the gap between visionary
+        <div className="mt-10">
-          entrepreneurs and passionate investors. Our mission is to empower innovation by connecting groundbreaking
+          {founderData.map((profile) => {
-          ideas with the resources they need to thrive. Through B2D Ventures, we foster a community where investors and
+            return (
-          innovators come together to transform concepts into impactful, real-world solutions.
+              <FounderCard
-        </p>
+                image={profile.profileLogo}
-        <p className="p-5">
+                name={profile.name}
-          At B2D Ventures, we believe in the power of collaboration. Whether you&apos;re an investor looking to support
+                position={profile.position}
-          the next big idea or a founder aiming to bring your vision to life, our platform offers the tools and
+                background={profile.background}
-          connections to make it happen. Join us on a journey to reshape industries, drive positive change, and make a
+              />
-          lasting impact.
+            );
-        </p>
+          })}
-        <p className="p-5">Let&apos;s build the future, together.</p>
-      </div> */}
-
-      {/* <div className="mt-10 text-center">
-        <h2 className="font-bold text-lg md:text-3xl">Our Team</h2>
-        <Separator className="my-3" />
-      </div> */}
-
-      {/* Card Section */}
-      {/* <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        {cardData.map((card, index) => (
-          <div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden">
-            <Image src={card.imageSrc} width={460} height={460} alt={card.name} className="w-full h-48 object-cover" />
-            <div className="p-4">
-              <h3 className="pt-5 text-xl font-semibold text-gray-800 text-center">{card.name}</h3>
-              <p className="pt-5 text-gray-600 mt-2">{card.description}</p>
         </div>
       </div>
-        ))}
-      </div> */}
     </div>
   );
 }