Merge pull request #78 from Cassianky/angely-homepage-testimonials

[Client/Vendor] Homepage updates (testimonial, landing)

admin-frontend/src/components/testimonial/ManageTestimonials.jsx

@@ -24,6 +24,7 @@ function ManageTestimonials() {
   const handleToggle = async (testimonialId) => {
     try {
       await toggleTestimonialVisibility(testimonialId);
+      openSnackbar(`Toggled testimonial successfully.`, "success")
     } catch (error) {
       console.error(error);
       openSnackbar("An error occurred", "error");

admin-frontend/src/components/testimonial/TestimonialsTable.jsx

@@ -137,7 +137,7 @@ const TestimonialsTable = ({ testimonials, handleToggle }) => {
 
   return (
     <Box>
-      <div style={{ height: 500, width: "99%" }}>
+      <div style={{ height: 800, width: "99%"}}>
         <DataGrid
           initialState={{
             pagination: {

client-frontend/src/components/Home/ClientTestimonial.jsx

@@ -0,0 +1,64 @@
+import { FormatQuote } from "@mui/icons-material";
+import {
+  Box,
+  Card,
+  CardContent,
+  Paper,
+  Typography,
+  styled,
+} from "@mui/material";
+import React from "react";
+
+const StyledPaper = styled(Paper)`
+  padding: 10px;
+  padding-top: 6px;
+  width: 500px;
+  border-radius: 10px;
+  border: 1px solid rgb(159, 145, 204);
+  box-shadow: 3px 3px 0px 0px rgb(159, 145, 204, 40%);
+`;
+function ClientTestimonial({ testimonial }) {
+  return (
+    <StyledPaper>
+      <Card elevation={0}>
+        <CardContent>
+          <FormatQuote
+            color="primary"
+            sx={{
+              fontSize: "3rem",
+              transform: "scaleX(-1)",
+            }}
+          />
+
+          <div
+            style={{
+              height: "200px",
+              overflowY: "auto",
+
+              overflowWrap: "break-word",
+            }}
+          >
+            <Typography
+              variant="h6"
+              align="center"
+              sx={{
+                lineHeight: 1.2,
+                textAlign: "justify",
+                fontSize: "1.3rem",
+                padding: 2,
+              }}
+            >
+              {testimonial.testimonialBody}
+            </Typography>
+          </div>
+
+          <Typography variant="body1" align="center" paddingTop={2}>
+            - {testimonial.displayName}, {testimonial.clientName}
+          </Typography>
+        </CardContent>
+      </Card>
+    </StyledPaper>
+  );
+}
+
+export default ClientTestimonial;

client-frontend/src/components/Home/TestimonialSection.jsx

@@ -0,0 +1,121 @@
+import { Container, Stack, Typography } from "@mui/material";
+import { useEffect } from "react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/autoplay";
+import "swiper/css/pagination";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import useSnackbarStore from "../../zustand/SnackbarStore";
+import { useTestimonialStore } from "../../zustand/TestimonialStore";
+import ClientTestimonial from "./ClientTestimonial";
+
+function TestimonialSection() {
+  const { testimonials, getAllTestimonials } = useTestimonialStore();
+  const { openSnackbar } = useSnackbarStore();
+  const testimonialsPerSlide = 3;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        await getAllTestimonials();
+      } catch (err) {
+        console.error(err);
+        openSnackbar("Error when retrieving testimonials.", "error");
+      }
+    };
+    fetchData();
+  }, [getAllTestimonials]);
+
+  if (testimonials.length === 0) return <></>;
+
+  function TestimonialSwiper() {
+    return (
+      <Swiper
+        maxWidth="fit-content"
+        slidesPerView={3}
+        autoplay={{
+          delay: 6000,
+          disableOnInteraction: true,
+          pauseOnMouseEnter: true
+        }}
+
+        speed={1200}
+        spaceBetween={30}
+        // pagination={{
+        //   clickable: true,
+        // }}
+        navigation={true}
+        modules={[Pagination, Navigation, Autoplay]}
+        className="mySwiper"
+        style={{
+          boxShadow: "none",
+          padding: 30,
+          backgroundColor: "transparent",
+        }}
+        breakpoints={{
+          600: {
+            slidesPerView: 2,
+          },
+          960: {
+            slidesPerView: 3,
+          },
+        }}
+      >
+        {testimonials.map((testimonial, index) => (
+          <SwiperSlide
+            key={index}
+            style={{
+              display: "flex",
+              position: "relative",
+              padding: "10px",
+              boxSizing: "border-box",
+              backgroundColor: "transparent",
+            }}
+          >
+            <ClientTestimonial
+              key={testimonial._id}
+              testimonial={testimonial}
+              style={{}}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    );
+  }
+  function TestimonialGrid() {
+    return (
+      <Stack spacing={5} justifyContent="center" direction={"row"} width="100%">
+        {testimonials.map((testimonial) => (
+          <>
+            <ClientTestimonial testimonial={testimonial} />
+          </>
+        ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Container
+      maxWidth="xl"
+      sx={{
+        width: "100%",
+        maxWidth: "80vw",
+        height: "100%",
+        paddingTop: 5,
+      }}
+    >
+      <Typography
+        variant="h4"
+        gutterBottom
+        py={6}
+        sx={{ fontSize: "2rem", textAlign: "center" }}
+      >
+        What our clients say
+      </Typography>
+      {testimonials.length < 3 ? <TestimonialGrid /> : <TestimonialSwiper />}
+    </Container>
+  );
+}
+
+export default TestimonialSection;

client-frontend/src/components/Recommendation/FeatureSection.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import useClientStore from "../../zustand/ClientStore";
+import useVendorStore from "../../zustand/VendorStore";
+import { Container } from "@mui/material";
+
+function FeatureSection() {
+  const { authenticated } = useClientStore();
+  const { vendorAuthenticated } = useVendorStore();
+  if (!authenticated) return <></>;
+  return (
+    <Container
+      maxWidth="xl"
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: "3rem",
+      }}
+    >
+      Insert Featured Activities Here 
+    </Container>
+  );
+}
+
+export default FeatureSection;

client-frontend/src/containers/HomePage.jsx

@@ -1,10 +1,105 @@
 import React from "react";
+import {
+  Button,
+  Container,
+  Typography,
+  Box,
+  Paper,
+  Grid,
+  Stack,
+} from "@mui/material";
 
-const HomePage = (props) => {
+import image from "../assets/NatureOnScreen.png";
+import useClientStore from "../zustand/ClientStore";
+import useVendorStore from "../zustand/VendorStore";
+import TestimonialSection from "../components/Home/TestimonialSection";
+import FeatureSection from "../components/Recommendation/FeatureSection";
+
+const ImageSection = () => {
+  const { authenticated } = useClientStore();
+  const { vendorAuthenticated } = useVendorStore();
+
+  return (
+    <Container
+      maxWidth="xl"
+
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingY: "5rem",
+
+      }}
+    >
+      <Grid container spacing={3}>
+        <Grid
+          item
+          xs={12}
+          md={6}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            variant="h2"
+            gutterBottom
+            sx={{ fontWeight: 800, fontSize: "3rem" }}
+          >
+            Platform for Sustainability and Wellness Employee Activities.
+          </Typography>
+
+          <Typography
+            variant="subtitle1"
+            paragraph
+            sx={{ fontWeight: 200, fontSize: "1.2rem" }}
+          >
+            Book or post employee engagement activities on Gleek. Explore
+            sustainable activities and improve employee wellbeing.
+          </Typography>
+          {!authenticated && !vendorAuthenticated && (
+            <Stack direction="row" spacing={2}>
+              <Button
+                variant="contained"
+                color="primary"
+                size="large"
+                href="/register"
+              >
+                Get Started as a Client
+              </Button>
+              <Button
+                variant="outlined"
+                color="primary"
+                size="large"
+                href="/vendor/register"
+              >
+                Get Started as a Vendor
+              </Button>
+            </Stack>
+          )}
+        </Grid>
+
+        <Grid item xs={12} md={6}>
+          <img
+            src={image}
+            alt="NatureOnScreen"
+            style={{ width: "100%", height: "auto" }}
+          />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+const HomePage = () => {
   return (
-    <div>
-      <h1>HOMEPAGE</h1>
-    </div>
+    <>
+      <Container elevation={0} maxWidth>
+        <FeatureSection/>
+        {<ImageSection />}
+        <TestimonialSection />
+      </Container>
+    </>
   );
 };
 

client-frontend/src/zustand/BlockoutStore.js

@@ -17,6 +17,7 @@ const useBlockoutStore = create((set) => ({
 
       set({ isLoadingactivitiesWithBlockouts: false, activitiesWithBlockouts });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -30,6 +31,7 @@ const useBlockoutStore = create((set) => ({
 
       set({ isLoadingBlockoutsForActivity: false, blockoutsForActivity });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -56,6 +58,7 @@ const useBlockoutStore = create((set) => ({
         activitiesWithBlockouts: activities,
       });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -73,6 +76,7 @@ const useBlockoutStore = create((set) => ({
       const blockoutsForActivity = response.data.blockedTimeslots;
       set({ isLoadingBlockoutsForActivity: false, blockoutsForActivity });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -91,6 +95,7 @@ const useBlockoutStore = create((set) => ({
       const blockoutsForActivity = response.data.blockedTimeslots;
       set({ isLoadingBlockoutsForActivity: false, blockoutsForActivity });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },