From f2fa76c736df3bdf052eb02caf747aedeec914f9 Mon Sep 17 00:00:00 2001
From: Jojo Ortiz <ortiz.jroman@gmail.com>
Date: Fri, 12 Jan 2024 12:00:09 -0800
Subject: [PATCH] update TeamMember styles and add grid

---
 app/company/about-us/page.tsx          | 19 +++++++------
 app/components/about-us/TeamMember.tsx | 39 +++++++++++++++-----------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/app/company/about-us/page.tsx b/app/company/about-us/page.tsx
index e8cf470d..db79f3b0 100644
--- a/app/company/about-us/page.tsx
+++ b/app/company/about-us/page.tsx
@@ -49,18 +49,19 @@ const AboutPage = () => {
         <div className="pb-10">
             <PageHero title="About us" />
             <Container styles="h-max" centerX center-y>
-                {sections.map((section) => (
-                    <div className="pt-40 max-w-[800px]">
-                        <Section title={section.title} paragraphs={section.paragraphs || [""]} center />
-                    </div>
-                ))}
-                <div className="py-20">
+                <div className="pt-40 max-w-[800px]">
+                    <Section title="Who we are" paragraphs={["cambioML is a team of former scientists from AWS AI building SaaS solutions enable Fortune 500 companies to build self-owned AI agents based on their massive, multi-modal and confidential data. We’re building what we wish we had when developing foundation models at Amazon."]} center />
+                </div>
+                <div className="pt-40 max-w-[800px] w-full">
                     <Heading title="Founding Team" center />
-                    <div className="pt-5 flex flex-row justify-center items-center w-full">
-                        <TeamMember name="Rachel Hu" title="CEO" image="/images/team/rachel.png" bio="Former AWS Scientist who" url="https://www.linkedin.com/in/rachelsonghu/"/>
-                        <TeamMember name="Jojo Ortiz" title="Founding Engineer" image="/images/team/jojo.png" bio="Former Tesla Engineer who" url="https://www.linkedin.com/in/joseromanortiz/"/>
+                    <div className="pt-5 grid gap-3 grid-cols-1 md:grid-cols-2 w-full">
+                        <TeamMember name="Rachel Hu" title="CEO" image="/images/team/rachel.png" url="https://www.linkedin.com/in/rachelsonghu/" />
+                        <TeamMember name="Jojo Ortiz" title="Founding Engineer" image="/images/team/jojo.png" url="https://www.linkedin.com/in/joseromanortiz/" />
                     </div>
                 </div>
+                <div className="py-40 max-w-[800px]">
+                    <Section title="What we offer" paragraphs={["cambioML is a team of former scientists from AWS AI building SaaS solutions enable Fortune 500 companies to build self-owned AI agents based on their massive, multi-modal and confidential data. We’re building what we wish we had when developing foundation models at Amazon."]} center />
+                </div>
                 <Heading title="Our Investors" center />
                 <div className="pt-5 flex gap-8 max-w-800 align-items justify-items h-[100px] w-max">
                     {
diff --git a/app/components/about-us/TeamMember.tsx b/app/components/about-us/TeamMember.tsx
index 8a9085ef..d66ef814 100644
--- a/app/components/about-us/TeamMember.tsx
+++ b/app/components/about-us/TeamMember.tsx
@@ -1,4 +1,5 @@
 import { imgPrefix } from "@/app/hooks/useImgPrefix";
+import Image from "next/image";
 
 interface TeamMemberProps {
     image: string;
@@ -12,24 +13,28 @@ const TeamMember: React.FC<TeamMemberProps> = ({
     image, name, title, bio, url
 }) => {
     return (
-        <div className="grid gap-10 grid-cols-[300px_1fr]">
-            <div className="w-full flex justify-end items-center">
-                <div className="w-[150px] h-[150px]">
-                    <a target="_blank" href={url} rel="noopener noreferrer">
-                        <img
-                            src={imgPrefix + image}
-                            alt={`${name}, ${title}`}
-                            className="cursor-pointer max-h-full max-w-full rounded-full"
-                        />
-                    </a>
+        <div className="col-span-1 h-[150px] w-full flex items-center justify-center">
+            <div className="h-full grid gap-10 grid-cols-[150px_200px]">
+                <div className="flex justify-center items-center">
+                    <div className="w-[125px] h-[125px] overflow-hidden rounded-full">
+                        <a target="_blank" href={url} rel="noopener noreferrer">
+                            <Image
+                                src={imgPrefix + image}
+                                alt={`${name}, ${title}`}
+                                className="cursor-pointer h-full w-full rounded-full hover:scale-110"
+                                width="0"
+                                height="0"
+                            />
+                        </a>
+                    </div>
+                </div>
+                <div className="flex flex-col justify-center">
+                    <h2 className="text-2xl font-semibold">{name}</h2>
+                    <h2 className="text-lg text-neutral-500">{title}</h2>
+                    {bio &&
+                        <p>{bio}</p>
+                    }
                 </div>
-            </div>
-            <div>
-                <h2 className="text-2xl font-semibold">{name}</h2>
-                <h2 className="text-lg font-semibold">{title}</h2>
-                {bio &&
-                    <p>{bio}</p>
-                }
             </div>
         </div>
     )