Created Footer Component and Configure Theme

components/button.tsx

@@ -25,9 +25,9 @@ export const Button = ({
   ...props
 }: buttonProps) => {
   const variantCls = {
-    primary: 'text-white bg-primary sm:hover:opacity-75',
-    secondary: 'text-black bg-zinc-100 sm:hover:opacity-75',
-    ghost: 'text-black hover:bg-zinc-100 sm:hover:opacity-75',
+    primary: 'text-white bg-primary xs:hover:opacity-75',
+    secondary: 'text-black bg-zinc-100 xs:hover:opacity-75',
+    ghost: 'text-black hover:bg-zinc-100 xs:hover:opacity-75',
     outline:
       'text-black bg-white border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary',
   }[variant]

components/footer.tsx

@@ -1,6 +1,86 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+import { ToggleThemeButton } from '@/components/toggle-theme-button'
+
+import {
+  FOLLOW_US_LINKS,
+  INTERNAL_LINKS,
+  EXTERNAL_LINKS,
+  OTHER_LINKS,
+} from '@/constants/footer-links'
+
+interface linksProps {
+  title: string
+  links: Array<{ href: string; label: string }>
+}
+
+const Links = ({ title, links }: linksProps) => (
+  <div className="basis-[100%] md:basis-[calc(33%-8px)] lg:basis-[calc(25%-8px)] xl:basis-[calc(20%-8px)]">
+    <h3 className="pb-6 text-base font-semibold text-black">{title}</h3>
+    <ul className="flex flex-col gap-1">
+      {links.map(({ href, label }, i) => (
+        <li key={i}>
+          <Link
+            href={href}
+            className="block py-2 leading-6 text-neutral-600 hover:text-black"
+          >
+            {label}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  </div>
+)
+
 export const Footer = () => (
-  // TODO: remove dummy height min-h-[600px]
-  <footer className="w-full min-h-[600px] bg-gray-100">
-    <div className="w-full max-w-[1400px] mx-auto">Footer</div>
+  <footer className="w-full bg-[#f1f3f4]">
+    <div className="w-full max-w-[1400px] mx-auto px-4 md:px-8">
+      <div className="flex items-center gap-8 py-8">
+        <h4 className="text-black text-base sm:text-lg font-semibold">
+          Follow Us
+        </h4>
+        <div className="flex items-center gap-8">
+          {FOLLOW_US_LINKS.map(({ href, alt, src }, i) => (
+            <Link key={i} href={href}>
+              <Image alt={alt} src={src} width={24} height={24} />
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-start gap-2 gap-y-8 py-10 border-t border-neutral-200">
+        <Links title="Internal Links" links={INTERNAL_LINKS} />
+        <Links title="External Links" links={EXTERNAL_LINKS} />
+        <Links title="Internal Links" links={INTERNAL_LINKS} />
+        <Links title="External Links" links={EXTERNAL_LINKS} />
+        <Links title="Internal Links" links={INTERNAL_LINKS} />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-6 pt-6 pb-10 border-t md:pb-12 md:pt-8 md:gap-8 border-t-clr-border">
+        <div className="flex items-center justify-between grow">
+          <Link href="/">
+            <Image alt="logo" src="/logo.svg" width={120} height={34} />
+          </Link>
+
+          <ToggleThemeButton className="md:hidden" />
+        </div>
+
+        <ul className="flex flex-wrap items-center gap-8 gap-y-2">
+          {OTHER_LINKS.map(({ href, label }, i) => (
+            <li key={i}>
+              <Link
+                href={href}
+                className="text-sm text-neutral-600 hover:text-black hover:underline whitespace-nowrap"
+              >
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+
+        <ToggleThemeButton className="hidden ml-auto md:flex" />
+      </div>
+    </div>
   </footer>
 )

components/nav-dropdown.tsx

@@ -24,7 +24,7 @@ export const NavDropdown = ({
     <li className="group relative flex items-center justify-center">
       <Link
         href={link}
-        className="relative text-base sm:text-sm font-medium whitespace-nowrap px-3 py-3.5 after:absolute after:bottom-0 after:left-0 after:content-none::after after:w-full after:h-[2px] after:bg-primary after:hidden group-hover:after:block"
+        className="relative text-black text-base sm:text-sm font-medium whitespace-nowrap px-3 py-3.5 after:absolute after:bottom-0 after:left-0 after:content-none::after after:w-full after:h-[2px] after:bg-primary after:hidden group-hover:after:block"
       >
         {title}
       </Link>

components/section-wrapper.tsx

@@ -23,7 +23,7 @@ export const SectionWrapper = ({
           label="All"
           variant="secondary"
           icon={<AngleRightIcon />}
-          className="hidden sm:flex"
+          className="hidden sm:flex h-9"
         />
       )}
     </div>

components/theme-provider.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type ThemeProviderProps } from 'next-themes/dist/types'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

components/toggle-theme-button.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import clsx from 'clsx'
+
+import { Button } from '@/components/button'
+
+import MoonIcon from '@/public/moon.svg'
+import SunIcon from '@/public/sun.svg'
+
+interface toggleThemeButtonProps {
+  className?: string
+}
+
+export const ToggleThemeButton = ({ className }: toggleThemeButtonProps) => {
+  const [isMounted, setIsMounted] = useState(false)
+  const { resolvedTheme, setTheme } = useTheme()
+  console.log(resolvedTheme, 'resolvedTheme')
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  if (!isMounted) return null
+
+  return (
+    resolvedTheme && (
+      <Button
+        variant="secondary"
+        icon={resolvedTheme === 'dark' ? <SunIcon /> : <MoonIcon />}
+        onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+        className={clsx('w-12 h-12 rounded-full !px-1 bg-[#dedede]', className)}
+      />
+    )
+  )
+}