MT:Milestone section

src/components/HomepageMilestones/index.js

@@ -0,0 +1,55 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+export default function HomepageMilestones() {
+  return (
+    <section className={`Section mileStones ${styles.mileStones}`}>
+      <div className={`container`}>
+        <div className={`centerSectionHeading`}>
+          <h1>Milestones</h1>
+        </div>
+        <div className={`section-margin ${styles.milestoneCards}`}>
+          <div>
+            <h3>2020</h3>
+            <ul>
+                <li>KubeArmor project architecture</li>
+                <li>MVP Launch </li>
+            </ul>
+          </div>
+          <div>
+            <h3>2021</h3>
+            <ul>
+                <li>Released v0.1, stable version</li>
+                <li>CNCF Sandbox Acceptance (November 16)</li>
+            </ul>
+          </div>
+          <div>
+            <h3>2022</h3>
+            <ul>
+                <li>Surpassed 300K+ downloads</li>
+                <li>Gained traction in the open-source community</li>
+            </ul>
+          </div>
+          <div>
+            <h3>2023</h3>
+            <ul>
+                <li>Reached 10+ industry adopters, validating enterprise-grade capabilities</li>
+                <li>Listed on AWS  and Redhat Marketplace</li>
+                <li>Released v1.0 - production-ready solution</li>
+            </ul>
+          </div>
+          <div>
+            <h3>2024</h3>
+            <ul>
+                <li>Over 1+ Million downloads</li>
+                <li>Earned 1,300+ GitHub stars, showcasing community engagement</li>
+                <li>Listed on Oracle and Digital Ocean Marketplace</li>
+                <li>Launched comprehensive KubeArmor Book, enhancing user education</li>
+                <li>Introduced the KOSHER program</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepageMilestones/styles.module.css

@@ -0,0 +1,58 @@
+.mileStones {
+  background-color: #082c74;
+  color: white;
+  h1,
+  h3 {
+    color: white;
+  }
+  .milestoneCards {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 1.5rem;
+    @media screen and (max-width: 1024px) {
+      grid-template-columns: 1fr;
+      text-align: left;
+      border-left: 2px solid #5096ff;
+    }
+  }
+}
+.mileStones h3 {
+  position: relative;
+  font-size: 38px;
+  text-align: center;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #5096ff;
+}
+.mileStones ul {
+  margin-bottom: 0;
+}
+.mileStones h3::before {
+  position: absolute;
+  content: "";
+  top: 100%;
+  transform: translate(0, -50%);
+  background-color: #082c74;
+  left: 0;
+  height: 17px;
+  width: 17px;
+  border-radius: 50%;
+  border: 2px solid #5096ff;
+}
+@media screen and (max-width: 1024px) {
+  .mileStones h3 {
+    text-align: left;
+    border-bottom: none;
+    padding-bottom: 0rem;
+    padding-left: 1.5rem;
+    line-height: 14px;
+  }
+  .mileStones h3::before {
+    top: 50%;
+    transform: translate(-51%, -50%);
+  }
+}
+@media screen and (max-width: 767px) {
+  .mileStones h3 {
+    font-size: 28px;
+  }
+}

src/pages/index.js

@@ -21,6 +21,7 @@ import HomepageTestimonials from "../components/HomepageTestimonials";
 import HomepageAdopters from "../components/HomepageAdopters";
 import HomepageCommunity from "../components/HomepageCommunity";
 import HomepageMembership from "../components/HomepageMembership";
+import HomepageMilestones from "../components/HomepageMilestones";
 import HomepageSupport from "../components/HomepageSupport";
 import HomepageContributors from "../components/HomepageContributors";
 import HomepageSandbox from "../components/HomepageSandbox";
@@ -76,6 +77,7 @@ export default function Home() {
         <HomepageVideos />
         <HomepageTestimonials />
         <HomepageAdopters />
+        <HomepageMilestones />
         <HomepageCommunity />
         <HomepageMembership />
         <HomepageContributors />