Merge pull request #6339 from vishalvivekm/open-source-banner

add open source program to pricing

Author: Vivek Vishal

src/assets/data/faq/index.js

@@ -259,8 +259,10 @@ const data = {
       question: "Do you have special pricing for open source / non-profit projects?",
       category: "Pricing",
       answer: [
-        "Yes, we offer significant discounts for open source projects. Contact us at hello@layer5.io with the details of your open source project to apply for discount.",
+        "Yes, we offer significant discounts for open source projects. Visit open source pricing page and sign up with details of your open source project to apply for discount.",
       ],
+      linktext: "Open source pricing",
+      link: "/pricing/open-source-program"
     },
 
     //

src/pages/pricing.js src/pages/pricing/index.jssrc/pages/pricing.js renamed to src/pages/pricing/index.js

@@ -1,8 +1,8 @@
 import React from "react";
-import SEO from "../components/seo";
+import SEO from "../../components/seo";
 
 
-import PricingPage from "../sections/Pricing";
+import PricingPage from "../../sections/Pricing";
 const Pricing = () => {
   return (
     <>

src/pages/pricing/open-source-program.js

@@ -0,0 +1,17 @@
+import React from "react";
+import SEO from "../../components/seo";
+import OpenSourcePricingPage from "../../sections/Community/Open-Source-Program";
+
+const OpenSourcePricingProgramPage = () => {
+  return (
+    <>
+      <OpenSourcePricingPage  />
+    </>
+  );
+};
+export default OpenSourcePricingProgramPage;
+export const Head = () => {
+  return <SEO title="Layer5 Open Source Program"
+    description="Layer5, empowerer of engineers. At Layer5, we believe collaboration enables innovation, and infrastructure enables collaboration."
+    image="/images/Layer5-overview.svg" />;
+};

src/sections/Community/Open-Source-Program/index.style.js

@@ -10,20 +10,21 @@ const OpenSourcePricingWrapper = styled.div`
             left: 0;
         }
     }
-    .hero{
-      p{
+    .hero {
+      flex-wrap: wrap;
+      p {
           margin: 1.875rem auto 1rem auto;
-       }
-       .products-logo-wrapper{
+      }
+     .products-logo-wrapper{
           display: flex;
           justify-content: center;
-          img{
+          img {
             max-height: 25rem;
           }
           svg {
             height: 25rem;
           }
-       }
+      }
     }
     
     .signup-form{

src/sections/Community/Open-Source-Program/signup-form.js

@@ -16,7 +16,7 @@ const SignupForm = () => {
         <Container style={{ marginBottom: "4rem", padding: "0" }}>
           <Row className="description">
             <Col $lg={7} $md={6} $sm={12} >
-              <h4>Who can Apply?</h4>
+              <h4 style={{ margin: ".8rem" }}>Who can Apply?</h4>
               <p style={{ fontWeight: "700" }}>Layer5-Sponsored Open Source program is ideal for developers working on projects without a path to commercialization.</p>
               <h4 style={{ marginBottom: "1.5rem" }}>Why join the Layer5-Sponsored Open Source program?</h4>
               <p>
@@ -31,7 +31,7 @@ const SignupForm = () => {
                 <strong>Comprehensive Cloud Native Support</strong><br/>
                 Leverage tools for discovering existing infrastructure, visualizing Kubernetes applications, and managing multi-cloud clusters. Layer5 provides built-in components, public catalogs, and performance profiling to streamline your project's development.
               </p>
-              <h4>Qualification Criteria</h4>
+              <h4 style={{ margin: "1.3rem 0" }}>Qualification Criteria</h4>
               <p style={{ marginBottom: "0" }}>
               To qualify for the Layer5-Sponsored Open Source program, your project namespace must:
               </p>
@@ -40,7 +40,7 @@ const SignupForm = () => {
                 <li>Meet the <a href="https://opensource.org/docs/osd">Open Source Initiative definition.</a></li>
                 <li>Not have a pathway to commercialization. Your organization must not seek to make a profit through services or by charging for higher tiers. Accepting donations to sustain your efforts is permissible.</li>
               </ul>
-              <h4>Layer5-Sponsored Open Source program Terms of Agreement</h4>
+              <h4 style={{ margin: "1.875rem 0 1.3rem" }}>Layer5-Sponsored Open Source program Terms of Agreement</h4>
               <ul>
                 <li>Program benefits are provided only to project leads and core project committers.</li>
                 <li>Program status and benefits are valid for one year and can be renewed if your project still meets the program requirements.</li>

src/sections/Pricing/index.js

@@ -5,6 +5,7 @@ import FAQ from "../General/Faq";
 import Reviews from "./review-slider";
 import options from "./generatePlans";
 import PlanCard from "../../components/PlanCard";
+import OpenSourceBanner from "./openSource";
 
 const Pricing = () => {
   // const [monthly, setMonthly] = useState(false);
@@ -47,6 +48,7 @@ const Pricing = () => {
       </div>
       <Comparison />
       <Reviews />
+      <OpenSourceBanner />
       <FAQ category={["Pricing", "Billing"]} />
     </PricingWrapper>
   );

src/sections/Pricing/openSource.js

@@ -0,0 +1,51 @@
+import React from "react";
+import Button from "../../reusecore/Button";
+import styled from "styled-components";
+import { BsArrowUpRight } from "@react-icons/all-files/bs/BsArrowUpRight";
+const OpenSourceBanner = () => {
+  return (
+    <OpenSourceBannerWrapper>
+      <div className="banner-content">
+        <div>
+          <h2>Layer5-Sponsored Open Source Program</h2>
+          <p>
+            We're proud to support the open source community with special discounts and resources.
+          </p>
+        </div>
+        <Button $primary title="Open Source Pricing" $url="/pricing/open-source-program"><BsArrowUpRight size={21} className="icon-left" /></Button>
+      </div>
+    </OpenSourceBannerWrapper>
+  );
+};
+
+const OpenSourceBannerWrapper = styled.div`
+  width: 100%;
+  background: #00b39f; 
+  margin-bottom: 2rem;
+  padding: 2rem 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  .banner-content {
+    max-width: 90%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  
+    @media (max-width: 768px) {
+        flex-direction: column;
+        text-align: center;
+        gap: 1.5rem;
+    }
+  }
+  div {
+    color: white;
+    h2 {
+      color: white;
+    }
+    p {
+      font-size: 1.1rem;
+      opacity: 0.9;
+    }
+  }
+`;
+export default OpenSourceBanner;