feat: open source program form

src/components/CommonForm/index.js

@@ -186,6 +186,83 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
             <option className="options" value="Other">Other</option>
           </Field>
         </div>
+        {form == "open-source-pricing" && (
+          <>
+            <label htmlFor="projectname" className="form-name">
+             What is the name of your project? <span className="required-sign">*</span>
+            </label>
+            <Field type="text" className="text-field" id="projectname" name="projectname" />
+            <label htmlFor="repository" className="form-name">
+            Please link the public repository of your OSS organization (github, gitlab, etc.) <span className="required-sign">*</span>
+            </label>
+            <Field type="url" className="text-field" id="repository" name="repository" />
+            <label htmlFor="website" className="form-name">
+            Please provide a link to your project website. <span className="required-sign">*</span>
+            </label>
+            <Field type="url" className="text-field" id="website" name="website" />
+            <label htmlFor="goal" className="form-name">
+            What is the goal of this project? <span className="required-sign">*</span>
+            </label>
+            <Field type="text" className="text-field" id="goal" name="goal" />
+            <label htmlFor="users" className="form-name">
+            What types of user(s) benefit from this project? <span className="required-sign">*</span>
+            </label>
+            <Field type="text" className="text-field" id="users" name="users" />
+            <label htmlFor="sponsors" className="form-name">
+            Please list all sponsors for this project. <span className="required-sign">*</span>
+            </label>
+            <Field as="textarea" type="text" className="text-field" id="sponsors" name="sponsors" />
+            <label htmlFor="commercialization" className="form-name">
+            Path to Commercialization <span className="required-sign">*</span>
+            </label>
+            <div role="group" className="formRight" aria-labelledby="select">
+              <Field as="select" id="commercialization" name="commercialization" aria-describedby="commercialization-description"
+              >
+                <option defaultValue hidden className="custom-arrow">Select an option</option>
+                <option className="options" value="Yes">Yes</option>
+                <option className="options" value="No">No</option>
+                <option className="options" value="Maybe">Maybe</option>
+              </Field>
+            </div>
+            <div role="group" className="formRight" aria-labelledby="select">
+              <label htmlFor="license" className="form-name">
+              What is the code distribution license for your OSS project? <span className="required-sign">*</span>
+              </label>
+              <Field as="select" id="license" name="license" className="large gfield_select">
+                <option defaultValue hidden className="custom-arrow">Select a license</option>
+                <option value="GNU Affero General Public License v3.0">GNU Affero General Public License v3.0</option>
+                <option value="Apache 2.0">Apache 2.0</option>
+                <option value="BSD 2-Clause license">BSD 2-Clause license</option>
+                <option value="BSD-3-Clause license">BSD-3-Clause license</option>
+                <option value="BSD 4-Clause">BSD 4-Clause</option>
+                <option value="GNU General Public License v3.0">GNU General Public License v3.0</option>
+                <option value="GNU Lesser General Public License v3.0">GNU Lesser General Public License v3.0</option>
+                <option value="MIT License">MIT License</option>
+                <option value="Mozilla Public License 2.0">Mozilla Public License 2.0</option>
+                <option value="Boost Software License 1.0">Boost Software License 1.0</option>
+                <option value="The Unlicense">The Unlicense</option>
+                <option value="BSD Zero Clause">BSD Zero Clause</option>
+                <option value="Academic Free License v3.0">Academic Free License v3.0</option>
+                <option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
+                <option value="Creative Commons Attribution Share Alike 4.0 International">Creative Commons Attribution Share Alike 4.0 International</option>
+                <option value="Creative Commons Zero v1.0 Universal">Creative Commons Zero v1.0 Universal</option>
+                <option value="Eclipse Public License 2.0">Eclipse Public License 2.0</option>
+                <option value="CeCILL Free Software License Agreement v2.1">CeCILL Free Software License Agreement v2.1</option>
+                <option value="Educational Community License v2.0">Educational Community License v2.0</option>
+                <option value="European Union Public License 1.2">European Union Public License 1.2</option>
+                <option value="ISC License">ISC License</option>
+                <option value="Microsoft Public License">Microsoft Public License</option>
+                <option value="Open Data Commons Open Database License v1.0">Open Data Commons Open Database License v1.0</option>
+                <option value="Common Development and Distribution License">Common Development and Distribution License</option>
+                <option value="Eiffel Forum License 2.0">Eiffel Forum License 2.0</option>
+                <option value="Adaptive Public License 1.0">Adaptive Public License 1.0</option>
+                <option value="Mulan Permissive Software License, Version 2">Mulan Permissive Software License, Version 2</option>
+              </Field>
+            </div>
+            <div>Does this project have a pathway to commercialization? Your organization can accept donations to sustain its work, but it can't seek to make a profit by selling services, by charging for enhancements or add-ons, or by other means specifically for this project. If you don't meet this criteria, Please reach out to Layer5 sales team who will assist you find a partner program that may better fit your needs.</div>
+          </>
+        )}
+
 
         <Button $secondary className="btn" title="Submit" />
       </Form>

