[ENH] Implemented landing view (#37)

* Added custom `spin-slow` animation

* Added `landing-emoji`

* Added content for landing view

* Added assertions for the content of `Landing` component

* Set the viewport for cypress

* Updated `Simple` e2e test

cypress.config.ts

@@ -3,6 +3,8 @@ import { defineConfig } from 'cypress';
 import codeCoverageTask from '@cypress/code-coverage/task';
 
 export default defineConfig({
+  viewportWidth: 1280,
+  viewportHeight: 720,
   e2e: {
     experimentalStudio: true,
     baseUrl: 'http://localhost:5173',

cypress/component/Landing.cy.tsx

@@ -1,8 +1,13 @@
 import Landing from '../../src/components/Landing';
 
 describe('Landing', () => {
-  it('should render correctly', () => {
+  it('should render the content of Landing view  correctly', () => {
     cy.mount(<Landing />);
-    cy.contains('Welcome');
+    cy.contains('Welcome to the Neurobagel Annotation Tool');
+    cy.get('img[alt="Neurobagel Logo"]').should('be.visible');
+    cy.get('img[alt="Neurobagel Logo"]').should('have.attr', 'alt', 'Neurobagel Logo');
+    cy.get('img[alt="Landing emoji"]').should('be.visible');
+    cy.get('img[alt="Landing emoji"]').should('have.attr', 'alt', 'Landing emoji');
+    cy.get('[data-cy="get started-button"]').should('be.visible');
   });
 });

cypress/e2e/Simple.cy.ts

@@ -2,16 +2,16 @@ describe('Simlpe e2e test', () => {
   it('Steps through different app views', () => {
     cy.visit('http://localhost:5173');
     cy.contains('Welcome');
-    cy.contains('Start - Upload').click();
+    cy.get('[data-cy="get started-button"]').click();
     cy.contains('Upload');
-    cy.contains('Next - Column Annotation').click();
+    cy.get('[data-cy="next - column annotation-button"]').click();
     cy.contains('Column Annotation');
-    cy.contains('Next - Value Annotation').click();
+    cy.get('[data-cy="next - value annotation-button"]').click();
     cy.contains('Value Annotation');
     // reload to make sure the currentView persists
     cy.reload();
     cy.contains('Value Annotation');
-    cy.contains('Next - Download').click();
+    cy.get('[data-cy="next - download-button"]').click();
     cy.contains('Download');
   });
 });

src/components/Landing.tsx

@@ -1,10 +1,30 @@
+import { Typography } from '@mui/material';
 import NavigationButton from './NavigationButton';
+import logo from '../assets/logo.svg';
+import landingEmoji from '../assets/landing-emoji.png';
 
 function Landing() {
   return (
-    <div className="flex flex-col items-center">
-      <h1>Welcome</h1>
-      <NavigationButton label="Start - Upload" viewToNavigateTo="upload" />
+    <div className="flex min-h-screen flex-col items-center justify-center overflow-hidden">
+      <img src={logo} alt="Neurobagel Logo" className="mb-6 h-36 w-36 animate-spin-slow" />
+
+      <div className="text-center">
+        <div className="flex items-center space-x-4">
+          <img src={landingEmoji} alt="Landing emoji" className="mb-6 h-24 w-24" />
+          <Typography variant="h3" component="h1" className="font-bold">
+            Welcome to the Neurobagel Annotation Tool
+          </Typography>
+        </div>
+
+        <Typography variant="subtitle1" className="text-gray-600">
+          This tool allows you to create a machine-readable BIDS data dictionary in .json format for
+          a tabular phenotypic file in .tsv format.
+        </Typography>
+      </div>
+
+      <div className="mt-8">
+        <NavigationButton label="Get Started" viewToNavigateTo="upload" />
+      </div>
     </div>
   );
 }

src/components/NavigationButton.tsx

@@ -15,7 +15,7 @@ function NavigationButton({
   };
 
   return (
-    <Button variant="contained" onClick={handleClick}>
+    <Button data-cy={`${label.toLowerCase()}-button`} variant="contained" onClick={handleClick}>
       {label}
     </Button>
   );

tailwind.config.js

@@ -2,7 +2,17 @@
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        'spin-slow': {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+        },
+      },
+      animation: {
+        'spin-slow': 'spin-slow 5s linear infinite',
+      },
+    },
   },
   plugins: [],
   corePlugins: {