Skip to content

Commit 86993e4

Browse files
Chadha93Chadha93
authored
Merge pull request #4730 from ShravaniAK/shrak9
2 parents acfbe67 + c25867f commit 86993e4

File tree

2 files changed

+159
-33
lines changed

2 files changed

+159
-33
lines changed

‎src/sections/Company/About/about.style.js

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
import styled from "styled-components";
22

3-
43
const AboutSectionWrapper = styled.section`
54
5+
.About-projects-mobile{
6+
display:none;
7+
}
8+
.About-projects{
9+
display:flex;
10+
}
11+
.head-images-2-mobile{
12+
display:none;
13+
}
614
.section__particle {
715
position: absolute;
816
&.one {
@@ -50,7 +58,7 @@ const AboutSectionWrapper = styled.section`
5058
}
5159
5260
.about-text.text-two {
53-
color: ${props => props.theme.sideTextColor};
61+
color: ${(props) => props.theme.sideTextColor};
5462
font-weight: 400;
5563
margin-bottom: 28px;
5664
}
@@ -64,11 +72,24 @@ const AboutSectionWrapper = styled.section`
6472
6573
svg {
6674
.cncf-stacked-color_svg__st0 {
67-
fill: ${props => props.theme.whiteToGreen3C494F};
75+
fill: ${(props) => props.theme.whiteToGreen3C494F};
76+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
77+
}
78+
}
79+
}
80+
.head-images-2 {
81+
text-align: center;
82+
83+
svg {
84+
.cncf-stacked-color_svg__st0 {
85+
fill: ${(props) => props.theme.whiteToGreen3C494F};
6886
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
6987
}
7088
}
7189
}
90+
.head-images-mobile{
91+
display:none;
92+
}
7293
.colab {
7394
font-size: 20px;
7495
font-weight: 500;
@@ -96,13 +117,13 @@ const AboutSectionWrapper = styled.section`
96117
margin-top: 4rem;
97118
margin-bottom: 0rem;
98119
font-family:"Qanelas Soft";
99-
color: ${props => props.theme.whiteToBlack};
120+
color: ${(props) => props.theme.whiteToBlack};
100121
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
101122
}
102123
h4{
103124
margin-bottom: 1.7vw;
104125
font-family:"Qanelas Soft";
105-
color: ${props => props.theme.whiteSevenToBlackSeven};
126+
color: ${(props) => props.theme.whiteSevenToBlackSeven};
106127
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
107128
}
108129
}
@@ -136,11 +157,11 @@ const AboutSectionWrapper = styled.section`
136157
}
137158
.section-title{
138159
#contact{
139-
background: ${props => props.theme.highlightColor};
160+
background: ${(props) => props.theme.highlightColor};
140161
141162
&:hover {
142-
background: ${props => props.theme.highlightLightColor};
143-
box-shadow: ${props => props.theme.whiteFourToBlackFour} 0px 2px 10px;
163+
background: ${(props) => props.theme.highlightLightColor};
164+
box-shadow: ${(props) => props.theme.whiteFourToBlackFour} 0px 2px 10px;
144165
}
145166
}
146167
}
@@ -269,6 +290,34 @@ const AboutSectionWrapper = styled.section`
269290
}
270291
@media only screen and (max-width: 480px) {
271292
padding: 40px 0 60px 0;
293+
.head-images-mobile{
294+
display:flex;
295+
}
296+
.head-images{
297+
display:none;
298+
}
299+
.head-images-2-mobile{
300+
margin:2rem 0;
301+
display:block;
302+
text-align: center;
303+
304+
svg {
305+
.cncf-stacked-color_svg__st0 {
306+
fill: ${(props) => props.theme.whiteToGreen3C494F};
307+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
308+
}
309+
}
310+
}
311+
.head-images-2{
312+
display:none;
313+
}
314+
.About-projects{
315+
display:none;
316+
}
317+
.About-projects-mobile{
318+
margin-bottom:2rem;
319+
display:flex;
320+
}
272321
.section-title {
273322
h2 {
274323
margin-bottom: 0rem;

‎src/sections/Company/About/index.js

Lines changed: 102 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const About = () => {
1919

2020
return (
2121
<AboutSectionWrapper id="about">
22-
2322
<Container fullWidthSM>
2423
<Row Vcenter={true} className="aboutus-title">
2524
<Col xs={12} sm={12}>
@@ -32,31 +31,80 @@ const About = () => {
3231
<Col xs={12} sm={6}>
3332
<div className="about-text text-one">
3433
<h1>About Us</h1>
35-
<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>
36-
<p>Our cloud native application and infrastructure management software enables organizations to expect more from their infrastructure.</p>
37-
34+
<p>
35+
We embrace <i>developer</i>-defined infrastructure. We
36+
empower developers to change how they write applications,
37+
support <i>operators</i> in rethinking how they run modern
38+
infrastructure, and enable <i>product owners</i> to regain
39+
full-control over their product portfolio.
40+
</p>
41+
<p>
42+
Our cloud native application and infrastructure management
43+
software enables organizations to expect more from their
44+
infrastructure.
45+
</p>
46+
<div className="head-images-mobile">
47+
<img src={FiveIcon} alt="About Layer5" />
48+
</div>
3849
<p className="section-title">We are enablers.</p>
39-
<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>
50+
<p>
51+
At Layer5, we believe collaboration enables innovation, and
52+
infrastructure enables collaboration. We help organizations
53+
look at their infrastructure differently, asking it "what
54+
have you done for me lately?". Our suite of multi-mesh,
55+
multi-cloud infrastructure management products — all with
56+
open source projects at their core — underpin each of our
57+
offerings.{" "}
58+
</p>
4059
{/* <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> */}
4160
</div>
4261
</Col>
4362
</Row>
44-
<img loading="lazy" src={Layer5Projects} alt="About Layer5 Projects" />
63+
<img
64+
loading="lazy"
65+
src={Layer5Projects}
66+
alt="About Layer5 Projects"
67+
className="About-projects"
68+
/>
4569
<Row Vcenter={true} className="row-img-cont-2">
4670
<Col xs={12} sm={6}>
71+
<img
72+
loading="lazy"
73+
src={Layer5Projects}
74+
alt="About Layer5 Projects"
75+
className="About-projects-mobile"
76+
/>
4777
<div className="about-text text-two">
4878
<h1>Open Source First</h1>
4979
<p className="indent">
5080
Our projects establish industry standards and enable
51-
developers, operators, and product owners with repeatable patterns and best practices for managing all aspects of distributed services.
81+
developers, operators, and product owners with repeatable
82+
patterns and best practices for managing all aspects of
83+
distributed services.
5284
</p>
85+
<div className="head-images-2-mobile">
86+
<img
87+
src={communityStat}
88+
alt="Layer5 Community Stat"
89+
loading="lazy"
90+
/>
91+
</div>
5392
<p className="section-title">We are principled.</p>
54-
<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>
93+
<p>
94+
We are proud of the inclusive and kind work environment we
95+
have built. We support each other as we work to solve
96+
important problems. We take our work seriously, and we do it
97+
with integrity and in alignment with our core principles.
98+
</p>
5599
</div>
56100
</Col>
57101
<Col xs={12} sm={6}>
58-
<div className="head-images">
59-
<img src={communityStat} alt="Layer5 Community Stat" loading="lazy"/>
102+
<div className="head-images-2">
103+
<img
104+
src={communityStat}
105+
alt="Layer5 Community Stat"
106+
loading="lazy"
107+
/>
60108
</div>
61109
</Col>
62110
</Row>
@@ -70,7 +118,11 @@ const About = () => {
70118
<Row Vcenter={true} className="row-img-cont-1">
71119
<Col xs={12} sm={6}>
72120
<div className="head-images-meet">
73-
<StaticImage src={Community_meetup} alt="Community_meetup" loading="lazy" />
121+
<StaticImage
122+
src={Community_meetup}
123+
alt="Community_meetup"
124+
loading="lazy"
125+
/>
74126
<figcaption className="caption">
75127
Layer5 community members at Open Source Africa Community
76128
conference, March 2022.
@@ -81,11 +133,20 @@ const About = () => {
81133
<div className="about-text text-one">
82134
<h1>Community First</h1>
83135
<p className="indent">
84-
Layer5 is powered by a growing community of collaborators representing industry leading, cloud native, open source software.
136+
Layer5 is powered by a growing community of collaborators
137+
representing industry leading, cloud native, open source
138+
software.
85139
</p>
86140
<p className="section-title">We are remote oriented.</p>
87-
<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>
88-
<Link className="mute" to="/careers">Learn how Layer5 works</Link>
141+
<p>
142+
Our remote working model has been in our DNA since our
143+
genesis in 2020, which allows us to maintain a flexible
144+
working environment and gives us access to a global pool of
145+
diverse talent.
146+
</p>
147+
<Link className="mute" to="/careers">
148+
Learn how Layer5 works
149+
</Link>
89150
</div>
90151
</Col>
91152
</Row>
@@ -102,32 +163,45 @@ const About = () => {
102163
UniWidth="100%"
103164
>
104165
<h1>Collaborate</h1>
105-
<p className="colab">Join the community and collaborate on our projects all around the world.</p>
166+
<p className="colab">
167+
Join the community and collaborate on our projects all around
168+
the world.
169+
</p>
106170

107-
<img id="mapBack" height="100%" width="100%" src={collabMap} alt="Layer5 Collaborators from around the globe" loading="lazy" />
171+
<img
172+
id="mapBack"
173+
height="100%"
174+
width="100%"
175+
src={collabMap}
176+
alt="Layer5 Collaborators from around the globe"
177+
loading="lazy"
178+
/>
108179
</SectionTitle>
109180
</Col>
110181
</Row>
111182
</Container>
112183

113184
<Container fullWidthSM>
114185
<Row Vcenter={true} className="aboutus-title">
115-
<Col xs={12} sm={12} >
186+
<Col xs={12} sm={12}>
116187
<h1 className="bottom-sect-head">Locations</h1>
117188
<div>
118189
<Row className="location-row">
119190
<Col xs={12} sm={6}>
120191
<div className="footer-section">
121192
<a href="https://goo.gl/maps/3oeuqrsMtHPQSTmQ8">
122-
<img src={location} className="location" alt="Layer5 locations" loading="lazy"/>
193+
<img
194+
src={location}
195+
className="location"
196+
alt="Layer5 locations"
197+
loading="lazy"
198+
/>
123199
</a>
124200
<div className="loc">
125201
<p className="country">USA</p>
126202
<p className="address">
127-
Layer5, Inc.,
128-
Corporate Headquarters
203+
Layer5, Inc., Corporate Headquarters
129204
<br />
130-
131205
701 Brazos Street, Suite 1600
132206
<br />
133207
Austin, TX 78701
@@ -138,13 +212,17 @@ const About = () => {
138212
<Col xs={12} sm={6}>
139213
<div className="footer-section">
140214
<a href="https://goo.gl/maps/1nF7vNmVq5fm2GLS6">
141-
<img src={location} className="location" alt="Layer5 locations" loading="lazy"/>
215+
<img
216+
src={location}
217+
className="location"
218+
alt="Layer5 locations"
219+
loading="lazy"
220+
/>
142221
</a>
143222
<div className="loc">
144223
<p className="country">Scotland</p>
145224
<p className="address">
146-
Layer5, Inc.,
147-
Engineering
225+
Layer5, Inc., Engineering
148226
<br />
149227
3 Queen Street
150228
<br />
@@ -156,7 +234,6 @@ const About = () => {
156234
</div>
157235
</Col>
158236
</Row>
159-
160237
</div>
161238
</Col>
162239
</Row>

0 commit comments

Comments
 (0)