feat: ✨ Home page with Eye Act content

.eslintrc

@@ -9,7 +9,12 @@
   ],
   "rules": {
     "no-unused-vars": "off",
-    "no-console": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": ["warn", "error", "info"],
+      },
+    ],
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/no-unescaped-entities": "off",
 

package.json

@@ -32,17 +32,18 @@
     "@sendgrid/mail": "^7.7.0",
     "add-to-calendar-button-react": "^2.6.8",
     "clsx": "^1.2.1",
+    "countup.js": "^2.8.0",
     "d3": "^7.9.0",
     "dayjs": "^1.11.9",
     "formik": "^2.2.9",
     "framer-motion": "^8.0.2",
     "gray-matter": "^4.0.3",
     "html-react-parser": "^3.0.4",
     "motion": "^11.15.0",
-    "next": "^13.0.2",
+    "next": "^14.2.23",
     "plaiceholder": "^2.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18",
+    "react-dom": "18",
     "react-icons": "^4.6.0",
     "react-lottie-player": "^2.1.0",
     "react-toastify": "^9.1.1",
@@ -81,7 +82,7 @@
     "@typescript-eslint/parser": "^5.42.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.26.0",
-    "eslint-config-next": "^13.0.2",
+    "eslint-config-next": "^14.2.23",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-simple-import-sort": "^7.0.0",

public/data/team.json

@@ -30,7 +30,6 @@
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
       "twitter": "https://twitter.com/fairdataihub",
-      "resume": "https://fairdataihub.org/resume",
       "instagram": "https://instagram.com/fairdataihub",
       "github": "https://github.com/slugb0t"
     }
@@ -61,7 +60,6 @@
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
       "twitter": "https://twitter.com/fairdataihub",
-      "resume": "https://fairdataihub.org/resume",
       "instagram": "https://instagram.com/fairdataihub",
       "github": "https://github.com/slugb0t"
     }
@@ -126,7 +124,6 @@
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
       "twitter": "https://twitter.com/fairdataihub",
-      "resume": "https://fairdataihub.org/resume",
       "instagram": "https://instagram.com/fairdataihub",
       "github": "https://github.com/slugb0t"
     }
