solution

src/components/Destination.tsx

@@ -7,28 +7,28 @@ export default function Destination() {
   return (
     <div className="max-w-7xl mx-auto flex items-center justify-start pt-10 px-8 gap-x-5">
       <Link href="/">
-        <a className="flex justify-center gap-x-4">
+        <a className="flex justify-center items-center gap-x-4">
           <Image src={homeIcon} alt="home" className="object-contain" />
-          <span className="font-regular">Home</span>
+          <span className="font-regular leading-5">Home</span>
         </a>
       </Link>
 
       <Image src={arrow} alt="arrow" className="object-contain" />
 
       <Link href="spirits">
-        <a className="font-regular">Spirits</a>
+        <a className="font-regular leading-5">Spirits</a>
       </Link>
 
       <Image src={arrow} alt="arrow" className="object-contain" />
 
       <Link href="kissMy">
-        <a className="font-regular">Kiss My</a>
+        <a className="font-regular leading-5">Kiss My</a>
       </Link>
 
       <Image src={arrow} alt="arrow" className="object-contain" />
 
       <Link href="/">
-        <a className="font-bold">Kiss My Rhubarb</a>
+        <a className="font-bold leading-5">Kiss My Rhubarb</a>
       </Link>
     </div>
   )

src/components/Footer/Community.tsx

@@ -0,0 +1,42 @@
+import { useIsDesktop } from '../context/DesktopWidthProvider';
+import Link from 'next/link';
+import cn from 'classnames';
+
+export default function Community() {
+  const { isDesktop } = useIsDesktop();
+
+  return (
+    <div className={cn("flex", {'flex-col': isDesktop,
+      'border-b border-lightGray2 justify-between': !isDesktop})}
+    >
+      <h3 className="text-lightGray2 text-base leading-10 font-regular">
+        COMMUNITY
+      </h3>
+      <div className={cn("flex", {'flex-col': isDesktop,
+        'justify-between gap-6': !isDesktop})}
+      >
+        <Link href={'/'}>
+          <a className="text-white text-base leading-10 font-regular
+            transition-color duration-500 hover:text-lightGray2"
+          >
+            Lexir for Brands 
+          </a>
+        </Link>
+        <Link href={'/'}>
+          <a className="text-white text-base leading-10 font-regular
+            transition-color duration-500 hover:text-lightGray2"
+          >
+            Business Buyers
+          </a>
+        </Link>
+        <Link href={'/'}>
+          <a className="text-white text-base leading-10 font-regular
+            transition-color duration-500 hover:text-lightGray2"
+          >
+            Sales Affiliates
+          </a>
+        </Link>
+      </div>
+    </div>
+  )
+}