Improve homepage styling

components/homepage/hero/Hero.tsx

@@ -1,6 +1,60 @@
+import { useState, useRef } from 'react'
+import { useInterval } from 'usehooks-ts'
+import { motion, useAnimation, useInView } from 'framer-motion'
 import { Container, Stack, Heading, Text } from '@chakra-ui/react'
 
+const word = {
+  hidden: {
+    opacity: 1,
+    transition: {
+      duration: 3.0,
+    },
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      delay: 0.5,
+      staggerChildren: 0.05,
+    },
+  },
+}
+
+const letter = {
+  hidden: {
+    opacity: 0,
+    y: 50,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+  },
+}
+
+const wordsToDisplay = [
+  'Celebrating',
+  'Encouraging',
+  'Galvanising',
+  'Uplifting',
+]
+
 export default function Hero() {
+  const [wordIndex, setWordIndex] = useState(0)
+  const controls = useAnimation()
+  const ref = useRef(null)
+  const isInView = useInView(ref)
+
+  useInterval(() => {
+    const nextIndex =
+      wordIndex === wordsToDisplay.length - 1 ? 0 : wordIndex + 1
+    setWordIndex(nextIndex)
+
+    if (isInView) {
+      controls.start('visible')
+    } else {
+      controls.start('hidden')
+    }
+  }, 5000)
+
   return (
     <>
       <Container maxW="7xl" mt="1rem">
@@ -23,7 +77,22 @@ export default function Hero() {
               wordBreak="break-word"
               textAlign={{ base: 'left', md: 'center' }}
             >
-              Celebrating place-based community{' '}
+              <motion.span
+                variants={word}
+                initial="hidden"
+                animate="visible"
+                ref={ref}
+                key={wordsToDisplay[wordIndex]}
+              >
+                {wordsToDisplay[wordIndex].split('').map((char, index) => {
+                  return (
+                    <motion.span key={`${char}-${index}`} variants={letter}>
+                      {char}
+                    </motion.span>
+                  )
+                })}
+              </motion.span>{' '}
+              <span>place-based community </span>
               <Text
                 as="span"
                 fontWeight={600}

components/homepage/web-cards/WebCards.tsx

@@ -59,7 +59,7 @@ const Card = ({ web }) => {
             alt={`Image representing ${web.title} web`}
             src={web.image}
             fill={true}
-            style={{ objectFit: 'cover' }}
+            style={{ objectFit: 'cover', objectPosition: 'bottom' }}
           />
         </Box>
         <Stack>
@@ -77,3 +77,8 @@ const Card = ({ web }) => {
   )
 }
 
+
+
+
+
+

components/layout/Layout.module.scss

@@ -1,4 +1,5 @@
 .root {
+  margin-top: 1rem;
   p {
     font-size: 1.125rem;
     line-height: 1.6;

components/nav/Nav.module.scss

@@ -4,7 +4,7 @@
 
   &:hover {
     text-decoration: none;
-    color: rgb(93, 106, 126);
+    color: #4A5568;
   }
 
   &.active {

components/nav/Nav.tsx

@@ -212,14 +212,14 @@ const DesktopNav = ({ currentPathname, navItems }) => {
             {navItem.children && (
               <PopoverContent
                 border={0}
-                boxShadow={'xl'}
+                boxShadow="2xl"
                 bg="white"
                 p={2}
-                rounded={'xl'}
+                rounded="xl"
               >
                 <Stack>
                   {navItem.children.map((child) => (
-                    <DesktopSubNav key={child.label} {...child} />
+                    <DesktopSubNavItem key={child.label} {...child} />
                   ))}
                 </Stack>
               </PopoverContent>
@@ -231,7 +231,7 @@ const DesktopNav = ({ currentPathname, navItems }) => {
   )
 }
 
-const DesktopSubNav = ({ label, href }) => {
+const DesktopSubNavItem = ({ label, href }) => {
   return (
     <Link
       href={href}

package.json

@@ -58,6 +58,7 @@
     "tinymce": "6.7.0",
     "use-debounce": "9.0.4",
     "use-local-storage": "3.0.0",
+    "usehooks-ts": "2.9.1",
     "vis-network-react": "github:DinerIsmail/vis-network-react"
   },
   "devDependencies": {