From b28a898804cda0c24a642d216c5d8ccba662d53e Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Wed, 26 Feb 2025 12:58:03 -0800
Subject: [PATCH 1/2] feat: :sparkles: org members section

---
 public/images/curve-line-card.svg |   1 +
 public/images/rect-card.svg       |   1 +
 src/pages/index.tsx               | 214 +++++++++++++++++++++---------
 3 files changed, 151 insertions(+), 65 deletions(-)
 create mode 100644 public/images/curve-line-card.svg
 create mode 100644 public/images/rect-card.svg

diff --git a/public/images/curve-line-card.svg b/public/images/curve-line-card.svg
new file mode 100644
index 0000000..b07a452
--- /dev/null
+++ b/public/images/curve-line-card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="560" preserveAspectRatio="none" viewBox="0 0 1440 560"><g mask="url(&quot;#SvgjsMask1003&quot;)" fill="none"><rect width="1440" height="560" x="0" y="0" fill="rgba(239, 247, 253, 1)"></rect><path d="M724.26 671.28C896.14 629.42 962.42 168.34 1219.41 165.78 1476.4 163.22 1578.22 389.88 1714.56 395.38" stroke="rgba(113, 171, 232, 0.58)" stroke-width="2"></path><path d="M571.48 582.35C699.66 509.48 632.94 77.29 868.78 73 1104.62 68.71 1306.45 271.88 1463.39 274.6" stroke="rgba(113, 171, 232, 0.58)" stroke-width="2"></path><path d="M816.71 647.78C945.24 617.12 995.2 274.33 1188.64 272.24 1382.08 270.15 1459.17 431.15 1560.57 434.64" stroke="rgba(113, 171, 232, 0.58)" stroke-width="2"></path><path d="M204.29 615.16C330.3 612.74 440.81 447.82 679.81 447.69 918.82 447.56 917.57 517.69 1155.34 517.69 1393.1 517.69 1510.7 447.88 1630.86 447.69" stroke="rgba(113, 171, 232, 0.58)" stroke-width="2"></path><path d="M667.32 667.23C794.7 655.36 853.05 403.05 1096.49 388.56 1339.93 374.07 1408.91 207.63 1525.66 203.76" stroke="rgba(113, 171, 232, 0.58)" stroke-width="2"></path></g><defs><mask id="SvgjsMask1003"><rect width="1440" height="560" fill="#ffffff"></rect></mask></defs></svg>
\ No newline at end of file
diff --git a/public/images/rect-card.svg b/public/images/rect-card.svg
new file mode 100644
index 0000000..31ea78c
--- /dev/null
+++ b/public/images/rect-card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="250" preserveAspectRatio="none" viewBox="0 0 1440 250"><g mask="url(&quot;#SvgjsMask1021&quot;)" fill="none"><rect width="1440" height="250" x="0" y="0" fill="rgba(239, 247, 253, 1)"></rect><path d="M7 250L257 0L389 0L139 250z" fill="url(&quot;#SvgjsLinearGradient1022&quot;)"></path><path d="M275.6 250L525.6 0L878.1 0L628.1 250z" fill="url(&quot;#SvgjsLinearGradient1022&quot;)"></path><path d="M514.2 250L764.2 0L828.7 0L578.7 250z" fill="url(&quot;#SvgjsLinearGradient1022&quot;)"></path><path d="M745.8000000000001 250L995.8000000000001 0L1090.3000000000002 0L840.3000000000001 250z" fill="url(&quot;#SvgjsLinearGradient1022&quot;)"></path><path d="M1419 250L1169 0L966.5 0L1216.5 250z" fill="url(&quot;#SvgjsLinearGradient1023&quot;)"></path><path d="M1178.4 250L928.4000000000001 0L760.4000000000001 0L1010.4000000000001 250z" fill="url(&quot;#SvgjsLinearGradient1023&quot;)"></path><path d="M951.8 250L701.8 0L601.3 0L851.3 250z" fill="url(&quot;#SvgjsLinearGradient1023&quot;)"></path><path d="M707.1999999999999 250L457.19999999999993 0L389.69999999999993 0L639.6999999999999 250z" fill="url(&quot;#SvgjsLinearGradient1023&quot;)"></path><path d="M1277.9984903436716 250L1440 87.99849034367153L1440 250z" fill="url(&quot;#SvgjsLinearGradient1022&quot;)"></path><path d="M0 250L162.00150965632847 250L 0 87.99849034367153z" fill="url(&quot;#SvgjsLinearGradient1023&quot;)"></path></g><defs><mask id="SvgjsMask1021"><rect width="1440" height="250" fill="#ffffff"></rect></mask><linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="SvgjsLinearGradient1022"><stop stop-color="rgba(200, 222, 237, 0.86)" offset="0"></stop><stop stop-opacity="0" stop-color="rgba(200, 222, 237, 0.86)" offset="0.66"></stop></linearGradient><linearGradient x1="100%" y1="100%" x2="0%" y2="0%" id="SvgjsLinearGradient1023"><stop stop-color="rgba(200, 222, 237, 0.86)" offset="0"></stop><stop stop-opacity="0" stop-color="rgba(200, 222, 237, 0.86)" offset="0.66"></stop></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3eb4dfb..134d2fe 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,10 +5,13 @@ import { motion } from 'framer-motion';
 import fs from 'fs';
 import matter from 'gray-matter';
 import Image from 'next/image';
