Project Done

package.json

@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "firebase": "^12.12.0",
+    "firebase": "^12.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.12.0",
     "react-router-dom": "^7.14.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"

src/App.js

@@ -1,15 +1,27 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import { AppProvider } from './context/AppContext';
+import ToastContainer from './components/ToastContainer';
 
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
+import Navbar from './components/Navbar';
+
+import Hero from './components/Hero';
+import HeadlineCards from './components/HeadlineCards';
+import Food from './components/Food';
+import Category from './components/Category';
 
 // Main page layout — all the existing components together
 function MainLayout() {
   return (
-    <div className='flex items-center justify-center h-screen bg-gray-100'>
-      <h1 className='text-4xl font-bold text-orange-600'>Welcome to HackUTD's Devday!</h1>
+    <div>
+      <Navbar />
+      <Hero />
+      <HeadlineCards />
+      <Food />
+      <Category />
+      <ToastContainer />
     </div>
   );
 }

src/components/Category.jsx

@@ -18,7 +18,18 @@ const Category = () => {
   }, []);
 
   return (
-    <div>
+    <div className='max-w-[1640px] m-auto px-4 py-12'>
+      <h1 className='text-red-600 font-bold text-4xl text-center'>
+        Eat What Makes You Happy
+      </h1>
+      <div className='grid grid-cols-2 md:grid-cols-4 gap-6 py-6'>
+        {categories.map((item, index) => (
+          <div key={index} className='bg-gray-100 rounded-lg p-4 flex flex-col items-center'>
+            <h2 clh2sName='font-bold sm:text-xl'>{item.name}</h2>
+            <img src = {item.image} alt = {item.name} className = 'w-20' />
+          </div>
+        ))}
+      </div>
     </div>
   );
 };