From 898c0478b6f0fc3f8888d3234d22c124d1f6b2cc Mon Sep 17 00:00:00 2001 From: l5io Date: Sun, 7 Dec 2025 01:56:06 +0000 Subject: [PATCH 1/6] Updated feature data from spreadsheet Signed-off-by: l5io --- src/sections/Pricing/feature_data.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index c776453f50141..d216e3991956e 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -429,7 +429,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/kanvas/designer/whiteboarding/#step-3-utilizing-whiteboard-tools" }, { "theme": "", @@ -1181,7 +1181,7 @@ "teamOperator": "", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/cloud/self-hosted/planning/peer-to-peer-communication/" }, { "theme": "", From 1287ece8113a2a495e68f3ba754200433e513a67 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Mon, 8 Dec 2025 08:58:30 +0530 Subject: [PATCH 2/6] SEO score enhanced Signed-off-by: AasthathecoderX --- src/sections/Cloud-Native-Catalog/catalog.js | 60 +++++++++++------- src/sections/Home/Banner/index.js | 64 +++++++++++++------- 2 files changed, 80 insertions(+), 44 deletions(-) diff --git a/src/sections/Cloud-Native-Catalog/catalog.js b/src/sections/Cloud-Native-Catalog/catalog.js index b43baa3feb8e8..ad3f913c772e6 100644 --- a/src/sections/Cloud-Native-Catalog/catalog.js +++ b/src/sections/Cloud-Native-Catalog/catalog.js @@ -17,13 +17,16 @@ const CatalogWrapper = styled.div` transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); padding-top: 100px; padding-bottom: 100px; + @media (max-width: 468px) { margin: 3rem 0; } + @media (max-width: 767px) { padding-top: 0; padding-bottom: 0; } + .catalog-container .catalog:nth-child(odd) { .catalog-image { .image-wrapper { @@ -41,6 +44,7 @@ const CatalogWrapper = styled.div` order: 0; } } + .catalog-detail { @media (max-width: 767px) { order: 1; @@ -57,10 +61,12 @@ const CatalogWrapper = styled.div` @media (max-width: 468px) { flex-direction: column; } + .catalog-detail { display: flex; flex-direction: column; justify-content: center; + .heading { font-size: 3.125rem; line-height: 3.813rem; @@ -84,6 +90,7 @@ const CatalogWrapper = styled.div` padding-right: 25px; } } + .caption { font-weight: 400; font-size: 1.563rem; @@ -104,10 +111,12 @@ const CatalogWrapper = styled.div` } } } + .catalog-image { display: flex; flex-direction: column; justify-content: center; + .image-wrapper { display: flex; justify-content: center; @@ -115,6 +124,7 @@ const CatalogWrapper = styled.div` @media (max-width: 767px) { justify-content: center; } + .calalog-image { max-width: 300px; @media (max-width: 767px) { @@ -128,16 +138,20 @@ const CatalogWrapper = styled.div` `; const Catalog = () => { - const { isDark } = useStyledDarkMode(); return ( + {/* Kubernetes Patterns Catalog */}
- Kubernetes Patterns Catalog + Kubernetes Patterns Catalog
@@ -147,6 +161,8 @@ const Catalog = () => {

+ + {/* Service Mesh Patterns */}

@@ -158,14 +174,24 @@ const Catalog = () => {
- Service Mesh Patterns + Service Mesh Patterns
+ + {/* WebAssembly Filters */}
- WebAssembly Icon + WebAssembly Icon
@@ -175,22 +201,8 @@ const Catalog = () => {

- {/* - -
- -
- - -

- Maximize Your Performance with eBPF Programs -

-

- Embedded within the data plane, eBPF programs enable - high-performance, granular control over service requests. -

- - */} + + {/* Open Policy Agent (OPA) */}

@@ -202,7 +214,11 @@ const Catalog = () => {
- Open Policy Agent (OPA) Icon + Open Policy Agent (OPA) Icon
@@ -211,4 +227,4 @@ const Catalog = () => { ); }; -export default Catalog; \ No newline at end of file +export default Catalog; diff --git a/src/sections/Home/Banner/index.js b/src/sections/Home/Banner/index.js index f69f9ca4e34dc..5e9919432fd01 100644 --- a/src/sections/Home/Banner/index.js +++ b/src/sections/Home/Banner/index.js @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import Banner4 from "../Banner-4"; import Banner3 from "../Banner-3"; import Banner2 from "../Banner-2"; @@ -7,34 +7,54 @@ import Banner1 from "../Banner-1"; const BannersCount = 4; const RotationalBanner = () => { - let initialValue; - try { - initialValue = sessionStorage.getItem("banner") || 1; - } catch (error) { - console.error("Error in sessionStorage.getItem('banner'):", error); - initialValue = 1; - } + const [initialValue, setInitialValue] = useState(1); + // Initialize banner value only in browser, not during SSR useEffect(() => { - let val = sessionStorage.getItem("banner"); - let currentClass = `banner${val}`; - let replaceClass = `banner${val - 1 == 0 ? 4 : val - 1}`; - if (!document.body.classList.contains(currentClass)) { - document.body.classList.replace(replaceClass, currentClass); - } - if (sessionStorage.getItem("banner")) { - sessionStorage.setItem("banner", (Number(initialValue) % BannersCount) + 1); - } else { - sessionStorage.setItem("banner", 2); + if (typeof window !== 'undefined') { + try { + const bannerValue = window.sessionStorage.getItem("banner") || 1; + setInitialValue(bannerValue); + } catch (error) { + console.error("Error in sessionStorage.getItem('banner'):", error); + setInitialValue(1); + } } }, []); + // Handle banner rotation in browser only + useEffect(() => { + if (typeof window !== 'undefined') { + try { + let val = window.sessionStorage.getItem("banner"); + let currentClass = `banner${val}`; + let replaceClass = `banner${val - 1 == 0 ? 4 : val - 1}`; + + if (!document.body.classList.contains(currentClass)) { + document.body.classList.replace(replaceClass, currentClass); + } + + if (window.sessionStorage.getItem("banner")) { + window.sessionStorage.setItem( + "banner", + (Number(initialValue) % BannersCount) + 1 + ); + } else { + window.sessionStorage.setItem("banner", 2); + } + } catch (error) { + console.error("Error managing banners:", error); + } + } + }, [initialValue]); + /* NOTE: - When adding a new banner to the below list, update the "BannersCount" value at line: 7 and add a className prop with the value updated to reflect the new count. - That sanitizeShrinkWidth, if the current count is 4 and a new banner is added then the className for the new banner should be "banner5", have the default `display` - as `none` in the stylesheet for the banner and add a style definition in `src/sections/app.styles.js` to show the banner based on class assigned to `body` tag. + When adding a new banner to the below list, update the "BannersCount" value at line: 7 and add a className prop with the value updated to reflect the new count. + That sanitizeShrinkWidth, if the current count is 4 and a new banner is added then the className for the new banner should be "banner5", have the default `display` + as `none` in the stylesheet for the banner and add a style definition in `src/sections/app.styles.js` to show the banner based on class assigned to `body` tag. */ + return ( <> @@ -45,4 +65,4 @@ const RotationalBanner = () => { ); }; -export default RotationalBanner; +export default RotationalBanner; \ No newline at end of file From a9752260d32ac1bb2b8d44d4ee21a4716422b523 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Wed, 10 Dec 2025 18:57:14 +0530 Subject: [PATCH 3/6] Reverted the files Signed-off-by: AasthathecoderX --- src/sections/Cloud-Native-Catalog/catalog.js | 60 +++++++------------- src/sections/Pricing/feature_data.json | 4 +- 2 files changed, 24 insertions(+), 40 deletions(-) diff --git a/src/sections/Cloud-Native-Catalog/catalog.js b/src/sections/Cloud-Native-Catalog/catalog.js index ad3f913c772e6..b43baa3feb8e8 100644 --- a/src/sections/Cloud-Native-Catalog/catalog.js +++ b/src/sections/Cloud-Native-Catalog/catalog.js @@ -17,16 +17,13 @@ const CatalogWrapper = styled.div` transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); padding-top: 100px; padding-bottom: 100px; - @media (max-width: 468px) { margin: 3rem 0; } - @media (max-width: 767px) { padding-top: 0; padding-bottom: 0; } - .catalog-container .catalog:nth-child(odd) { .catalog-image { .image-wrapper { @@ -44,7 +41,6 @@ const CatalogWrapper = styled.div` order: 0; } } - .catalog-detail { @media (max-width: 767px) { order: 1; @@ -61,12 +57,10 @@ const CatalogWrapper = styled.div` @media (max-width: 468px) { flex-direction: column; } - .catalog-detail { display: flex; flex-direction: column; justify-content: center; - .heading { font-size: 3.125rem; line-height: 3.813rem; @@ -90,7 +84,6 @@ const CatalogWrapper = styled.div` padding-right: 25px; } } - .caption { font-weight: 400; font-size: 1.563rem; @@ -111,12 +104,10 @@ const CatalogWrapper = styled.div` } } } - .catalog-image { display: flex; flex-direction: column; justify-content: center; - .image-wrapper { display: flex; justify-content: center; @@ -124,7 +115,6 @@ const CatalogWrapper = styled.div` @media (max-width: 767px) { justify-content: center; } - .calalog-image { max-width: 300px; @media (max-width: 767px) { @@ -138,20 +128,16 @@ const CatalogWrapper = styled.div` `; const Catalog = () => { + const { isDark } = useStyledDarkMode(); return ( - {/* Kubernetes Patterns Catalog */}
- Kubernetes Patterns Catalog + Kubernetes Patterns Catalog
@@ -161,8 +147,6 @@ const Catalog = () => {

- - {/* Service Mesh Patterns */}

@@ -174,24 +158,14 @@ const Catalog = () => {
- Service Mesh Patterns + Service Mesh Patterns
- - {/* WebAssembly Filters */}
- WebAssembly Icon + WebAssembly Icon
@@ -201,8 +175,22 @@ const Catalog = () => {

- - {/* Open Policy Agent (OPA) */} + {/* + +
+ +
+ + +

+ Maximize Your Performance with eBPF Programs +

+

+ Embedded within the data plane, eBPF programs enable + high-performance, granular control over service requests. +

+ + */}

@@ -214,11 +202,7 @@ const Catalog = () => {
- Open Policy Agent (OPA) Icon + Open Policy Agent (OPA) Icon
@@ -227,4 +211,4 @@ const Catalog = () => { ); }; -export default Catalog; +export default Catalog; \ No newline at end of file diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index d216e3991956e..c776453f50141 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -429,7 +429,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "https://docs.layer5.io/kanvas/designer/whiteboarding/#step-3-utilizing-whiteboard-tools" + "docs": "" }, { "theme": "", @@ -1181,7 +1181,7 @@ "teamOperator": "", "enterprise": "x" }, - "docs": "https://docs.layer5.io/cloud/self-hosted/planning/peer-to-peer-communication/" + "docs": "" }, { "theme": "", From 09796f306b080ee0af668c7b71b63546893b1e79 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Wed, 31 Dec 2025 19:08:45 +0530 Subject: [PATCH 4/6] Reverted changes in index.js and introduced new SEO changes Signed-off-by: AasthathecoderX --- src/sections/Home/Banner/index.js | 62 +++----- .../Kanvas-design/kanvas-design-hero.js | 138 ++++++++++-------- .../kanvas-design-integrations.js | 82 ++++------- 3 files changed, 122 insertions(+), 160 deletions(-) diff --git a/src/sections/Home/Banner/index.js b/src/sections/Home/Banner/index.js index 5e9919432fd01..3bcc21d06d9de 100644 --- a/src/sections/Home/Banner/index.js +++ b/src/sections/Home/Banner/index.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import Banner4 from "../Banner-4"; import Banner3 from "../Banner-3"; import Banner2 from "../Banner-2"; @@ -7,54 +7,34 @@ import Banner1 from "../Banner-1"; const BannersCount = 4; const RotationalBanner = () => { - const [initialValue, setInitialValue] = useState(1); + let initialValue; + try { + initialValue = sessionStorage.getItem("banner") || 1; + } catch (error) { + console.error("Error in sessionStorage.getItem('banner'):", error); + initialValue = 1; + } - // Initialize banner value only in browser, not during SSR useEffect(() => { - if (typeof window !== 'undefined') { - try { - const bannerValue = window.sessionStorage.getItem("banner") || 1; - setInitialValue(bannerValue); - } catch (error) { - console.error("Error in sessionStorage.getItem('banner'):", error); - setInitialValue(1); - } + let val = sessionStorage.getItem("banner"); + let currentClass = `banner${val}`; + let replaceClass = `banner${val - 1 == 0 ? 4 : val - 1}`; + if (!document.body.classList.contains(currentClass)) { + document.body.classList.replace(replaceClass, currentClass); } - }, []); - - // Handle banner rotation in browser only - useEffect(() => { - if (typeof window !== 'undefined') { - try { - let val = window.sessionStorage.getItem("banner"); - let currentClass = `banner${val}`; - let replaceClass = `banner${val - 1 == 0 ? 4 : val - 1}`; - - if (!document.body.classList.contains(currentClass)) { - document.body.classList.replace(replaceClass, currentClass); - } - - if (window.sessionStorage.getItem("banner")) { - window.sessionStorage.setItem( - "banner", - (Number(initialValue) % BannersCount) + 1 - ); - } else { - window.sessionStorage.setItem("banner", 2); - } - } catch (error) { - console.error("Error managing banners:", error); - } + if (sessionStorage.getItem("banner")) { + sessionStorage.setItem("banner", (Number(initialValue) % BannersCount) + 1); + } else { + sessionStorage.setItem("banner", 2); } - }, [initialValue]); + }, []); /* NOTE: - When adding a new banner to the below list, update the "BannersCount" value at line: 7 and add a className prop with the value updated to reflect the new count. - That sanitizeShrinkWidth, if the current count is 4 and a new banner is added then the className for the new banner should be "banner5", have the default `display` - as `none` in the stylesheet for the banner and add a style definition in `src/sections/app.styles.js` to show the banner based on class assigned to `body` tag. + When adding a new banner to the below list, update the "BannersCount" value at line: 7 and add a className prop with the value updated to reflect the new count. + That sanitizeShrinkWidth, if the current count is 4 and a new banner is added then the className for the new banner should be "banner5", have the default `display` + as `none` in the stylesheet for the banner and add a style definition in `src/sections/app.styles.js` to show the banner based on class assigned to `body` tag. */ - return ( <> diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js index 0fbdacf50a9cc..883aec8c6f7ef 100644 --- a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js +++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js @@ -9,95 +9,105 @@ import { useState } from "react"; import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode"; const HeroSectionWrapper = styled.div` + display: flex; + flex-direction: row; + background-color: ${(props) => props.theme.grey121212ToWhite}; + width: 100%; + justify-content: space-evenly; + align-items: center; + padding: 3% 5% 8%; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + @media only screen and (max-width: 767px) { + text-align: center; + flex-direction: column-reverse; + } + + .hero-text { display: flex; - flex-direction: row; - background-color: ${props => props.theme.grey121212ToWhite};; - width: 100%; - justify-content: space-evenly; - align-items: center; - padding: 3% 5% 8%; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + flex-direction: column; + flex: 0 0 35%; + margin-top: 5%; @media only screen and (max-width: 767px) { - text-align: center; - flex-direction: column-reverse; + max-width: 100%; + margin-top: 15%; } + } + + h2 { + padding-bottom: 2%; + } + + .hero-image { + display: grid; + grid-template-rows: 5rem 5rem; + place-items: center; + margin: 5% 0; + flex: 0 0 50%; + max-width: 60%; - .hero-text { - display: flex; - flex-direction: column; - flex: 0 0 35%; - margin-top: 5%; - @media only screen and (max-width: 767px) { - max-width: 100%; - margin-top: 15%; - } + @media only screen and (max-width: 767px) { + max-width: 100%; } - h2 { - padding-bottom: 2%; + .locator { + /* transform: translateY(-5rem); */ + transition: 1s; + z-index: 1; } - .hero-image { - display: grid; - grid-template-rows: 5rem 5rem; - place-items: center; - margin: 5% 0; - flex: 0 0 50%; - max-width: 60%; - @media only screen and (max-width: 767px) { - max-width: 100%; - } - - .locator { - /* transform: translateY(-5rem); */ - transition: 1s; - z-index: 1; - } - .locator-moving { - transform: translateY(5rem); - transition: 1s; - z-index: 1; - } - - .map { - opacity: 0; - transition: opacity ease 0.5s; - z-index: 0; - } - .map-visible { - opacity: 1; - transition: opacity 1s ease 0.5s; - } + .locator-moving { + transform: translateY(5rem); + transition: 1s; + z-index: 1; + } + .map { + opacity: 0; + transition: opacity ease 0.5s; + z-index: 0; } -`; + .map-visible { + opacity: 1; + transition: opacity 1s ease 0.5s; + } + } +`; const KanvasHeroSection = () => { - const [locatorRef, inView] = useInView({ threshold: 0.8 }); + const [locatorRef, inView] = useInView({ + threshold: 0.8, + }); + const [imageInView, setimageInView] = useState(false); - if (inView && !imageInView) - setimageInView(true); - else if (imageInView && !inView) - setimageInView(false); + + if (inView && !imageInView) setimageInView(true); + else if (imageInView && !inView) setimageInView(false); const { isDark } = useStyledDarkMode(); return (
-

Design your infrastructure

-

Kanvasis the world’s only visual designer for Kubernetes and cloud native applications. Design, deploy, and manage your Kubernetes-based, cloud native deployments allowing you to speed up infrastructure configuration.

+

Design Your Kubernetes & Cloud Native Infrastructure

+

Kanvas is the world's only visual designer for Kubernetes and cloud native applications. Design, deploy, and manage your Kubernetes-based, cloud native deployments allowing you to speed up infrastructure configuration.

-
- locator - integrations +
+ Kanvas visual infrastructure design locator icon + Kanvas infrastructure visualization diagram showing cloud native components
- ); }; -export default KanvasHeroSection; \ No newline at end of file +export default KanvasHeroSection; diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js index b9c2b9451e865..01a400c064aef 100644 --- a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js +++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js @@ -6,6 +6,7 @@ import { useInView } from "react-intersection-observer"; import { useState } from "react"; import { useStaticQuery, graphql } from "gatsby"; import Button from "../../../reusecore/Button"; +import "react-accessible-accordion/dist/fancy-example.css"; // import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode"; const IntegrationsSectionWrapper = styled.div` @@ -28,18 +29,19 @@ const IntegrationsSectionWrapper = styled.div` flex-direction: column; flex: 0 0 40%; position: relative; + @media only screen and (max-width: 767px) { max-width: 100%; margin-top: 15%; } } - h1 { + h2 { font-weight: 100; color: white; } - h4 { + h3 { color: white; } @@ -50,6 +52,7 @@ const IntegrationsSectionWrapper = styled.div` margin: 5% 0; flex: 0 0 25%; /* max-width: 25%; */ + @media only screen and (max-width: 767px) { max-width: 50%; margin-top: 10%; @@ -57,59 +60,31 @@ const IntegrationsSectionWrapper = styled.div` .diagram-hidden { opacity: 0; - transition: 0.5s ease-out; - } - .diagram-visible { - opacity: 1; - transition: 0.5s ease-in; - } - } - - .underline-img { - width: 20%; - top: 40%; - left: -6%; - - @media only screen and (max-width: 1498px) { - top: 27%; - } - @media only screen and (max-width: 838px) { - top: 24%; - } - @media only screen and (max-width: 767px) { - left: 10%; - top: 40%; - } - @media only screen and (max-width: 500px) { - left: 0; - } - @media only screen and (max-width: 407px) { - left: 20%; - top: 25%; } } `; const KanvasIntegrationsSection = () => { - const [diagramRef, inView] = useInView({ threshold: 0.6 }); + const [diagramRef, inView] = useInView({ + threshold: 0.8, + }); + const [imageInView, setimageInView] = useState(false); - const integrations = useStaticQuery(graphql` - query { - allMdx( - filter: { - fields: { collection: { eq: "integrations" } } - frontmatter: { published: { eq: true } } - } - ) { - totalCount - } - } - `); if (inView && !imageInView) setimageInView(true); else if (imageInView && !inView) setimageInView(false); - // const { isDark } = useStyledDarkMode(); + const { allMdx } = useStaticQuery( + graphql` + query { + allMdx( + filter: { fields: { collection: { eq: "integrations" } } } + ) { + totalCount + } + } + ` + ); return ( @@ -119,33 +94,30 @@ const KanvasIntegrationsSection = () => { style={{ alignSelf: "center", width: "100%" }} >
-

- {Math.ceil(integrations.allMdx.totalCount / 10) * 10}+ Built-in +

+ {Math.ceil((allMdx.totalCount / 10) * 10)}+ Built-in Integrations -

+

-

- Support for all of your Cloud Native Infrastructure and - Applications. -

+

Support for all of your Cloud Native Infrastructure and Applications.

From 711401225354d1d3620f062e89e24bf5a5897e6e Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Thu, 8 Jan 2026 11:03:31 +0530 Subject: [PATCH 5/6] Reverted css changes Signed-off-by: AasthathecoderX --- .../Kanvas-design/kanvas-design-hero.js | 107 +++++++++--------- .../kanvas-design-integrations.js | 36 +++++- 2 files changed, 85 insertions(+), 58 deletions(-) diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js index 883aec8c6f7ef..07ff59cae3fb2 100644 --- a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js +++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js @@ -9,73 +9,72 @@ import { useState } from "react"; import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode"; const HeroSectionWrapper = styled.div` - display: flex; - flex-direction: row; - background-color: ${(props) => props.theme.grey121212ToWhite}; - width: 100%; - justify-content: space-evenly; - align-items: center; - padding: 3% 5% 8%; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - @media only screen and (max-width: 767px) { - text-align: center; - flex-direction: column-reverse; - } - - .hero-text { - display: flex; - flex-direction: column; - flex: 0 0 35%; - margin-top: 5%; - - @media only screen and (max-width: 767px) { - max-width: 100%; - margin-top: 15%; - } - } - h2 { - padding-bottom: 2%; - } - - .hero-image { - display: grid; - grid-template-rows: 5rem 5rem; - place-items: center; - margin: 5% 0; - flex: 0 0 50%; - max-width: 60%; + display: flex; + flex-direction: row; + background-color: ${props => props.theme.grey121212ToWhite};; + width: 100%; + justify-content: space-evenly; + align-items: center; + padding: 3% 5% 8%; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); @media only screen and (max-width: 767px) { - max-width: 100%; + text-align: center; + flex-direction: column-reverse; } - .locator { - /* transform: translateY(-5rem); */ - transition: 1s; - z-index: 1; + .hero-text { + display: flex; + flex-direction: column; + flex: 0 0 35%; + margin-top: 5%; + @media only screen and (max-width: 767px) { + max-width: 100%; + margin-top: 15%; + } } - .locator-moving { - transform: translateY(5rem); - transition: 1s; - z-index: 1; + h2 { + padding-bottom: 2%; } - .map { - opacity: 0; - transition: opacity ease 0.5s; - z-index: 0; - } + .hero-image { + display: grid; + grid-template-rows: 5rem 5rem; + place-items: center; + margin: 5% 0; + flex: 0 0 50%; + max-width: 60%; + @media only screen and (max-width: 767px) { + max-width: 100%; + } + + .locator { + /* transform: translateY(-5rem); */ + transition: 1s; + z-index: 1; + } + .locator-moving { + transform: translateY(5rem); + transition: 1s; + z-index: 1; + } + + .map { + opacity: 0; + transition: opacity ease 0.5s; + z-index: 0; + } + .map-visible { + opacity: 1; + transition: opacity 1s ease 0.5s; + } - .map-visible { - opacity: 1; - transition: opacity 1s ease 0.5s; } - } `; + const KanvasHeroSection = () => { const [locatorRef, inView] = useInView({ threshold: 0.8, diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js index 01a400c064aef..f5f0f555fbf9b 100644 --- a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js +++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js @@ -29,19 +29,18 @@ const IntegrationsSectionWrapper = styled.div` flex-direction: column; flex: 0 0 40%; position: relative; - @media only screen and (max-width: 767px) { max-width: 100%; margin-top: 15%; } } - h2 { + h1 { font-weight: 100; color: white; } - h3 { + h4 { color: white; } @@ -52,7 +51,6 @@ const IntegrationsSectionWrapper = styled.div` margin: 5% 0; flex: 0 0 25%; /* max-width: 25%; */ - @media only screen and (max-width: 767px) { max-width: 50%; margin-top: 10%; @@ -60,10 +58,40 @@ const IntegrationsSectionWrapper = styled.div` .diagram-hidden { opacity: 0; + transition: 0.5s ease-out; + } + .diagram-visible { + opacity: 1; + transition: 0.5s ease-in; + } + } + + .underline-img { + width: 20%; + top: 40%; + left: -6%; + + @media only screen and (max-width: 1498px) { + top: 27%; + } + @media only screen and (max-width: 838px) { + top: 24%; + } + @media only screen and (max-width: 767px) { + left: 10%; + top: 40%; + } + @media only screen and (max-width: 500px) { + left: 0; + } + @media only screen and (max-width: 407px) { + left: 20%; + top: 25%; } } `; + const KanvasIntegrationsSection = () => { const [diagramRef, inView] = useInView({ threshold: 0.8, From c5abbae078cc1aa9b10741157e9be9e77bba1a31 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Mon, 12 Jan 2026 19:05:47 +0530 Subject: [PATCH 6/6] reverted index.js Fix missing newline at end of file. Signed-off-by: AasthathecoderX --- src/sections/Home/Banner/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Home/Banner/index.js b/src/sections/Home/Banner/index.js index 3bcc21d06d9de..f69f9ca4e34dc 100644 --- a/src/sections/Home/Banner/index.js +++ b/src/sections/Home/Banner/index.js @@ -45,4 +45,4 @@ const RotationalBanner = () => { ); }; -export default RotationalBanner; \ No newline at end of file +export default RotationalBanner;