Merge pull request #18 from Saulul/saul-footer

homepage harmony and responsiveness update

src/components/Banner.jsx

@@ -1,16 +1,34 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 
-const Banner = () => (
-    <div className="flex overflow-hidden relative flex-col px-9 py-12 mt-8 w-full min-h-[596px] max-md:px-5 max-md:max-w-full">
-        <img
-            loading="lazy"
-            srcSet="/assets/home-banner.png"
-            className="object-cover absolute inset-0 size-full"
-        />
-        <div className="relative self-center mt-16 ml-14 text-6xl font-bold text-center text-white uppercase max-md:mt-10 max-md:max-w-full max-md:text-4xl">
-            Made for those <br />
-            who do
+const Banner = () => {
+    const [image, setImage] = useState("/assets/home-banner.png");
+    const [text, setText] = useState("Made for those who do");
+
+    useEffect(() => {
+        const images = ["/assets/home-banner-1.png", "/assets/home-banner-2.png", "/assets/home-banner-3.png"];
+        const texts = ["Made for those who do", "Made for the proud", "Made for the first timers"];
+        const randomIndex = Math.floor(Math.random() * images.length);
+        setImage(images[randomIndex]);
+        setText(texts[randomIndex]);
+    }, []);
+
+    return (
+        <div
+            className="flex overflow-hidden relative flex-col px-9 py-12 mt-8 w-full min-h-[596px] max-md:px-5 max-md:max-w-full">
+            <img
+                loading="lazy"
+                srcSet={image}
+                className="object-cover absolute inset-0 size-full"
+                alt={"banner"}/>
+            <div
+                className="relative self-center mt-16 ml-14 text-6xl font-bold text-center text-white uppercase max-md:mt-10 max-md:max-w-full max-md:text-4xl"
+                style={{
+                    textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)'
+                }}>
+                {text}
+            </div>
         </div>
-    </div>
-);
+    );
+};
+
 export default Banner;

src/components/Footer.jsx

@@ -5,7 +5,6 @@ import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link"; // For navigation links
-import Divider from "@mui/material/Divider";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import FacebookIcon from '@mui/icons-material/Facebook';
 import TwitterIcon from '@mui/icons-material/Twitter';
