Relocate "Open Source is in our DNA" section above internship programs

Signed-off-by: Tharanishwaran <[email protected]>
layer5io · Jan 18, 2025 · 3415910 · 3415910
1 parent 0c315dd
commit 3415910
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 51 deletions.
diff --git a/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js b/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
@@ -79,4 +79,46 @@ export const ProgramsPageWrapper = styled.div`
             flex: 0 0 100%;
         }
     }
+
+    .opensource-section{
+        margin-top: 6rem;
+        margin-bottom: 6rem;
+        text-align: center;
+        background: #00B39F;
+        color: white;
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        right: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+    }
+    .opensource-section-text{
+        padding-top: 4rem;
+    }
+    .opensource-section-text > h1{
+        margin-bottom: 1rem;
+        color: white;
+    }
+    .opensource-section-text > p{
+        max-width: 60rem;
+        margin: auto;
+        color: white;
+
+    }
+    .opensource-section-img{
+        margin-top: -8rem;
+        position: relative;
+        top: 10rem;
+    }
+    .opensource-section-img img{
+        height: 30rem;
+        box-shadow: 0px 8px 20px -10px black;
+    }
+    @media only screen and (max-width:600px){
+        .opensource-section-img img{
+            height: 18rem;
+        }
+    }
+
 `;
diff --git a/src/sections/Careers/Careers-Programs-grid/index.js b/src/sections/Careers/Careers-Programs-grid/index.js
@@ -1,11 +1,14 @@
 import React from "react";
 import { graphql, Link, useStaticQuery } from "gatsby";
+import { StaticImage } from "gatsby-plugin-image";
 import { Container, Row, Col } from "../../../reusecore/Layout";
 import PageHeader from "../../../reusecore/PageHeader";
 import Image from "../../../components/image";
 import { ProgramsPageWrapper } from "./ProgramGrid.style";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
+const Five_image = "../img/open-source.png";
+
 const ProgramsGrid = ({ hide_path, sub_section }) => {
   const data = useStaticQuery(
     graphql`query allPrograms {
@@ -57,6 +60,20 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
 
   return (
     <ProgramsPageWrapper>
+      <div className="opensource-section">
+        <div className="opensource-section-text">
+          <h1>Open Source is in our DNA</h1>
+          <p>
+            Layer5 projects are open source software. Anyone can download, use, work on, and share it with others. It's built on principles like collaboration, globalism, and innovation. Layer5 projects are distributed under the terms of Apache v2.
+          </p>
+          <p>
+            We believe that all contributors should expect and be part of a safe and friendly environment for constructive contribution. We can more effectively and successfully compare and challenge different ideas to find the best solutions for advancement, while building the size, diversity, and strength of our community.
+          </p>
+        </div>
+        <div className="opensource-section-img">
+          <StaticImage src={Five_image} alt="Five" />
+        </div>
+      </div>
       <PageHeader title="Open Source Internship Programs" subtitle="Build Your Career at Layer5" path={path} />
       <div className={sub_section ? "sub-header_wrapper" : "programs-page-wrapper"}>
         <Container>

diff --git a/src/sections/Careers/careers.style.js b/src/sections/Careers/careers.style.js
@@ -23,13 +23,13 @@ p {
     .videoText {
         flex-wrap: nowrap;
         margin: auto;
-        margin-top: 8rem;
+        margin-top: 1rem;
         display: flex;
         align-items: center;
         gap: 2rem;
     }
     .introText{
-        margin-top: 9rem;
+        margin-top: 10rem;
     }
     .introText h1{
         margin-bottom: 1rem;
@@ -70,40 +70,6 @@ p {
         }
     }
 
-    .opensource-section{
-        margin-top: 6rem;
-        text-align: center;
-        background: #00B39F;
-        color: white;
-    }
-    .opensource-section-text{
-        padding-top: 4rem;
-    }
-    .opensource-section-text > h1{
-        margin-bottom: 1rem;
-        color: white;
-    }
-    .opensource-section-text > p{
-        max-width: 60rem;
-        margin: auto;
-        color: white;
-
-    }
-    .opensource-section-img{
-        margin-top: -8rem;
-        position: relative;
-        top: 10rem;
-    }
-    .opensource-section-img img{
-        height: 30rem;
-        box-shadow: 0px 8px 20px -10px black;
-    }
-    @media only screen and (max-width:600px){
-        .opensource-section-img img{
-            height: 18rem;
-        }
-    }
-
     .opportunity-section {
  
     }

diff --git a/src/sections/Careers/index.js b/src/sections/Careers/index.js
@@ -8,7 +8,6 @@ import Five from "../../sections/Community/Community-pictures/community.png";
 import JoinCommunity from "../Community/Join-community";
 import CareersSectionWrapper from "./careers.style";
 
-const Five_image = "./img/open-source.png";
 const Layer5_culture = "./img/layer5-culture.png";
 
 const CareersPage = () => {
@@ -19,20 +18,6 @@ const CareersPage = () => {
         <Container>
           <p className="centerTexts">If you’re a smart, curious person who can make contributions in and out of your areas of expertise, why not start now?</p>
         </Container>
-        <div className="opensource-section">
-          <div className="opensource-section-text">
-            <h1>Open Source is in our DNA</h1>
-            <p>
-              Layer5 projects are open source software. Anyone can download, use, work on, and share it with others. It's built on principles like collaboration, globalism, and innovation. Layer5 projects are distributed under the terms of Apache v2.
-            </p>
-            <p>
-              We believe that all contributors should expect and be part of a safe and friendly environment for constructive contribution. We can more effectively and successfully compare and challenge different ideas to find the best solutions for advancement, while building the size, diversity, and strength of our community.
-            </p>
-          </div>
-          <div className="opensource-section-img">
-            <StaticImage src={Five_image} alt="Five" />
-          </div>
-        </div>
         <Container>
           <Row className="videoText">
             <div className="introText">