No style

package.json

@@ -10,7 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-google-maps/api": "^2.20.3",
+    "axios": "^1.7.7",
+    "chart.js": "^4.4.6",
+    "firebase": "^10.14.1",
+    "firebaseui": "^6.1.0",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0"

src/App.jsx

@@ -3,31 +3,44 @@ import Navbar from './components/Navbar';
 import FeaturedItem from './components/FeaturedItem';
 import Dashboard from './components/Dashboard';
 import ActivityPage from './pages/ActivityPage';
-import RSVPPage from './pages/RSVPPage';
 import MapPage from './pages/MapPage';
+import LoginPage from './pages/LoginPage';
+import RegisterPage from './pages/RegisterPage';
+import LandingPage from './pages/LandingPage';
+import { AuthProvider } from './contexts/authContext';
+import PrivateRoute from './components/PrivateRoute';
 
 function App() {
     return (
-        <Router>
-            <Navbar />
-            <Routes>
-                {/* Home route displaying Navbar, FeaturedItem, and Dashboard */}
-                <Route 
-                    path="/" 
-                    element={
-                        <>
-                            <FeaturedItem />
-                            <Dashboard />
-                        </>
-                    } 
-                />
-                {/* Browse route displaying Navbar and BrowsePage */}
-                <Route path="/map" element={<MapPage />} />
-                <Route path="/rsvp" element={<RSVPPage />} />
-                <Route path="/activity" element={<ActivityPage />} />
-            </Routes>
-        </Router>
+        <AuthProvider>
+            <Router>
+                <Routes>
+                    {/* Landing Page at Root Path */}
+                    <Route path="/" element={<LandingPage />} />
+
+                    {/* Protected Routes */}
+                    <Route 
+                        path="/home" 
+                        element={
+                            <PrivateRoute>
+                                <>
+                                    <Navbar />
+                                    <FeaturedItem />
+                                    <Dashboard />
+                                </>
+                            </PrivateRoute>
+                        } 
+                    />
+                    <Route path="/map" element={<PrivateRoute><MapPage /></PrivateRoute>} />
+                    <Route path="/activity" element={<PrivateRoute><ActivityPage /></PrivateRoute>} />
+
+                    {/* Public Routes */}
+                    <Route path="/login" element={<LoginPage />} />
+                    <Route path="/register" element={<RegisterPage />} />
+                </Routes>
+            </Router>
+        </AuthProvider>
     );
 }
 
-export default App;
+export default App;

src/components/Card.jsx