src/pages/community/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.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Container, Row, Col } from "../../../reusecore/Layout";
+import OpenSourcePricingWrapper from "./index.style";
+import productsImageColor from "./images/layer5-products-overview.svg";
+import productsImageWhite from "./images/layer5-products-overview-dark.svg";
+import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
+import SignupForm from "./signup-form";
+
+const OpenSourcePricing = () => {
+  const { isDark } = useStyledDarkMode();
+  return (
+    <OpenSourcePricingWrapper style={{ position: "relative" }}>
+      <Container className="open-source-container">
+        <img className="dotsimage" src="https://layer5.io/static/background-dots-pattern.e9f0ea60.svg" />
+        <Row className="hero">
+          <Col $sm={12} $lg={6}>
+            <h1>Layer5-Sponsored Open Source Program</h1>
+            <p>
+            The open source community is at the heart of modern development. Developers around the world create new technology using open source and we're here to help make those innovations a reality.
+            In the Layer5 Open Source program, non-commercial open source developers can continue to collaborate, innovate, and push their projects forward — all with the support of Layer5 offered tools
+            </p>
+          </Col>
+          <Col className="products-logo-wrapper" $sm={12} $lg={6}>
+            <img
+              src={isDark ? productsImageWhite : productsImageColor}
+              alt="Layer5 products"
+            />
+          </Col>
+        </Row>
+        <div className="signup-form">
+          <SignupForm/>
+        </div>
+      </Container>
+    </OpenSourcePricingWrapper>
+  );
+};
+
+export default OpenSourcePricing;

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

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+
+const OpenSourcePricingWrapper = styled.div`
+
+    .open-source-container {
+        padding-top: 11rem;
+        .dotsimage{
+            position: absolute;
+            top: -0.125rem;
+            left: 0;
+        }
+    }
+    .hero{
+      p{
+          margin: 1.875rem auto 1rem auto;
+       }
+       .products-logo-wrapper{
+          display: flex;
+          justify-content: center;
+          img{
+            max-height: 25rem;
+          }
+          svg {
+            height: 25rem;
+          }
+       }
+    }
+
+    .signup-form{
+        margin: 8.25rem auto 2.75rem auto;
+        h2{
+            margin-bottom: 1.875rem;
+        }
+        p{
+            margin-bottom: 1.875rem;
+        }
+    }
+    @media only screen and (max-width: 480px){
+        .signup-form{
+            margin: 3.125rem auto 1.875rem auto;
+            p{
+                margin-bottom: 0.625rem;
+            }
+        }
+        .open-source-container {
+            padding-top: 5rem;
+        }
+    }
+`;
+
+export default OpenSourcePricingWrapper;

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

@@ -0,0 +1,68 @@
+import React from "react";
+import styled from "styled-components";
+import { Container, Row, Col } from "../../../reusecore/Layout";
+
+import CommonForm from "../../../components/CommonForm";
+
+const SignupFormWrapper = styled.div`
+h4 {
+  font-weight: 700;
+}
+`;
+const SignupForm = () => {
+  return (
+    <SignupFormWrapper>
+      <div>
+        <Container style={{ marginBottom: "4rem", padding: "0" }}>
+          <Row className="description">
+            <Col $lg={7} $md={6} $sm={12} >
+              <h4>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>
+                <strong>Unlock Free Access to Advanced Cloud Native Design Tools</strong><br />
+                Gain access to Layer5's drag-and-drop cloud-native infrastructure designer, which includes 350+ built-in models and public catalog patterns, starting templates, enabling teams to design, configure, and deploy their workloads effortlessly.
+              </p>
+              <p>
+                <strong>Collaborative Infrastructure Design</strong><br/>
+                Access advanced tools like real-time collaborative infrastructure design and team workspaces. Enhance productivity with shared environments that allow multiple contributors to design, edit, and review infrastructure configurations simultaneously.
+              </p>
+              <p>
+                <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>
+              <p style={{ marginBottom: "0" }}>
+              To qualify for the Layer5-Sponsored Open Source program, your project namespace must:
+              </p>
+              <ul>
+                <li>Be shared in public repositories on Github or GitLab etc. and the source code must also be publicly accessible on its respective repository.</li>
+                <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>
+              <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>
+                <li>You may use the program benefits solely for developing non-commercial open-source projects.</li>
+                <li>Layer5 licenses are for use only by project collaborators and cannot be shared with any third party.</li>
+              </ul>
+            </Col>
+
+            <Col $lg={5} $md={6} $sm={12} style={{ padding: "0" }}>
+              <CommonForm
+                title="Apply Today"
+                form="open-source-pricing"
+                account_desc="Selected program participants will receive a free access to tools offered by Layer5. Layer5 team may reach out to selected participants."
+                submit_title="Thank you for your interest in Layer5-Sponsored Open Source Program"
+                submit_body="Your spot on the waiting list is now confirmed. We appreciate your patience as we process a growing number of applicants. Please await further communication regarding your acceptance and the start of the program."
+              />
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </SignupFormWrapper>
+  );
+};
+
+export default SignupForm;