@@ -44,13 +43,17 @@ const Footer = () => (
       <Grid container spacing={4} justifyContent="space-between">
           {/* Title */}
           <Grid item xs={12} sm={6} md={3}>
-            <Typography variant="h5" fontWeight="bold" color="text.primary" className="text-zinc-400">
+            <Typography variant="h5" fontWeight="bold" className="text-zinc-400">
               Event<span className="text-zinc-500">Hive</span>
             </Typography>
           </Grid>
 
           {/* Subscription */}
-          <Grid item xs={12} sm={6} md={4}>
+        <Grid item xs={12} sm={6} md={4}>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Typography variant="body1" sx={{ mb: 2 }}>
+              Subscribe to our newsletter
+            </Typography>
             <Box sx={{ display: "flex", flexWrap: "wrap" }}>
               <TextField
                   label="Enter your email"
@@ -62,7 +65,8 @@ const Footer = () => (
                 Subscribe
               </Button>
             </Box>
-          </Grid>
+          </Box>
+        </Grid>
 
           {/* Navigation Links */}
           <Grid item xs={12} md={2}>

src/components/Header.jsx

@@ -1,15 +1,15 @@
 // Header.jsx (W20017851 - auth)
 // Header component, aware of the user's authentication status.
 
-import React, { useState, useEffect } from "react";
+import React, {useState, useEffect} from "react";
 import {
-  Button,
-  Menu,
-  MenuItem,
-  ListItemIcon,
-  Typography,
+    Button,
+    Menu,
+    MenuItem,
+    ListItemIcon,
+    Typography,
 } from "@mui/material";
-import { Link, useNavigate } from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
@@ -25,24 +25,24 @@ const Header = () => {
   const [openSnackbar, setOpenSnackbar] = useState(false);
   const open = Boolean(anchorEl);
 
-  const isLoggedIn = () => {
-    return localStorage.getItem("jwt") !== null;
-  };
+    const isLoggedIn = () => {
+        return localStorage.getItem("jwt") !== null;
+    };
 
-  const handleLogout = () => {
-    localStorage.removeItem("jwt");
-    setUserFirstName("");
-    navigate("/");
+    const handleLogout = () => {
+        localStorage.removeItem("jwt");
+        setUserFirstName("");
+        navigate("/");
     setOpenSnackbar(true); // Show the Snackbar
   };
 
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
 
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
 
   const handleCloseSnackbar = (event, reason) => {
     if (reason === "clickaway") {
@@ -75,103 +75,113 @@ const Header = () => {
       }
     };
 
-    if (isLoggedIn()) {
-      fetchUserData();
-    }
-  }, []);
+        if (isLoggedIn()) {
+            fetchUserData();
+        }
+    }, []);
 
-  return (
-    <div className="flex gap-5 justify-between px-5 w-full max-w-[1200px] max-md:flex-wrap max-md:max-w-full">
-      <div className="flex-auto text-4xl font-bold text-zinc-400">
-        Event<span className="text-zinc-500">Hive</span>
-      </div>
-      <div className="flex gap-5 justify-between text-base whitespace-nowrap">
-        {isLoggedIn() ? (
-          <>
-            <Button
-              variant="text"
-              color="primary"
-              onClick={handleClick}
-              sx={{ textTransform: "none", fontWeight: "bold" }}
-              startIcon={<AccountCircleIcon />}
-            >
-              {userFirstName || "Profile"}
-            </Button>
-            <Menu
-              anchorEl={anchorEl}
-              open={open}
-              onClose={handleClose}
-              MenuListProps={{
-                "aria-labelledby": "basic-button",
-              }}
-            >
-              <MenuItem
-                onClick={() => {
-                  navigate("/events");
-                  handleClose();
-                }}
-              >
-                <ListItemIcon>
-                  <FavoriteIcon fontSize="small" />
-                </ListItemIcon>
-                <Typography variant="inherit">My Events</Typography>
-              </MenuItem>
-              <MenuItem
-                onClick={() => {
-                  navigate("/tickets");
-                  handleClose();
-                }}
-              >
-                <ListItemIcon>
-                  <ConfirmationNumberIcon fontSize="small" />
-                </ListItemIcon>
-                <Typography variant="inherit">My Tickets</Typography>
-              </MenuItem>
-            </Menu>
-            <Button
-              variant="contained"
-              color="secondary"
-              sx={{ backgroundColor: "#b44646", color: "white" }}
-              onClick={handleLogout}
+    return (
+        <div className="flex gap-5 justify-between px-5 w-full max-w-[1200px] max-md:flex-wrap max-md:max-w-full">
+            <div className="flex-auto text-4xl font-bold text-zinc-400">
+                Event<span className="text-zinc-500">Hive</span>
+            </div>
+            <div className="flex gap-5 justify-between text-base whitespace-nowrap">
+                {isLoggedIn() ? (
+                    <>
+                        <Button
+                            variant="text"
+                            color="primary"
+                            onClick={handleClick}
+                            sx={{textTransform: "none", fontWeight: "bold"}}
+                            startIcon={<AccountCircleIcon/>}
+                        >
+                            {userFirstName || "Profile"}
+                        </Button>
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={open}
+                            onClose={handleClose}
+                            MenuListProps={{
+                                "aria-labelledby": "basic-button",
+                            }}
+                        >
+                            <MenuItem
+                                onClick={() => {
+                                    navigate("/events");
+                                    handleClose();
+                                }}
+                            >
+                                <ListItemIcon>
+                                    <FavoriteIcon fontSize="small"/>
+                                </ListItemIcon>
+                                <Typography variant="inherit">My Events</Typography>
+                            </MenuItem>
+                            <MenuItem
+                                onClick={() => {
+                                    navigate("/tickets");
+                                    handleClose();
+                                }}
+                            >
+                                <ListItemIcon>
+                                    <ConfirmationNumberIcon fontSize="small"/>
+                                </ListItemIcon>
+                                <Typography variant="inherit">My Tickets</Typography>
+                            </MenuItem>
+                        </Menu>
+                        <Button
+                            variant="contained"
+                            color="secondary"
+                            sx={{
+                                textTransform: "none",
+                                backgroundColor: "primary.main", color: "white", "&:hover": {
+                                    backgroundColor: "primary.dark",
+                                },
+                            }}
+                            onClick={handleLogout}
+                        >
+                            Sign Out
+                        </Button>
+                    </>
+                ) : (
+                    <>
+                        <Link to="/login">
+                            <Button variant="text" color="primary" sx={{textTransform: "none"}}>
+                                Log In
+                            </Button>
+                        </Link>
+                        <Link to="/register">
+                            <Button
+                                variant="contained"
+                                sx={{
+                                    textTransform: "none",
+                                    backgroundColor: "primary.main", color: "white", "&:hover": {
+                                        backgroundColor: "primary.dark",
+                                    },
+                                }}
+                                onClick={handleLogout}
+                            >
+                                Sign Up
+                            </Button>
+                        </Link>
+                    </>
+                )}
+            </div>
+            <Snackbar
+                open={openSnackbar}
+                autoHideDuration={6000}
+                onClose={handleCloseSnackbar}
+                anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
             >
-              Sign Out
-            </Button>
-          </>
-        ) : (
-          <>
-            <Link to="/login">
-              <Button variant="text" color="primary">
-                Login
-              </Button>
-            </Link>
-            <Link to="/register">
-              <Button
-                variant="contained"
-                sx={{ backgroundColor: "grey", color: "white" }}
-                onClick={handleLogout}
-              >
-                Signup
-              </Button>
-            </Link>
-          </>
-        )}
-      </div>
-      <Snackbar
-        open={openSnackbar}
-        autoHideDuration={6000}
-        onClose={handleCloseSnackbar}
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-      >
-        <Alert
-          onClose={handleCloseSnackbar}
-          severity="success"
-          sx={{ width: "100%" }}
-        >
-          You have been logged out successfully
-        </Alert>
-      </Snackbar>
-    </div>
-  );
+                <Alert
+                    onClose={handleCloseSnackbar}
+                    severity="success"
+                    sx={{ width: "100%" }}
+                >
+                    You have been logged out successfully
+                </Alert>
+            </Snackbar>
+        </div>
+    );
 };
 
 export default Header;

src/components/Homepage.jsx

@@ -6,7 +6,7 @@ import EventCard from "./EventCard";
 import LoadMoreButton from "./LoadMoreButton";
 import WideBanner from "./WideBanner";
 import Footer from "./Footer";
-import {Grid} from "@mui/material";
+import {Container, Grid} from "@mui/material";
 
 function Homepage(props) {
     const [events, setEvents] = useState([]);
@@ -60,12 +60,13 @@ function Homepage(props) {
             <Banner/>
             <SearchFilters/>
 
-
-            <Grid container spacing={2} alignItems="stretch" sx={{pr: 2, pl:2}}>
-                {events.map((event, index) => (
-                    <EventCard key={index} {...event} />
-                ))}
-            </Grid>
+            <Container sx={{ '@media (min-width:1535px)': { maxWidth: '75%' } }}>
+                <Grid container spacing={2} alignItems="stretch" sx={{pr: 2, pl:2}}>
+                    {events.map((event, index) => (
+                        <EventCard key={index} {...event} />
+                    ))}
+                </Grid>
+            </Container>
 
             <LoadMoreButton onClick={() => console.log("View more...")}/>
             <WideBanner/>