@@ -4,28 +4,28 @@ function Card(props) {
     return (
         <div className="p-4">
             {/* Card Container with a Gradient Border */}
-            <div className="relative h-full w-full max-w-xs rounded-2xl border-2 border-transparent bg-gradient-to-br from-pastelblue to-pastelgreen p-1 shadow-lg transition duration-300 hover:shadow-2xl">
+            <div className="relative h-full w-full max-w-xs rounded-2xl border-2 p-1">
                 {/* Inner Box */}
-                <div className="h-full w-full rounded-2xl bg-white p-4 transition duration-300 hover:scale-105">
+                <div className="h-full w-full rounded-2xl p-4">
                     {/* Image */}
                     <img
-                        className="mx-auto my-4 h-40 w-full rounded-xl object-cover shadow-md"
+                        className="mx-auto my-4 h-40 w-full object-cover"
                         src={props.img}
                         alt=""
                     />
                     {/* Text Content */}
                     <div className="space-y-3">
                         {/* Title */}
-                        <h1 className="poppins-semibold text-xl text-darkblue">{props.name}</h1>
+                        <h1 className="">{props.name}</h1>
 
-                        <div className="inter-regular text-sm flex py-1 text-gray-500">
+                        <div className="flex py-1">
                             <p>Bringing: {props.bringing}</p>
                         </div>
 
-                        {/* Status and Button */}
+                        {/* Status */}
                         <div className="flex justify-between items-center">
                             {/* Status */}
-                            <p className="inter-semibold text-sm text-emerald-500">
+                            <p className="">
                                 {props.status}
                             </p>
                         </div>

src/components/Dashboard.jsx

@@ -1,20 +1,32 @@
-import { useState } from 'react';
-import data from '../data/data.json';
+import { useState, useEffect } from 'react';
+import { collection, getDocs } from 'firebase/firestore';
+import { db } from '../firebase/firebase';
 import Card from './Card';
 
 function Dashboard() {
-    // State to store items, initialized with data from JSON file
-    const [items, setItems] = useState(data);
+    const [items, setItems] = useState([]); // Empty array to hold Firebase data
+
+    // Function to fetch invitee data from Firestore
+    const fetchData = async () => {
+        try {
+            const querySnapshot = await getDocs(collection(db, "invitees"));
+            const dataArray = querySnapshot.docs.map(doc => doc.data());
+            setItems(dataArray); // Set the state with the data from Firestore
+        } catch (error) {
+            console.error("Error fetching data: ", error);
+        }
+    };
+
+    // UseEffect to call fetchData when component loads
+    useEffect(() => {
+        fetchData();
+    }, []);
 
     return (
         <div className="relative my-12 flex flex-col items-center">
             {/* TITLE */}
-            <h1 className="poppins-bold flex-row text-2xl">Who's Invited?</h1>
-            <hr className="mb-4 mt-2 w-1/3 border-black" />
-
-            {/* Glow Effects */}
-            <div className="absolute top-20 left-10 h-32 w-32 animate-pulse rounded-full bg-pastelgreen opacity-50 blur-lg"></div>
-            <div className="absolute bottom-20 right-20 h-40 w-40 animate-pulse rounded-full bg-pastelblue opacity-50 blur-lg"></div>
+            <h1 className="flex-row">Who's Invited?</h1>
+            <hr className="mb-4 mt-2 w-1/3" />
 
             {/* Event List Grid */}
             <div className="relative z-10 grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -24,7 +36,6 @@ function Dashboard() {
                         key={index}
                         name={item.name}
                         img={item.img}
-                        date={item.date}
                         status={item.status}
                         bringing={item.bringing}
                     />
@@ -34,4 +45,4 @@ function Dashboard() {
     );
 }
 
-export default Dashboard;
+export default Dashboard;

src/components/FeaturedItem.jsx

@@ -4,49 +4,44 @@ function FeaturedItem() {
     return (
         <div className="mx-auto flex w-screen max-w-screen-lg flex-col items-center py-10">
             {/* TITLE */}
-            <h1 className="poppins-bold text-4xl text-darkgreen">Your Picnic</h1>
-            <hr className="mb-6 mt-4 w-1/3 border-pastelgreen" />
+            <h1 className="text-4xl">Your Picnic</h1>
+            <hr className="mb-6 mt-4 w-1/3" />
 
             {/* BOX */}
-            <div className="relative mx-auto flex h-fit w-fit flex-col rounded-3xl border-2 border-transparent bg-gradient-to-r from-pastelblue to-pastelgreen p-1 shadow-2xl">
+            <div className="relative mx-auto flex h-fit w-fit flex-col p-1">
                 {/* Inner White Box with Shadow */}
-                <div className="rounded-3xl bg-white p-8 shadow-inner transition duration-500 hover:scale-105 hover:shadow-2xl">
+                <div className="p-8">
                     <div className="flex items-center">
-                        {/* Item Image with Hover Effect */}
+                        {/* Location Image with Hover Effect */}
                         <img
-                            className="h-[300px] w-[450px] rounded-2xl object-cover shadow-md transition-transform duration-500 hover:rotate-3 hover:scale-110"
+                            className="h-[300px] w-[450px] object-cover"
                             src="/images/Texarkana.jpg"
                             alt="Used Bike"
                         />
 
                         {/* TEXT */}
                         <div className="ml-8 w-1/2 space-y-6">
-                            {/* Item Title */}
-                            <h1 className="poppins-extrabold text-3xl text-darkblue drop-shadow-lg">Lake Texarkana</h1>
-                            {/* Item Details */}
-                            <p className="inter-regular text-lg text-gray-600">
+                            {/* Location Title */}
+                            <h1 className="">Lake Texarkana</h1>
+                            {/* RSVP Details */}
+                            <p className="">
                                 4 Going | 3 Unsure
                             </p>
-                            {/* Item Description */}
-                            <p className="inter-regular text-darkgreen">
+                            {/* Picnic Description */}
+                            <p className="">
                                 Time for a day of relaxation on the lake. Bring a floatie and a swimsuit!
                             </p>
 
-                            {/* SELLING TYPE AND BUTTON */}
+                            {/* RSVP Status */}
                             <div className="flex justify-between items-center pt-4">
-                                <p className="poppins-bold text-2xl text-emerald-500">
+                                <p className="">
                                     Going
                                 </p>
-                                {/* Flashy Glowing Button */}
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-
-            {/* Floating Glow Effect */}
-            <div className="absolute top-20 left-10 h-32 w-32 animate-pulse rounded-full bg-pastelgreen opacity-50 blur-lg"></div>
-            <div className="absolute bottom-20 right-20 h-40 w-40 animate-pulse rounded-full bg-pastelblue opacity-50 blur-lg"></div>
         </div>
     );
 }

src/components/Navbar.jsx

@@ -1,41 +1,32 @@
 import React from 'react';
 import { PiBellSimpleRinging } from 'react-icons/pi';
 import { VscAccount } from 'react-icons/vsc';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 function Navbar() {
     return (
         <div>
             {/* Main navbar container */}
-            <div className="mx-auto flex flex-row items-center justify-between px-20 py-4 bg-pastelblue">
+            <div className="mx-auto flex flex-row items-center justify-between px-20 py-4">
                 {/* TITLE */}
-                <Link to="/" className="poppins-bold text-3xl text-darkgreen hover:text-pastelgreen transition duration-300">Ripple & Refresh</Link>
+                <Link to="/home" className="">Ripple & Refresh</Link>
 
                 {/* PAGES */}
-                <div className="poppins-semibold flex gap-8 py-2 text-2xl">
-                    <Link to="/map" className="text-darkblue hover:text-pastelgreen transition duration-300">
+                <div className="">
+                    <Link to="/map" className="">
                         map
                     </Link>
-                    <Link to="/rsvp" className="text-darkblue hover:text-pastelgreen transition duration-300">
-                        rsvp
-                    </Link>
-                    <Link to="/activity" className="text-darkblue hover:text-pastelgreen transition duration-300">
+                    <Link to="/activity" className="">
                         activity
                     </Link>
                 </div>
 
                 {/* ICONS */}
-                <div className="flex gap-12 py-2 text-darkgreen">
-                    {/* <Link to="/notifications" className="hover:text-pastelgreen transition duration-300">
-                        <PiBellSimpleRinging size={'2rem'} />
-                    </Link>
-                    <Link to="/account" className="hover:text-pastelgreen transition duration-300">
-                        <VscAccount size={'2rem'} />
-                    </Link> */ }
+                <div className="flex gap-12 py-2">
                 </div>
             </div>
             {/* Horizontal line separator */}
-            <hr className="w-full flex-row border-t-2 border-pastelgreen border-opacity-50"></hr>
+            <hr className="w-full flex-row"></hr>
         </div>
     );
 }

src/components/PrivateRoute.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../contexts/authContext';
+
+function PrivateRoute({ children }) {
+    const { user } = useAuth();  // Check if the user is logged in
+
+    // Redirect to LandingPage if not logged in
+    if (!user) {
+        return <Navigate to="/" />;  // Correct redirect for non-logged-in users
+    }
+
+    // Otherwise, render the child components
+    return children;
+}
+
+export default PrivateRoute;