From 55f656098f264943f8a54f49578fb0272fe9da82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Tue, 28 Jul 2026 12:30:09 +0000 Subject: [PATCH 1/5] fix(styles): address bot review comments for carousel overflow and responsive controls Signed-off-by: GitHub --- .../features-section.style.js | 552 ++++++++---------- 1 file changed, 252 insertions(+), 300 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index 298ebcf3d9a6e6..9a6d78782ff371 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -1,306 +1,258 @@ import styled from "styled-components"; const FeaturesSectionWrapper = styled.section` - - background-color: black; - transform: skew(0deg, -6deg); - padding-bottom: 5rem; - margin-bottom: 8rem; - overflow: hidden; - position: relative; - width: 100%; - max-width: 100%; - contain: layout style paint; - transform-origin: center; - z-index: 1; - height: auto; - isolate: isolate; - .skw{ - display: grid; - position: relative; - top: -5rem; - } - .rect-1-left { - background: #C9FCF6; - border-radius: 0 2.125rem 0 0; - grid-column: 1/ span 2; - height: 5rem; - grid-row: 1; - position: relative; - top: 0.5px; - } - .rect-2-left { - background: ${(props) => props.theme.secondaryColor}; - border-radius: 0 0 3.5rem 0; - grid-column: 1/2; - height: 5rem; - grid-row: 2; - } - .rect-3-right { - background: ${(props) => props.theme.secondaryColor}; - border-radius: 3.5rem 0 0 0; - grid-column: 10/11; - grid-row: 1; - height: 5rem; - } - .rect-4-right { - background: #C9FCF6; - border-radius: 0 0 0 2.125rem; - grid-column: 9/11; - grid-row: 2; - height: 5rem; - position: relative; - top: -0.75px - } - - .section-data { - transform: skew(0deg, 6deg); - padding: 0 1rem 3rem; - text-align: center; - position: relative; - z-index: 1; - h1, h2, p { - color: white; - } - } - - .meshery-logo { - img { - max-height: 8rem; - } - } - .section-header { - margin-top: 3rem; - h1 { - line-height: 3.125rem; - span { - color: ${(props) => props.theme.secondaryColor}; - } - } - h2 { - font-weight: 400; - } - p { - font-size: 1.25rem; - line-height: 1.25rem; - margin: 1rem 0 0; - } - } - .smp-section { - margin: 3rem auto; - max-width: 85%; - overflow: hidden; - - .smp-section-row { - margin: 4rem 0; - align-items: center; - } - h2, h4 { - color: white; - } - .smp-section-data { - h1, h2, p { - text-align: start; color: white; - } - h2 { - font-size: 1.75rem; - font-weight: 500; - } - } - - .smp-section-carousel { - .slick-slider { - max-height: 520px; - .slick-list { - max-width: 50rem; - max-height: 520px; - height: auto; - - .slick-track { - height: auto; - } - - .slick-slide { - height: auto; - img { - max-height: 20rem; - margin: auto; - } - } - } - - .slick-arrow{ - display: none !important; - } - - .slick-dots { - bottom: 0; - top: 0rem; - left: 52rem; - width: 8rem; - - li { - display: block; - width: 100%; - height: auto; - margin: 1rem auto; - opacity: 0.6; - - p { - display: block; - - img { - height: 5rem; - vertical-align: middle; - } - } - } - } - .slick-dots - li.slick-active { - opacity: 1; - } - } - } - } - } - - @media screen and (max-width: 1600px) { - .smp-section .smp-section-carousel .slick-slider { - .slick-list { - max-width: 38rem; - } - - .slick-dots { - left: 40rem; - width: 6rem; - - li p img { - height: 4rem; - } - } - } - } - - @media screen and (max-width: 1200px) { - padding-bottom: 2rem; - margin-bottom: 6rem; - - .smp-section { - .smp-section-row { - margin: 2.5rem 0; - } - - .smp-section-data { - h3, p { - text-align: center; - } - } - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 80%; - margin: 2rem auto; - } - - .slick-dots { - left: 92%; - } - } - } - } - - @media screen and (max-width: 960px) { - padding-bottom: 0rem; - margin-bottom: 4rem; - .smp-section .smp-section-carousel .slick-slider .slick-list { - .slick-slide { - img { - max-height: 16rem; - } - } - } - } - - @media screen and (max-width: 700px) { - .smp-section { - max-width: 95%; - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 85%; - margin: 2rem 0; - } - .slick-dots { - left: 90%; - width: 4rem; - - li p img { - height: 2.5rem; - } - } - } - } - } - - @media screen and (max-width: 500px) { - .smp-section { - max-width: 95%; - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 80%; - .slick-slide { - img { - max-height: 10rem; - } - } - } - .slick-dots { - left: 85%; - top: -1rem; - } - } - } - } - - .mesh-mngmnt { - h3 { - margin: 1rem 0; - color: rgba(255, 255, 255, 0.6); - font-size: 1.5rem; - } - p { - margin: 0.5rem 0; - color: rgba(255, 255, 255, 0.6); - } - - .mesh-mngmnt-btn { - margin: 2rem auto; - display: flex; - flex-wrap: wrap; - max-width: 75%; - - .mgmt_button { - margin: 0.5rem 0; - min-width: 15rem; - border-radius: 1rem; - } - } - } - - @media screen and (max-width: 992px) { - .mesh-mngmnt { - .mesh-mngmnt-btn { - justify-content: center; - - .mgmt_button { - margin: 0.5rem auto; - min-width: 11rem; - } - } - } - } + background-color: black; + padding: 4rem 0 5rem 0; + margin-bottom: 6rem; + position: relative; + width: 100%; + max-width: 100%; + z-index: 1; + height: auto; + + .skw { + display: grid; + position: relative; + top: -4rem; + } + .rect-1-left { + background: #c9fcf6; + border-radius: 0 2.125rem 0 0; + grid-column: 1 / span 2; + height: 4rem; + grid-row: 1; + } + .rect-2-left { + background: ${(props) => props.theme.secondaryColor}; + border-radius: 0 0 3.5rem 0; + grid-column: 1 / 2; + height: 4rem; + grid-row: 2; + } + .rect-3-right { + background: ${(props) => props.theme.secondaryColor}; + border-radius: 3.5rem 0 0 0; + grid-column: 10 / 11; + grid-row: 1; + height: 4rem; + } + .rect-4-right { + background: #c9fcf6; + border-radius: 0 0 0 2.125rem; + grid-column: 9 / 11; + grid-row: 2; + height: 4rem; + } + + .section-data { + padding: 0 2rem 3rem; + text-align: center; + position: relative; + z-index: 1; + width: 100%; + margin: 0 auto; + + h1, + h2, + p { + color: white; + } + } + + .section-header { + margin-top: 1rem; + h1 { + line-height: 3.125rem; + span { + color: ${(props) => props.theme.secondaryColor}; + } + } + h2 { + font-weight: 400; + } + p { + font-size: 1.25rem; + line-height: 1.6rem; + margin: 1rem auto 0; + max-width: 50rem; + } + } + + .smp-section { + margin: 3rem auto; + width: 100%; + max-width: 1200px; + padding: 0 1rem; + box-sizing: border-box; + + .smp-section-row { + margin: 4rem 0; + align-items: center; + display: flex; + flex-wrap: wrap; + } + + h2, + h4 { + color: white; + } + + .smp-section-data { + h1, + h2, + p { + text-align: start; + color: white; + } + h2 { + font-size: 1.75rem; + font-weight: 500; + } + } + + .smp-section-carousel { + width: 100%; + + .slick-slider { + position: relative; + display: block; + box-sizing: border-box; + + .slick-list { + width: calc(100% - 6rem); + margin: 0; + + .slick-slide { + img { + max-height: 22rem; + width: auto; + margin: auto; + border-radius: 0.5rem; + } + } + } + + .slick-arrow { + display: none; + } + + /* Fixed Vertical Navigation Dots without negative positioning */ + .slick-dots { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 5rem; + list-style: none; + margin: 0; + padding: 0; + + li { + display: block; + width: 100%; + margin: 0.75rem 0; + opacity: 0.5; + transition: opacity 0.3s ease; + + /* Added visible focus indicators for keyboard navigation (WCAG AA) */ + &:focus-visible, + button:focus-visible { + outline: 2px solid ${(props) => props.theme.secondaryColor}; + outline-offset: 2px; + border-radius: 4px; + } + + p img { + height: 3.5rem; + width: auto; + border-radius: 0.25rem; + } + } + + li.slick-active { + opacity: 1; + } + } + } + } + } + + .mesh-mngmnt { + margin-top: 4rem; + h3 { + margin: 1rem 0; + color: rgba(255, 255, 255, 0.7); + font-size: 1.5rem; + } + p { + margin: 0.5rem 0; + color: rgba(255, 255, 255, 0.7); + } + + .mesh-mngmnt-btn { + margin: 2rem auto; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + max-width: 100%; + + .mgmt_button { + min-width: 12rem; + border-radius: 1rem; + } + } + } + + /* Responsive Adjustments & Breakpoints */ + @media screen and (max-width: 1200px) { + .smp-section { + .smp-section-carousel { + .slick-slider { + .slick-list { + width: 100%; + + .slick-slide img { + max-height: 18rem; + } + } + + /* Removed !important and handled positioning via specificity */ + .slick-dots { + position: relative; + right: auto; + top: auto; + transform: none; + width: 100%; + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + + li { + width: auto; + margin: 0; + + p img { + height: 2.5rem; + } + } + } + } + } + } + } + + @media screen and (max-width: 768px) { + .smp-section + .smp-section-carousel + .slick-slider + .slick-list + .slick-slide + img { + max-height: 14rem; + } + } `; export default FeaturesSectionWrapper; From d17f9247be3b91da40af586bafae89b9f53bb17b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Tue, 28 Jul 2026 13:22:49 +0000 Subject: [PATCH 2/5] fix(styles): resolve bot comments for image aspect-ratio, dot overflow, and focus state Signed-off-by: GitHub --- .../Meshery/Features-section/features-section.style.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index 9a6d78782ff371..c4bd72988b0499 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -119,13 +119,16 @@ const FeaturesSectionWrapper = styled.section` box-sizing: border-box; .slick-list { + /* Reserve 6rem space for dots inside the container to prevent overflow */ width: calc(100% - 6rem); margin: 0; .slick-slide { img { max-height: 22rem; - width: auto; + width: 100%; + object-fit: contain; + aspect-ratio: 16 / 9; /* Reserves space to prevent reflow on load */ margin: auto; border-radius: 0.5rem; } @@ -136,7 +139,7 @@ const FeaturesSectionWrapper = styled.section` display: none; } - /* Fixed Vertical Navigation Dots without negative positioning */ + /* Dots positioned inside the container bounds */ .slick-dots { position: absolute; right: 0; @@ -154,7 +157,7 @@ const FeaturesSectionWrapper = styled.section` opacity: 0.5; transition: opacity 0.3s ease; - /* Added visible focus indicators for keyboard navigation (WCAG AA) */ + /* WCAG 2.1 AA Keyboard Focus State */ &:focus-visible, button:focus-visible { outline: 2px solid ${(props) => props.theme.secondaryColor}; @@ -217,7 +220,6 @@ const FeaturesSectionWrapper = styled.section` } } - /* Removed !important and handled positioning via specificity */ .slick-dots { position: relative; right: auto; From 06266458cbc4ce2776a70de74d28bb8524a8b7ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Tue, 28 Jul 2026 14:31:01 +0000 Subject: [PATCH 3/5] fix(components): address all bot review comments for GitHub star button Signed-off-by: GitHub --- .../GitHubStarButtonBanner.js | 228 ++++++++++++++++++ src/sections/Meshery/index.js | 35 +-- src/sections/Meshery/meshery.style.js | 3 +- 3 files changed, 251 insertions(+), 15 deletions(-) create mode 100644 src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js diff --git a/src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js b/src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js new file mode 100644 index 00000000000000..bb915df9c8b681 --- /dev/null +++ b/src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js @@ -0,0 +1,228 @@ +import React, { useState, useEffect } from "react"; +import { FaGithub } from "@react-icons/all-files/fa/FaGithub"; +import { FaStar } from "@react-icons/all-files/fa/FaStar"; +import styled from "styled-components"; + +const BannerButton = styled.a` + box-sizing: border-box; + position: relative; + isolation: isolate; + + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + + min-width: 200px; + padding: 12px 30px; + + color: ${({ theme }) => theme.bannerText || "#f0f6fc"}; + + font-family: inherit; + font-size: 15px; + font-weight: 500; + line-height: 1.2; + + text-decoration: none; + text-transform: none; + + transition: 250ms ease; + + /* --- Hexagonal banner shape lives on a pseudo-element so clip-path never clips the focus ring --- */ + &::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + + background: ${({ theme }) => theme.bannerBg || "#0d1117"}; + border: 1px solid ${({ theme }) => theme.bannerAccent || "#2bb77c"}; + clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%); + + transition: inherit; + } + + &:hover::before { + border-color: ${({ theme }) => theme.bannerAccentHover || "#3fd9a0"}; + background: ${({ theme }) => theme.bannerBgHover || "#131a22"}; + } + + &:active { + transform: scale(0.98); + } + + /* Retain visible focus indicator for accessibility */ + &:focus { + outline: 2px solid + ${({ theme }) => theme.activeColor || theme.bannerAccent || "#2bb77c"}; + outline-offset: 2px; + } + + &:focus:not(:focus-visible) { + outline: none; + } + + &:focus-visible { + outline: 2px solid + ${({ theme }) => theme.activeColor || theme.bannerAccent || "#2bb77c"}; + outline-offset: 3px; + } + + &:visited { + color: ${({ theme }) => theme.bannerText || "#f0f6fc"}; + } + + .banner-action, + .banner-count { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + } + + .banner-count { + padding-left: 16px; + margin-left: 16px; + border-left: 1px dashed ${({ theme }) => theme.bannerAccent || "#2bb77c"}; + /* Fixed min-width reserves space to prevent Cumulative Layout Shift (CLS) */ + min-width: 55px; + } + + .banner-icon { + flex-shrink: 0; + color: ${({ theme }) => theme.bannerAccent || "#2bb77c"}; + } + + @media (max-width: 768px) { + min-width: 180px; + padding: 12px 24px; + font-size: 14px; + + .banner-count { + padding-left: 12px; + margin-left: 12px; + min-width: 48px; + } + } +`; + +const GitHubStarButtonBanner = ({ + repo = "meshery/meshery", + url, + className, + ...props +}) => { + const [stars, setStars] = useState(null); + const [loading, setLoading] = useState(true); + + // Derive URL dynamically from repo to avoid mismatches + const targetUrl = url || `https://github.com/${repo}`; + + useEffect(() => { + let isMounted = true; + const controller = new AbortController(); + const cacheKey = `gh_stars_${repo.replace("/", "_")}`; + + // Reset loading state if repo prop changes + setStars(null); + setLoading(true); + + const checkCacheAndFetch = async () => { + let cached = null; + try { + cached = + typeof window !== "undefined" ? localStorage.getItem(cacheKey) : null; + } catch { + cached = null; + } + + if (cached) { + try { + const { count, timestamp } = JSON.parse(cached); + // Strict type checking and cache expiration check (1 hr) + if (typeof count === "number" && Date.now() - timestamp < 3600000) { + if (isMounted) { + setStars(count); + setLoading(false); + } + return; + } + } catch { + try { + localStorage.removeItem(cacheKey); + } catch { + // Ignore storage errors + } + } + } + + try { + const res = await fetch(`https://api.github.com/repos/${repo}`, { + signal: controller.signal, + }); + if (!res.ok) throw new Error("GitHub API error"); + const data = await res.json(); + + if (typeof data.stargazers_count === "number") { + const count = data.stargazers_count; + try { + localStorage.setItem( + cacheKey, + JSON.stringify({ count, timestamp: Date.now() }), + ); + } catch { + // Ignore storage errors + } + if (isMounted) { + setStars(count); + } + } + } catch (err) { + if (err.name !== "AbortError") { + // Silent catch for network errors + } + } finally { + if (isMounted) { + setLoading(false); + } + } + }; + + checkCacheAndFetch(); + + return () => { + isMounted = false; + controller.abort(); + }; + }, [repo]); + + const formatCount = (num) => { + if (typeof num !== "number") return "Star"; + if (num >= 1000) { + return (num / 1000).toFixed(1).replace(/\.0$/, "") + "k"; + } + return num.toString(); + }; + + return ( + + + + Star on GitHub + + + + {loading ? "…" : stars !== null ? formatCount(stars) : "Star"} + + + ); +}; + +export default GitHubStarButtonBanner; diff --git a/src/sections/Meshery/index.js b/src/sections/Meshery/index.js index ef159481dc370d..1ff3bfa384d302 100644 --- a/src/sections/Meshery/index.js +++ b/src/sections/Meshery/index.js @@ -4,7 +4,6 @@ import Button from "../../reusecore/Button"; import { FiDownloadCloud } from "@react-icons/all-files/fi/FiDownloadCloud"; import { GiClockwork } from "@react-icons/all-files/gi/GiClockwork"; -import { FaGithub } from "@react-icons/all-files/fa/FaGithub"; import FeaturesTable from "./Features-Col"; import mesheryDemo from "../../../static/video/meshery/dashboard.webm"; @@ -16,6 +15,7 @@ import Features from "./Meshery-features"; import InlineQuotes from "../../components/Inline-quotes"; import Maximiliano from "../../collections/members/maximiliano-churichi/Maximiliano-Churichi.webp"; import Nic from "../../collections/members/nicholas-jackson/nic-jackson.webp"; +import GitHubStarButtonBanner from "./GitHubStarButton/GitHubStarButtonBanner"; const MesheryPage = () => { return ( @@ -24,33 +24,39 @@ const MesheryPage = () => {
-

Wrangle your infrastructure

-

collaboratively

+

Wrangle your infrastructure

+

+ collaboratively +

{/* Meshery is the cloud native manager.
*/} - Confidently design, deploy, and operate your infrastructure and workloads with Meshery. + Confidently design, deploy, and operate your infrastructure and + workloads with Meshery.

- - -
@@ -65,7 +71,9 @@ const MesheryPage = () => { image={Nic} />
-

Manage your clusters with features you won't find anywhere else.

+

+ Manage your clusters with features you won't find anywhere else. +

@@ -79,7 +87,6 @@ const MesheryPage = () => { /> - ); }; diff --git a/src/sections/Meshery/meshery.style.js b/src/sections/Meshery/meshery.style.js index 04da4892759df7..dee11f68925eea 100644 --- a/src/sections/Meshery/meshery.style.js +++ b/src/sections/Meshery/meshery.style.js @@ -145,7 +145,8 @@ const MesheryWrapper = styled.section` margin-left: 1rem; } .banner-btn { - margin: 0 0.75rem 0 o.5rem; + margin: 0 ${({ theme }) => theme.spacing?.sm || "0.75rem"} 0 + ${({ theme }) => theme.spacing?.xs || "0.5rem"}; } } } From faad070564324a52d5d0c04ba7d5e60d21393880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Tue, 28 Jul 2026 15:03:22 +0000 Subject: [PATCH 4/5] fix(components): resolve slick arrow inline override and cache timestamp guard Signed-off-by: GitHub --- .../Meshery/Features-section/features-section.style.js | 2 +- .../Meshery/GitHubStarButton/GitHubStarButtonBanner.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index c4bd72988b0499..8fdc688a9f2750 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -136,7 +136,7 @@ const FeaturesSectionWrapper = styled.section` } .slick-arrow { - display: none; + display: none !important; } /* Dots positioned inside the container bounds */ diff --git a/src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js b/src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js index bb915df9c8b681..a1ad0c008c334a 100644 --- a/src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js +++ b/src/sections/Meshery/GitHubStarButton/GitHubStarButtonBanner.js @@ -139,8 +139,8 @@ const GitHubStarButtonBanner = ({ if (cached) { try { const { count, timestamp } = JSON.parse(cached); - // Strict type checking and cache expiration check (1 hr) - if (typeof count === "number" && Date.now() - timestamp < 3600000) { + const age = Date.now() - timestamp; + if (typeof count === "number" && age >= 0 && age < 3600000) { if (isMounted) { setStars(count); setLoading(false); From ad3918eb145afab513a40d3867f32f9c81bcabb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Thu, 30 Jul 2026 00:55:43 +0530 Subject: [PATCH 5/5] Delete src/sections/Meshery/Features-section/features-section.style.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 𝙰𝚁𝚈𝙰 𝚁𝙲𝙱 <248160976+superezzdev@users.noreply.github.com> --- .../features-section.style.js | 260 ------------------ 1 file changed, 260 deletions(-) delete mode 100644 src/sections/Meshery/Features-section/features-section.style.js diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js deleted file mode 100644 index 8fdc688a9f2750..00000000000000 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ /dev/null @@ -1,260 +0,0 @@ -import styled from "styled-components"; - -const FeaturesSectionWrapper = styled.section` - background-color: black; - padding: 4rem 0 5rem 0; - margin-bottom: 6rem; - position: relative; - width: 100%; - max-width: 100%; - z-index: 1; - height: auto; - - .skw { - display: grid; - position: relative; - top: -4rem; - } - .rect-1-left { - background: #c9fcf6; - border-radius: 0 2.125rem 0 0; - grid-column: 1 / span 2; - height: 4rem; - grid-row: 1; - } - .rect-2-left { - background: ${(props) => props.theme.secondaryColor}; - border-radius: 0 0 3.5rem 0; - grid-column: 1 / 2; - height: 4rem; - grid-row: 2; - } - .rect-3-right { - background: ${(props) => props.theme.secondaryColor}; - border-radius: 3.5rem 0 0 0; - grid-column: 10 / 11; - grid-row: 1; - height: 4rem; - } - .rect-4-right { - background: #c9fcf6; - border-radius: 0 0 0 2.125rem; - grid-column: 9 / 11; - grid-row: 2; - height: 4rem; - } - - .section-data { - padding: 0 2rem 3rem; - text-align: center; - position: relative; - z-index: 1; - width: 100%; - margin: 0 auto; - - h1, - h2, - p { - color: white; - } - } - - .section-header { - margin-top: 1rem; - h1 { - line-height: 3.125rem; - span { - color: ${(props) => props.theme.secondaryColor}; - } - } - h2 { - font-weight: 400; - } - p { - font-size: 1.25rem; - line-height: 1.6rem; - margin: 1rem auto 0; - max-width: 50rem; - } - } - - .smp-section { - margin: 3rem auto; - width: 100%; - max-width: 1200px; - padding: 0 1rem; - box-sizing: border-box; - - .smp-section-row { - margin: 4rem 0; - align-items: center; - display: flex; - flex-wrap: wrap; - } - - h2, - h4 { - color: white; - } - - .smp-section-data { - h1, - h2, - p { - text-align: start; - color: white; - } - h2 { - font-size: 1.75rem; - font-weight: 500; - } - } - - .smp-section-carousel { - width: 100%; - - .slick-slider { - position: relative; - display: block; - box-sizing: border-box; - - .slick-list { - /* Reserve 6rem space for dots inside the container to prevent overflow */ - width: calc(100% - 6rem); - margin: 0; - - .slick-slide { - img { - max-height: 22rem; - width: 100%; - object-fit: contain; - aspect-ratio: 16 / 9; /* Reserves space to prevent reflow on load */ - margin: auto; - border-radius: 0.5rem; - } - } - } - - .slick-arrow { - display: none !important; - } - - /* Dots positioned inside the container bounds */ - .slick-dots { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - width: 5rem; - list-style: none; - margin: 0; - padding: 0; - - li { - display: block; - width: 100%; - margin: 0.75rem 0; - opacity: 0.5; - transition: opacity 0.3s ease; - - /* WCAG 2.1 AA Keyboard Focus State */ - &:focus-visible, - button:focus-visible { - outline: 2px solid ${(props) => props.theme.secondaryColor}; - outline-offset: 2px; - border-radius: 4px; - } - - p img { - height: 3.5rem; - width: auto; - border-radius: 0.25rem; - } - } - - li.slick-active { - opacity: 1; - } - } - } - } - } - - .mesh-mngmnt { - margin-top: 4rem; - h3 { - margin: 1rem 0; - color: rgba(255, 255, 255, 0.7); - font-size: 1.5rem; - } - p { - margin: 0.5rem 0; - color: rgba(255, 255, 255, 0.7); - } - - .mesh-mngmnt-btn { - margin: 2rem auto; - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 1rem; - max-width: 100%; - - .mgmt_button { - min-width: 12rem; - border-radius: 1rem; - } - } - } - - /* Responsive Adjustments & Breakpoints */ - @media screen and (max-width: 1200px) { - .smp-section { - .smp-section-carousel { - .slick-slider { - .slick-list { - width: 100%; - - .slick-slide img { - max-height: 18rem; - } - } - - .slick-dots { - position: relative; - right: auto; - top: auto; - transform: none; - width: 100%; - display: flex; - justify-content: center; - gap: 1rem; - margin-top: 1rem; - - li { - width: auto; - margin: 0; - - p img { - height: 2.5rem; - } - } - } - } - } - } - } - - @media screen and (max-width: 768px) { - .smp-section - .smp-section-carousel - .slick-slider - .slick-list - .slick-slide - img { - max-height: 14rem; - } - } -`; - -export default FeaturesSectionWrapper;