Skip to content

Commit 12d93b0

Browse files
vr-varadvr-varad
authored
Merge pull request #6613 from vr-varad/update/platorm-eng
Update Platform Engineering Page.
2 parents 9610833 + 98f3e49 commit 12d93b0

15 files changed

Lines changed: 1787 additions & 1 deletion

File tree

‎src/components/Related-Posts/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ const RelatedPosts = props => {
2929
slidesToScroll= {1}
3030
>
3131
{
32-
postType === "blogs" ? relatedPosts.map(({ post }) => {
32+
postType === "blogs" ? relatedPosts.map((item) => {
33+
const post = item.post || item;
3334
return (
3435
<Col className="cardCol" $xs={12} key={post.fields.slug}>
3536
<Card frontmatter={post.frontmatter} fields={post.fields}/>

‎src/pages/solutions/platform-engineering/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
3+
import SEO from "../../../components/seo";
4+
import PlatformEngineeringSolutionPage from "../../../sections/Platform-Engineering";
5+
6+
7+
const PlatformEngineeringSolutions = () => {
8+
return (
9+
<>
10+
<PlatformEngineeringSolutionPage />
11+
</>
12+
);
13+
};
14+
export default PlatformEngineeringSolutions;
15+
export const Head = () => {
16+
return <SEO title="Platform Engineering"
17+
description="Empower Your Teams with Platform Engineering. Streamline development, enhance collaboration, and accelerate innovation in cloud-native environments."
18+
image="/images/solutions-devrel.png" />;
19+
};

‎src/sections/General/Navigation/utility/menu-items.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ const Data = {
3737
path: "/solutions/devrel-platform-for-kubernetes-and-cloud-native-content",
3838
sepLine: true,
3939
},
40+
{
41+
name: "Platform Engineering",
42+
path: "/solutions/platform-engineering",
43+
sepLine: true,
44+
},
4045
],
4146
actionItems: [
4247
{

‎src/sections/Platform-Engineering/banner.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
import Button from "../../reusecore/Button";
3+
import styled from "styled-components";
4+
import { BsArrowUpRight } from "@react-icons/all-files/bs/BsArrowUpRight";
5+
6+
const BestPracticesBanner = () => {
7+
return (
8+
<ObservabilityBannerWrapper>
9+
<div className="banner-content">
10+
<span className="banner-text">
11+
Discover best practices and reusable templates for Kubernetes and cloud-native infrastructure.
12+
</span>
13+
<Button $primary title="Cloud native catalog" $url="/cloud-native-management/catalog">
14+
<BsArrowUpRight size={16} className="icon-left" />
15+
16+
</Button>
17+
</div>
18+
</ObservabilityBannerWrapper>
19+
);
20+
};
21+
22+
const ObservabilityBannerWrapper = styled.div`
23+
width: 100%;
24+
background: #00b39f;
25+
margin-bottom: 4rem;
26+
padding: 1rem 0;
27+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
28+
29+
.banner-content {
30+
max-width: 90%;
31+
margin: 0 auto;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
gap: 2rem;
36+
37+
@media (max-width: 768px) {
38+
flex-direction: column;
39+
text-align: center;
40+
gap: 1rem;
41+
}
42+
}
43+
44+
.banner-text {
45+
color: white;
46+
font-size: 1.1rem;
47+
font-weight: 500;
48+
49+
@media (max-width: 768px) {
50+
font-size: 1rem;
51+
}
52+
}
53+
54+
`;
55+
56+
export default BestPracticesBanner;

‎src/sections/Platform-Engineering/header.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Row, Col, Container } from "../../reusecore/Layout";
4+
import MesheryDashboard from "./images/meshery-dashboard-hero-image.svg";
5+
import Button from "../../reusecore/Button";
6+
import SimpleReactLightbox, { SRLWrapper } from "simple-react-lightbox";
7+
import { Link } from "gatsby";
8+
import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
9+
import Projects from "../Home/Partners-home";
10+
import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
11+
12+
const PlatformEngineeringWrapper = styled.div`
13+
.header-buttons {
14+
display: flex;
15+
gap: 2rem;
16+
flex-wrap: wrap;
17+
.see-doc-link {
18+
display: flex;
19+
gap: 0.5rem;
20+
align-items: center;
21+
a {
22+
color: ${props => props.theme.text};
23+
transition: padding 0.5s ease;
24+
}
25+
a:hover {
26+
padding-right: 5px;
27+
}
28+
svg {
29+
display: flex;
30+
margin: auto;
31+
}
32+
}
33+
}
34+
.platform-engineering.header {
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: center;
38+
min-height: 40rem;
39+
background: ${(props) => props.$isDark ? "linear-gradient(0deg, #121212 33.89%, rgba(0, 179, 159, 0.74) 99.81%)" : "linear-gradient(0deg, rgba(255, 255, 255, 0.38) 33.89%, rgba(0, 179, 159, 0.74) 99.81%)"};
40+
.platform-header-row {
41+
justify-content: space-between;
42+
align-items: center;
43+
}
44+
.header-detail {
45+
display: flex;
46+
flex-direction: column;
47+
flex-basis: 45%;
48+
flex-grow: 1;
49+
}
50+
.header-title {
51+
color: ${(props) => props.theme.primaryColor};
52+
padding-right: 80px;
53+
margin-bottom: 20px;
54+
}
55+
.header-title-description {
56+
color: ${(props) => props.theme.tertiaryColor};
57+
font-weight: 400;
58+
font-size: 1.438rem;
59+
line-height: 2rem;
60+
padding-right: 80px;
61+
margin-bottom: 30px;
62+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
63+
}
64+
.platform {
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
flex-wrap: wrap;
69+
cursor: zoom-in;
70+
}
71+
@media screen and (max-width: 992px) {
72+
padding-bottom: 100px;
73+
.platform {
74+
margin-top: 50px;
75+
}
76+
}
77+
@media screen and (max-width: 768px) {
78+
padding: 50px 0;
79+
.header-title,
80+
.header-title-description {
81+
padding-right: 0;
82+
text-align: center;
83+
}
84+
.header-buttons{
85+
justify-content: center;
86+
}
87+
.header-title {
88+
margin-bottom: 10px;
89+
}
90+
.header-title-description {
91+
margin-bottom: 20px;
92+
}
93+
}
94+
}
95+
`;
96+
97+
98+
const Header = () => {
99+
const { isDark } = useStyledDarkMode();
100+
return (
101+
<PlatformEngineeringWrapper $isDark={isDark}>
102+
<div className="platform-engineering header">
103+
<Container>
104+
<Row className="row platform-header-row">
105+
<Col className="col header-detail" $md={6}>
106+
<h1 className="header-title">Platform Engineering</h1>
107+
108+
<p className="header-title-description">
109+
Deliver reliable self-service toolchains and workflows for all dev teams, at scale, with observability, security, and automation.
110+
</p>
111+
<div className="header-buttons">
112+
<Button
113+
$primary
114+
title="Try Kanvas"
115+
$external={true}
116+
$url="https://kanvas.new"
117+
/>
118+
<span className="see-doc-link">
119+
<Link to={"/kanvas"}>See Documentation</Link>
120+
<FaArrowRight />
121+
</span>
122+
</div>
123+
</Col>
124+
<Col className="col platform" $md={6}>
125+
<SimpleReactLightbox>
126+
<SRLWrapper>
127+
<img src={MesheryDashboard} alt="Meshery Dashboard" />
128+
</SRLWrapper>
129+
</SimpleReactLightbox>
130+
</Col>
131+
</Row>
132+
</Container>
133+
</div>
134+
<Projects title="Trusted by leading engineering teams worldwide" />
135+
</PlatformEngineeringWrapper>
136+
);
137+
};
138+
139+
export default Header;

0 commit comments

Comments
 (0)