text insertion refactoring and style updates

src/assets/text/landing.ts

+import { Module } from './modules'
+
+export const about = {
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+}
+
+export const quotes = [
+  {
+    img: 'https://static.igem.io/academy/speakers pictures/pamela-silver.png',
+    modules: [Module.SYNBIO],
+    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.',
+    name: 'Pamela Silver',
+    jobTitle: 'Title, profession'
+  },
+  {
+    img: 'https://static.igem.io/academy/speakers pictures/pamela-silver.png',
+    modules: [Module.SYNBIO, Module.ENTREPRENEURSHIP, Module.HP, Module.BIOSAFETY, Module.FRAMEWORK],
+    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.',
+    name: 'Pamela Silver',
+    jobTitle: 'Title, profession'
+  },
+  {
+    img: 'https://static.igem.io/academy/speakers pictures/pamela-silver.png',
+    modules: [Module.BIOSAFETY],
+    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.',
+    name: 'Pamela Silver',
+    jobTitle: 'Title, profession'
+  }
+]

src/assets/text/modules.ts

+export enum Module {
+  FRAMEWORK, SYNBIO, HP, BIOSAFETY, ENTREPRENEURSHIP
+}
+
+interface ModuleProps {
+  module: Module
+  color: string
+  title: string
+  img: string
+  url: string
+}
+
+// colors: {
+//   white: '#FEFEFE',
+//   blue: '#415CA7',
+//   green: '#41B28C',
+//   black: '#2D2D2D',
+//   gray: '#2D2D2D',
+//   pink: '#E8486C',
+//   violet: '#785FA6'
+// }
+
+export const modules: ModuleProps[] = [
+  {
+    module: Module.FRAMEWORK,
+    color: 'pink',
+    title: 'Design as a framework',
+    img: '',
+    url: 'design-framework'
+  },
+  {
+    module: Module.SYNBIO,
+    color: 'violet',
+    title: 'Synthetic biology by design',
+    img: '',
+    url: 'synthetic-biology-design'
+  },
+  {
+    module: Module.HP,
+    color: 'blue',
+    title: 'Human practices & social impact',
+    img: '',
+    url: 'human-practices'
+  },
+  {
+    module: Module.BIOSAFETY,
+    color: 'babyBlue',
+    title: 'Biosafety & biosecurity',
+    img: '',
+    url: 'biosafety'
+  },
+  {
+    module: Module.ENTREPRENEURSHIP,
+    color: 'green',
+    title: 'Entrepreneurship & innovation',
+    img: '',
+    url: 'entrepreneurship'
+  }
+]
+
+export const getModuleInfoByType = (moduleType: Module): ModuleProps | undefined => modules.find((module) => module.module === moduleType)

src/components/Button/Button.tsx

@@ -18,20 +18,20 @@ interface ButtonProps {
   variant: ButtonVariant
   type: ButtonType
   classes?: string
-  value: string
+  value: string | JSX.Element
   onClick?: () => void
   link?: string
 }
 
