From 341591015100e859dfb1a06107407899f3ef74c0 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <tharanishwaran.ta@gmail.com>
Date: Sat, 18 Jan 2025 20:35:05 +0530
Subject: [PATCH] Relocate "Open Source is in our DNA" section above internship
 programs

Signed-off-by: Tharanishwaran <tharanishwaran.ta@gmail.com>
---
 .../ProgramGrid.style.js                      | 42 +++++++++++++++++++
 .../Careers/Careers-Programs-grid/index.js    | 17 ++++++++
 src/sections/Careers/careers.style.js         | 38 +----------------
 src/sections/Careers/index.js                 | 15 -------
 4 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js b/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
index f520ef66df3c..60dac61d112f 100644
--- 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
index b772affc749b..65dd1b7e4e92 100644
--- 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
index fbfad89b6a95..140a2b416f20 100644
--- 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
index 327a7ed94cb3..150b8625ac2e 100644
--- 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">