feat: ✨ home page

package.json

@@ -38,6 +38,7 @@
     "framer-motion": "^8.0.2",
     "gray-matter": "^4.0.3",
     "html-react-parser": "^3.0.4",
+    "motion": "^11.15.0",
     "next": "^13.0.2",
     "plaiceholder": "^2.5.0",
     "react": "^18.2.0",

public/favicon/site.webmanifest

@@ -1,19 +1 @@
-{
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/components/Viz.jsx

@@ -4,17 +4,17 @@ import { useEffect, useRef, useState } from 'react';
 import VIZ_JSON from '~/data/viz.json';
 
 const vizOptions = [
-  { value: 'state-def', label: 'Default' },
-  { value: 'state-group', label: 'T2DM Status' },
-  { value: 'state-age', label: 'Decade' },
-  { value: 'state-site', label: 'Site' },
-  { value: 'state-split', label: 'Splits' },
-  { value: 'state-Clinical', label: 'Clinical' },
-  { value: 'state-ECG', label: 'ECG' },
-  { value: 'state-FLIO', label: 'FLIO' },
-  { value: 'state-OCT', label: 'OCT' },
-  { value: 'state-OCTA', label: 'OCTA' },
-  { value: 'state-CFP', label: 'CFP' },
+  { value: 'state-def', label: 'Nisi' },
+  { value: 'state-group', label: 'Potenti' },
+  { value: 'state-age', label: 'Leo fusce' },
+  { value: 'state-site', label: 'Lobortis' },
+  { value: 'state-split', label: 'Facilisis' },
+  { value: 'state-Clinical', label: 'Elit' },
+  { value: 'state-ECG', label: 'Amet' },
+  { value: 'state-FLIO', label: 'Phasellus' },
+  { value: 'state-OCT', label: 'Diam' },
+  { value: 'state-OCTA', label: 'Auctor' },
+  { value: 'state-CFP', label: 'Ultrices' },
 ];
 
 const VizComponent = () => {
@@ -52,12 +52,12 @@ const VizComponent = () => {
     const data = VIZ_JSON;
     const { width, height } = dimensions;
 
-    const  getSelectedStateId = () => {
+    const getSelectedStateId = () => {
       const selectedRadio = document.querySelector(
         'input[name="state"]:checked',
       );
       return selectedRadio ? selectedRadio.id : null;
-    }
+    };
 
     const countUniqueValues = (data) => {
       const uniqueCounts = {};
@@ -96,7 +96,7 @@ const VizComponent = () => {
       });
 
       return result;
-    }
+    };
 
     (function (nodes = data) {
       const nodeUniqes = countUniqueValues(nodes);
@@ -145,7 +145,7 @@ const VizComponent = () => {
         );
         simulation.force('y', d3.forceY(0).strength(xyforce));
         simulation.alpha(1).restart();
-      }
+      };
 
       // sourcery skip: avoid-function-declarations-in-blocks
       function ticked() {
@@ -239,7 +239,7 @@ const VizComponent = () => {
         ))}
       </ul>
 
-      <canvas ref={canvasRef} id='viz' className='w-full p-4 m-4' />
+      <canvas ref={canvasRef} id='viz' className='m-4 w-full p-4' />
     </div>
   );
 };

src/components/layout/Footer.tsx

