navbar redesigned + added route to campaign/analytics from core features

src/components/Navbar.tsx

@@ -1,36 +1,113 @@
 import React from "react";
-import { AppBar, Toolbar, Typography, Button, Box } from "@mui/material";
-import { MenuOutlined } from "@ant-design/icons";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  Box,
+  IconButton,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Menu,
+  MenuItem,
+} from "@mui/material";
+import { MenuOutlined, UserOutlined } from "@ant-design/icons";
 import { Link } from "react-router-dom";
+import { useState } from "react";
+import Logo from "../assets/LogoSite.png";
 
 const Navbar: React.FC = () => {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const drawer = (
+    <Box
+      onClick={handleDrawerToggle}
+      sx={{ textAlign: "center", backgroundColor: "black", height: "100%" }}
+    >
+      <Typography
+        variant="h5"
+        sx={{ color: "#FACC15", fontWeight: "bold", py: 2 }}
+      >
+        SponsoHive
+      </Typography>
+      <List>
+        <ListItem disablePadding>
+          <ListItemButton component={Link} to="/">
+            <ListItemText primary="Home" sx={{ color: "#FACC15" }} />
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton component={Link} to="/login">
+            <ListItemText primary="Login" sx={{ color: "#FACC15" }} />
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton component={Link} to="/signup">
+            <ListItemText primary="Sign Up" sx={{ color: "#FACC15" }} />
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </Box>
+  );
+
   return (
     <AppBar
       position="sticky"
+
+      style={{ backgroundColor: "black", color: "#FACC15" }}
+
       style={{
         backgroundColor: "black",
         color: "#FACC15",
         width: "100%", // Ensures full width
         margin: 0,
         boxSizing: "border-box",
       }}
+
       className="shadow-lg"
     >
-      <Toolbar className="flex justify-between items-center px-6 md:px-16">
+      <Toolbar className="flex justify-between items-center px-4 md:px-16">
         {/* Left Section */}
         <Box className="flex items-center space-x-4">
-          <MenuOutlined className="text-yellow-500 text-2xl cursor-pointer" />
-          <Typography
-            variant="h5"
-            component="div"
-            className="text-yellow-500 font-bold text-xl md:text-2xl"
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            onClick={handleDrawerToggle}
+            className="md:hidden"
           >
-            Sponsorship Platform
-          </Typography>
+            <MenuOutlined className="text-yellow-500 text-2xl" />
+          </IconButton>
+          <img
+            src={Logo}
+            alt="Logo"
+            style={{ height: "40px" }}
+            className="hidden md:block"
+          />
+          <h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-600 via-yellow-500 to-yellow-400">
+            SponsoHive
+          </h1>
         </Box>
 
-        {/* Right Section: Navigation Buttons */}
-        <Box className="flex space-x-4 items-center">
+        {/* Right Section */}
+        <Box className="hidden md:flex space-x-4 items-center">
           <Link to="/">
             <Button
               className="text-yellow-300 hover:text-yellow-500"
@@ -39,45 +116,46 @@ const Navbar: React.FC = () => {
               Home
             </Button>
           </Link>
-          <Link to="/dashboard/analytics">
-            <Button
-              className="text-yellow-300 hover:text-yellow-500"
-              variant="text"
-            >
-              Analytics
-            </Button>
-          </Link>
-          <Link to="/dashboard/campaign">
-            <Button
-              className="text-yellow-300 hover:text-yellow-500"
-              variant="text"
-            >
-              Campaigns
-            </Button>
-          </Link>
-          <Link to="/login">
-            <Button
-              variant="outlined"
-              className="text-yellow-500 border-yellow-500 hover:bg-yellow-500 hover:text-black"
-            >
+          <IconButton
+            color="inherit"
+            aria-label="user-profile"
+            className="text-yellow-500 hover:text-yellow-300"
+            onClick={handleMenuClick}
+          >
+            <UserOutlined className="text-2xl" />
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleMenuClose}
+            anchorOrigin={{ vertical: "top", horizontal: "right" }}
+            transformOrigin={{ vertical: "top", horizontal: "right" }}
+          >
+            <MenuItem component={Link} to="/login" onClick={handleMenuClose}>
               Login
-            </Button>
-          </Link>
-          <Link to="/signup">
-            <Button
-              variant="contained"
-              style={{
-                backgroundColor: "#FACC15",
-                color: "black",
-                fontWeight: "bold",
-              }}
-              className="hover:bg-yellow-400"
-            >
+            </MenuItem>
+            <MenuItem component={Link} to="/signup" onClick={handleMenuClose}>
               Sign Up
-            </Button>
-          </Link>
+            </MenuItem>
+          </Menu>
         </Box>
       </Toolbar>
+      <Drawer
+        anchor="left"
+        open={mobileOpen}
+        onClose={handleDrawerToggle}
+        ModalProps={{
+          keepMounted: true, // Better open performance on mobile.
+        }}
+        sx={{
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: 240,
+          },
+        }}
+      >
+        {drawer}
+      </Drawer>
     </AppBar>
   );
 };

src/pages/Home.tsx

@@ -2,12 +2,12 @@ import React from "react";
 import { LoginButton } from "../components/LoginButton";
 import { Layout, Row, Col, Card } from "antd";
 import { Button, Box } from "@mui/material";
+import { Link } from "react-router-dom"; // Import Link
 import BGimg from "../assets/cardBG.jpg";
 import Nav_Img from "../assets/main-image.jpg";
-import Navbar from "../components/Navbar"; 
+import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 
-
 const { Content } = Layout;
 
 const coreFeatures = [
@@ -180,12 +180,32 @@ const Home: React.FC = () => {
                     </Box>
                     <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
                     <p className="text-sm mb-4">{feature.description}</p>
-                    <Button
-                      variant="contained"
-                      style={{ backgroundColor: "#FACC15", color: "black" }}
-                    >
-                      Learn More
-                    </Button>
+                    {feature.title === "Email Campaign Automation" ? (
+                      <Link to="/dashboard/campaign" style={{ textDecoration: "none" }}>
+                        <Button
+                          variant="contained"
+                          style={{ backgroundColor: "#FACC15", color: "black" }}
+                        >
+                          Learn More
+                        </Button>
+                      </Link>
+                    ) : feature.title === "Performance Analytics" ? (
+                      <Link to="/dashboard/analytics" style={{ textDecoration: "none" }}>
+                        <Button
+                          variant="contained"
+                          style={{ backgroundColor: "#FACC15", color: "black" }}
+                        >
+                          Learn More
+                        </Button>
+                      </Link>
+                    ) : (
+                      <Button
+                        variant="contained"
+                        style={{ backgroundColor: "#FACC15", color: "black" }}
+                      >
+                        Learn More
+                      </Button>
+                    )}
                   </Card>
                 </Col>
               ))}