Fe explore button homepage section

frontend/src/components/Buttons/Explore.module.css

@@ -0,0 +1,7 @@
+.explore_button{
+    background-color: #e60023; 
+    padding:10px;
+    border-radius: 10px;
+    color:white;
+
+}

frontend/src/components/Buttons/ExploreButton.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./Explore.module.css";
+import { useNavigate } from "react-router-dom";
+
+const ExploreButton = () => {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <button
+        className={styles.explore_button}
+        onClick={() => navigate("/explore")}
+      >
+        Explore
+      </button>
+    </div>
+  );
+};
+
+export default ExploreButton;

frontend/src/components/HomepageSections/Section1/Section1.jsx

@@ -5,55 +5,58 @@
 import section1Image3 from "../../../assets/preview-section/korean food.jpg";
 import { FiSearch } from "react-icons/fi";
 import styles from "./Section1.module.css";
-
-const Section1 = () => (
-  <div className={styles["preview-section1-wrapper"]}>
-    <h4>Here's how it works</h4>
-    {/* ***************************** Section1 ********************************************** */}
-    <div className={styles["preview-section-1"]}>
-      <div className={styles["section1-images"]}>
-        <div className={styles["image-layers-container"]}>
-          <img
-            className={styles["preview-section1-layer1-img"]}
-            src={section1Image1}
-            alt="Image 1"
-          />
-          <img
-            className={styles["preview-section1-layer2-img"]}
-            src={section1Image2}
-            alt="Image 2"
-          />
-          <img
-            className={styles["preview-section1-layer3-img"]}
-            src={section1Image3}
-            alt="Image 3"
-          />
-          <img
-            className={styles["preview-section1-layer4-img"]}
-            src={section1Image4}
-            alt="Image 4"
-          />
-          <div>
-            <button className={styles["quickSearch-button"]}>
-              <FiSearch />
-              easy chicken dinner
-            </button>
+import ExploreButton from "../../Buttons/exploreButton";
+import { useNavigate } from "react-router-dom";
+const Section1 = () => {
+  //const navigate = useNavigate();
+  return (
+    <div className={styles["preview-section1-wrapper"]}>
+      <h4>Here's how it works</h4>
+      {/* ***************************** Section1 ********************************************** */}
+      <div className={styles["preview-section-1"]}>
+        <div className={styles["section1-images"]}>
+          <div className={styles["image-layers-container"]}>
+            <img
+              className={styles["preview-section1-layer1-img"]}
+              src={section1Image1}
+              alt="Image 1"
+            />
+            <img
+              className={styles["preview-section1-layer2-img"]}
+              src={section1Image2}
+              alt="Image 2"
+            />
+            <img
+              className={styles["preview-section1-layer3-img"]}
+              src={section1Image3}
+              alt="Image 3"
+            />
+            <img
+              className={styles["preview-section1-layer4-img"]}
+              src={section1Image4}
+              alt="Image 4"
+            />
+            <div>
+              <button className={styles["quickSearch-button"]}>
+                <FiSearch />
+                easy chicken dinner
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <div className={styles["section1-text"]}>
-        <h1 className={styles["section-text-heading"]}>Search for an idea</h1>
-        <div className={styles["section-text-p"]}>
-          <p>
-            What do you want to try next? Think of <br />
-            something you’re into—like <br />
-            “easy chicken dinner”—and see what you find.
-          </p>
+        <div className={styles["section1-text"]}>
+          <h1 className={styles["section-text-heading"]}>Search for an idea</h1>
+          <div className={styles["section-text-p"]}>
+            <p>
+              What do you want to try next? Think of <br />
+              something you’re into—like <br />
+              “easy chicken dinner”—and see what you find.
+            </p>
+          </div>
+          <ExploreButton className={styles["explore-button"]} />
         </div>
-        <button className={styles["explore-button"]}>Explore</button>
       </div>
     </div>
-  </div>
-);
-
+  );
+};
 export default Section1;

frontend/src/components/HomepageSections/Section1/Section1.module.css

@@ -1,5 +1,6 @@
 .preview-section1-wrapper {
   background-color: rgb(255, 253, 146);
+  width:100vw;
 }
 .preview-section1-wrapper h4 {
   text-align: center;
@@ -49,20 +50,21 @@
 }
 
 .image-layers-container {
-  height: 62vh;
-  width: 28vw;
-  margin-left: 11vw;
-  margin-top: 1vh;
+  height: 600px;
+  width: 500px;
+  margin-left: 8vw;
+  /*margin-top: 1vh;*/
+  margin-bottom: 5vh;
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1 fr);
   grid-template-rows: repeat(2, 1 fr);
 }
 .preview-section1-layer1-img {
   position: absolute;
-  width: 170px;
+  width: 180px;
   border-radius: 30px;
-  height: 200px;
+  height: 220px;
   top: 0;
   right: 0;
 }
@@ -80,7 +82,7 @@
   position: absolute;
   left: 0;
   top: 25%;
-  width: 45%;
+  width: 200px;
   height: 40%;
   border-radius: 30px;
 }
@@ -89,15 +91,15 @@
   left: 55%;
   top: 51%;
   transform: translate(-50%, -50%);
-  width: 55%;
+  width: 280px;
   height: 75%;
   border-radius: 30px;
 }
 .quickSearch-button {
   color: rgb(110, 15, 61);
   background-color: white;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 22px;
   padding: 1.8rem 1.5rem;
   border-radius: 40px;
   display: flex;

frontend/src/components/HomepageSections/Section2/Section2.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from "./Section2.module.css";
 import CardLarge from "./PreviewSection2Cards/CardLarge";
+import ExploreButton from "../../Buttons/exploreButton";
 
 const Section2 = () => (
   <div className={styles["preview-section-2"]}>
@@ -9,6 +10,7 @@
       <div className={styles["section-text-p"]}>
         <p>Collect your favorites so you can get back to them later.</p>
       </div>
+      <ExploreButton />
     </div>
     <div className={styles["section2-images"]}>
       <div className={styles["section2-grid-wrapper"]}>

frontend/src/components/HomepageSections/Section3/Section3.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from "./Section3.module.css";
 import Section3Card from "./PreviewSection3Card/Section3Card";
+import ExploreButton from "../../Buttons/exploreButton";
 
 const Section3 = () => (
   <div className={styles["preview-section-3"]}>
@@ -20,6 +21,7 @@
           <br />
           ideas from people around the world.
         </p>
+        <ExploreButton />
       </div>
     </div>
   </div>

frontend/src/pages/Home.module.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  /*padding: 2rem;*/
   box-sizing: border-box;
 }