@@ -44,21 +44,22 @@ const footerLinks = [
 
 export default function Footer() {
   return (
-    <footer className='bg-slate-100'>
+    <footer className='bg-gradient-to-t from-white to-sky-100'>
       <div className='mx-auto max-w-screen-xl p-4 sm:p-6'>
+        <hr className='mb-8 border-slate-300 sm:mx-auto' />
         <div className='md:flex md:justify-between md:space-x-12'>
           <div className='mb-6 flex flex-col md:mb-0 md:max-w-md lg:max-w-xl'>
-            <a href='https://aireadi.org/' className='flex items-center'>
+            <a href='https://fairdataihub.org/' className='flex items-center'>
               <img
                 className='mr-3 h-14'
-                src='/images/member-orgs/temp-symbol.png'
+                src='/images/logo-regular.png'
                 alt='temp logo'
               />
-              <span className='self-center whitespace-nowrap text-5xl font-bold text-sky-900'>
+              <span className='self-center whitespace-nowrap text-5xl font-bold text-sky-700'>
                 EyeACT
               </span>
             </a>
-            <span className='pb-2 pt-3 text-lg font-semibold text-sky-900'>
+            <span className='pb-2 pt-3 text-lg font-semibold text-sky-700'>
               At fugit recusandae aut aliquam. Quisquam et voluptatem. Quisquam
             </span>
 
@@ -73,11 +74,6 @@ export default function Footer() {
                   non ullam nobis eum saepe temporibus vel beatae tenetur est
                   laudantium tempora est sint nisi 33 praesentium officia!
                 </p>
-                <img
-                  src='/images/member-orgs/temp-logo.png'
-                  className='mt-4 h-auto w-[130px]'
-                  alt='temp Logo'
-                />
               </div>
             </div>
 
@@ -94,7 +90,7 @@ export default function Footer() {
                   {footerLink.links.map((link) => (
                     <li key={link.title}>
                       <Link href={link.href} passHref>
-                        <span className='text-base font-medium text-sky-800 transition-all hover:text-slate-500'>
+                        <span className='text-base font-medium text-sky-700 transition-all hover:text-sky-900 hover:underline'>
                           {link.title}
                         </span>
                       </Link>
@@ -111,7 +107,7 @@ export default function Footer() {
         <div className='flex items-center justify-between'>
           <span className='text-base font-medium text-slate-800 sm:text-center'>
             © {new Date().getFullYear()} {` `}
-            <a href='https://github.com/EyeACT/' className='hover:underline'>
+            <a href='https://github.com/EyeACT' className='hover:underline'>
               EyeACT™
             </a>
             . All Rights Reserved.

src/components/layout/Header.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable @next/next/no-img-element */
 import { Dialog, Popover } from '@headlessui/react';
 import { Icon } from '@iconify/react';
+import Image from 'next/image';
 import { useState } from 'react';
 
 import UnstyledLink from '@/components/links/UnstyledLink';
@@ -11,6 +12,18 @@ const regularLinks = [
     href: '/team',
     title: 'Team',
   },
+  {
+    href: '/publications',
+    title: 'Publications',
+  },
+  {
+    href: '/dataset',
+    title: 'Dataset',
+  },
+  {
+    href: '/events',
+    title: 'Events',
+  },
   {
     href: '/contact',
     title: 'Contact Us',
@@ -21,23 +34,30 @@ export default function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className='fixed top-0 z-10 w-full border-b bg-white'>
+    <header className='fixed top-0 z-10 w-full border-b border-black bg-black'>
       <nav
-        className='mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8'
+        className='max-w-screen mx-auto flex items-center justify-between px-6 py-4 lg:px-8'
         aria-label='Global'
       >
-        <div className='flex lg:flex-1'>
+        <div className='flex items-center lg:flex-1'>
+          <Image
+            src='/images/logo-white-letter.png'
+            alt='EyeACT Logo'
+            width={40}
+            height={40}
+            className='h-10 w-10'
+          />
           <UnstyledLink
             href='/'
-            className='pl-3 text-lg font-bold transition-all hover:text-sky-500'
+            className='pl-3 text-lg font-bold text-white transition-all hover:text-sky-200'
           >
             EyeACT
           </UnstyledLink>
         </div>
         <div className='flex lg:hidden'>
           <button
             type='button'
-            className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700'
+            className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white'
             onClick={() => setMobileMenuOpen(true)}
           >
             <span className='sr-only'>Open main menu</span>
@@ -49,7 +69,7 @@ export default function Header() {
             <UnstyledLink
               key={index}
               href={link.href}
-              className='font-semibold text-gray-800 transition-all hover:text-blue-400'
+              className='font-semibold text-gray-800 transition-all hover:text-blue-400 md:text-white'
             >
               {link.title}
             </UnstyledLink>

src/components/links/ButtonLink.tsx

@@ -36,16 +36,15 @@ const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           //#region  //*=========== Variants ===========
           [
             variant === 'primary' && [
-              'bg-primary-500 text-white',
-              'border border-primary-600',
-              'hover:bg-primary-600 hover:text-white',
+              'bg-black text-white',
+              'hover:border-black hover:bg-sky-600 hover:text-white',
               'active:bg-primary-500',
               'disabled:bg-primary-400 disabled:hover:bg-primary-400',
             ],
             variant === 'outline' && [
-              'text-primary-500',
-              'border border-primary-500',
-              'hover:bg-primary-50 active:bg-primary-100 disabled:bg-primary-100',
+              'text-white',
+              'border border-black',
+              'text-black hover:border-sky-600 hover:bg-transparent hover:text-sky-600 active:bg-primary-100 disabled:bg-primary-100',
               isDarkBg &&
                 'hover:bg-gray-900 active:bg-gray-800 disabled:bg-gray-800',
             ],

src/pages/comingsoon.tsx

@@ -0,0 +1,108 @@
+import { SkipNavLink } from '@chakra-ui/skip-nav';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+import Layout from '@/components/layout/Layout';
+import Seo from '@/components/Seo';
+
+const fadeInVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: (i: number) => ({
+    opacity: 1,
+    y: 0,
+    transition: { delay: i * 0.2, duration: 0.5 },
+  }),
+};
+
+const Comingsoon: React.FC = () => {
+  return (
+    <>
+      <SkipNavLink>Skip to content</SkipNavLink>
+
+      <Layout>
+        <Seo templateTitle='Coming Soon' />
+        <section className='relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8'>
+          <div className='absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20'></div>
+          <div className='absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center'></div>
+          <div className='mx-auto max-w-2xl lg:max-w-4xl'>
+            <motion.h1
+              variants={fadeInVariants}
+              initial='hidden'
+              animate='visible'
+              custom={0}
+              className='transit text-center text-6xl font-bold tracking-tight text-gray-900 sm:text-7xl'
+            >
+              Coming Soon
+            </motion.h1>
+            <figure className='mt-10'>
+              <motion.div
+                className='mx-auto mb-8 h-40 w-40 rounded-lg shadow-xl'
+                variants={fadeInVariants}
+                initial='hidden'
+                animate='visible'
+                custom={1}
+              >
+                <Image
+                  alt='Coming Soon'
+                  width={160}
+                  height={160}
+                  src='https://images.unsplash.com/photo-1725917482759-435bfa3d8d93?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+                />
+              </motion.div>
+              <motion.blockquote
+                className='text-center text-xl/8 font-semibold text-gray-900 sm:text-2xl/9'
+                variants={fadeInVariants}
+                initial='hidden'
+                animate='visible'
+                custom={1}
+              >
+                <p>
+                  We are working hard to bring you the best experience. Stay
+                  tuned!
+                </p>
+              </motion.blockquote>
+              <motion.figcaption
+                className='mt-10'
+                variants={fadeInVariants}
+                initial='hidden'
+                animate='visible'
+                custom={2}
+              >
+                {/* <Image
+                  className='mx-auto size-10 rounded-full'
+                  width={40}
+                  height={40}
+                  src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
+                  alt=''
+                /> */}
+                <div className='mt-4 flex items-center justify-center space-x-3 text-base'>
+                  <button
+                    onClick={() => window.history.back()}
+                    className='text-lg font-semibold text-gray-900 hover:text-blue-800'
+                  >
+                    <span className='mr-1' aria-hidden='true'>
+                      &larr;
+                    </span>
+                    Go Back
+                  </button>
+                  {/* <svg
+                    viewBox='0 0 2 2'
+                    width='3'
+                    height='3'
+                    aria-hidden='true'
+                    className='fill-gray-900'
+                  >
+                    <circle cx='1' cy='1' r='1' />
+                  </svg>
+                  <div className='text-gray-600'>CEO of Workcation</div> */}
+                </div>
+              </motion.figcaption>
+            </figure>
+          </div>
+        </section>
+      </Layout>
+    </>
+  );
+};
+
+export default Comingsoon;