-const mainClasses = clsx('font-medium text-lg py-2 px-10 my-2')
+const mainClasses = clsx('font-medium text-lg my-2')
 const colourful = clsx(
-  'bg-gradient-to-r from-pink via-violet to-green border-2'
+  'bg-gradient-to-r from-pink via-violet to-green border-2 py-2 px-10'
 )
 
 const getVariantClass = (variant: ButtonVariant): string => {
   switch (variant) {
     case ButtonVariant.COLOURFUL:
-      return clsx(colourful, 'rounded-xl')
+      return clsx(colourful, 'rounded-2xl')
     case ButtonVariant.COLOURFUL_ROUND:
       return clsx(colourful, 'rounded-full')
     case ButtonVariant.SIMPLE:

src/components/Carousel/Carousel.styles.css

+.slider-wrapper {
+    width: calc(100% - 10rem) !important;
+}
+.carousel .slide img[alt='quote-icon'] {
+    width: 2rem !important;
+}
\ No newline at end of file

src/components/Carousel/Carousel.tsx

 import React, { ReactChild } from 'react'
 import 'react-responsive-carousel/lib/styles/carousel.min.css' // requires a loader
 import { Carousel as CarouselComponent } from 'react-responsive-carousel'
+import Arrow from './components'
+import { ArrowSide } from './components/Arrow'
+import './Carousel.styles.css'
 
 interface CarouselProps {
   children: ReactChild[]
@@ -10,13 +13,18 @@ const Carousel = (props: CarouselProps): JSX.Element => {
   const { children } = props
   return (
     <CarouselComponent
-      autoPlay
       infiniteLoop
       showIndicators={false}
       showStatus={false}
       interval={8000}
       transitionTime={1000}
       showThumbs={false}
+      renderArrowNext={(clickHandler) => (
+        <Arrow onClick={clickHandler} side={ArrowSide.RIGHT} />
+      )}
+      renderArrowPrev={(clickHandler) => (
+        <Arrow onClick={clickHandler} side={ArrowSide.LEFT} />
+      )}
     >
       {children}
     </CarouselComponent>

src/components/Carousel/components/Arrow.tsx

+import React from 'react'
+import Button from '../../Button'
+import { ButtonType, ButtonVariant } from '../../Button/Button'
+import clsx from 'clsx'
+
+interface ArrowProps {
+  onClick: () => void
+  side: ArrowSide
+}
+
+export enum ArrowSide {
+  LEFT,
+  RIGHT
+}
+
+const Arrow = (props: ArrowProps): JSX.Element => {
+  const { onClick, side } = props
+  return (
+    <Button
+      classes={clsx(
+        'absolute z-2 min-h-100 inset-y-0',
+        side === ArrowSide.LEFT ? 'left-0' : 'right-0'
+      )}
+      type={ButtonType.BUTTON}
+      variant={ButtonVariant.SIMPLE}
+      onClick={onClick}
+      value={
+        side === ArrowSide.LEFT ? (
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='h-12 w-12'
+            fill='none'
+            viewBox='0 0 24 24'
+            stroke='currentColor'
+          >
+            <path
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth={2}
+              d='M15 19l-7-7 7-7'
+            />
+          </svg>
+        ) : (
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='h-12 w-12'
+            fill='none'
+            viewBox='0 0 24 24'
+            stroke='currentColor'
+          >
+            <path
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth={2}
+              d='M9 5l7 7-7 7'
+            />
+          </svg>
+        )
+      }
+    />
+  )
+}
+
+export default Arrow

src/components/Carousel/components/index.ts

+export { default } from './Arrow'

src/containers/App/components/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import { ButtonType, ButtonVariant } from '../../../../components/Button/Button'
 
 const Footer = (): JSX.Element => {
   return (
-    <div className='flex justify-between'>
+    <div className='flex justify-between px-5'>
       <Button
         variant={ButtonVariant.SIMPLE}
         type={ButtonType.EXTERNAL_LINK}

src/containers/App/components/Navbar/Navbar.tsx

 import React from 'react'
 import { Link } from 'react-router-dom'
-import { links } from './links'
+import { links } from '../../../../assets/text/navbar'
 import Button from '../../../../components/Button'
 import { ButtonType, ButtonVariant } from '../../../../components/Button/Button'
 
@@ -8,7 +8,7 @@ const NavLink = (props: { link: string, name: string }): JSX.Element => {
   const { name, link } = props
   return (
     <li>
-      <Link to={link} className='text-lg font-light'>
+      <Link to={link} className='text-lg lg:text-2xl font-light px-3'>
         {name}
       </Link>
     </li>
@@ -19,13 +19,18 @@ const Navbar = (): JSX.Element => {
   return (
     <div className='absolute w-full flex justify-between py-5 px-16 items-center'>
       <Button
-        classes='h-24 w-1/3 bg-white bg-opacity-10 rounded-lg'
+        classes='md:w-1/5 w-1/3'
         variant={ButtonVariant.SIMPLE}
         type={ButtonType.LINK}
         link='/'
-        value=''
+        value={
+          <img
+            src='https://static.igem.io/academy/main-logo-white.svg'
+            alt='igem-academy-logo'
+          />
+        }
       />
-      <ul className='flex justify-between text-white w-1/2'>
+      <ul className='flex justify-between text-white w-2/3 md:w-1/2'>
         {links.map((link) => (
           <NavLink key={link.name} {...link} />
         ))}

src/containers/Landing/Landing.tsx

-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Button from '../../components/Button'
 import { ButtonType, ButtonVariant } from '../../components/Button/Button'
 import Quotes from './Quotes'
+import { about } from '../../assets/text/landing'
 
 const Landing = (): JSX.Element => {
+  const infoDivRef = useRef<HTMLDivElement>(null)
+  const [infoDivImgHeight, setInfoDivImgHeight] = useState<string | undefined>()
+  useEffect(() => {
+    if (infoDivRef.current != null) {
+      setInfoDivImgHeight(`${infoDivRef.current.clientHeight}px`)
+    }
+  }, [])
   return (
     <div>
-      <div className='w-screen h-screen flex items-center justify-center flex-col text-6xl bg-speakers bg-center bg-no-repeat bg-cover'>
+      <div className='w-screen h-screen flex items-center justify-center flex-col text-6xl bg-speakers bg-center bg-repeat bg-contain'>
         <div className='text-center pb-20'>
           <h2 className='font-light my-3'>Your journey to</h2>
           <h1>#DesignWithBiology</h1>
@@ -22,20 +30,12 @@ const Landing = (): JSX.Element => {
           classes='text-2xl'
         />
       </div>
-      <div className='flex py-24 px-20 max-w-screen-xl mx-auto justify-between'>
-        <div className='w-1/2'>
+      <div className='flex py-24 px-20 max-w-screen-xl mx-auto justify-between items-center'>
+        <div className='w-1/2' ref={infoDivRef}>
           <h3 className='font-light text-2xl'>
             About <span className='font-bold'>iGEM Academy</span>
           </h3>
-          <p className='font-sourceSansPro text-sm my-5'>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </p>
+          <p className='font-sourceSansPro text-sm my-5'>{about.description}</p>
           <Button
             variant={ButtonVariant.COLOURFUL_ROUND}
             type={ButtonType.LINK}
@@ -43,7 +43,15 @@ const Landing = (): JSX.Element => {
             link='/about'
           />
         </div>
-        <div className='h-52 w-1/3 bg-white bg-opacity-10 rounded-lg ml-10' />
+        <img
+          src='https://static.igem.io/academy/academy monogram.png'
+          alt='academy'
+          style={{
+            height: infoDivImgHeight,
+            minHeight: '150px',
+            maxHeight: '250px'
+          }}
+        />
       </div>
       <div className='bg-gradient bg-center bg-no-repeat bg-cover py-10'>
         <h2 className='font-light text-center text-2xl '>

src/containers/Landing/Quotes/Quotes.tsx

-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Carousel from '../../../components/Carousel'
+import { quotes } from '../../../assets/text/landing'
+import clsx from 'clsx'
+import { getModuleInfoByType, Module } from '../../../assets/text/modules'
 
 interface QuoteProps {
-  photoUrl: string
+  img: string
   quote: string
   name: string
-  title: string
-  tag: string
+  jobTitle: string
+  modules: Module[]
 }
 
 const Quote = (props: QuoteProps): JSX.Element => {
-  const { quote, name, tag, title } = props
+  const { quote, name, jobTitle, img, modules } = props
+  const quoteRef = useRef<HTMLDivElement>(null)
+  const [quoteImgHeight, setQuoteImgHeight] = useState<string | undefined>()
+  useEffect(() => {
+    if (quoteRef.current != null) {
+      setQuoteImgHeight(`${quoteRef.current.clientHeight + 100}px`)
+    }
+  }, [])
+  const modulesInfo = modules
+    .map((module) => getModuleInfoByType(module))
+    .map((module) => ({ color: module?.color, value: module?.title }))
   return (
-    <div className='flex items-center'>
-      <div className='h-64 w-1/2 bg-white bg-opacity-10 rounded-lg mx-24' />
-      <div className='w-1/2 text-left'>
-        <p className='font-normal text-xs bg-violet rounded-full w-max px-5 py-1'>
-          {tag}
-        </p>
-        <p className='font-raleway font-extralight text-lg my-3'>{quote}</p>
-        <h3 className='font-bold text-xl'>{name}</h3>
-        <p className='font-raleway font-extralight text-sm'>{title}</p>
+    <div className='flex items-center justify-around'>
+      <img
+        src={img}
+        alt={`quote-${name}`}
+        style={{
+          height: quoteImgHeight,
+          minHeight: '150px',
+          maxHeight: '400px',
+          width: 'auto'
+        }}
+      />
+      <div className='w-1/2 text-left' ref={quoteRef}>
+        <div className='ml-12 flex flex-wrap'>
+          {modulesInfo.map((module, index) => (
+            <p
+              key={`${name}-${module.value ?? index}`}
+              className={clsx(
+                'font-normal text-xs rounded-full w-max px-5 py-1 mr-2 mb-2',
+                `bg-${module.color ?? 'black'}`
+              )}
+            >
+              {module.value}
+            </p>
+          ))}
+        </div>
+        <div className='flex items-start my-3'>
+          <img
+            src='https://static.igem.io/academy/quote.svg'
+            alt='quote-icon'
+            className='w-8 mr-4'
+          />
+          <p className='font-raleway font-extralight text-lg'>{quote}</p>
+        </div>
+        <h3 className='font-bold text-xl ml-12'>{name}</h3>
+        <p className='font-raleway font-extralight text-sm ml-12'>{jobTitle}</p>
       </div>
     </div>
   )
@@ -29,41 +68,9 @@ const Quote = (props: QuoteProps): JSX.Element => {
 const Quotes = (): JSX.Element => {
   return (
     <Carousel>
-      <Quote
-        name='John Doe'
-        photoUrl=''
-        quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
-        tag='Synthetic biology by design'
-        title='Title, profession'
-      />
-      <Quote
-        name='John Doe'
-        photoUrl=''
-        quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
-        tag='Synthetic biology by design'
-        title='Title, profession'
-      />
-      <Quote
-        name='John Doe'
-        photoUrl=''
-        quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
-        tag='Synthetic biology by design'
-        title='Title, profession'
-      />
-      <Quote
-        name='John Doe'
-        photoUrl=''
-        quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
-        tag='Synthetic biology by design'
-        title='Title, profession'
-      />
-      <Quote
-        name='John Doe'
-        photoUrl=''
-        quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
-        tag='Synthetic biology by design'
-        title='Title, profession'
-      />
+      {quotes.map((quote) => (
+        <Quote key={`quote-${quote.name}`} {...quote} />
+      ))}
     </Carousel>
   )
 }

tailwind.config.js

@@ -16,7 +16,8 @@ module.exports = {
         black: '#2D2D2D',
         gray: '#2D2D2D',
         pink: '#E8486C',
-        violet: '#785FA6'
+        violet: '#785FA6',
+        babyBlue: '#ACB4DC'
       },
     },
     fontFamily: {