Skip to content

Commit ae4381d

Browse files
slugb0tslugb0t
authored
feat: ✨ Members section within home page (#9)
* feat: ✨ org members section * fix: 🐛 correct spacing between hero and first section
1 parent af6ccbf commit ae4381d

File tree

3 files changed

+153
-67
lines changed

3 files changed

+153
-67
lines changed

‎public/images/curve-line-card.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/images/rect-card.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/pages/index.tsx‎

Lines changed: 151 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ import { motion } from 'framer-motion';
55
import fs from 'fs';
66
import matter from 'gray-matter';
77
import Image from 'next/image';
8+
import Link from 'next/link';
9+
import { TbArrowNarrowRight } from 'react-icons/tb';
810

911
import StatsText from '@/components/content/StatsText';
1012
import Layout from '@/components/layout/Layout';
1113
import ButtonLink from '@/components/links/ButtonLink';
14+
import UnstyledLink from '@/components/links/UnstyledLink';
1215
import Seo from '@/components/Seo';
1316

1417
import { WidthFramerContainer } from '@/utils/framer';
@@ -100,6 +103,21 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
100103
},
101104
];
102105

106+
const MembersLogosList = [
107+
{
108+
image:
109+
'https://fairdataihub.org/_next/image?url=%2Fimages%2Fcollaborators%2Fcalmi-logo.png&w=256&q=75',
110+
imageHeight: 'h-16',
111+
href: 'https://calmi2.org/',
112+
caption: 'California Medical Innovations Institute',
113+
},
114+
{
115+
image: '/images/member-orgs/uw.png',
116+
imageHeight: 'h-14',
117+
href: 'https://www.washington.edu/',
118+
caption: 'University of Washington',
119+
},
120+
];
103121
return (
104122
<>
105123
<SkipNavLink>Skip to content</SkipNavLink>
@@ -110,7 +128,8 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
110128
<main>
111129
<SkipNavContent />
112130

113-
<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]">
131+
{/* Hero Section */}
132+
<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]">
114133
<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'>
115134
{/* Left Text Section */}
116135
<div className='col-span-12 pr-0 md:col-span-6 md:pr-16'>
@@ -161,7 +180,7 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
161180
</div>
162181
</section>
163182

164-
<section className='bg-gradient-to-t from-sky-100 to-white py-8'>
183+
<section className='bg-gradient-to-t from-sky-100 to-white pb-8 pt-16'>
165184
<div className='mx-auto max-w-screen-xl text-center'>
166185
<motion.h2
167186
variants={fadeInVariants}
@@ -329,71 +348,6 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
329348
</section>
330349