+import Link from 'next/link';
+import { TbArrowNarrowRight } from 'react-icons/tb';
 
 import StatsText from '@/components/content/StatsText';
 import Layout from '@/components/layout/Layout';
 import ButtonLink from '@/components/links/ButtonLink';
+import UnstyledLink from '@/components/links/UnstyledLink';
 import Seo from '@/components/Seo';
 
 import { WidthFramerContainer } from '@/utils/framer';
@@ -100,6 +103,21 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
     },
   ];
 
+  const MembersLogosList = [
+    {
+      image:
+        'https://fairdataihub.org/_next/image?url=%2Fimages%2Fcollaborators%2Fcalmi-logo.png&w=256&q=75',
+      imageHeight: 'h-16',
+      href: 'https://calmi2.org/',
+      caption: 'California Medical Innovations Institute',
+    },
+    {
+      image: '/images/member-orgs/uw.png',
+      imageHeight: 'h-14',
+      href: 'https://www.washington.edu/',
+      caption: 'University of Washington',
+    },
+  ];
   return (
     <>
       <SkipNavLink>Skip to content</SkipNavLink>
@@ -110,6 +128,7 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
         <main>
           <SkipNavContent />
 
+          {/* Hero Section */}
           <section className="relative mb-12 flex h-[60vh] min-h-[600px] w-full items-center justify-center text-white before:absolute before:left-0 before:top-0 before:h-full before:w-full before:bg-home-hero-image before:bg-cover before:bg-center before:bg-no-repeat before:content-[''] after:absolute after:bottom-0 after:left-0 after:h-[150px] after:w-full after:bg-gradient-to-t after:from-black after:to-transparent md:h-[100vh]">
             <div className='relative grid w-full grid-cols-12 items-center gap-8 px-6 py-16 lg:ml-16 lg:py-16 xl:gap-0'>
               {/* Left Text Section */}
@@ -329,71 +348,6 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
           </section>
 
           <section className='bg-gradient-to-t from-white to-sky-100 py-12'>
-            <motion.div
-              variants={fadeInVariants}
-              initial='hidden'
-              whileInView='show'
-              viewport={{ once: true }}
-              custom={0}
-              className="mx-auto max-w-screen-xl rounded-md border bg-[url('/images/polygon-card.svg')] shadow-lg"
-            >
-              <div className='mx-auto flex max-w-7xl flex-col items-center md:flex-row'>
-                <div className='relative flex-shrink-0 md:w-1/2'>
-                  <motion.div
-                    variants={fadeInVariants}
-                    initial='hidden'
-                    whileInView='show'
-                    viewport={{ once: true }}
-                    custom={0}
-                    className='absolute inset-0 flex flex-col items-center justify-center'
-                  >
-                    <Image
-                      src='https://images.unsplash.com/photo-1615552440985-d652ebf4c199?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
-                      width={500}
-                      height={500}
-                      alt='Retinal Imaging'
-                      className='rounded-full shadow-md'
-                    />
-                  </motion.div>
-                </div>
-
-                <div className='my-10 flex flex-col md:w-1/2 md:pl-10'>
-                  <motion.div
-                    variants={fadeInVariants}
-                    initial='hidden'
-                    whileInView='show'
-                    viewport={{ once: true }}
-                    custom={1}
-                    className='pr-4'
-                  >
-                    <h2 className='pb-4 text-2xl font-semibold text-black'>
-                      Exploring Retinal Changes for Brain Health Insights
-                    </h2>
-
-                    <p className='pb-6 text-base text-gray-800'>
-                      The EyeACT study goes beyond traditional approaches by
-                      exploring how subtle retinal changes can provide a dynamic
-                      view of brain health over time. These insights are shaping
-                      how we detect and understand neurodegenerative conditions.
-                    </p>
-
-                    <h3 className='pt-6 text-xl font-semibold text-sky-500'>
-                      Bridging Retinal and Cognitive Health
-                    </h3>
-
-                    <p className='pt-4 text-gray-800'>
-                      EyeACT uniquely correlates retinal imaging findings with
-                      cognitive decline, providing a clearer picture of
-                      Alzheimer’s progression and opening avenues for targeted
-                      intervention strategies.
-                    </p>
-                  </motion.div>
-                </div>
-              </div>
-            </motion.div>
-          </section>
-
-          <section className='bg-gradient-to-t from-sky-100 to-white py-12'>
             <motion.div
               variants={fadeInVariants}
               initial='hidden'
@@ -428,6 +382,136 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
               </div>
             </motion.div>
           </section>
+
+          {/* Members Section */}
+          <section className='bg-gradient-to-t from-sky-100 to-white py-16'>
+            <motion.div
+              variants={fadeInVariants}
+              initial='hidden'
+              whileInView='show'
+              viewport={{ once: true }}
+              className='mx-auto max-w-screen-xl px-4 lg:px-6'
+            >
+              <motion.div
+                variants={fadeInVariants}
+                initial='hidden'
+                whileInView='show'
+                viewport={{ once: true }}
+                className="mx-auto max-w-7xl rounded-xl border border-gray-200 bg-[url('/images/curve-line-card.svg')] p-10 shadow-lg"
+              >
+                <div className='text-center'>
+                  <h1 className='mb-3 text-3xl font-bold tracking-tight sm:text-4xl'>
+                    Eye ACT Members
+                  </h1>
+
+                  <p className='mb-4 text-xl font-medium text-slate-600'>
+                    The following organizations are part of the Eye ACT project
+                  </p>
+
+                  <div className='relative mb-8 flex justify-center'>
+                    <Link
+                      href='/team'
+                      passHref
+                      className='flex w-max items-center space-x-1 text-xl font-semibold text-sky-500 transition-all hover:text-sky-700'
+                    >
+                      <span>Meet our team</span>
+                      <TbArrowNarrowRight size={20} />
+                    </Link>
+                  </div>
+                </div>
+
+                {/* Organization Logos */}
+                <div className='flex flex-wrap justify-center gap-6'>
+                  {MembersLogosList.map((logo, index) => (
+                    <UnstyledLink href={logo.href} key={index}>
+                      <div className='group relative flex h-[140px] w-[320px] items-center justify-center rounded-lg bg-slate-50 p-4 shadow-md transition-all hover:border hover:bg-slate-100'>
+                        <img
+                          src={logo.image}
+                          alt=''
+                          className={logo.imageHeight}
+                        />
+                        <span className='pointer-events-none absolute bottom-[-5px] text-sm font-medium text-slate-600 opacity-0 transition-all group-hover:bottom-1 group-hover:opacity-100 lg:text-xs'>
+                          {logo.caption}
+                        </span>
+                      </div>
+                    </UnstyledLink>
+                  ))}
+                </div>
+              </motion.div>
+            </motion.div>
+          </section>
+
+          <section className='bg-gradient-to-t from-sky-100 via-white to-sky-100 py-12'>
+            <motion.div
+              variants={fadeInVariants}
+              initial='hidden'
+              whileInView='show'
+              viewport={{ once: true }}
+              custom={0}
+              className='mx-auto max-w-screen-xl px-4 lg:px-6'
+            >
+              <motion.div
+                variants={fadeInVariants}
+                initial='hidden'
+                whileInView='show'
+                viewport={{ once: true }}
+                className="mx-auto max-w-7xl rounded-xl border border-gray-200 bg-[url('/images/polygon-card.svg')] p-10 shadow-lg"
+              >
+                <div className='mx-auto flex max-w-7xl flex-col items-center md:flex-row'>
+                  <div className='relative flex-shrink-0 md:w-1/2'>
+                    <motion.div
+                      variants={fadeInVariants}
+                      initial='hidden'
+                      whileInView='show'
+                      viewport={{ once: true }}
+                      className='flex flex-col items-center justify-center'
+                    >
+                      <Image
+                        src='https://images.unsplash.com/photo-1615552440985-d652ebf4c199?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+                        width={500}
+                        height={500}
+                        alt='Retinal Imaging'
+                        className='aspect-auto rounded-full shadow-md'
+                      />
+                    </motion.div>
+                  </div>
+
+                  <div className='my-10 flex flex-col md:w-1/2 md:pl-10'>
+                    <motion.div
+                      variants={fadeInVariants}
+                      initial='hidden'
+                      whileInView='show'
+                      viewport={{ once: true }}
+                      className='pr-4'
+                    >
+                      <h2 className='pb-4 text-2xl font-semibold text-black'>
+                        Exploring Retinal Changes for Brain Health Insights
+                      </h2>
+
+                      <p className='pb-6 text-base text-gray-800'>
+                        The EyeACT study goes beyond traditional approaches by
+                        exploring how subtle retinal changes can provide a
+                        dynamic view of brain health over time. These insights
+                        are shaping how we detect and understand
+                        neurodegenerative conditions.
+                      </p>
+
+                      <h3 className='pt-6 text-xl font-semibold text-sky-500'>
+                        Bridging Retinal and Cognitive Health
+                      </h3>
+
+                      <p className='pt-4 text-gray-800'>
+                        EyeACT uniquely correlates retinal imaging findings with
+                        cognitive decline, providing a clearer picture of
+                        Alzheimer’s progression and opening avenues for targeted
+                        intervention strategies.
+                      </p>
+                    </motion.div>
+                  </div>
+                </div>
+              </motion.div>
+            </motion.div>
+          </section>
         </main>
       </Layout>
     </>

From 7817cc67d315e03cb047330e3a5a5b658e2b022c Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Wed, 26 Feb 2025 13:02:40 -0800
Subject: [PATCH 2/2] fix: :bug: correct spacing between hero and first section

---
 src/pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 134d2fe..3a4f698 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -129,7 +129,7 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
           <SkipNavContent />
 
           {/* Hero Section */}
-          <section className="relative mb-12 flex h-[60vh] min-h-[600px] w-full items-center justify-center text-white before:absolute before:left-0 before:top-0 before:h-full before:w-full before:bg-home-hero-image before:bg-cover before:bg-center before:bg-no-repeat before:content-[''] after:absolute after:bottom-0 after:left-0 after:h-[150px] after:w-full after:bg-gradient-to-t after:from-black after:to-transparent md:h-[100vh]">
+          <section className="relative flex h-[60vh] min-h-[600px] w-full items-center justify-center text-white before:absolute before:left-0 before:top-0 before:h-full before:w-full before:bg-home-hero-image before:bg-cover before:bg-center before:bg-no-repeat before:content-[''] after:absolute after:bottom-0 after:left-0 after:h-[150px] after:w-full after:bg-gradient-to-t after:from-black after:to-transparent md:h-[100vh]">
             <div className='relative grid w-full grid-cols-12 items-center gap-8 px-6 py-16 lg:ml-16 lg:py-16 xl:gap-0'>
               {/* Left Text Section */}
               <div className='col-span-12 pr-0 md:col-span-6 md:pr-16'>
@@ -180,7 +180,7 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
             </div>
           </section>
 
-          <section className='bg-gradient-to-t from-sky-100 to-white py-8'>
+          <section className='bg-gradient-to-t from-sky-100 to-white pb-8 pt-16'>
             <div className='mx-auto max-w-screen-xl text-center'>
               <motion.h2
                 variants={fadeInVariants}