Skip to content

Commit

Permalink
Merge pull request #4730 from ShravaniAK/shrak9
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chadha93
Chadha93 authored Aug 16, 2023
2 parents acfbe67 + c25867f commit 86993e4
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 33 deletions.
65 changes: 57 additions & 8 deletions src/sections/Company/About/about.style.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import styled from "styled-components";


const AboutSectionWrapper = styled.section`
.About-projects-mobile{
display:none;
}
.About-projects{
display:flex;
}
.head-images-2-mobile{
display:none;
}
.section__particle {
position: absolute;
&.one {
Expand Down Expand Up @@ -50,7 +58,7 @@ const AboutSectionWrapper = styled.section`
}
.about-text.text-two {
color: ${props => props.theme.sideTextColor};
color: ${(props) => props.theme.sideTextColor};
font-weight: 400;
margin-bottom: 28px;
}
Expand All @@ -64,11 +72,24 @@ const AboutSectionWrapper = styled.section`
svg {
.cncf-stacked-color_svg__st0 {
fill: ${props => props.theme.whiteToGreen3C494F};
fill: ${(props) => props.theme.whiteToGreen3C494F};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}
}
.head-images-2 {
text-align: center;
svg {
.cncf-stacked-color_svg__st0 {
fill: ${(props) => props.theme.whiteToGreen3C494F};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}
}
.head-images-mobile{
display:none;
}
.colab {
font-size: 20px;
font-weight: 500;
Expand Down Expand Up @@ -96,13 +117,13 @@ const AboutSectionWrapper = styled.section`
margin-top: 4rem;
margin-bottom: 0rem;
font-family:"Qanelas Soft";
color: ${props => props.theme.whiteToBlack};
color: ${(props) => props.theme.whiteToBlack};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
h4{
margin-bottom: 1.7vw;
font-family:"Qanelas Soft";
color: ${props => props.theme.whiteSevenToBlackSeven};
color: ${(props) => props.theme.whiteSevenToBlackSeven};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}
Expand Down Expand Up @@ -136,11 +157,11 @@ const AboutSectionWrapper = styled.section`
}
.section-title{
#contact{
background: ${props => props.theme.highlightColor};
background: ${(props) => props.theme.highlightColor};
&:hover {
background: ${props => props.theme.highlightLightColor};
box-shadow: ${props => props.theme.whiteFourToBlackFour} 0px 2px 10px;
background: ${(props) => props.theme.highlightLightColor};
box-shadow: ${(props) => props.theme.whiteFourToBlackFour} 0px 2px 10px;
}
}
}
Expand Down Expand Up @@ -269,6 +290,34 @@ const AboutSectionWrapper = styled.section`
}
@media only screen and (max-width: 480px) {
padding: 40px 0 60px 0;
.head-images-mobile{
display:flex;
}
.head-images{
display:none;
}
.head-images-2-mobile{
margin:2rem 0;
display:block;
text-align: center;
svg {
.cncf-stacked-color_svg__st0 {
fill: ${(props) => props.theme.whiteToGreen3C494F};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}
}
.head-images-2{
display:none;
}
.About-projects{
display:none;
}
.About-projects-mobile{
margin-bottom:2rem;
display:flex;
}
.section-title {
h2 {
margin-bottom: 0rem;
Expand Down
127 changes: 102 additions & 25 deletions src/sections/Company/About/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ const About = () => {

return (
<AboutSectionWrapper id="about">

<Container fullWidthSM>
<Row Vcenter={true} className="aboutus-title">
<Col xs={12} sm={12}>
Expand All @@ -32,31 +31,80 @@ const About = () => {
<Col xs={12} sm={6}>
<div className="about-text text-one">
<h1>About Us</h1>
<p>We embrace <i>developer</i>-defined infrastructure. We empower developers to change how they write applications, support <i>operators</i> in rethinking how they run modern infrastructure, and enable <i>product owners</i> to regain full-control over their product portfolio.</p>
<p>Our cloud native application and infrastructure management software enables organizations to expect more from their infrastructure.</p>

<p>
We embrace <i>developer</i>-defined infrastructure. We
empower developers to change how they write applications,
support <i>operators</i> in rethinking how they run modern
infrastructure, and enable <i>product owners</i> to regain
full-control over their product portfolio.
</p>
<p>
Our cloud native application and infrastructure management
software enables organizations to expect more from their
infrastructure.
</p>
<div className="head-images-mobile">
<img src={FiveIcon} alt="About Layer5" />
</div>
<p className="section-title">We are enablers.</p>
<p>At Layer5, we believe collaboration enables innovation, and infrastructure enables collaboration. We help organizations look at their infrastructure differently, asking it "what have you done for me lately?". Our suite of multi-mesh, multi-cloud infrastructure management products — all with open source projects at their core — underpin each of our offerings. </p>
<p>
At Layer5, we believe collaboration enables innovation, and
infrastructure enables collaboration. We help organizations
look at their infrastructure differently, asking it "what
have you done for me lately?". Our suite of multi-mesh,
multi-cloud infrastructure management products — all with
open source projects at their core — underpin each of our
offerings.{" "}
</p>
{/* <p>As stewards of industry, we enable organizations of all sizes, from well-known brands to ambitious start-ups to rely on our solutions to provision, secure, connect, and run their business-critical applications.</p> */}
</div>
</Col>
</Row>
<img loading="lazy" src={Layer5Projects} alt="About Layer5 Projects" />
<img
loading="lazy"
src={Layer5Projects}
alt="About Layer5 Projects"
className="About-projects"
/>
<Row Vcenter={true} className="row-img-cont-2">
<Col xs={12} sm={6}>
<img
loading="lazy"
src={Layer5Projects}
alt="About Layer5 Projects"
className="About-projects-mobile"
/>
<div className="about-text text-two">
<h1>Open Source First</h1>
<p className="indent">
Our projects establish industry standards and enable
developers, operators, and product owners with repeatable patterns and best practices for managing all aspects of distributed services.
developers, operators, and product owners with repeatable
patterns and best practices for managing all aspects of
distributed services.
</p>
<div className="head-images-2-mobile">
<img
src={communityStat}
alt="Layer5 Community Stat"
loading="lazy"
/>
</div>
<p className="section-title">We are principled.</p>
<p>We are proud of the inclusive and kind work environment we have built. We support each other as we work to solve important problems. We take our work seriously, and we do it with integrity and in alignment with our core principles.</p>
<p>
We are proud of the inclusive and kind work environment we
have built. We support each other as we work to solve
important problems. We take our work seriously, and we do it
with integrity and in alignment with our core principles.
</p>
</div>
</Col>
<Col xs={12} sm={6}>
<div className="head-images">
<img src={communityStat} alt="Layer5 Community Stat" loading="lazy"/>
<div className="head-images-2">
<img
src={communityStat}
alt="Layer5 Community Stat"
loading="lazy"
/>
</div>
</Col>
</Row>
Expand All @@ -70,7 +118,11 @@ const About = () => {
<Row Vcenter={true} className="row-img-cont-1">
<Col xs={12} sm={6}>
<div className="head-images-meet">
<StaticImage src={Community_meetup} alt="Community_meetup" loading="lazy" />
<StaticImage
src={Community_meetup}
alt="Community_meetup"
loading="lazy"
/>
<figcaption className="caption">
Layer5 community members at Open Source Africa Community
conference, March 2022.
Expand All @@ -81,11 +133,20 @@ const About = () => {
<div className="about-text text-one">
<h1>Community First</h1>
<p className="indent">
Layer5 is powered by a growing community of collaborators representing industry leading, cloud native, open source software.
Layer5 is powered by a growing community of collaborators
representing industry leading, cloud native, open source
software.
</p>
<p className="section-title">We are remote oriented.</p>
<p>Our remote working model has been in our DNA since our genesis in 2020, which allows us to maintain a flexible working environment and gives us access to a global pool of diverse talent.</p>
<Link className="mute" to="/careers">Learn how Layer5 works</Link>
<p>
Our remote working model has been in our DNA since our
genesis in 2020, which allows us to maintain a flexible
working environment and gives us access to a global pool of
diverse talent.
</p>
<Link className="mute" to="/careers">
Learn how Layer5 works
</Link>
</div>
</Col>
</Row>
Expand All @@ -102,32 +163,45 @@ const About = () => {
UniWidth="100%"
>
<h1>Collaborate</h1>
<p className="colab">Join the community and collaborate on our projects all around the world.</p>
<p className="colab">
Join the community and collaborate on our projects all around
the world.
</p>

<img id="mapBack" height="100%" width="100%" src={collabMap} alt="Layer5 Collaborators from around the globe" loading="lazy" />
<img
id="mapBack"
height="100%"
width="100%"
src={collabMap}
alt="Layer5 Collaborators from around the globe"
loading="lazy"
/>
</SectionTitle>
</Col>
</Row>
</Container>

<Container fullWidthSM>
<Row Vcenter={true} className="aboutus-title">
<Col xs={12} sm={12} >
<Col xs={12} sm={12}>
<h1 className="bottom-sect-head">Locations</h1>
<div>
<Row className="location-row">
<Col xs={12} sm={6}>
<div className="footer-section">
<a href="https://goo.gl/maps/3oeuqrsMtHPQSTmQ8">
<img src={location} className="location" alt="Layer5 locations" loading="lazy"/>
<img
src={location}
className="location"
alt="Layer5 locations"
loading="lazy"
/>
</a>
<div className="loc">
<p className="country">USA</p>
<p className="address">
Layer5, Inc.,
Corporate Headquarters
Layer5, Inc., Corporate Headquarters
<br />

701 Brazos Street, Suite 1600
<br />
Austin, TX 78701
Expand All @@ -138,13 +212,17 @@ const About = () => {
<Col xs={12} sm={6}>
<div className="footer-section">
<a href="https://goo.gl/maps/1nF7vNmVq5fm2GLS6">
<img src={location} className="location" alt="Layer5 locations" loading="lazy"/>
<img
src={location}
className="location"
alt="Layer5 locations"
loading="lazy"
/>
</a>
<div className="loc">
<p className="country">Scotland</p>
<p className="address">
Layer5, Inc.,
Engineering
Layer5, Inc., Engineering
<br />
3 Queen Street
<br />
Expand All @@ -156,7 +234,6 @@ const About = () => {
</div>
</Col>
</Row>

</div>
</Col>
</Row>
Expand Down

0 comments on commit 86993e4

Please sign in to comment.