Slideshow image header for main page

src/components/HelpInfographics.tsx

@@ -4,7 +4,7 @@ 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">
+    <div className="flex flex-col md:flex-row w-full max-w-7xl px-8 py-28 mx-auto gap-16">
       <BlueGraphic />
       <PinkGraphic />
       <RedGraphic />

src/components/ImageSlideshow.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+
+const slides = [
+  "header1.jpeg",
+  "header2.jpeg",
+  "header3.jpeg",
+  "header4.jpeg",
+  "header5.jpeg",
+];
+
+const ImageSlideshow = () => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length);
+    }, 3000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [slides.length]);
+
+  return (
+    <div className="w-full relative text-center mt-20 md:-mb-32 overflow-hidden">
+      <img
+        src={slides[currentSlide]}
+        alt="Image Slideshow"
+        className="object-cover w-full h-96 md:h-[32rem] lg:h-[40rem] xl:h-[44rem] 2xl:h-[48rem] overflow-hidden brightness-50"
+      />
+      <div
+        className="absolute z-10 top-1/2 left-1/2"
+        style={{ transform: "translate(-50%, -50%)" }}
+      >
+        <div className="text-2xl md:text-5xl lg:text-6xl font-bold text-white">
+          EMPOWERING TEENS WITH MENTAL HEALTH RESOURCES
+        </div>
+        <div className="text-sm lg:text-xl text-white font-bold">
+          DISCOVER A WEALTH OF ARTICLES, TOOLS, AND SUPPORT FOR TEENAGE MENTAL
+          HEALTH.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageSlideshow;

src/components/SocialInfographics.tsx

@@ -1,6 +1,6 @@
 export default function SocialInfographics() {
   return (
-    <div className="flex flex-col md:flex-row justify-evenly max-w-7xl md:px-16 py-16 my-16 mx-auto gap-16 md:gap-0">
+    <div className="flex flex-col md:flex-row justify-evenly max-w-7xl md:px-16 py-16 pt-48 mb-16 mx-auto gap-16 md:gap-0">
       <div className="relative max-w-[70%] md:max-w-[50%] mx-auto md:mx-0">
         <img
           className="w-[25rem] md:w-[20rem] h-auto"

src/pages/Index.tsx

@@ -6,26 +6,30 @@ import NewHero from "../components/NewHero";
 import SocialInfographics from "../components/SocialInfographics";
 import { useHistory } from "react-router";
 import Button from "../components/Button";
+import ImageSlideshow from "../components/ImageSlideshow";
 
 const Index: React.FC = () => {
   const history = useHistory();
 
   return (
     <div>
-      <NewHero />
-      <div className="bg-gradient-to-b from-[#FFE2E2] to-[#FFFFFF]">
+      <ImageSlideshow />
+      {/* <NewHero /> */}
+      <div className="bg-gradient-to-b from-[#FFE2E2] from-60% to-[#FFFFFF]">
         <div className="h-12 md:h-64" />
         <CenterDescriptionCards />
-        <div className="relative max-w-5xl mx-auto my-16">
+        <div className="relative max-w-5xl mx-auto pt-32">
           <img className="w-full h-auto" alt="Vector" src="vector.svg" />
           <div className="absolute w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-            <h1 className="font-sans text-[#101066] text-[calc(6vw)] lg:text-[42px] text-center font-[600] tracking-wide">
+            <h1 className="font-sans text-[#101066] text-[calc(6vw)] lg:text-[42px] text-center font-[600] tracking-wide pt-32">
               Teens need
               <br />
               mental health support
             </h1>
           </div>
         </div>
+      </div>
+      <div className="bg-gradient-to-b from-[#FFFFFF] from-25% to-[#FFABE1] from-30% via-[#FB4B45]">
         <HelpInfographics />
         <Empower
           description="Discover helpful resources and articles to promote mental health awareness and support for teens. Together, we can create a safe and nurturing environment for their well-being."
@@ -44,27 +48,28 @@ const Index: React.FC = () => {
             />
           }
         />
-      </div>
-      <div className="relative bg-gradient-to-b from-[#FB4B45] to-[#FFABE1] pb-32">
-        <img className="w-full h-auto z-[10]" alt="union-1" src="union-1.png" />
-        <SocialInfographics />
-        <Empower
-          description="Learn more about the Center for Young Colorful Minds and efforts being undertaken to address the teen mental health crisis."
-          bgColor="#FF6565"
-          rounded
-          textColor="white"
-          btnElement={
-            <Button
-              text="Read More"
-              backgroundColor="darkorange"
-              px={"1em"}
-              py={"0.5em"}
-              onClick={() => {
-                history.push("/about-us");
-              }}
-            />
-          }
-        />
+
+        <div className="relative pb-32">
+          {/* <img className="w-full h-auto z-[10]" alt="union-1" src="union-1.png" /> */}
+          <SocialInfographics />
+          <Empower
+            description="Learn more about the Center for Young Colorful Minds and efforts being undertaken to address the teen mental health crisis."
+            bgColor="#FF6565"
+            rounded
+            textColor="white"
+            btnElement={
+              <Button
+                text="Read More"
+                backgroundColor="darkorange"
+                px={"1em"}
+                py={"0.5em"}
+                onClick={() => {
+                  history.push("/about-us");
+                }}
+              />
+            }
+          />
+        </div>
       </div>
     </div>
   );