Lots of changes and should've committed sooner but I added a bunch of new reusable components as well as started on the mobile header and sidebar.

src/components/MobileSidebar/MobileSidebar.tsx

@@ -0,0 +1,64 @@
+import { Button, IconButton } from "../"
+import {
+  XMarkIcon,
+  HomeIcon,
+  MagnifyingGlassIcon,
+  LightBulbIcon,
+  RocketLaunchIcon,
+  QuestionMarkCircleIcon,
+  ChatBubbleLeftIcon,
+} from "@heroicons/react/24/outline"
+
+export const MobileSidebar: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => (
+  <div
+    className={`fixed inset-0 z-50 bg-gray-600 bg-opacity-75 transition-opacity ${
+      isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+    }`}
+    onClick={onClose}
+  >
+    <div
+      className={`transform transition-transform ease-in-out ${
+        isOpen ? "translate-x-0 duration-500" : "-translate-x-full duration-500"
+      }`}
+    >
+      {/* Add your sidebar content here */}
+      <div className="h-screen w-64 flex-col bg-blue-500 p-4">
+        {/* Sidebar content goes here */}
+        <div className="flex items-center justify-between">
+          <h1 className="test-lg font-['Bienetresocial'] font-normal uppercase leading-5 text-white">SKILLTENSOR</h1>
+          <IconButton onClick={onClose} variant="light">
+            <XMarkIcon className="h-8 w-8" />
+          </IconButton>
+        </div>
+        <div className="mt-12 flex flex-col gap-8">
+          <Button variant="ghost" className="flex justify-start text-white">
+            <HomeIcon className="mr-2 h-4 w-4" />
+            <p>Home</p>
+          </Button>
+          <Button variant="ghost" className="flex hidden justify-start text-white">
+            <MagnifyingGlassIcon className="mr-2 h-4 w-4" />
+            <p>Topics</p>
+          </Button>
+          <Button variant="ghost" className="flex hidden justify-start text-white">
+            <LightBulbIcon className="mr-2 h-4 w-4" />
+            <p>Why Us</p>
+          </Button>
+          <Button variant="ghost" className="flex hidden justify-start text-white">
+            <RocketLaunchIcon className="mr-2 h-4 w-4" />
+            <p>Features</p>
+          </Button>
+          <Button variant="ghost" className="flex hidden justify-start text-white">
+            <QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
+            <p>FAQs</p>
+          </Button>
+          <Button variant="ghost" className="flex justify-start text-white">
+            <ChatBubbleLeftIcon className="mr-2 h-4 w-4" />
+            <p>ChatBot</p>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export default MobileSidebar