Feature/homepageediting

package.json

@@ -32,7 +32,8 @@
     "react-markdown": "^9.0.1",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-share": "^5.1.0"
+    "react-share": "^5.1.0",
+    "swiper": "^11.1.5"
   },
   "devDependencies": {
     "@capacitor/cli": "5.5.1",

src/components/AboutFutureVisionSections.tsx

@@ -8,52 +8,46 @@ import React from "react";
 
 export default function AboutFutureVisionSections() {
   return (
-    <div className="future-vision-container">
-      <div className="future-vision-header">
+    <div className="flex flex-col items-center justify-center p-5 bg-[#FFE2E2] min-h-screen box-border text-center text-base text-[#101066]">
+      <div className="text-5xl font-bold mb-8">
         <h1>FUTURE VISION</h1>
       </div>
-      <div className="future-vision-cards">
-        <IonCard className="future-vision-card">
-          <IonCardHeader>
-            <IonCardTitle>COLLABORATIVE CREATION</IonCardTitle>
+      <div className="container sm:px-2 md:px-12 px-36 mx-auto flex flex-col gap-5 w-19/20 box-border md:flex-row">
+        <IonCard className="flex-1 bg-white text-[#100f66] rounded-lg shadow-md pb-5 pl-0 pr-10 mb-0 ml-0">
+          <IonCardHeader className="text-left">
+            <IonCardTitle className="text-[#100f66] font-bold text-3xl mb-4">
+              COLLABORATIVE CREATION
+            </IonCardTitle>
           </IonCardHeader>
-          <IonCardContent>
-            <ul>
-              <li>
-                Opportunities for trainees in all disciplines to collaborate
-              </li>
-              <li>Create content for website and social media</li>
-            </ul>
+          <IonCardContent className="text-left text-xl mb-24">
+            Create opportunities for trainees in all disciplines to collaborate
+            and develop content for the website and social media.
           </IonCardContent>
         </IonCard>
-        <IonCard className="future-vision-card">
-          <IonCardHeader>
-            <IonCardTitle>COMMUNITY ENGAGEMENT</IonCardTitle>
+        <IonCard className="flex-1 bg-white text-[#100f66] rounded-lg shadow-md pb-5 pl-0 pr-10 mb-0 ml-0">
+          <IonCardHeader className="text-left">
+            <IonCardTitle className="text-[#100f66] font-bold text-3xl mb-4">
+              COMMUNITY ENGAGEMENT
+            </IonCardTitle>
           </IonCardHeader>
-          <IonCardContent>
-            <ul>
-              <li>
-                Design training toolkits to be used at schools and
-                community-based organizations
-              </li>
-              <li>
-                Engage with youth outside of the clinical setting and in the
-                community
-              </li>
-            </ul>
+          <IonCardContent className="text-left text-xl mb-24">
+            Design training toolkits to be used at schools and community-based
+            organizations to engage with youth outside of the clinical setting
+            and in the community.
           </IonCardContent>
         </IonCard>
-        <IonCard className="future-vision-card">
-          <IonCardHeader>
-            <IonCardTitle>NATIONAL LEADERSHIP</IonCardTitle>
+        <IonCard className="flex-1 bg-white text-[#100f66] rounded-lg shadow-md pb-5 pl-0 pr-10 mb-0 ml-0 ">
+          <IonCardHeader className="text-left">
+            <IonCardTitle className="text-[#100f66] font-bold text-3xl mb-4">
+              NATIONAL LEADERSHIP
+            </IonCardTitle>
           </IonCardHeader>
-          <IonCardContent>
-            <ul>
-              <li>
-                BMC Department of Psychiatry: National "go-to" resource for
-                mental health in diverse teens
-              </li>
-            </ul>
+          <IonCardContent className="text-left text-xl mb-24">
+            BMC Department of Psychiatry: <br />
+            National "go-to" resource for
+            <br />
+            mental health in diverse teens.
+            <br />
           </IonCardContent>
         </IonCard>
       </div>

src/components/AboutMissionSection.tsx

@@ -5,10 +5,9 @@ export default function AboutMissionSection() {
   return (
     <div>
       <div className="flex flex-col justify-center items-center bg-[#FFE2E2] min-h-screen px-12 md:px-0">
-        {/* <img className="w-full h-auto z-[10]" alt="union-1" src="red-union.svg" /> */}
         <div className="p-4 max-w-4xl w-full my-24">
-          <h1 className="text-[#101066] font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-none mb-4">
-            Mission Statement
+          <h1 className="text-[#101066] font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight text-center leading-none mb-4">
+            Our mission
           </h1>
           <br />
           <p className="text-[#101066] font-semibold text-base sm:text-lg md:text-xl lg:text-xl tracking-tight leading-tight mb-8">
@@ -56,6 +55,7 @@ export default function AboutMissionSection() {
             </div>
           </div>
         </div>
+        <img className="w-full h-auto z-[10]" alt="union-1" src="union-2.png" />
       </div>
     </div>
   );

src/components/AboutTeamProfiles.tsx

@@ -38,12 +38,12 @@ export default function AboutTeamProfiles() {
 
   return (
     <div>
-      <div className="flex flex-col justify-center items-center min-h-screen px-12 md:px-0">
+      <div className="flex flex-col justify-center items-center min-h-screen bg-[#ffffff] px-12 md:px-0">
         {/* <img className="w-full h-auto z-[10]" alt="union-1" src="red-union.svg" /> */}
         <div className="p-4 max-w-6xl w-full pt-36">
           <div className="flex flex-col items-start justify-center">
-            <h1 className="text-[#101066] font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-none mb-4">
-              Meet our team
+            <h1 className="text-[#101066] text-center font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-none mb-4">
+              Meet Our Team
             </h1>
           </div>
           <p className="text-[#101066] font-semibold text-base sm:text-lg md:text-xl lg:text-xl tracking-tight leading-tight mb-8">

src/components/Footer.tsx

@@ -56,25 +56,25 @@ const Footer = () => {
                 </h5>
                 <div className="flex gap-3">
                   <a
-                    className="flex font-medium items-center text-white hoverIcon"
+                    className="flex font-medium items-center text-blue-800 hoverIcon"
                     href="https://www.facebook.com/"
                   >
                     <IonIcon icon={logoFacebook} size="large" />
                   </a>
                   <a
-                    className="flex font-medium items-center text-white hoverIcon"
+                    className="flex font-medium items-center text-red-400 hoverIcon"
                     href="https://www.instagram.com/"
                   >
                     <IonIcon icon={logoInstagram} size="large" />
                   </a>
                   <a
-                    className="flex font-medium items-center text-white hoverIcon"
+                    className="flex font-medium items-center text-blue-400 hoverIcon"
                     href="https://www.twitter.com/"
                   >
                     <IonIcon icon={logoTwitter} size="large" />
                   </a>
                   <a
-                    className="flex font-medium items-center text-white hoverIcon"
+                    className="flex font-medium items-center text-blue-700 hoverIcon"
                     href="https://www.linkedin.com/"
                   >
                     <IonIcon icon={logoLinkedin} size="large" />

src/components/HelpInfographics.tsx

@@ -5,9 +5,9 @@ import RedGraphic from "./RedGraphic";
 export default function HelpInfographics() {
   return (
     <div className="flex flex-col md:flex-row w-full max-w-7xl px-8 my-28 mx-auto gap-16">
+      <RedGraphic />
       <BlueGraphic />
       <PinkGraphic />
-      <RedGraphic />
     </div>
   );
 }

src/components/ImageSlideshow.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect } from "react";
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonIcon,
+} from "@ionic/react";
+import { arrowForwardOutline } from "ionicons/icons";
+
+// Type definition for the slide component
+type SlideComponent = {
+  background: string;
+  description: string;
+};
+
+// Get the token from environment variables
+const token = import.meta.env.VITE_STRAPY_TOKEN;
+
+export default function ImageSlideshow() {
+  const [slide, setSlide] = React.useState(0); // State to keep track of the current slide
+  const [slides, setSlides] = React.useState<SlideComponent[]>([]); // State to store the slides
+
+  useEffect(() => {
+    // Fetch the slides data from the Strapi API
+    fetch(`${import.meta.env.VITE_STRAPI_URL}/api/slides?populate=*`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((resp) => {
+        const data = resp.data;
+        console.log(data);
+        // Map the fetched data to the SlideComponent format
+        let slides: SlideComponent[] = data.map((slide: any) => {
+          console.log(slide);
+          console.log(slide.attributes.background.data[0].attributes.name);
+          return {
+            background: slide.attributes.background.data[0].attributes.name,
+            description: slide.attributes.description,
+          };
+        });
+        setSlides(slides); // Update the slides state
+      });
+  }, []);
+
+  // Function to move to the next slide
+  const nextSlide = () => {
+    setSlide(slide > slides.length - 2 ? 0 : slide + 1);
+  };
+
+  return (
+    <div className="mt-8 mx-auto w-3/4 px-8 justify-center">
+      <div>
+        <IonCard className={`testimonial-background slider-2 `}>
+          {slides.length > 0 && (
+            <>
+              <img
+                src={slides[slide].background}
+                alt="slide"
+                className="object-cover shrink-0 min-w-full blur-[2px] brightness-50 min-h-[115%] "
+              />
+              <IonCardSubtitle
+                className="md:text-lg lg:text-2xl xl:text-3xl text-l w-full md:w-3/4"
+                style={{
+                  color: "white",
+                  fontWeight: "bold",
+                  textAlign: "center",
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                }}
+              >
+                {slides[slide].description}
+              </IonCardSubtitle>
+              <IonButton
+                className="absolute bottom-[0.5rem] right-[0.5rem] justify-end w-[4rem] h-[3rem] "
+                onClick={nextSlide}
+                color="light"
+                size="small"
+                shape="round"
+                style={{
+                  "--box-shadow": "none",
+                  "--ripple-color": "transparent",
+                  transition: "width 2s, height 4s",
+                }}
+              >
+                <IonIcon
+                  size="large"
+                  icon={arrowForwardOutline}
+                  style={{ color: "red" }}
+                />
+              </IonButton>
+            </>
+          )}
+        </IonCard>
+      </div>
+    </div>
+  );
+}

src/components/NewHero.tsx

@@ -33,16 +33,21 @@ export default function NewHero() {
           className="absolute lg:block hidden w-[30%] h-auto z-0 left-[60rem] top-[-26rem]"
           alt="Rectangle"
         />
+        <img
+          src="pic4.png"
+          className="absolute lg:block hidden w-[30%] h-auto z-0 left-[60rem] top-[-26rem]"
+          alt="Rectangle"
+        />
 
-        <div className="flex relative translate-x-[-50%] lg:left-2/3 left-[55%] lg:top-[-10rem] top-[-8rem]">
+        <div className="flex relative translate-x-[-50%] lg:left-2/3 left-[55%] lg:top-[-10rem] top-[-8rem] mb-40">
           <img
             src="pic1.png"
             className="absolute lg:w-auto w-[45%] h-auto z-0 lg:top-[5rem] top-[7rem]"
             alt="Rectangle"
           />
           <img
             src="pic2.png"
-            className="absolute lg:w-auto w-[60%] h-auto z-10 lg:left-[19rem] left-[35%] lg:top-[14rem] top-[9rem]"
+            className="absolute lg:w-auto w-[60%] h-auto z-10 lg:left-[19rem] left-[35%] lg:top-[14rem] top-[8rem]"
             alt="Rectangle"
           />
           <img

src/components/PaddedHeaderText.tsx

@@ -5,7 +5,7 @@ export default function PaddedHeaderText() {
     <div>
       <div className="flex flex-col justify-center items-center min-h-screen px-12 md:px-0">
         <div className="p-4 max-w-4xl w-full">
-          <h1 className="text-[#101066] font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-none mb-4">
+          <h1 className="text-[#101066] font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-none mb-4 ">
             Supporting Teen Mental Health
           </h1>
           <br />