Merge pull request #458 from GroupProject-JOM/landing

Landing pages
GroupProject-JOM · Mar 5, 2024 · 793a4b4 · 793a4b4
2 parents 31e310b + 165a2d3
commit 793a4b4
Show file tree

Hide file tree

Showing 11 changed files with 737 additions and 0 deletions.
diff --git a/common/img/Coconut Land 1 (1).png b/common/img/Coconut Land 1 (1).png
diff --git a/common/img/Coconut Land 1.png b/common/img/Coconut Land 1.png
diff --git a/common/img/step-1.png b/common/img/step-1.png
diff --git a/common/img/step-2.png b/common/img/step-2.png
diff --git a/common/img/step-3.png b/common/img/step-3.png
diff --git a/common/img/step-4.png b/common/img/step-4.png
diff --git a/common/img/step-5.png b/common/img/step-5.png
diff --git a/landing/process.css b/landing/process.css
@@ -0,0 +1,137 @@
+/* Content */
+.content {
+  background-image: url("../common/img/Coconut Land 1 (1).png");
+}
+
+.step-container {
+  max-width: 1200px;
+  margin: auto;
+  padding: 5rem 1rem;
+}
+
+.step-sub-header {
+  position: relative;
+  isolation: isolate;
+  margin-bottom: 1rem;
+  padding-left: 5rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: #e9c675;
+}
+
+.step-sub-header::before {
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  height: 2px;
+  width: 4rem;
+  background-color: #e9c675;
+}
+
+.step-sub-header::after {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(-60%, -50%);
+  font-size: 8rem;
+  font-weight: 600;
+  color: #000000;
+  opacity: 0.1;
+  z-index: -1;
+}
+
+.step-header {
+  margin-bottom: 1rem;
+  font-size: 3rem;
+  font-weight: 400;
+  color: #000000;
+}
+
+img {
+  display: flex;
+  width: 100%;
+}
+
+/* .steps {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    #0a1e27 8rem
+  );
+  overflow: hidden;
+} */
+
+.container {
+  padding-top: 0;
+  display: grid;
+  gap: 5rem 2rem;
+  overflow: hidden;
+}
+
+.step-image img {
+  max-width: 400px;
+  margin-inline: auto;
+  border-radius: 5px;
+  /* box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.4); */
+}
+
+.step-content,
+.step-image {
+  margin: 2rem 0;
+}
+
+.step-content-1,
+.step-image-1 {
+  margin-top: 7rem;
+}
+
+.step-content-1 .step-sub-header::after {
+  content: "01";
+}
+
+.step-content-2 .step-sub-header::after {
+  content: "02";
+}
+
+.step-content-3 .step-sub-header::after {
+  content: "03";
+}
+
+.step-content-4 .step-sub-header::after {
+  content: "04";
+}
+
+.step-content-5 .step-sub-header::after {
+  content: "05";
+}
+
+.step-content p {
+  margin: 1.5rem;
+}
+
+@media (width > 768px) {
+  .about__container {
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+    gap: 10rem 2rem;
+  }
+
+  .step-image-1 {
+    grid-area: 1/2/2/3;
+  }
+
+  .step-image-3 {
+    grid-area: 3/2/4/3;
+  }
+
+  .step-image-5 {
+    grid-area: 5/2/6/3;
+  }
+
+  .step-content {
+    margin-left: 6rem;
+  }
+}
diff --git a/landing/process.html b/landing/process.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Process</title>
+
+    <script
+      src="https://kit.fontawesome.com/3d9946f29b.js"
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+
+    <link rel="stylesheet" href="./product.css" />
+    <link rel="stylesheet" href="./process.css" />
+    <link rel="stylesheet" href="../common/style.css" />
+  </head>
+  <body>
+    <nav class="navbar">
+      <ul class="menu">
+        <li><a href="">Home</a></li>
+        <li><a href="" class="active">Process</a></li>
+        <li><a href="./products.html">Products</a></li>
+      </ul>
+
+      <a class="button" href="../signin.html">Login</a>
+
+      <!-- responsive button -->
+      <div class="menu-btn"><i class="fa fa-bars"></i></div>
+    </nav>
+
+    <section class="content">
+      <h1 class="main-text">
+        From your Yard<br />
+        to our Hand
+      </h1>
+      <p class="sub-text">
+        Glimpse of how the magic happens.<br />
+        Explore and Learn more about our production pipeline.
+      </p>
+      <div class="scroll-btn">
+        <a href="#container"
+          >Scroll down
+          <span><i class="fa-solid fa-arrow-down"></i></span>
+        </a>
+      </div>
+    </section>
+
+    <section class="steps" id="container">
+      <div class="step-container container">
+        <div class="step-image step-image-1" id="">
+          <img src="../common/img/step-1.png" alt="step-image-1" />
+        </div>
+        <div class="step-content step-content-1">
+          <h3 class="step-sub-header">GET STARTED</h3>
+          <h2 class="step-header">Create a Supply Request</h2>
+          <p>
+            Suppliers can create a supply request using web or mobile app once a
+            yield of coconut is collected. Supplier can specify the location,
+            collection amount and the preferred payment method.
+          </p>
+        </div>
+
+        <div class="step-image step-image-2" id="">
+          <img src="../common/img/step-2.png" alt="step-image-2" />
+        </div>
+        <div class="step-content step-content-2">
+          <h3 class="step-sub-header">GET STARTED</h3>
+          <h2 class="step-header">Get a Collection Confirmation</h2>
+          <p>
+            Upon reviewing the request, a collector will be assigned for your
+            collection request. You can view the scheduled collection
+            information in your dashboard.
+          </p>
+        </div>
+
+        <div class="step-image step-image-3" id="">
+          <img src="../common/img/step-3.png" alt="step-image-3" />
+        </div>
+        <div class="step-content step-content-3">
+          <h3 class="step-sub-header">GET STARTED</h3>
+          <h2 class="step-header">Supply Coconuts to the Collector</h2>
+          <p>
+            Once the collector reaches you, provide him with the coconuts and
+            help him with counting.
+          </p>
+        </div>
+
+        <div class="step-image step-image-4" id="">
+          <img src="../common/img/step-4.png" alt="step-image-4" />
+        </div>
+        <div class="step-content step-content-4">
+          <h3 class="step-sub-header">GET STARTED</h3>
+          <h2 class="step-header">Verify the Coconut Amount</h2>
+          <p>
+            After counting the coconut amount, help the collector to verify the
+            amount using your device.
+          </p>
+        </div>
+
+        <div class="step-image step-image-5" id="">
+          <img src="../common/img/step-5.png" alt="step-image-5" />
+        </div>
+        <div class="step-content step-content-5">
+          <h3 class="step-sub-header">GET STARTED</h3>
+          <h2 class="step-header">Get Paid</h2>
+          <p>
+            According to the payment method you specified, you can get paid at
+            collection or get your payment into the bank account you specify.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <script>
+      const scrollRevealOption = {
+        distance: "100px",
+        origin: "bottom",
+        reset: true,
+        duration: 1500,
+      };
+
+      ScrollReveal().reveal(".main-text", {
+        ...scrollRevealOption,
+      });
+      ScrollReveal().reveal(".sub-text", {
+        ...scrollRevealOption,
+        delay: 500,
+      });
+      ScrollReveal().reveal(".scroll-btn", {
+        ...scrollRevealOption,
+        delay: 1500,
+      });
+
+      ScrollReveal().reveal(".step-image-1", {
+        ...scrollRevealOption,
+        origin: "right",
+      });
+      ScrollReveal().reveal(".step-content-1", {
+        ...scrollRevealOption,
+        origin: "left",
+      });
+
+      ScrollReveal().reveal(".step-image-2", {
+        ...scrollRevealOption,
+        origin: "right",
+      });
+      ScrollReveal().reveal(".step-content-2", {
+        ...scrollRevealOption,
+        origin: "left",
+      });
+
+      ScrollReveal().reveal(".step-image-3", {
+        ...scrollRevealOption,
+        origin: "right",
+      });
+      ScrollReveal().reveal(".step-content-3", {
+        ...scrollRevealOption,
+        origin: "left",
+      });
+
+      ScrollReveal().reveal(".step-image-4", {
+        ...scrollRevealOption,
+        origin: "right",
+      });
+      ScrollReveal().reveal(".step-content-4", {
+        ...scrollRevealOption,
+        origin: "left",
+      });
+
+      ScrollReveal().reveal(".step-image-5", {
+        ...scrollRevealOption,
+        origin: "right",
+      });
+      ScrollReveal().reveal(".step-content-5", {
+        ...scrollRevealOption,
+        origin: "left",
+      });
+
+      $(".menu-btn").click(function () {
+        $(".navbar .menu").toggleClass("active");
+        $(".navbar .button").toggleClass("active");
+        $(".menu-btn i").toggleClass("active");
+      });
+    </script>
+  </body>
+</html>