diff --git a/src/pages/products/index.js b/src/pages/products/index.js new file mode 100644 index 000000000000..764904b97e41 --- /dev/null +++ b/src/pages/products/index.js @@ -0,0 +1,17 @@ +import React from "react"; +import SEO from "../../components/seo"; +import ProductPage from "../../sections/Products"; + +const Products = () => { + return ( + <> + + + ); +}; +export default Products; +export const Head = () => { + return ; +}; 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) => ( - -
  • props.theme.primaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } +p{ + font-size: 0.9rem; + color: ${props => props.theme.greyC1C1C1ToGreyB3B3B3}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); +} +.toggle-btn{ + display:inline-block; + float: left; + vertical-align: middle;; + } + .closed{ + opacity:1; + height:0; + transition:none; + visibility:hidden; + } + .open{ + visibility:visible; + } + h5{ + display: inline-block; + vertical-align: middle; + } +`; + +const FeatureDetails = (props) => { + const [expand, setExpand] = React.useState(false); + + return ( + +
    + {props.description ? +
    + {expand ? ( + + ) : ( + + )} +
    : ""} +
    {props.category}
    +
    +

    + {props.description} +

    +
    +
    +     + ); +}; + +export default FeatureDetails; diff --git a/src/sections/Products/icons/collaboration.svg b/src/sections/Products/icons/collaboration.svg new file mode 100644 index 000000000000..683ad1022c70 --- /dev/null +++ b/src/sections/Products/icons/collaboration.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + diff --git a/src/sections/Products/icons/coming-soon.webp b/src/sections/Products/icons/coming-soon.webp new file mode 100644 index 000000000000..93de1783302d Binary files /dev/null and b/src/sections/Products/icons/coming-soon.webp differ diff --git a/src/sections/Products/icons/configuration.svg b/src/sections/Products/icons/configuration.svg new file mode 100644 index 000000000000..696ed5572da3 --- /dev/null +++ b/src/sections/Products/icons/configuration.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/src/sections/Products/icons/identity.svg b/src/sections/Products/icons/identity.svg new file mode 100644 index 000000000000..59fa766e4b51 --- /dev/null +++ b/src/sections/Products/icons/identity.svg @@ -0,0 +1,23 @@ + + + + + + + diff --git a/src/sections/Products/icons/lifecycle.svg b/src/sections/Products/icons/lifecycle.svg new file mode 100644 index 000000000000..11e82abde6cc --- /dev/null +++ b/src/sections/Products/icons/lifecycle.svg @@ -0,0 +1,176 @@ + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Products/icons/notification.svg b/src/sections/Products/icons/notification.svg new file mode 100644 index 000000000000..1d9698647bdf --- /dev/null +++ b/src/sections/Products/icons/notification.svg @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/src/sections/Products/icons/support.svg b/src/sections/Products/icons/support.svg new file mode 100644 index 000000000000..d80be5db0aa0 --- /dev/null +++ b/src/sections/Products/icons/support.svg @@ -0,0 +1,52 @@ + + + + + + + + diff --git a/src/sections/Products/images/Rectangle.svg b/src/sections/Products/images/Rectangle.svg new file mode 100644 index 000000000000..12598c820c17 --- /dev/null +++ b/src/sections/Products/images/Rectangle.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/sections/Products/images/circle_dark.svg b/src/sections/Products/images/circle_dark.svg new file mode 100644 index 000000000000..66066cf07f00 --- /dev/null +++ b/src/sections/Products/images/circle_dark.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Products/images/circle_light.svg b/src/sections/Products/images/circle_light.svg new file mode 100644 index 000000000000..b0dd9fa862fa --- /dev/null +++ b/src/sections/Products/images/circle_light.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Products/images/codicon_extensions.svg b/src/sections/Products/images/codicon_extensions.svg new file mode 100644 index 000000000000..004b17101e21 --- /dev/null +++ b/src/sections/Products/images/codicon_extensions.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/sections/Products/images/fluent_desktop-mac.svg b/src/sections/Products/images/fluent_desktop-mac.svg new file mode 100644 index 000000000000..8fbf4d4bd6b0 --- /dev/null +++ b/src/sections/Products/images/fluent_desktop-mac.svg @@ -0,0 +1,3 @@ + + + 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..70778b9a4cec --- /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: , + 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 infrastucture.", + //as there is no soluton page. + url: "/cloud-native-management/meshmap" + }, + { + id: 2, + logo: mesheryLogo, + title: "Meshery", + icon: ["",desktop], + text: "As a self-service engineering platform, Meshery enables collaborative design and operation of cloud native infrastructure.", + url: "/cloud-native-management/meshery" + }, +]; + +const index = () => { + const { isDark } = useStyledDarkMode(); + 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; \ No newline at end of file diff --git a/src/sections/Products/products.style.js b/src/sections/Products/products.style.js new file mode 100644 index 000000000000..b9f31c25d88f --- /dev/null +++ b/src/sections/Products/products.style.js @@ -0,0 +1,578 @@ +import styled from "styled-components"; + +const ProductWrapper = 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}; + } + + 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:1rem; + > img { + width: 35rem; + height: 35rem; + position: relative; + + } + } + .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; + } +.logo { + max-height: 3rem; +} +.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 ProductWrapper;