Skip to content

feat: solutions page #6585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
vishalvivekm wants to merge 5 commits into from
Closed

feat: solutions page #6585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
570eaae
initial commit
vishalvivekm Jun 30, 2025
f650ea8
update sm to cloud native
vishalvivekm Jun 30, 2025
2480371
update sm to cn
vishalvivekm Jun 30, 2025
974af91
add book-a-demo url
vishalvivekm Jun 30, 2025
6d486d1
Merge branch 'master' into solutions-page
leecalcote Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/pages/solutions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@

import React from "react";

import SEO from "../../components/seo";
import SolutionPage from "../../sections/Solutions";

const Solutions = () => {
return (
<>
<SolutionPage />
</>
);
};
export default Solutions;
export const Head = () => {
return <SEO title="Solutions page"
description="Explore Layer5's solutions for cloud native management, platform engineering, and GitOps. Discover how to enhance your infrastructure with our curated catalog of best practices and patterns."
image="/images/meshery-logo-dark-text.png" />; // to update
};
139 changes: 139 additions & 0 deletions src/sections/Solutions/details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
import React from "react";
import styled from "styled-components";
import { Row, Col, Container } from "../../reusecore/Layout";
import HeroImage from "./images/hero-image.svg";
import Button from "../../reusecore/Button";

const SolutionsDetailsWrapper = styled.div`
margin-top: 4rem;
h2 {
margin-bottom: 2rem;
}
.solutions-details {
.list{
h1{
margin-bottom: 1.5rem;
@media screen and (min-width: 770px) {
width: 50%;
}
}
padding: 1.875rem 0px;
margin-top: 4rem;
.text{
p{
color: ${props => props.theme.tertiaryColor};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}

.listed{
text-align: left;
.table{
.icon{
object-fit: cover;
height: 2.5rem;
width: 2.5rem;
vertical-align: top;
}

svg {
rect {
fill: ${props => props.theme.grey313131ToGreenC9FCF6};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
path {
stroke: ${props => props.theme.green00D3A9ToGreen00B39F};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}

.details-para{
color: ${props => props.theme.tertiaryColor};
font-size: 16px;
padding: 0 0 1.25rem 1.875rem;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

h4{
font-weight: 600;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}
}
}
}
}

`;

const SolutionsDetails = () => {
return (
<SolutionsDetailsWrapper>
<div className="solutions-details">
<Container>
<h2>The Issues</h2>
<Row className="row">
<Col className="col header__detail" md={6}>
<p>On the one hand, cloud adoption offers the ability to quickly scale resources up or down, yet enterprises might overprovision resources due to a lack of proper monitoring and scaling strategies.</p>
<p>Also, very often, cloud resources are provisioned but not actively utilized, which creates unwanted room for waste without proper resource management and much-needed de-provisioning, thus increasing running cost of these resources.</p>
</Col>
<Col className="col catalog" $md={6}>
<p>
On some other occasions, some professionals have tools that already enable certain functionalities that ease workflow and implementation, and a lack of integration of these platforms can lead to further frustrations when implementing desired solutions. All of this can lead to higher, avoidable, and unnecessary costs.
</p>
<p>
Additionally, cloud environments are often distributed, dynamic, and composed of various interconnected services. This level of complexity can make it challenging to both identify the root cause of incidents and effectively coordinate controlled chaos experiments to test the resilience of cloud infrastructure.
</p>
</Col>
</Row>
<div className="list">
<h1>Minimize complexity and automate workflows</h1>
<Row>
<Col $lg={6} $md={6} $sm={12}>
<div className="text">
<p>Meshery helps users weigh the value of their cloud native deployments against the overhead cost incurred in running different deployment scenarios and different configurations. This empowers them with much needed information they require to optimize decision making for the business.Predefined patterns and profiles are already setup to make the configuration of cloud native infrastructure and its features simpler both to understand and execute. This reduces the learning curve required to implement complex cloud native infrastructure functionalities. Less time spent learning means appropriate utilization of resources which further minimizes incurred cost.</p>
</div>

</Col>
<Col $lg={6} $md={6} $sm={12}>
<div className="listed">
<p>Expect efficiency when you apply our suggestions and utilize our toolset with respect to incident management and chaos experiment discharge. Achieve optimization as you</p>
<table className="table">
<tbody>
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="details-para">
Make use of our established cloud native infrastructure patterns since they promote best practices for handling incidents and failures and will guide you on how to design and configure your cloud native infrastructure for optimal resilience.
</td>
</tr>
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="details-para">
Find in our playbooks, step-by-step procedures for identifying, diagnosing, and resolving common incidents that can occur in cloud native infrastructure environments.
</td>
</tr>
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="details-para">
Use Meshery's integration of the Chaos Toolkit and our readily available chaos experiment template to mitigate cost when you streamline and speed up workflow while defining and executing controlled chaos experiments on your cloud native infrastructure deployments.
</td>
</tr>
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="details-para">
Accurately monitor applications and infrastructure during chaos tests. Using data-driven insights gained from monitoring, you are able to observe how the system behaves under stress and when failures occur and then make improvements in your architecture using this information.
</td>
</tr>

</tbody>
</table>
</div>
</Col>
</Row>
</div>
</Container>
</div>
</SolutionsDetailsWrapper>
);
};