331350
<section className='bg-gradient-to-t from-white to-sky-100 py-12'>
332-
<motion.div
333-
variants={fadeInVariants}
334-
initial='hidden'
335-
whileInView='show'
336-
viewport={{ once: true }}
337-
custom={0}
338-
className="mx-auto max-w-screen-xl rounded-md border bg-[url('/images/polygon-card.svg')] shadow-lg"
339-
>
340-
<div className='mx-auto flex max-w-7xl flex-col items-center md:flex-row'>
341-
<div className='relative flex-shrink-0 md:w-1/2'>
342-
<motion.div
343-
variants={fadeInVariants}
344-
initial='hidden'
345-
whileInView='show'
346-
viewport={{ once: true }}
347-
custom={0}
348-
className='absolute inset-0 flex flex-col items-center justify-center'
349-
>
350-
<Image
351-
src='https://images.unsplash.com/photo-1615552440985-d652ebf4c199?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
352-
width={500}
353-
height={500}
354-
alt='Retinal Imaging'
355-
className='rounded-full shadow-md'
356-
/>
357-
</motion.div>
358-
</div>
359-
360-
<div className='my-10 flex flex-col md:w-1/2 md:pl-10'>
361-
<motion.div
362-
variants={fadeInVariants}
363-
initial='hidden'
364-
whileInView='show'
365-
viewport={{ once: true }}
366-
custom={1}
367-
className='pr-4'
368-
>
369-
<h2 className='pb-4 text-2xl font-semibold text-black'>
370-
Exploring Retinal Changes for Brain Health Insights
371-
</h2>
372-
373-
<p className='pb-6 text-base text-gray-800'>
374-
The EyeACT study goes beyond traditional approaches by
375-
exploring how subtle retinal changes can provide a dynamic
376-
view of brain health over time. These insights are shaping
377-
how we detect and understand neurodegenerative conditions.
378-
</p>
379-
380-
<h3 className='pt-6 text-xl font-semibold text-sky-500'>
381-
Bridging Retinal and Cognitive Health
382-
</h3>
383-
384-
<p className='pt-4 text-gray-800'>
385-
EyeACT uniquely correlates retinal imaging findings with
386-
cognitive decline, providing a clearer picture of
387-
Alzheimer’s progression and opening avenues for targeted
388-
intervention strategies.
389-
</p>
390-
</motion.div>
391-
</div>
392-
</div>
393-
</motion.div>
394-
</section>
395-
396-
<section className='bg-gradient-to-t from-sky-100 to-white py-12'>
397351
<motion.div
398352
variants={fadeInVariants}
399353
initial='hidden'
@@ -428,6 +382,136 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
428382
</div>
429383
</motion.div>
430384
</section>
385+
386+
{/* Members Section */}
387+
<section className='bg-gradient-to-t from-sky-100 to-white py-16'>
388+
<motion.div
389+
variants={fadeInVariants}
390+
initial='hidden'
391+
whileInView='show'
392+
viewport={{ once: true }}
393+
className='mx-auto max-w-screen-xl px-4 lg:px-6'
394+
>
395+
<motion.div
396+
variants={fadeInVariants}
397+
initial='hidden'
398+
whileInView='show'
399+
viewport={{ once: true }}
400+
className="mx-auto max-w-7xl rounded-xl border border-gray-200 bg-[url('/images/curve-line-card.svg')] p-10 shadow-lg"
401+
>
402+
<div className='text-center'>
403+
<h1 className='mb-3 text-3xl font-bold tracking-tight sm:text-4xl'>
404+
Eye ACT Members
405+
</h1>
406+
407+
<p className='mb-4 text-xl font-medium text-slate-600'>
408+
The following organizations are part of the Eye ACT project
409+
</p>
410+
411+
<div className='relative mb-8 flex justify-center'>
412+
<Link
413+
href='/team'
414+
passHref
415+
className='flex w-max items-center space-x-1 text-xl font-semibold text-sky-500 transition-all hover:text-sky-700'
416+
>
417+
<span>Meet our team</span>
418+
<TbArrowNarrowRight size={20} />
419+
</Link>
420+
</div>
421+
</div>
422+
423+
{/* Organization Logos */}
424+
<div className='flex flex-wrap justify-center gap-6'>
425+
{MembersLogosList.map((logo, index) => (
426+
<UnstyledLink href={logo.href} key={index}>
427+
<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'>
428+
<img
429+
src={logo.image}
430+
alt=''
431+
className={logo.imageHeight}
432+
/>
433+
<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'>
434+
{logo.caption}
435+
</span>
436+
</div>
437+
</UnstyledLink>
438+
))}
439+
</div>
440+
</motion.div>
441+
</motion.div>
442+
</section>
443+
444+
<section className='bg-gradient-to-t from-sky-100 via-white to-sky-100 py-12'>
445+
<motion.div
446+
variants={fadeInVariants}
447+
initial='hidden'
448+
whileInView='show'
449+
viewport={{ once: true }}
450+
custom={0}
451+
className='mx-auto max-w-screen-xl px-4 lg:px-6'
452+
>
453+
<motion.div
454+
variants={fadeInVariants}
455+
initial='hidden'
456+
whileInView='show'
457+
viewport={{ once: true }}
458+
className="mx-auto max-w-7xl rounded-xl border border-gray-200 bg-[url('/images/polygon-card.svg')] p-10 shadow-lg"
459+
>
460+
<div className='mx-auto flex max-w-7xl flex-col items-center md:flex-row'>
461+
<div className='relative flex-shrink-0 md:w-1/2'>
462+
<motion.div
463+
variants={fadeInVariants}
464+
initial='hidden'
465+
whileInView='show'
466+
viewport={{ once: true }}
467+
className='flex flex-col items-center justify-center'
468+
>
469+
<Image
470+
src='https://images.unsplash.com/photo-1615552440985-d652ebf4c199?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
471+
width={500}
472+
height={500}
473+
alt='Retinal Imaging'
474+
className='aspect-auto rounded-full shadow-md'
475+
/>
476+
</motion.div>
477+
</div>
478+
479+
<div className='my-10 flex flex-col md:w-1/2 md:pl-10'>
480+
<motion.div
481+
variants={fadeInVariants}
482+
initial='hidden'
483+
whileInView='show'
484+
viewport={{ once: true }}
485+
className='pr-4'
486+
>
487+
<h2 className='pb-4 text-2xl font-semibold text-black'>
488+
Exploring Retinal Changes for Brain Health Insights
489+
</h2>
490+
491+
<p className='pb-6 text-base text-gray-800'>
492+
The EyeACT study goes beyond traditional approaches by
493+
exploring how subtle retinal changes can provide a
494+
dynamic view of brain health over time. These insights
495+
are shaping how we detect and understand
496+
neurodegenerative conditions.
497+
</p>
498+
499+
<h3 className='pt-6 text-xl font-semibold text-sky-500'>
500+
Bridging Retinal and Cognitive Health
501+
</h3>
502+
503+
<p className='pt-4 text-gray-800'>
504+
EyeACT uniquely correlates retinal imaging findings with
505+
cognitive decline, providing a clearer picture of
506+
Alzheimer’s progression and opening avenues for targeted
507+
intervention strategies.
508+
</p>
509+
</motion.div>
510+
</div>
511+
</div>
512+
</motion.div>
513+
</motion.div>
514+
</section>
431515
</main>
432516
</Layout>
433517
</>

0 commit comments

Comments
 (0)