Merge pull request #5480 from layer5io/ritiksaxena124/images-update

Images updated with Five

src/sections/Careers/careers.style.js

@@ -23,11 +23,12 @@ p {
     .videoText {
         flex-wrap: nowrap;
         margin: auto;
-        margin-top: 4rem;
+        margin-top: 8rem;
+        display: flex;
+        align-items: center;
+        gap: 2rem;
     }
     .introText{
-        width: 50%;
-        clear:both;
         margin-top: 9rem;
     }
     .introText h1{

src/sections/Careers/index.js

@@ -4,11 +4,12 @@ import { Container } from "../../reusecore/Layout";
 import { Row } from "../../reusecore/Layout";
 import PageHeader from "../../reusecore/PageHeader";
 import InternshipPage from "./Careers-Internship-grid";
-import Lee_giveaway from "../../assets/images/careers/Lee-giving-away-free-t-shirts-at-UT-Austin.jpeg";
+import Five from "../../sections/Community/Community-pictures/community.png";
 import JoinCommunity from "../Community/Join-community";
 import CareersSectionWrapper from "./careers.style";
 
-const Lee_and_Rigs = "../../assets/images/careers/Lee-and-Rigs-Caballero-of-Google.jpeg";
+const Five_image = "./img/open-source.png";
+const Layer5_culture = "./img/layer5-culture.png";
 
 const CareersPage = () => {
   return (
@@ -29,7 +30,7 @@ const CareersPage = () => {
             </p>
           </div>
           <div className="opensource-section-img">
-            <StaticImage src={Lee_and_Rigs} alt="Lee-and-Rigs-Caballero-of-Google" />
+            <StaticImage src={Five_image} alt="Five" />
           </div>
         </div>
         <Container>
@@ -43,23 +44,16 @@ const CareersPage = () => {
               <p><strong>You should... </strong>
                 pay attention to detail and take pride in your work. Know when to prioritize and have the discipline to adhere to those priorities. Focus on the customer. Pay it forward and enable others. Bring solutions with the problems. Take out the trash (do grunt work) as needed.</p>
             </div>
-            <div className="introVideo">
-              <iframe
-                width="392"
-                height="220.5"
-                src="https://www.youtube.com/embed/0yN5T5LB9ps"
-                loading="lazy"
-                frameBorder="0"
-                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen />
+            <div className="introImage">
+              <StaticImage src={Layer5_culture} alt="Five holding Layer5 banner" />
             </div>
           </Row>
         </Container>
         <div className="opportunity-section">
           <InternshipPage hide_heading={true} />
         </div>
 
-        <JoinCommunity image={Lee_giveaway} />
+        <JoinCommunity image={Five} />
         <Container>
           <br />
           <p className="center">Open source contributors come in all shapes, sizes, colors and so on. All are welcome in the Layer5 projects and community!!</p>

src/sections/Community/Newcomers-guide/index.js

@@ -4,17 +4,16 @@ import Button from "../../../reusecore/Button";
 import { Col, Container, Row } from "../../../reusecore/Layout";
 import PageHeader from "../../../reusecore/PageHeader";
 import { NewcomersGuideWrapper } from "./NewcomersPageWrapper.style";
-import { ReactComponent as CommunityImage1 } from "../../../assets/images/newcomers-page-images/layer5-contributor.svg";
-import CommunityImage4 from "./community-image4.webp";
+import CommunityImage4 from "../Community-pictures/community.png";
 import TutorialsTable from "./Tutorials-table";
 import NewcomersMap from "./newcomers-map";
 import JoinCommunity from "../Join-community";
 import longArrow from "./long-arrow.svg";
 import { StaticImage } from "gatsby-plugin-image";
-import  badgeImage from "../../../assets/images/recognition-program/recognition-program.png";
 
-const CommunityImage2 = "../../../assets/images/newcomers-page-images/community-image3.webp";
+const CommunityImage2 = "../Community-pictures/five-finding-issue.png";
 const CommunityImage3 = "../../../assets/images/newcomers-page-images/community-collage.webp";
+const FiveWorking = "../Community-pictures/five-working.png";
 
 const NewcomersGuide = () => {
   const [hover, setHover] = useState(false);
@@ -83,7 +82,7 @@ const NewcomersGuide = () => {
             </Col>
             <Col sm={12} lg={6}>
               <div className="finding-an-issue">
-                <CommunityImage1  alt="Community Image" />
+                <StaticImage src={CommunityImage2} alt="Five Working Image" />
               </div>
             </Col>
             <Col sm={12} lg={6}>
@@ -186,7 +185,7 @@ const NewcomersGuide = () => {
               </ol>
             </Col>
             <Col sm={12} lg={6} className="community-img">
-              <StaticImage src={CommunityImage2} alt="Community Image" />
+              <StaticImage src={FiveWorking} alt="Five Working Image" />
             </Col>
           </Row>
           <Row className="step">
@@ -217,31 +216,6 @@ const NewcomersGuide = () => {
               </p>
             </Col>
           </Row>
-          <Row>
-            <Col sm={12} lg={6} style={{ marginTop: "3rem" }}>
-              <h3>Recognizing Community Members</h3>
-              <ol type="i">
-                <li>
-               Community members, whether users or contributors, receive badges upon achieving various milestones throughout their journey. These milestones can be related to community activities or aspects of using or contributing to a project.
-                </li>
-                <li>
-                Every community member, whether contributing with code or not, has the opportunity to earn any number of badges in recognition of your achievements.{" "}
-                </li>
-                <li>See what badges you can earn by visiting the {" "}
-                  <a
-                    href="https://badges.layer5.io"
-                    target="_blank" rel="noreferrer"
-                  >
-                    Layer5 badges site
-                  </a>{" "}
-                Collect the whole set!
-                </li>
-              </ol>
-            </Col>
-            <Col sm={12} lg={6} className="community-collage">
-              <img src={badgeImage} alt="Community Image" />
-            </Col>
-          </Row>
         </div>
         <div className="table-wrapper">
           <h2>Tutorials</h2>

src/sections/Community/index.js

@@ -5,11 +5,10 @@ import { StaticImage } from "gatsby-plugin-image";
 import { Container, Row, Col } from "../../reusecore/Layout";
 import Button from "../../reusecore/Button";
 import JoinCommunity from "../Community/Join-community";
-import PictureSlider from "./slider";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { FaUsers } from "@react-icons/all-files/fa/FaUsers";
 import CommunitySectionWrapper from "./community.style";
-import Lee_workshop from "../../assets/images/community/Lee_Workshop.webp";
+import Five from "./Community-pictures/community.png";
 import NewcomersMap from "./Newcomers-guide/newcomers-map.js";
 import DiscussCallout from "../../sections/Discuss-Callout";
 import { ReactComponent as MeshmateIcon } from "../../assets/images/meshmate/meshmate-stack-colorMode.svg";
@@ -19,8 +18,10 @@ import { BgImage } from "gbimage-bridge";
 import useHasMounted from "../../utils/useHasMounted";
 import InlineQuotes from "../../components/Inline-quotes";
 import AdventuresCallout from "../Adventures-Callout";
+// import PictureSlider from "./slider";
 
-const CommunityMember = "./Community-pictures/Lee Calcote and Oliver Gould - CTO of Buoyant.webp";
+const CommunityMember = "./Community-pictures/five.svg";
+const Picture = "./Community-pictures/join-the-community.png";
 
 const CommunityPage = () => {
 
@@ -95,7 +96,8 @@ const CommunityPage = () => {
               <Button primary title="See our community member profiles" url="/community/members" />
             </Col>
             <Col className="slider" sm={12} lg={6}>
-              <PictureSlider />
+              <StaticImage src={Picture} alt="Five_with_banner" />
+              {/* <PictureSlider /> */}
             </Col>
           </Row>
         </div>
@@ -155,7 +157,7 @@ const CommunityPage = () => {
           <InlineQuotes title={"Community Member"} quote={"Wow, you all are incredibly helpful. I wish every open source community was as friendly as Layer5's."} person={"Priyanshu Sharma"}/>
         </Container>
       </div>
-      <JoinCommunity image={Lee_workshop} className="newcomers-join" />
+      <JoinCommunity image={Five} className="newcomers-join" />
       <Container className="Callout">
         <DiscussCallout />
         <AdventuresCallout />