Skip to content

Commit c50aa9a

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
added all components
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent 8d4e89b commit c50aa9a

10 files changed

Lines changed: 1698 additions & 0 deletions

‎src/sections/Solutions/manage-procedures.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import styled from "styled-components";
2+
import React from "react";
3+
import ExecuteWithEfficiencyIcon from "./images/execute-with-efficiency-icon.svg";
4+
import ExecuteWithEfficiencyImage from "./images/execute-with-efficiency.svg";
5+
import OptimizeWorkflowIcon from "./images/optimize-workflow-icon.svg";
6+
import OptimizeWorkflowImage from "./images/optimize-workflow.svg";
7+
8+
const ManageProceduresWrapper = styled.section`
9+
width: 100vw;
10+
position: relative;
11+
left: 50%;
12+
right: 50%;
13+
margin-left: -50vw;
14+
margin-right: -50vw;
15+
background: ${(props) => props.theme.blackToWhite || "transparent"};
16+
padding: 3rem 0;
17+
overflow: hidden;
18+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
19+
20+
@media (max-width: 992px) {
21+
padding: 4rem 2rem;
22+
}
23+
24+
@media (max-width: 600px) {
25+
padding: 3rem 1rem;
26+
}
27+
`;
28+
29+
const Inner = styled.div`
30+
width: 100%;
31+
max-width: 1140px;
32+
margin: 0 auto;
33+
display: flex;
34+
flex-direction: column;
35+
gap: 2.5rem;
36+
`;
37+
38+
const Heading = styled.h2`
39+
font-family: "Qanelas Soft", sans-serif;
40+
font-weight: 600;
41+
font-size: 56px;
42+
line-height: 64px;
43+
letter-spacing: 0;
44+
color: ${({ theme }) => theme.whiteToBlack || "#ffffff"};
45+
margin: 0;
46+
text-align: center;
47+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
48+
49+
@media (max-width: 600px) {
50+
font-size: 48px;
51+
line-height: 56px;
52+
}
53+
`;
54+
55+
const CardsWrapper = styled.div`
56+
display: flex;
57+
gap: 2rem;
58+
59+
@media (max-width: 992px) {
60+
flex-direction: column;
61+
}
62+
`;
63+
64+
const Card = styled.div`
65+
flex: 1;
66+
background: linear-gradient(156.33deg, rgba(41, 59, 67, 0.3) -11.07%, #293b43 135.21%);
67+
border-radius: 20px;
68+
padding: 2rem;
69+
display: flex;
70+
flex-direction: column;
71+
gap: 1.5rem;
72+
`;
73+
74+
const CardHeader = styled.div`
75+
display: flex;
76+
align-items: center;
77+
gap: 1rem;
78+
`;
79+
80+
const CardTitle = styled.h3`
81+
font-family: "Qanelas Soft", sans-serif;
82+
font-weight: 600;
83+
font-size: 24px;
84+
line-height: 32px;
85+
color: ${({ theme }) => theme.whiteToBlack };
86+
margin: 0;
87+
`;
88+
89+
const CardBody = styled.div`
90+
display: flex;
91+
flex-direction: column;
92+
gap: 1rem;
93+
`;
94+
95+
const CardText = styled.p`
96+
font-family: "Open Sans", sans-serif;
97+
font-weight: 400;
98+
font-size: 16px;
99+
line-height: 28px;
100+
color: ${({ theme }) => theme.whiteToBlack};
101+
margin: 0;
102+
`;
103+
104+
const CardImage = styled.img`
105+
width: 100%;
106+
margin-top: auto;
107+
`;
108+
109+
const ManageProcedures = () => {
110+
return (
111+
<ManageProceduresWrapper>
112+
<Inner>
113+
<Heading>Manage procedures and output conveniently</Heading>
114+
<CardsWrapper>
115+
<Card>
116+
<CardHeader>
117+
<img src={OptimizeWorkflowIcon} alt="Optimize Workflow" />
118+
<CardTitle>Optimize workflow</CardTitle>
119+
</CardHeader>
120+
<CardBody>
121+
<CardText>
122+
Streamline and accelerate workflow while you monitor infrastructure during controlled chaos tests and thus diminish cost.
123+
</CardText>
124+
<CardText>
125+
Further use data insights gathered while monitoring to optimize your architecture.
126+
</CardText>
127+
</CardBody>
128+
<CardImage src={OptimizeWorkflowImage} alt="Optimize Workflow Diagram" />
129+
</Card>
130+
<Card>
131+
<CardHeader>
132+
<img src={ExecuteWithEfficiencyIcon} alt="Execute with efficiency" />
133+
<CardTitle>Execute with efficiency</CardTitle>
134+
</CardHeader>
135+
<CardBody>
136+
<CardText>
137+
Spend less time learning and execute more with predefined service mesh patterns that allow accurate configuration and management of service meshes.
138+
</CardText>
139+
<CardText>
140+
Reduce human error, adjust traffic routing, and de-provision services when no longer required.
141+
</CardText>
142+
</CardBody>
143+
<CardImage src={ExecuteWithEfficiencyImage} alt="Execute with Efficiency Diagram" />
144+
</Card>
145+
</CardsWrapper>
146+
</Inner>
147+
</ManageProceduresWrapper>
148+
);
149+
};
150+
151+
export default ManageProcedures;

0 commit comments

Comments
 (0)