+
+
+
+ );
+};
+
+export default index;
diff --git a/src/pages/products/pricing.style.js b/src/pages/products/pricing.style.js
new file mode 100644
index 000000000000..7b3e6c63fe06
--- /dev/null
+++ b/src/pages/products/pricing.style.js
@@ -0,0 +1,573 @@
+import styled from "styled-components";
+
+const PricingWrapper = styled.section`
+ .freeCont {
+ width: 100vw;
+ overflow: hidden;
+ }
+ .headers {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ gap: 40px;
+ padding: 0 20px;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ h1 {
+ color: ${(props) => props.theme.whiteToBlack};
+ font-weight: bolder;
+ }
+ h1 span {
+ color: rgb(235, 192, 23);
+ }
+
+ p {
+ color: ${(props) => props.theme.whiteToBlack};
+ }
+
+ .header-heading {
+ color: ${(props) => props.theme.whiteToBlack};
+ text-align: center;
+ }
+ }
+ .paraInfo {
+ width: 80vw;
+ }
+ .paras{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* justify-content: center; */
+ }
+
+ .subscription-duration {
+ margin-top: 2rem;
+ margin-bottom: 4rem;
+ text-align: center;
+ h2 {
+ color: ${(props) => props.theme.whiteToBlack};
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+ @media (min-width: 1400px) {
+ h2 {
+ color: ${(props) => props.theme.whiteToBlack};
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+ }
+ }
+ .gap {
+ padding: 5rem 20px;
+ }
+ .bot_gap{
+ margin-bottom: 4rem;
+ }
+ .freeTry {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ left: -10vw;
+ width: 120vw;
+ margin: 2.5rem 0;
+ background: ${(props) => props.theme.theme};
+ transform: rotate(4deg);
+ overflow: hidden;
+ .bgSvgLeft {
+ position: absolute;
+ bottom: 0;
+ right: -240px;
+ width: 860px;
+ }
+ .bgSvgRight {
+ position: absolute;
+ top: 0;
+ left: -240px;
+ width: 860px;
+ }
+ }
+ .rotate {
+ transform: rotate(-4deg);
+ width: 100vw;
+ }
+
+ .subscriptionButtons {
+ .button {
+ margin: 0.5rem 0rem 0rem 0rem;
+ font-weight: 400;
+ color: white;
+ }
+ @media (min-width: 434px) {
+ .button:first-child {
+ border-top-right-radius: 0rem;
+ border-bottom-right-radius: 0rem;
+ }
+ .button:last-child {
+ border-top-left-radius: 0rem;
+ border-bottom-left-radius: 0rem;
+ }
+ }
+ .active {
+ border-left: 1px solid ${(props) => props.theme.caribbeanGreenColor};
+ border-right: 1px solid ${(props) => props.theme.caribbeanGreenColor};
+ background-color: ${(props) => props.theme.caribbeanGreenColor};
+ padding: 0.3rem;
+ }
+
+ .inactive {
+ background-color: ${(props) => props.theme.primaryLightColor};
+ padding: 0.2rem;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+ }
+
+ .wrapper {
+ max-width: 1090px;
+ position: relative;
+ width: 100%;
+ padding: 0 2rem;
+ margin: -2rem auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ @media (min-width: 1400px) {
+ margin: -8rem auto 0;
+ }
+ @media (min-width: 2048px) {
+ margin: -10rem auto;
+ }
+ }
+
+ .pricing-table {
+ background-color: ${(props) => props.theme.grey212121ToWhite};
+ border-top: 3px solid #00b39f;
+ box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
+ padding: 2rem;
+ border-radius: 4px;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+
+ @media (max-width: 992px) {
+ margin: 1.5rem 1rem;
+ }
+ }
+
+ .featured {
+ transform: scale(1.05);
+ background-color: ${(props) => props.theme.grey212121ToWhite};
+ box-shadow: 0px 2px 12px 0px rgb(0, 179, 158, 0.7);
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+ .pricing-table:hover {
+ box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.15);
+ }
+ .featured:hover {
+ box-shadow: 0px 2px 16px rgb(0, 179, 158, 0.9);
+ }
+
+ .pricing-table {
+ .pricing-label {
+ border-radius: 2px;
+ background-color: rgb(235, 192, 23);
+ padding: 0.25rem 0.5rem;
+ display: block;
+ position: relative;
+ float: right;
+ justify-content: flex-end;
+ align-content: flex-end;
+ width: fit-content;
+ font-size: 0.75rem;
+ font-weight: 500;
+ margin-top: -1rem;
+ margin-right: -1rem;
+ margin-bottom: 1rem;
+ }
+
+ h2 {
+ margin-top: 1rem;
+ color: ${(props) => props.theme.greyDCDCDCToGrey3B3B3B};
+ font-size: 24px;
+ font-weight: 500;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+
+ .byline {
+ color: ${(props) => props.theme.greyC8C8C8ToGreen3C494F};
+ font-size: 16px;
+ font-weight: 400;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+
+ .pricing-features {
+ margin-top: 2rem;
+ }
+
+ .pricing-features .feature {
+ margin: 0.75rem 0rem;
+ .details {
+ display: flex;
+ margin: 0.5rem 0;
+ }
+ h5 {
+ color: ${(props) => props.theme.greyAAAAAAToGrey7A848E};
+ display: block;
+ font-size: 16px;
+ font-weight: 400;
+ /* vertical-align: text-top; */
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+ .check {
+ padding-right: 0.2rem;
+ vertical-align: middle;
+ color: ${(props) => props.theme.secondaryColor};
+ }
+ }
+
+ .price-tag {
+ margin-top: 2rem;
+ text-align: center;
+ font-weight: 500;
+ }
+
+ .price-tag .symbol {
+ font-size: 24px;
+ }
+
+ .price-tag .amount {
+ letter-spacing: -2px;
+ font-size: 3rem;
+ @media screen and (max-width: 992px) and (min-width: 768px) {
+ font-size: 1.5rem;
+ }
+ @media screen and (max-width: 400px) {
+ font-size: 2rem;
+ }
+ }
+
+ .price-tag .free {
+ font-size: 40px;
+ }
+
+ .price-tag .after {
+ color: #3b3b3b;
+ font-weight: 500;
+ }
+
+ .price-button-disabled,
+ .price-button-link {
+ color: #fff;
+ display: block;
+ margin: 2rem auto 0;
+ padding: 1rem 2rem;
+ width: 100%;
+ text-align: center;
+ font-weight: 500;
+ transition: 0.3s;
+ background: ${(props) => props.theme.secondaryColor};
+ }
+
+ .price-button-disabled {
+ background: rgb(0, 179, 158, 0.6);
+ }
+ .price-button-disabled:hover {
+ cursor: default;
+ box-shadow: none;
+ }
+
+ .pricing-label {
+ background: rgb(235, 192, 23);
+ color: #000;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+
+ .price-tag {
+ color: ${(props) => props.theme.secondaryColor};
+ }
+ }
+
+ .accordion__item {
+ .accordion__header {
+ margin: 0.1rem 0;
+ }
+ }
+
+ .pricing_coming_soon {
+ width: 150px;
+ position: relative;
+ float: right;
+ z-index: 2;
+ margin-top: -2rem;
+ margin-right: -5.4rem;
+ transform: translateY(0%) translateX(0%) rotate(14deg);
+ -webkit-transform: translateY(0%) translateX(0%) rotate(14deg);
+ }
+
+ .product_hero {
+ display: flex;
+ justify-content:center;
+ align-items : center;
+ background: linear-gradient(180deg, rgba(0, 211, 169, 0.10) 0%, rgba(0, 179, 159, 0.00) 100%);
+ }
+ .product_hero_text {
+ flex: 1;
+ margin: 2rem;
+ margin-left:10vw;
+ }
+ .product_hero_text h1 {
+ font-family: Qanelas Soft;
+ font-size: 48px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ color: ${(props) => props.theme.whiteToBlack};
+ }
+ .product_hero_text h1 span {
+ color: ${(props) => props.theme.secondaryColor};
+ }
+ .product_hero_text p {
+ color: #d9d9d9;
+ font-family: Qanelas Soft;
+ font-size: 18px;
+ font-style: normal;
+ line-height: 32px;
+ color: ${(props) => props.theme.whiteToBlack};
+ margin: 2rem 0;
+ }
+ .btn {
+ display: flex;
+ gap: 40px;
+ flex-direction: row;
+ }
+ .btn Button {
+ font-size: 18px;
+ }
+ .product_hero_img {
+ margin:4rem;
+ }
+ .heroImg path {
+ filter: red;
+ }
+ .product_cards {
+ min-height: 100%;
+ }
+ .product_cards h2 {
+ text-align: center;
+ font-size: 56px;
+ font-style: normal;
+ font-weight: 700;
+ }
+ .product_cards .card {
+ width: 540px;
+height: 100%;
+ border-radius: 20px;
+ background-color: ${(props) => props.theme.grey212121ToGreyF0F0F0};
+ padding: 2rem;
+ margin: 2rem;
+ }
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ .card:hover {
+ transition: 400ms ease-in-out;
+ box-shadow: 0px 0px 10px ${(props) => props.theme.caribbeanGreenColor};
+ }
+
+ .card_head {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ position: relative;
+ }
+
+ .card_head .title {
+ padding-left: 1rem;
+ font-size: 32px;
+ font-weight: 700;
+ }
+ .card .text {
+ padding-bottom: 2rem;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ color: ${(props) => props.theme.whiteToBlack};
+ }
+
+ .card_bottom {
+ border-top: 2px solid #2c2c2c;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ margin:0;
+ }
+ .card_bottom .learn {
+ font-size: 1rem;
+ margin-bottom: 10px;
+ text-decoration: underline;
+ text-decoration-color: ${(props) => props.theme.secondaryColor};
+ text-underline-offset: 8px;
+ cursor: pointer;
+ color: ${(props) => props.theme.whiteToBlack};
+ }
+ .btns Button {
+ margin: 20px 0px;
+ font-size: 16px;
+ margin-bottom:0;
+ }
+ .iconss {
+ display: flex;
+ gap: 16px;
+ position: absolute;
+ right: 0;
+ }
+ /* .iconss img {
+ width: 28px;
+ } */
+ @media (max-width:1141px){
+ .product_hero_img {
+ margin:1rem;
+ }
+ .product_hero_img img{
+ height:420px;
+ }
+ }
+
+
+ @media (max-width: 968px) {
+ .product_hero {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ width: 100vw;
+ }
+ .product_hero_text {
+ text-align: center;
+ margin: 2rem;
+ margin-top: 4rem;
+ }
+ .product_hero_text h1 {
+ justify-content: center;
+ align-items: center;
+ }
+ .product_hero_img img {
+ width: 400px;
+ }
+ .cards {
+ flex-direction: column;
+ justify-content: center;
+ margin: auto;
+ align-items: center;
+ }
+ .btn {
+ justify-content: center;
+ }
+
+ .card_head {
+ align-items: flex-start;
+ }
+ .product_cards {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+ .btns {
+ font-size: 16px;
+ flex-direction: row;
+ }
+ }
+ @media (max-width: 807px) {
+ .product_hero_text h1 {
+ font-size: 34px;
+ }
+ .product_hero_text p {
+ font-size: 17px;
+ }
+ .product_cards h2 {
+ font-size: 40px;
+ }
+ }
+ @media (max-width: 600px){
+ .product_cards .card{
+ width:440px;
+ }
+ }
+ @media (max-width: 509px) {
+ .product_cards .card {
+ width: 400px;
+ margin: 14px;
+ }
+ }
+ @media (max-width: 494px) {
+ .card_head .title {
+ padding: 10px;
+ font-size: 24px;
+ }
+ .product_hero_img img {
+ width: 100%;
+ }
+ /* .btn{
+ font-size: 12px;
+ } */
+ }
+ @media (max-width: 418px) {
+ .product_hero {
+ justify-content: center;
+ margin: auto;
+ width: 100vw;
+ }
+
+ .product_hero_text h1 {
+ font-size: 28px;
+ text-align: center;
+ }
+ .product_hero_text p {
+ font-size: 16px;
+ text-align: center;
+ padding: 10px;
+ margin-top: 10px;
+ }
+ .btn {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .product_hero_text {
+ margin: 2rem 1rem 0rem 1rem;
+ }
+ .product_cards .card {
+ width: 90%;
+ /* margin: 14px; */
+ }
+ }
+ @media (max-width: 354px) {
+ .product_hero_img img {
+ width: 100%;
+ }
+ .product_cards .card {
+ width:280px;
+ padding: 16px;
+
+ }
+ .card_head {
+ margin: 0;
+ padding: 0;
+ }
+ /* .card_head .title {
+ padding: 0;
+ margin: 4px;
+ font-size: 16px;
+ } */
+ .btns{
+ scale: 0.8;
+ }
+ .card .text {
+ font-size: 14px;
+ }
+ .iconss img {
+ width: 20px;
+ }
+ }
+`;
+
+export default PricingWrapper;
From fc0792be18c3e8296cfaf626b2fa43c81ac6a4bd Mon Sep 17 00:00:00 2001
From: Modern-artist <90668597+Modern-artist@users.noreply.github.com>
Date: Mon, 6 Nov 2023 10:00:22 +0530
Subject: [PATCH 2/5] final commit
Signed-off-by: Modern-artist <90668597+Modern-artist@users.noreply.github.com>
---
src/pages/products/index.js | 8 +++++---
src/pages/products/pricing.style.js | 4 ----
src/sections/General/Navigation/index.js | 2 --
src/sections/General/Navigation/utility/menu-items.js | 2 +-
4 files changed, 6 insertions(+), 10 deletions(-)
diff --git a/src/pages/products/index.js b/src/pages/products/index.js
index db91f1a741a8..58435b92ba06 100644
--- a/src/pages/products/index.js
+++ b/src/pages/products/index.js
@@ -171,7 +171,7 @@ const CardsData = [
title: "Meshery",
icon: ["",desktop],
text: "A cloud native management plane that enables the operation and management of Kubernetes, any service mesh, and their workloads. it enables operators to deploy WebAssembly filters to Envoy-based data planes.",
- url: "https://meshery.io/"
+ url: "/cloud-native-management/meshery"
},
];
@@ -187,7 +187,7 @@ const index = () => {
Effortless Configuration & Complete Control of Your Cloud Native{" "}
Infrastructure
@@ -311,7 +311,9 @@ const index = () => {
+
+
+ {options.map((x) => (
+
+
+
+
+
+
+
+ + Effortless Configuration & Complete Control of Your Cloud Native{" "} + + Infrastructure + + . +
++ Unlock your enterprise's capabilities with our innovative cloud + native solutions. Crafted to tackle cloud challenges, our + offerings enhance processes for effectiveness, scalability, and + flexibility, elevating operations to new efficiencies.{" "} +
+
+
+
+ {/* */}
+
+
+ 
+
+
+
+ All Products
+
+ {CardsData.map((card) => (
+ <>
+
+
+
+
+ ))}
+
+ 
+
+ {card.title}
+
+ {/*
+ */}
+ 
+ 
+ {/*
*/}
+ {card.text}
+
+ {/* */}
+ Learn more
+ {/* */}
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+ + Unlock Your Potential with Free Tier Account! +
++ Embrace the future of technology and embark on a transformative journey with our comprehensive range of products prepared to meet your needs. Elevate, Innovate, and conquer the cloud with us today! +
+ +
+
+ + Plans For Every Team Size +
++ Choose the ideal plan to propel your infrastructure goals. From startups to seasoned enterprises, we have a plan designed to fit your unique needs. +
+
+ {x.featured ? (
+
+
+ ))}
+ Free Forever
+ ) : (
+ ""
+ )}
+
+ {x.pricing_coming_soon}
+
+ {x.tier}
+{x.byline}
+
+ {x.summary.map((t) => (
+
+
+
+
+ ))}
+
+
+ + Don’t Just Take Our Word For It, Experience It! +
+
+
+
+ See how our products can transform your cloud experience today.
++ Book to see it in action! Our experts are eager to guide you through the incredible possibilities that Layer5 offers. Take this opportunity to discover what more your infrastructure can do for you! +
+- Don’t Just Take Our Word For It, Experience It! + Don’t Just Take Our Word For It, Experience It!
See how our products can transform your cloud experience today.
diff --git a/src/pages/products/pricing.style.js b/src/pages/products/pricing.style.js index 7b3e6c63fe06..3f8755e2e2cc 100644 --- a/src/pages/products/pricing.style.js +++ b/src/pages/products/pricing.style.js @@ -16,10 +16,6 @@ const PricingWrapper = styled.section` transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); h1 { color: ${(props) => props.theme.whiteToBlack}; - font-weight: bolder; - } - h1 span { - color: rgb(235, 192, 23); } p { diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js index d52bd19510ce..680296455fb0 100644 --- a/src/sections/General/Navigation/index.js +++ b/src/sections/General/Navigation/index.js @@ -226,8 +226,6 @@ const Navigation = () => {-
{Data.menuItems.map((menu, index) => (
-
-
-
Date: Mon, 6 Nov 2023 16:05:27 +0530
Subject: [PATCH 3/5] Update menu-items.js
Signed-off-by: Prem kumar <90668597+Modern-artist@users.noreply.github.com>
---
src/sections/General/Navigation/utility/menu-items.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/sections/General/Navigation/utility/menu-items.js b/src/sections/General/Navigation/utility/menu-items.js
index 26c8af4f68f6..1a70fefdbab4 100644
--- a/src/sections/General/Navigation/utility/menu-items.js
+++ b/src/sections/General/Navigation/utility/menu-items.js
@@ -80,7 +80,6 @@ const Data = {
// }
},
{
- allProducts
name: "Products",
path: "/products",
subItems: [
From c003016c2c59414f4ca3168b6413fb32653b3675 Mon Sep 17 00:00:00 2001
From: Lee Calcote
, - byline: "Everything in Team, plus:", - button: ["Coming Soon", ""], - summary: [ - { - id: 0, - category: "User-defined Roles", - description: "Customizable roles for specific permission assignments", - }, - { - id: 1, - category: "Authentication: LDAP", - description: - "Access Meshery using your existing accounts and centrally manage repository access.", - }, - { - id: 2, - category: "Authentication: SAML", - description: - "Use an identity provider to manage the identities of Meshery users and applications.", - }, - { - id: 3, - category: "Self-hosted Deployment", - description: - "Self-hosted Meshery Cloud for on-prem appliances or self-managed cloud tenants.", - }, - { - id: 4, - category: "Traffic Replay", - description: "Visual event replay in MeshMap", - }, - { - id: 5, - category: "Phone Support", - description: - "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via phone.", - }, - ], - }, -]; -const CardsData = [ - { - id: 1, - logo: meshmap, - title: "Meshmap", - icon: [codicon, desktop], - text: "GitOps-infused cloud native visual designer for Kubernetes and cloud native applications. MeshMap works with your Kubernetes clusters so that you design and manage your infrastructure and applications between members of your team.", - //as there is no soluton page. - url: "/cloud-native-management/meshmap" - }, - { - id: 2, - logo: mesheryLogo, - title: "Meshery", - icon: ["",desktop], - text: "A cloud native management plane that enables the operation and management of Kubernetes, any service mesh, and their workloads. it enables operators to deploy WebAssembly filters to Envoy-based data planes.", - url: "/cloud-native-management/meshery" - }, -]; - -const index = () => { - const { isDark } = useStyledDarkMode(); +const Products = () => { return ( -
-+ <> +- -------- Effortless Configuration & Complete Control of Your Cloud Native{" "} - - Infrastructure - - . -
-- Unlock your enterprise's capabilities with our innovative cloud - native solutions. Crafted to tackle cloud challenges, our - offerings enhance processes for effectiveness, scalability, and - flexibility, elevating operations to new efficiencies.{" "} -
-- - - {/* */} ------All Products
-- {CardsData.map((card) => ( - <> ---- - ))} ---{card.title}-- {/*-*/} -*/} -{card.text}-- {/* */} - Learn more - {/* */} --- {/* */} - ------- Unlock Your Potential with Free Tier Account! -
-- Embrace the future of technology and embark on a transformative journey with our comprehensive range of products prepared to meet your needs. Elevate, Innovate, and conquer the cloud with us today! -
- ---- Plans For Every Team Size -
-- Choose the ideal plan to propel your infrastructure goals. From startups to seasoned enterprises, we have a plan designed to fit your unique needs. -
-- -- {options.map((x) => ( -
-- - {x.featured ? ( -- - ))} -Free Forever- ) : ( - "" - )} -- {x.pricing_coming_soon} --{x.tier}
-{x.byline}
-- {x.summary.map((t) => ( -- --- ))} -- --- Don’t Just Take Our Word For It, Experience It! -
--- -See how our products can transform your cloud experience today.
-- Book to see it in action! Our experts are eager to guide you through the incredible possibilities that Layer5 offers. Take this opportunity to discover what more your infrastructure can do for you! -
-+ ); }; - -export default index; +export default Products; +export const Head = () => { + return ; +}; diff --git a/src/pages/products/collapsible-details.js b/src/sections/Products/collapsible-details.js similarity index 99% rename from src/pages/products/collapsible-details.js rename to src/sections/Products/collapsible-details.js index ad7e7eb8da8f..e1cf0d9e15e9 100644 --- a/src/pages/products/collapsible-details.js +++ b/src/sections/Products/collapsible-details.js @@ -39,12 +39,10 @@ p{ .open{ visibility:visible; } - h5{ display: inline-block; vertical-align: middle; } - `; const FeatureDetails = (props) => { diff --git a/src/pages/products/icons/collaboration.svg b/src/sections/Products/icons/collaboration.svg similarity index 100% rename from src/pages/products/icons/collaboration.svg rename to src/sections/Products/icons/collaboration.svg diff --git a/src/pages/products/icons/coming-soon.webp b/src/sections/Products/icons/coming-soon.webp similarity index 100% rename from src/pages/products/icons/coming-soon.webp rename to src/sections/Products/icons/coming-soon.webp diff --git a/src/pages/products/icons/configuration.svg b/src/sections/Products/icons/configuration.svg similarity index 100% rename from src/pages/products/icons/configuration.svg rename to src/sections/Products/icons/configuration.svg diff --git a/src/pages/products/icons/identity.svg b/src/sections/Products/icons/identity.svg similarity index 100% rename from src/pages/products/icons/identity.svg rename to src/sections/Products/icons/identity.svg diff --git a/src/pages/products/icons/lifecycle.svg b/src/sections/Products/icons/lifecycle.svg similarity index 100% rename from src/pages/products/icons/lifecycle.svg rename to src/sections/Products/icons/lifecycle.svg diff --git a/src/pages/products/icons/notification.svg b/src/sections/Products/icons/notification.svg similarity index 100% rename from src/pages/products/icons/notification.svg rename to src/sections/Products/icons/notification.svg diff --git a/src/pages/products/icons/support.svg b/src/sections/Products/icons/support.svg similarity index 100% rename from src/pages/products/icons/support.svg rename to src/sections/Products/icons/support.svg diff --git a/src/assets/images/products/Rectangle.svg b/src/sections/Products/images/Rectangle.svg similarity index 100% rename from src/assets/images/products/Rectangle.svg rename to src/sections/Products/images/Rectangle.svg diff --git a/src/assets/images/products/circle_dark.svg b/src/sections/Products/images/circle_dark.svg similarity index 100% rename from src/assets/images/products/circle_dark.svg rename to src/sections/Products/images/circle_dark.svg diff --git a/src/assets/images/products/circle_light.svg b/src/sections/Products/images/circle_light.svg similarity index 100% rename from src/assets/images/products/circle_light.svg rename to src/sections/Products/images/circle_light.svg diff --git a/src/assets/images/products/codicon_extensions.svg b/src/sections/Products/images/codicon_extensions.svg similarity index 100% rename from src/assets/images/products/codicon_extensions.svg rename to src/sections/Products/images/codicon_extensions.svg diff --git a/src/assets/images/products/fluent_desktop-mac.svg b/src/sections/Products/images/fluent_desktop-mac.svg similarity index 100% rename from src/assets/images/products/fluent_desktop-mac.svg rename to src/sections/Products/images/fluent_desktop-mac.svg diff --git a/src/sections/Products/images/layer5-products-overview-dark.svg b/src/sections/Products/images/layer5-products-overview-dark.svg new file mode 100644 index 000000000000..d00fb50c066a --- /dev/null +++ b/src/sections/Products/images/layer5-products-overview-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/sections/Products/images/layer5-products-overview.svg b/src/sections/Products/images/layer5-products-overview.svg new file mode 100644 index 000000000000..67cb2939d6cb --- /dev/null +++ b/src/sections/Products/images/layer5-products-overview.svg @@ -0,0 +1,801 @@ + + + diff --git a/src/sections/Products/index.js b/src/sections/Products/index.js new file mode 100644 index 000000000000..481031eb0e09 --- /dev/null +++ b/src/sections/Products/index.js @@ -0,0 +1,331 @@ +import React from "react"; +import { Container, Row, Col } from "../../reusecore/Layout"; +import ProductsWrapper from "./products.style"; +import FeatureDetails from "./collapsible-details"; +import Button from "../../reusecore/Button"; +import darkbgSvg from "./images/circle_dark.svg"; +import lightbgSvg from "./images/circle_light.svg"; +import product_hero_img from "./images/layer5-products-overview.svg"; +import product_hero_img_light from "./images/layer5-products-overview-dark.svg"; +import desktop from "./images/fluent_desktop-mac.svg"; +import codicon from "./images/codicon_extensions.svg"; +import mesheryLogo from "../../assets/images/meshery/icon-only/meshery-logo-light.svg"; +import meshmap from "../../assets/images/meshmap/icon-only/meshmap-icon.svg"; +import comingSoon from "./icons/coming-soon.webp"; +import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; + +const options = [ + { + tier: "Personal", + featured: true, + monthlyprice: 0, + yearlyprice: 0, + byline: "Open Source features, plus:", + button: ["Join for Free", "https://meshery.layer5.io"], + summary: [ + { + id: 0, + category: "Cloud Native Design Patterns", + description: + "Import and export your designs using your local filesystem or remote URL.", + }, + { + id: 1, + category: "Multiple Kubernetes Clusters", + description: + "Ongoing synchronization of Kubernetes configuration, workloads and cloud native infrastructure changes across any number of Kubernetes clusters.", + }, + { + id: 2, + category: "Cluster Discovery", + description: + "Day 2 support for ongoing synchronization of Kubernetes configuration, workloads and cloud native infrastructure changes.", + }, + { + id: 3, + category: "Microservices Performance", + description: + "Continuous visibility across all of your clusters and workloads.", + }, + { + id: 4, + category: "Load Generation", + description: + "Single Load Generator: Support testing multiple endpoints simultaneously.", + }, + { + id: 5, + category: "MeshMark", + description: "Identify the cost of a specific network function.", + }, + ], + }, + + { + tier: "Team", + featured: false, + monthlyprice: 9.99, + yearlyprice: 100, + byline: "Everything in Free, plus:", + button: [ + "Contact Sales", + "https://us15.list-manage.com/contact-form?u=6b50be5aea3dfe1fd4c041d80&form_id=d0ffe17c92d8014ede6b721aa16096e8", + ], + summary: [ + { + id: 0, + category: "Dry-run", + description: + "Test and verify configuration changes in a separate environment.", + }, + { + id: 1, + category: "Design Reviews", + description: + "Discuss any design by leaving review comments or notes on a specific design. Control who has access, notify discussion participants with updates, and link from anywhere.", + }, + { + id: 2, + category: "Visual Design", + description: + "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads", + }, + { + id: 3, + category: "Performance Profiles", + description: + "Share performance profiles and test results with individual users or teams.", + }, + { + id: 4, + category: "Built-in Roles", + description: "Static - out of the box", + }, + { + id: 5, + category: "Standard Support", + description: + "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via the web.", + }, + ], + }, + { + tier: "Enterprise", + featured: false, + monthlyprice: 15.99, + yearlyprice: 180, + pricing_coming_soon: ++ ); +}; + +export default index; \ No newline at end of file diff --git a/src/pages/products/pricing.style.js b/src/sections/Products/products.style.js similarity index 98% rename from src/pages/products/pricing.style.js rename to src/sections/Products/products.style.js index 3f8755e2e2cc..b9f31c25d88f 100644 --- a/src/pages/products/pricing.style.js +++ b/src/sections/Products/products.style.js @@ -1,6 +1,6 @@ import styled from "styled-components"; -const PricingWrapper = styled.section` +const ProductWrapper = styled.section` .freeCont { width: 100vw; overflow: hidden; @@ -336,7 +336,13 @@ const PricingWrapper = styled.section` font-size: 18px; } .product_hero_img { - margin:4rem; + margin:1rem; + > img { + width: 35rem; + height: 35rem; + position: relative; + + } } .heroImg path { filter: red; @@ -358,6 +364,9 @@ height: 100%; padding: 2rem; margin: 2rem; } +.logo { + max-height: 3rem; +} .cards { display: flex; flex-wrap: wrap; @@ -566,4 +575,4 @@ height: 100%; } `; -export default PricingWrapper; +export default ProductWrapper; From 449a447c555edb9f62ff1de5bc669a0911cf0738 Mon Sep 17 00:00:00 2001 From: Lee Calcote+ ++++++++ Effortless Configuration & Complete Control of Your Cloud Native{" "} + + Infrastructure + + . +
++ Unlock your enterprise's capabilities with our innovative cloud + native solutions. Crafted to tackle cloud challenges, our + offerings enhance processes for effectiveness, scalability, and + flexibility, elevating operations to new efficiencies.{" "} +
++ + +++++ {/*+All Products
*/} ++ {CardsData.map((card) => ( + <> ++++ + ))} +++{card.title}++ {/*+*/} +*/} +{card.text}++ {/* */} + Learn more + {/* */} +++ {/* */} + +++++++ Unlock Your Potential with Free Tier Account! +
++ Embrace the future of technology and embark on a transformative journey with our comprehensive range of products prepared to meet your needs. Elevate, Innovate, and conquer the cloud with us today! +
+ ++++ Plans For Every Team Size +
++ Choose the ideal plan to propel your infrastructure goals. From startups to seasoned enterprises, we have a plan designed to fit your unique needs. +
++ ++ {options.map((x) => ( +
++ + {x.featured ? ( ++ + ))} +Free Forever+ ) : ( + "" + )} ++ {x.pricing_coming_soon} ++{x.tier}
+{x.byline}
++ {x.summary.map((t) => ( ++ +++ ))} ++ +++ Don’t Just Take Our Word For It, Experience It! +
+++ +See how our products can transform your cloud experience today.
++ Book to see it in action! Our experts are eager to guide you through the incredible possibilities that Layer5 offers. Take this opportunity to discover what more your infrastructure can do for you! +
+