@@ -156,8 +153,7 @@
     "social": {
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
-      "twitter": "https://twitter.com/fairdataihub",
-      "resume": "https://fairdataihub.org/resume"
+      "twitter": "https://twitter.com/fairdataihub"
     }
   },
   {
@@ -185,8 +181,6 @@
     "social": {
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
-      "twitter": "https://twitter.com/fairdataihub",
-      "resume": "https://fairdataihub.org/resume",
       "instagram": "https://instagram.com/fairdataihub",
       "github": "https://github.com/slugb0t"
     }

src/components/content/StatsText.tsx

@@ -1,46 +1,126 @@
+import { Stack, StackDivider } from '@chakra-ui/react';
+import parse from 'html-react-parser';
+import { useEffect, useRef, useState } from 'react';
+
 const StatsList = [
   {
-    heading: '4,000',
-    text: 'Participants anticipated in the study',
-  },
-  {
-    heading: '15+',
-    text: 'Data types to be collected (vitals, electrocardiogram, etc.)',
+    heading: 1000,
+    text: 'Participants in the study',
+    suffix: '+',
   },
   {
-    heading: '8',
-    text: `Research institutions involved`,
+    heading: 4000,
+    text: 'Patient visits',
+    suffix: '+',
   },
   {
-    heading: '50+',
-    text: 'Team members',
+    heading: 300,
+    text: `Data collected`,
+    suffix: 'GB',
   },
 ];
 
 export default function StatsText() {
+  const refs = useRef<(HTMLDivElement | null)[]>([]);
+  const [visibleIndexes, setVisibleIndexes] = useState<number[]>([]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const index = refs.current.findIndex((ref) => ref === entry.target);
+          if (entry.isIntersecting && index !== -1) {
+            setVisibleIndexes((prev) => {
+              if (!prev.includes(index)) {
+                return [...prev, index];
+              }
+              return prev;
+            });
+          }
+        });
+      },
+      { threshold: 0.5 },
+    );
+
+    refs.current.forEach((ref) => {
+      if (ref) {
+        observer.observe(ref);
+      }
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (visibleIndexes.length > 0) {
+      initCountUps(visibleIndexes);
+    }
+  }, [visibleIndexes]);
+
+  async function initCountUps(indexes: number[]) {
+    const countUpModule = await import('countup.js');
+    indexes.forEach((index) => {
+      const ref = refs.current[index];
+      if (ref) {
+        const countUpAnim = new countUpModule.CountUp(
+          ref,
+          StatsList[index].heading,
+          {
+            duration: 2,
+            separator: ',',
+          },
+        );
+        if (!countUpAnim.error) {
+          countUpAnim.start();
+        } else {
+          console.error(countUpAnim.error);
+        }
+      }
+    });
+  }
+
   return (
-    <section className='bg-white'>
-      <div className='mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6'>
-        <h2 className='mb-4 text-4xl font-bold tracking-tight'>
-          Snapshot of the AI-READI project
-        </h2>
-        <p className='max-w-screen-md text-2xl font-light text-slate-600'>
-          Some key numbers from the project
+    <section className='pt-4'>
+      <div className='border[1px] m-2 mx-auto max-w-screen-xl rounded-lg border border-gray-200 bg-[url(/images/polygon-card-v2.svg)] px-16 py-8 text-center shadow-lg'>
+        <h1 className='mb-2 text-3xl font-bold tracking-tight sm:text-4xl'>
+          Snapshot of the Eye ACT project
+        </h1>
+
+        <p className='mb-12 text-xl font-medium text-slate-600'>
+          Project Milestones
         </p>
-        <div className='grid pt-8 text-left md:grid-cols-4 md:gap-8'>
-          {StatsList.map((stat) => (
-            <div key={stat.heading}>
-              <div className='mb-5'>
-                <dt className='mb-3 flex items-center text-4xl font-bold text-gray-900'>
-                  {stat.heading}
-                </dt>
-
-                <dd className='text-lg font-light text-slate-500'>
-                  {stat.text}
+
+        <div className='flex justify-center'>
+          <Stack
+            direction={['column', 'column', 'column', 'row']}
+            spacing='70px'
+            divider={<StackDivider borderColor='gray-200' />}
+          >
+            {StatsList.map((stat, index) => (
+              <div
+                key={stat.heading}
+                className='flex flex-col items-center justify-center space-y-3 text-center'
+              >
+                <div className='flex items-baseline justify-center space-x-2'>
+                  <dt
+                    ref={(el) => {
+                      refs.current[index] = el as HTMLDivElement;
+                    }}
+                    className='text-5xl font-extrabold text-blue-500'
+                  >
+                    0
+                  </dt>
+                  <span className='text-4xl font-bold text-blue-500'>
+                    {stat.suffix}
+                  </span>
+                </div>
+
+                <dd className='text-lg font-medium text-gray-700'>
+                  {parse(stat.text)}
                 </dd>
               </div>
-            </div>
-          ))}
+            ))}
+          </Stack>
         </div>
       </div>
     </section>

src/components/events/EventsLayout.tsx

@@ -7,13 +7,11 @@ import EventDates from '@/components/events/EventDates';
 const EventsLayout: React.FC<EventsLayoutProps> = ({ eventList }) => {
   return (
     <>
-      <hr className='mx-6 my-1 border-dashed border-slate-300' />
-
-      <div className='flex flex-wrap gap-8 px-8'>
+      <div className='flex flex-wrap gap-8 px-8 pb-20'>
         {eventList.map((event) => (
           <div
             key={event.slug}
-            className='group relative flex flex-row rounded-lg border border-gray-200 bg-white shadow-lg transition-shadow duration-300 hover:shadow-2xl'
+            className='group relative flex flex-row rounded-lg border border-gray-200 bg-white shadow-lg transition-shadow duration-300 hover:shadow-xl'
           >
             <div className='relative w-full max-w-[40%] overflow-hidden rounded-l-lg'>
               <Image
@@ -32,7 +30,7 @@ const EventsLayout: React.FC<EventsLayoutProps> = ({ eventList }) => {
             </div>
             <div className='flex flex-1 flex-col p-5'>
               <Link href={`/events/${event.slug}`} passHref>
-                <h3 className='text-xl font-bold text-gray-800 transition duration-300 group-hover:text-blue-500'>
+                <h3 className='text-2xl font-bold text-gray-800 transition-all duration-300 group-hover:text-blue-500'>
                   {event.frontMatter.title}
                 </h3>
               </Link>

src/components/layout/Footer.tsx

@@ -28,7 +28,7 @@ const footerLinks = [
       },
       {
         title: 'GitHub',
-        href: 'https://github.com/AI-READI',
+        href: 'https://github.com/EyeACT',
       },
       // {
       //   title: 'Components',
@@ -60,19 +60,18 @@ export default function Footer() {
               </span>
             </a>
             <span className='pb-2 pt-3 text-lg font-semibold text-sky-700'>
-              At fugit recusandae aut aliquam. Quisquam et voluptatem. Quisquam
+              Seeing the Future of Brain Health Through the Eyes
             </span>
 
             <Divider orientation='horizontal' />
 
             <div className='flex flex-col pt-6'>
               <div className='flex flex-col justify-start'>
                 <p className='pt-2 text-sm font-medium text-sky-900'>
-                  Ea autem excepturi qui atque rerum ut perspiciatis quis aut
-                  velit quasi sed laboriosam sapiente. Et fuga voluptas sed
-                  velit consequuntur non debitis perspiciatis. Et illum officia
-                  non ullam nobis eum saepe temporibus vel beatae tenetur est
-                  laudantium tempora est sint nisi 33 praesentium officia!
+                  EyeACT bridges the connection between eye health and brain
+                  function, pioneering research to uncover early indicators of
+                  Alzheimer’s disease. Our mission is to transform how we detect
+                  and prevent neurodegenerative disorders.
                 </p>
               </div>
             </div>

src/components/layout/Layout.tsx

@@ -8,7 +8,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Header />
-      <div className='pt-[61px]'>{children}</div>
+      <div className='bg-gradient-to-t from-sky-100 to-white pt-[61px]'>
+        {children}
+      </div>
       <Footer />
     </>
   );

src/components/links/UnstyledLink.tsx

@@ -19,7 +19,7 @@ const UnstyledLink = React.forwardRef<HTMLAnchorElement, UnstyledLinkProps>(
         : href && !href.startsWith('/') && !href.startsWith('#');
 
     // Use the anchor tag for explicit same domain links. Should rerender iframes.
-    const isHomeDomain = href && href.includes('aireadi.org');
+    const isHomeDomain = href && href.includes('eyeact.org');
 
     if (!isNewTab) {
       return (

src/lib/markdownToHtml.ts

@@ -12,7 +12,7 @@ import { unified } from 'unified';
 /**
  * Custom plugin to wrap sections in cards
  */
-function rehypeWrapInCards() {
+function rehypeWrapInCards(params: { card: boolean }) {
   return (tree: any) => {
     const children = tree.children;
     const wrappedChildren: any[] = [];
@@ -32,17 +32,19 @@ function rehypeWrapInCards() {
           type: 'element',
           tagName: 'div',
           properties: {
-            className: [
-              'bg-white',
-              'rounded-lg',
-              'shadow-lg',
-              'px-6',
-              'mb-6',
-              'pb-4',
-              'pt-1',
-              'border-gray-200',
-              'border-[1px]',
-            ],
+            className: params.card
+              ? [
+                  'bg-white',
+                  'rounded-lg',
+                  'shadow-lg',
+                  'px-6',
+                  'mb-6',
+                  'pb-4',
+                  'pt-1',
+                  'border-gray-200',
+                  'border-[1px]',
+                ]
+              : [],
           },
           children: [node], // Add the current <h2> as the first child
         };
@@ -68,14 +70,16 @@ function rehypeWrapInCards() {
 /**
  * Converts markdown to HTML with Tailwind cards
  */
-export default async function markdownToHtml(markdown: string) {
+export default async function markdownToHtml(markdown: string, card = false) {
   const result = await unified()
     .use(remarkParse)
     .use(remarkGfm)
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
     .use(rehypeHighlight)
-    .use(rehypeWrapInCards) // Apply card wrapping
+    .use(rehypeWrapInCards, {
+      card,
+    }) // Apply card wrapping
     .use(rehypeDocument, {
       meta: [
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },

src/pages/api/contact.ts

@@ -20,7 +20,7 @@ export default function handler(
 
   //   const ourmsg = {
   //     to: `jpowen@uw.edu`,
-  //     from: `sendgrid@aireadi.org`,
+  //     from: `sendgrid@eyeact.org`,
   //     subject: `A new request has arrived!`,
   //     html: `<p>Email: ${email}</p>
   //     <p>Subject: ${subject}</p>
@@ -29,7 +29,7 @@ export default function handler(
 
   //   const usermsg = {
   //     to: email,
-  //     from: `contact@aireadi.org`,
+  //     from: `contact@eyeact.org`,
   //     subject: `Hi there!`,
   //     html: `<strong>Thank you for contacting us. We will be in touch with you soon.</strong>
   //     <p>Email: ${email}</p>