export default SolutionsDetails;
105 changes: 105 additions & 0 deletions src/sections/Solutions/hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from "react";
import styled from "styled-components";
import { Row, Col, Container } from "../../reusecore/Layout";
import HeroImage from "./images/hero-image.svg";
import Button from "../../reusecore/Button";

const SolutionsHeaderWrapper = styled.div`
.solutions.header {
min-height: 35rem;
background: ${({ theme }) => theme.linearToGreen};
display: flex;
align-items: center;
align-content: space-between;
flex-direction: column;
justify-content: center;
.header__detail {
display: flex;
flex-direction: column;
}
.header__title {
color: ${(props) => props.theme.primaryColor};
padding-right: 80px;
margin-bottom: 20px;
}
.header__title_description {
color: ${(props) => props.theme.tertiaryColor};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
font-weight: 400;
font-size: 1.438rem;
line-height: 2rem;
padding-right: 80px;
margin-bottom: 30px;
}
.solution-hero {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
img {
max-width: 70%;
}
}

@media screen and (max-width: 992px) {
padding-bottom: 100px;
.solution-hero {
margin: 50px 0 0 0;
}
}

@media screen and (max-width: 768px) {
padding: 50px 0;
.header__detail {
display: flex;
flex-direction: column;
}
.header__title {
padding-right: 0;
text-align: center;
margin-bottom: 10px;
}
.header__title_description {
padding-right: 0;
text-align: center;
margin-bottom: 20px;
}
.header__button_section {
display: flex;
justify-content: center;
}
}
}
`;

const Hero = () => {
return (
<SolutionsHeaderWrapper>
<div className="solutions header">
<Container>
<Row className="row">
<Col className="col header__detail" md={6}>
<h1 className="header__title">Cost, incident and chaos oversight</h1>
<p className="header__title_description">
Save cost, reduce risk and manage infrastructure failure.
</p>
<div className="header__button_section">
<Button
$secondary
title="Book a demo"
$external={true}
$url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
/>
</div>
</Col>
<Col className="col solution-hero" $md={6}>
<img src={HeroImage} alt="hero image" />
</Col>
</Row>
</Container>
</div>
</SolutionsHeaderWrapper>
);
};

export default Hero;
27 changes: 27 additions & 0 deletions src/sections/Solutions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from "react";
import Hero from "./hero";
import SolutionsDetails from "./details";
import WorkflowSection from "./workflow";
import Faq from "../General/Faq";
import Customers from "../../reusecore/Blockquote/Blockquote-image";
import Otto from "../../collections/members/otto-van-der-schaaf/otto-van-der-schaaf.webp";

const SolutionPage = () => {
return (
<>
<Hero />
<SolutionsDetails />
<WorkflowSection />
<Faq category={["Pricing"]} title="Some answers to more of your questions" />
{/* <Customers
type="2"
quote="The precision by which performance measurements are generated and analyzed is a pinnacle focus of Nighthawk. Mesh performance characterization should be distilled from a set of value measurements, and that is where MeshMark compliments to create the ultimate comprehensive efficiency calculation."
person="Otto Van Der Schaaf"
title="Principal Engineer at Red Hat"
image={Otto}
/> */}
</>
);
};

export default SolutionPage;
Loading
Loading