Skip to content

Commit 1287ece

Browse files
AasthathecoderXAasthathecoderX
committed
SEO score enhanced
Signed-off-by: AasthathecoderX <[email protected]>
1 parent 898c047 commit 1287ece

File tree

2 files changed

+80
-44
lines changed

2 files changed

+80
-44
lines changed

‎src/sections/Cloud-Native-Catalog/catalog.js‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,16 @@ const CatalogWrapper = styled.div`
1717
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
1818
padding-top: 100px;
1919
padding-bottom: 100px;
20+
2021
@media (max-width: 468px) {
2122
margin: 3rem 0;
2223
}
24+
2325
@media (max-width: 767px) {
2426
padding-top: 0;
2527
padding-bottom: 0;
2628
}
29+
2730
.catalog-container .catalog:nth-child(odd) {
2831
.catalog-image {
2932
.image-wrapper {
@@ -41,6 +44,7 @@ const CatalogWrapper = styled.div`
4144
order: 0;
4245
}
4346
}
47+
4448
.catalog-detail {
4549
@media (max-width: 767px) {
4650
order: 1;
@@ -57,10 +61,12 @@ const CatalogWrapper = styled.div`
5761
@media (max-width: 468px) {
5862
flex-direction: column;
5963
}
64+
6065
.catalog-detail {
6166
display: flex;
6267
flex-direction: column;
6368
justify-content: center;
69+
6470
.heading {
6571
font-size: 3.125rem;
6672
line-height: 3.813rem;
@@ -84,6 +90,7 @@ const CatalogWrapper = styled.div`
8490
padding-right: 25px;
8591
}
8692
}
93+
8794
.caption {
8895
font-weight: 400;
8996
font-size: 1.563rem;
@@ -104,17 +111,20 @@ const CatalogWrapper = styled.div`
104111
}
105112
}
106113
}
114+
107115
.catalog-image {
108116
display: flex;
109117
flex-direction: column;
110118
justify-content: center;
119+
111120
.image-wrapper {
112121
display: flex;
113122
justify-content: center;
114123
align-items: center;
115124
@media (max-width: 767px) {
116125
justify-content: center;
117126
}
127+
118128
.calalog-image {
119129
max-width: 300px;
120130
@media (max-width: 767px) {
@@ -128,16 +138,20 @@ const CatalogWrapper = styled.div`
128138
`;
129139

130140
const Catalog = () => {
131-
132141
const { isDark } = useStyledDarkMode();
133142

134143
return (
135144
<CatalogWrapper>
136145
<Container className="catalog-container">
146+
{/* Kubernetes Patterns Catalog */}
137147
<Row className="catalog">
138148
<Col $md={6} className="catalog-image">
139149
<div className="image-wrapper">
140-
<img src={isDark ? CatalogsDark : CatalogsLight} className="calalog-image" alt="Kubernetes Patterns Catalog" />
150+
<img
151+
src={isDark ? CatalogsDark : CatalogsLight}
152+
className="calalog-image"
153+
alt="Kubernetes Patterns Catalog"
154+
/>
141155
</div>
142156
</Col>
143157
<Col $md={6} className="catalog-detail">
@@ -147,6 +161,8 @@ const Catalog = () => {
147161
</p>
148162
</Col>
149163
</Row>
164+
165+
{/* Service Mesh Patterns */}
150166
<Row className="catalog">
151167
<Col $md={6} className="catalog-detail">
152168
<h2 className="heading">
@@ -158,14 +174,24 @@ const Catalog = () => {
158174
</Col>
159175
<Col $md={6} className="catalog-image">
160176
<div className="image-wrapper">
161-
<img src={Patterns} className="calalog-image" alt="Service Mesh Patterns" />
177+
<img
178+
src={Patterns}
179+
className="calalog-image"
180+
alt="Service Mesh Patterns"
181+
/>
162182
</div>
163183
</Col>
164184
</Row>
185+
186+
{/* WebAssembly Filters */}
165187
<Row className="catalog">
166188
<Col $md={6} className="catalog-image">
167189
<div className="image-wrapper">
168-
<img src={Wasm} className="calalog-image" alt="WebAssembly Icon" />
190+
<img
191+
src={Wasm}
192+
className="calalog-image"
193+
alt="WebAssembly Icon"
194+
/>
169195
</div>
170196
</Col>
171197
<Col md={6} className="catalog-detail">
@@ -175,22 +201,8 @@ const Catalog = () => {
175201
</p>
176202
</Col>
177203
</Row>
178-
{/* <Row className="catalog">
179-
<Col md={6} className="catalog-image">
180-
<div className="image-wrapper">
181-
<img src={isDark ? EbpfDark : Ebpf} className="calalog-image" />
182-
</div>
183-
</Col>
184-
<Col $md={6} className="catalog-detail">
185-
<h2 className="heading">
186-
Maximize Your Performance with eBPF Programs
187-
</h2>
188-
<p className="caption">
189-
Embedded within the data plane, eBPF programs enable
190-
high-performance, granular control over service requests.
191-
</p>
192-
</Col>
193-
</Row> */}
204+
205+
{/* Open Policy Agent (OPA) */}
194206
<Row className="catalog">
195207
<Col $md={6} className="catalog-detail">
196208
<h2 className="heading">
@@ -202,7 +214,11 @@ const Catalog = () => {
202214
</Col>
203215
<Col $md={6} className="catalog-image">
204216
<div className="image-wrapper">
205-
<img src={Opa} className="calalog-image" alt="Open Policy Agent (OPA) Icon" />
217+
<img
218+
src={Opa}
219+
className="calalog-image"
220+
alt="Open Policy Agent (OPA) Icon"
221+
/>
206222
</div>
207223
</Col>
208224
</Row>
@@ -211,4 +227,4 @@ const Catalog = () => {
211227
);
212228
};
213229

214-
export default Catalog;
230+
export default Catalog;

‎src/sections/Home/Banner/index.js‎

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from "react";
1+
import React, { useEffect, useState } from "react";
22
import Banner4 from "../Banner-4";
33
import Banner3 from "../Banner-3";
44
import Banner2 from "../Banner-2";
@@ -7,34 +7,54 @@ import Banner1 from "../Banner-1";
77
const BannersCount = 4;
88

99
const RotationalBanner = () => {
10-
let initialValue;
11-
try {
12-
initialValue = sessionStorage.getItem("banner") || 1;
13-
} catch (error) {
14-
console.error("Error in sessionStorage.getItem('banner'):", error);
15-
initialValue = 1;
16-
}
10+
const [initialValue, setInitialValue] = useState(1);
1711

12+
// Initialize banner value only in browser, not during SSR
1813
useEffect(() => {
19-
let val = sessionStorage.getItem("banner");
20-
let currentClass = `banner${val}`;
21-
let replaceClass = `banner${val - 1 == 0 ? 4 : val - 1}`;
22-
if (!document.body.classList.contains(currentClass)) {
23-
document.body.classList.replace(replaceClass, currentClass);
24-
}
25-
if (sessionStorage.getItem("banner")) {
26-
sessionStorage.setItem("banner", (Number(initialValue) % BannersCount) + 1);
27-
} else {
28-
sessionStorage.setItem("banner", 2);
14+
if (typeof window !== 'undefined') {
15+
try {
16+
const bannerValue = window.sessionStorage.getItem("banner") || 1;
17+
setInitialValue(bannerValue);
18+
} catch (error) {
19+
console.error("Error in sessionStorage.getItem('banner'):", error);
20+
setInitialValue(1);
21+
}
2922
}
3023
}, []);
3124

25+
// Handle banner rotation in browser only
26+
useEffect(() => {
27+
if (typeof window !== 'undefined') {
28+
try {
29+
let val = window.sessionStorage.getItem("banner");
30+
let currentClass = `banner${val}`;
31+
let replaceClass = `banner${val - 1 == 0 ? 4 : val - 1}`;
32+
33+
if (!document.body.classList.contains(currentClass)) {
34+
document.body.classList.replace(replaceClass, currentClass);
35+
}
36+
37+
if (window.sessionStorage.getItem("banner")) {
38+
window.sessionStorage.setItem(
39+
"banner",
40+
(Number(initialValue) % BannersCount) + 1
41+
);
42+
} else {
43+
window.sessionStorage.setItem("banner", 2);
44+
}
45+
} catch (error) {
46+
console.error("Error managing banners:", error);
47+
}
48+
}
49+
}, [initialValue]);
50+
3251
/*
3352
NOTE:
34-
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.
35-
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`
36-
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.
53+
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.
54+
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`
55+
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.
3756
*/
57+
3858
return (
3959
<>
4060
<Banner4 className="banner1" />
@@ -45,4 +65,4 @@ const RotationalBanner = () => {
4565
);
4666
};
4767

48-
export default RotationalBanner;
68+
export default RotationalBanner;

0 commit comments

Comments
 (0)