sadanandpai · arpansaha13 · Apr 24, 2024 · Apr 25, 2024 · Apr 29, 2024
diff --git a/apps/host/.prettierrc b/apps/host/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/apps/host/package.json b/apps/host/package.json
@@ -15,25 +15,32 @@
     "@fmc/assets": "*",
     "@fmc/data": "*",
     "@fmc/shared-styles": "*",
+    "clsx": "^2.1.1",
     "framer-motion": "^11.0.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0",
     "react-router-hash-link": "^2.4.3",
     "react-select": "^5.8.0",
-    "swiper": "^11.0.5"
+    "swiper": "^11.0.5",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "sass": "^1.69.5",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
     "vitest": "^1.3.1"

diff --git a/apps/host/postcss.config.cjs b/apps/host/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/host/src/components/common/navbar/navbar.module.scss b/apps/host/src/components/common/navbar/navbar.module.scss
@@ -1,114 +1,5 @@
-.navbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  background-color: var(--bg-navbar);
-  box-shadow:
-    0 1px 3px 0 var(--shadow-navbar),
-    0 1px 2px -1px var(--shadow-navbar);
-  transition: all 150ms ease-in-out;
-
-  --icon-container-size: 26px;
-  --github-svg-size: 26px;
-
-  .logo {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-
-    img {
-      width: var(--icon-container-size);
-      height: var(--icon-container-size);
-    }
-
-    span {
-      color: var(--text-body);
-      text-align: center;
-      font-weight: 500;
-      font-size: 1rem;
-    }
-  }
-
-  .right {
-    display: flex;
-    gap: 2rem;
-  }
-
-  .links {
-    display: none;
-  }
-
-  .github {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--icon-container-size);
-    height: var(--icon-container-size);
-    color: var(--text-body);
-  }
-
-  .github > svg {
-    width: var(--github-svg-size);
-    height: var(--github-svg-size);
-  }
-  .hamburger {
-    display: none;
-
-    button {
-      border: none;
-      background: transparent;
-    }
-  }
-
-  @media screen and (max-width: 768px) {
-    .github {
-      display: none;
-    }
-
-    .themeButton {
-      display: none;
-    }
-
-    .hamburger {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--icon-container-size);
-      height: var(--icon-container-size);
-      color: var(--text-body);
-    }
-
-    .hamburger > svg {
-      width: var(--github-svg-size);
-      height: var(--github-svg-size);
-    }
-  }
-}
-
-@media screen and (width >= 768px) {
-  .navbar {
-    --icon-container-size: 40px;
-    --github-svg-size: 30px;
-
-    .links {
-      display: flex;
-      gap: 2rem;
-      align-items: center;
-    }
-
-    .logo > span {
-      font-size: 1.2rem;
-    }
-  }
-}
-.right:first-child {
-  display: flex;
-}
-
 .drawerContent {
-  padding: 1rem;
+  @apply p-4;
 }
 
 .drawerList {

diff --git a/apps/host/src/components/common/navbar/navbar.tsx b/apps/host/src/components/common/navbar/navbar.tsx
@@ -3,10 +3,16 @@ import { useContext } from 'react';
 import { Drawer } from 'antd';
 import { logo, logo_dark } from '@fmc/assets/images';
 import { ThemeContext } from '../../ThemeWrapper';
-import { Sun, Moon, Menu } from 'lucide-react';
-import styles from './navbar.module.scss';
+import { Sun, Moon, Menu, X } from 'lucide-react';
+import { cn } from "@/helpers/utils";
 
-function Navbar({ children, title }: { children?: React.ReactNode; title?: string }) {
+function Navbar({
+  children,
+  title,
+}: {
+  children?: React.ReactNode;
+  title?: string;
+}) {
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
@@ -15,76 +21,104 @@ function Navbar({ children, title }: { children?: React.ReactNode; title?: strin
   };
 
   return (
-    <nav className={styles.navbar}>
-      <a className={styles.logo} href="/frontend-mini-challenges/">
-        <img src={theme === 'light' ? logo : logo_dark} alt="logo" />
-        <span>{title ?? 'Frontend Mini Challenges'}</span>
+    <nav className="mb-4 flex items-center justify-between bg-gray-50 p-4 shadow transition-all dark:bg-gray-950">
+      <a className="flex items-center gap-2" href="/frontend-mini-challenges/">
+        <img src={theme === 'light' ? logo : logo_dark} alt="logo" className="h-[26px] w-[26px] md:h-10 md:w-10" />
+        <span className="text-center font-medium text-gray-900 md:text-[1.2rem] dark:text-white">{title ?? 'Frontend Mini Challenges'}</span>
       </a>
 
-      <div className={styles.right}>
-        <div className={styles.links}>{children}</div>
+      <div className="hidden md:flex md:gap-8">
+        <div className="flex items-center gap-8">{children}</div>
 
         <a
           href="https://github.com/sadanandpai/frontend-mini-challenges/"
           target="blank"
-          className={styles.github}
+          className="flex h-10 w-10 items-center justify-center text-gray-900 dark:text-gray-200"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className="h-[26px] w-[26px] md:h-[30px] md:w-[30px]"
+          >
             <path
               fill="currentColor"
               d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
             />
           </svg>
         </a>
-        <button className={styles.themeButton} onClick={toggleTheme}>
-          {theme === 'light' ? <Sun /> : <Moon />}
+        <button
+          className="border-none bg-inherit text-gray-900 dark:text-white"
+          onClick={toggleTheme}
+        >
+          {theme === "light" ? <Sun /> : <Moon />}
         </button>
       </div>
-      <div className={styles.hamburger}>
+      <div className="flex h-10 w-10 items-center justify-center text-gray-900 md:hidden dark:text-gray-200">
         <button
           onClick={toggleDrawer}
           style={{
-            color: theme === 'light' ? 'currentColor' : '#ffffff',
+            color: theme === "light" ? "currentColor" : "#ffffff",
           }}
         >
           <Menu />
         </button>
       </div>
 
       <Drawer
-        title={<span style={{ color: theme === 'dark' ? '#fff' : '#000' }}>Menu</span>}
+        closeIcon={<X className={cn({ "text-white": theme === "dark" })} />}
+        title={
+          <div className="flex items-center justify-end gap-4 text-black">
+            <button
+              className={cn("border-none bg-transparent p-0 text-gray-900", {
+                "text-white": theme === "dark",
+              })}
+              onClick={toggleTheme}
+            >
+              {theme === "light" ? <Sun /> : <Moon />}
+            </button>
+            <a
+              href="https://github.com/sadanandpai/frontend-mini-challenges/"
+              target="blank"
+              className={cn("text-gray-900", {
+                "text-white": theme === "dark",
+              })}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
+                />
+              </svg>
+            </a>
+          </div>
+        }
         placement="right"
         closable={true}
         onClose={toggleDrawer}
         open={isDrawerOpen}
         width="50%"
-        className={theme === 'dark' ? styles.darkDrawer : ''}
-        style={{ background: theme === 'dark' ? '#192841' : '#fff' }}
+        style={{ background: theme === "dark" ? "#192841" : "#fff" }}
       >
-        <div className={styles.drawerContent}>
-          <ul className={styles.drawerList}>
+        <div className="p-4">
+          <ul className="m-0 flex list-none flex-col gap-4 p-0">
             {React.Children.map(children, (child, index) => (
-              <li key={index} className={styles.drawerListItem}>
+              <li
+                key={index}
+                className={cn("[&>a]:text-lg [&>a]:text-black", {
+                  "[&>a]:text-white": theme === "dark",
+                })}
+              >
                 {child}
               </li>
             ))}
           </ul>
-
-          <button className={styles.themeButton} onClick={toggleTheme}>
-            {theme === 'light' ? <Sun /> : <Moon />}
-          </button>
-          <a
-            href="https://github.com/sadanandpai/frontend-mini-challenges/"
-            target="blank"
-            className={styles.github}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
-              />
-            </svg>
-          </a>
         </div>
       </Drawer>
     </nav>

diff --git a/apps/host/src/components/modules/home/hero/hero.module.scss b/apps/host/src/components/modules/home/hero/hero.module.scss