Skip to content

Commit d7d48eb

Browse files
authored
fix: bug fixes (#29)
Signed-off-by: Aditya Prasad Mohanty <[email protected]>
1 parent 1263c04 commit d7d48eb

File tree

19 files changed

+157
-118
lines changed

19 files changed

+157
-118
lines changed

src/components/HomepageAdopters/index.js

+31-38
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,46 @@ import adoptersLogo3 from "../../../static/img/adopters/adopter-intel-smart-edge
66
import Link from "@docusaurus/Link";
77
import { FaAngleRight } from "react-icons/fa6";
88

9-
export default function HomepageAdopters () {
10-
return (
11-
<section className={`adopters ${styles.adopters}`}>
12-
<div className={styles.adoptersLogos}>
13-
<h4 className={styles.adoptersTitle}>Adopted By</h4>
14-
<div className={styles.logos}>
15-
<AdoptersLogo1
16-
className={styles.logo}
17-
onClick={(e) => {
18-
window.location.href = "https://www.accuknox.com/";
19-
}}
20-
alt="adopter logo"
21-
/>
9+
export default function HomepageAdopters() {
10+
return (
11+
<section className={`adopters ${styles.adopters}`}>
12+
<div className={styles.adoptersLogos}>
13+
<h4 className={styles.adoptersTitle}>Adopted By</h4>
14+
<div className={styles.logos}>
15+
<Link to="https://open-horizon.github.io/">
2216
<img
2317
className={styles.logo}
24-
onClick={(e) => {
25-
window.location.href = "https://open-horizon.github.io/";
26-
}}
2718
src={adoptersLogo2}
2819
alt="adopter logo"
2920
/>
21+
</Link>
22+
<Link to="https://www.accuknox.com/">
23+
<AdoptersLogo1 className={`${styles.logo} ${styles.accuknox}`} alt="adopter logo" />
24+
</Link>
25+
<Link to="https://www.intel.com/content/www/us/en/edge-computing/smart-edge.html">
3026
<img
3127
className={styles.logo}
32-
onClick={(e) => {
33-
window.location.href =
34-
"https://www.intel.com/content/www/us/en/edge-computing/smart-edge.html";
35-
}}
3628
src={adoptersLogo3}
3729
alt="adopter logo"
3830
/>
39-
</div>
40-
</div>
41-
<div className={styles.container}>
42-
<div className={styles.containerContent}>
43-
<h3 className={styles.containerTitle}>Want to Add Your Logo ?</h3>
44-
<p className={styles.containerDescription}>
45-
Be one of the adopters for our organization
46-
</p>
47-
</div>
48-
<Link
49-
to="https://github.com/kubearmor/KubeArmor/blob/main/ADOPTERS.md"
50-
className={styles.containerButton}
51-
>
52-
Apply
53-
<FaAngleRight color="var(--color-primary)" />
5431
</Link>
5532
</div>
56-
</section>
57-
);
58-
}
33+
</div>
34+
<div className={styles.container}>
35+
<div className={styles.containerContent}>
36+
<h3 className={styles.containerTitle}>Want to Add Your Logo ?</h3>
37+
<p className={styles.containerDescription}>
38+
Be one of the adopters for our organization
39+
</p>
40+
</div>
41+
<Link
42+
to="https://github.com/kubearmor/KubeArmor/blob/main/ADOPTERS.md"
43+
className={styles.containerButton}
44+
>
45+
Apply
46+
<FaAngleRight color="var(--color-primary)" />
47+
</Link>
48+
</div>
49+
</section>
50+
);
51+
}

src/components/HomepageAdopters/styles.module.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,23 @@
1212
.adoptersTitle {
1313
font-family: var(--font-main-medium);
1414
font-weight: 500;
15-
font-size: 1rem;
15+
font-size: 1.25rem;
1616
color: var(--color-font-header);
1717
}
1818
.logos {
1919
display: flex;
2020
flex-direction: row;
2121
justify-content: space-between;
2222
align-items: center;
23-
width: 100%;
23+
width: 80%;
2424
}
2525
.logo {
2626
cursor: pointer;
2727
width: 12rem;
2828
}
29+
.accuknox {
30+
width: 15rem;
31+
}
2932

3033
.container {
3134
width: 80%;
@@ -81,6 +84,9 @@
8184
.adoptersLogos {
8285
padding: 10rem 2rem 0;
8386
}
87+
.logos {
88+
width: 100%;
89+
}
8490
}
8591
@media screen and (max-width: 550px) {
8692
.logos {

src/components/HomepageArchitecture/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import styles from "./styles.module.css";
3-
import architectureImage from "../../../static/img/architecture/architecture-illustration.webp";
3+
import architectureImage from "../../../static/img/architecture/architecture-diagram.webp";
44

55
export default function HomepageArchitecture() {
66
return (

src/components/HomepageHeader/index.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ export default function HomepageHeader() {
1313
return (
1414
<header className={`hero ${styles.hero}`}>
1515
<div className={styles.container}>
16-
<Link className={styles.heroAnnouncement}>
16+
<Link
17+
className={styles.heroAnnouncement}
18+
to="https://github.com/kubearmor/KubeArmor/wiki/v1.0-Release-Blog"
19+
>
1720
<FaLock className={styles.heroIcon} color="var(--color-primary)" />
1821
KubeArmor v1.0 is here!
1922
<FaAngleRight
@@ -35,14 +38,9 @@ export default function HomepageHeader() {
3538
buttonText="Try KubeArmor"
3639
buttonLink="https://docs.kubearmor.io/kubearmor/quick-links/deployment_guide"
3740
/>
38-
<RedirectButton
39-
redirectColor="var(--color-primary)"
40-
redirectText="Learn More"
41-
redirectLink="https://docs.kubearmor.io/kubearmor/"
42-
/>
4341
</div>
4442
</div>
45-
<HeroImage className={styles.heroImage}/>
43+
<HeroImage className={styles.heroImage} />
4644
</header>
4745
);
4846
}

src/components/HomepageHeader/styles.module.css

+3
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
justify-content: space-between;
2828
margin-bottom: 0.5rem;
2929
}
30+
.heroAnnouncement:hover {
31+
text-decoration: none;
32+
}
3033
.heroTitle {
3134
font-family: var(--font-main-bold);
3235
font-size: 4rem;

src/components/HomepageInstallation/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import styles from "./styles.module.css";
3-
import installationImage from "../../../static/img/installation/Installation-illustration.png";
3+
import installationImage from "../../../static/img/installation/Installation-illustration.webp";
44
import { FaCirclePlay, FaRegCopy } from "react-icons/fa6";
55
import RedirectButton from "../RedirectButton";
66
import Link from "@docusaurus/Link";

src/components/HomepageInstallation/styles.module.css

+13
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,16 @@
9999
opacity: 0.8;
100100
text-decoration: none;
101101
}
102+
@media screen and (max-width: 1080px) {
103+
.installation {
104+
padding: 10rem 2rem 0;
105+
}
106+
}
107+
@media screen and (max-width: 880px) {
108+
.installationContainer {
109+
flex-direction: column;
110+
}
111+
.guide {
112+
width: 100%;
113+
}
114+
}

src/components/HomepageMembership/index.js

+45-32
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,57 @@ import membershipLogo1 from "../../../static/img/os-membership/membership-cncf.p
44
import membershipLogo2 from "../../../static/img/os-membership/membership-lf.png";
55
import membershipLogo3 from "../../../static/img/os-membership/membership-nephio.png";
66
import membershipLogo4 from "../../../static/img/os-membership/membership-openssf.png";
7+
import membershipLogo5 from "../../../static/img/os-membership/membership-nsf.png";
8+
import membershipLogo6 from "../../../static/img/os-membership/membership-se.png";
9+
import Link from "@docusaurus/Link";
710

811
export default function HomepageMembership() {
912
return (
1013
<section className={`membership ${styles.membership}`}>
1114
<h3 className={styles.membershipTitle}>Open Source Membership</h3>
1215
<div className={styles.members}>
13-
<img
14-
className={styles.member}
15-
onClick={(e) => {
16-
window.location.href = "https://www.cncf.io/";
17-
}}
18-
src={membershipLogo1}
19-
alt="member logo"
20-
/>
21-
<img
22-
className={styles.member}
23-
onClick={(e) => {
24-
window.location.href = "https://lfx.linuxfoundation.org/";
25-
}}
26-
src={membershipLogo2}
27-
alt="member logo"
28-
/>
29-
<img
30-
className={styles.member}
31-
onClick={(e) => {
32-
window.location.href = "https://nephio.org/";
33-
}}
34-
src={membershipLogo3}
35-
alt="member logo"
36-
/>
37-
<img
38-
className={styles.member}
39-
onClick={(e) => {
40-
window.location.href = "https://openssf.org/";
41-
}}
42-
src={membershipLogo4}
43-
alt="member logo"
44-
/>
16+
<Link to="https://www.cncf.io/">
17+
<img
18+
className={styles.member}
19+
src={membershipLogo1}
20+
alt="member logo"
21+
/>
22+
</Link>
23+
<Link to="https://lfx.linuxfoundation.org/">
24+
<img
25+
className={styles.member}
26+
src={membershipLogo2}
27+
alt="member logo"
28+
/>
29+
</Link>
30+
<Link to="https://nephio.org/">
31+
<img
32+
className={styles.member}
33+
src={membershipLogo3}
34+
alt="member logo"
35+
/>
36+
</Link>
37+
<Link to="https://openssf.org/">
38+
<img
39+
className={styles.member}
40+
src={membershipLogo4}
41+
alt="member logo"
42+
/>
43+
</Link>
44+
<Link to="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2226443&HistoricalAwards=false">
45+
<img
46+
className={styles.member}
47+
src={membershipLogo5}
48+
alt="member logo"
49+
/>
50+
</Link>
51+
<Link to="https://www.5gsec.com/">
52+
<img
53+
className={styles.member}
54+
src={membershipLogo6}
55+
alt="member logo"
56+
/>
57+
</Link>
4558
</div>
4659
</section>
4760
);
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,33 @@
11
.membership {
22
display: flex;
33
flex-direction: column;
4-
padding: 10rem 5.625rem 0;
4+
padding: 16rem 2rem 0;
55
}
66
.members {
7-
display: flex;
8-
flex-direction: row;
7+
display: grid;
8+
grid-template-columns: repeat(3, 1fr);
9+
grid-template-rows: repeat(2, 1fr);
10+
align-self: center;
911
align-items: center;
10-
justify-content: space-between;
11-
margin-top: 2rem;
12+
justify-self: center;
13+
gap: 5rem;
14+
margin-top: 1rem;
1215
}
1316
.membershipTitle {
1417
font-family: var(--font-main-medium);
1518
font-weight: 500;
16-
font-size: 1rem;
19+
font-size: 1.25rem;
1720
color: var(--color-font-header);
1821
align-self: center;
1922
}
2023
.member {
21-
width: auto;
22-
height: 4rem;
24+
width: 15rem;
25+
height: auto;
2326
cursor: pointer;
2427
}
25-
@media screen and (max-width: 1080px) {
26-
.membership {
27-
padding: 10rem 2rem 0;
28-
}
29-
.member {
30-
height: 3rem;
31-
}
32-
}
33-
@media screen and (max-width: 880px) {
34-
.member {
35-
height: 2rem;
36-
}
37-
}
3828
@media screen and (max-width: 550px) {
39-
.member {
40-
height: 3rem;
41-
}
4229
.members {
43-
flex-direction: column;
44-
gap: 2rem
30+
grid-template-columns: repeat(2, 1fr);
31+
grid-template-rows: repeat(3, 1fr);
4532
}
4633
}
+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
import styles from "./styles.module.css";
3+
import Link from "@docusaurus/Link";
4+
import sandboxImage from "../../../static/img/sandbox/membership-cncf.png";
5+
6+
export default function HomepageSandbox() {
7+
return (
8+
<section className={`sandbox ${styles.sandbox}`}>
9+
<h4 className={styles.sandboxText}>
10+
We are a&nbsp;
11+
<Link to="https://www.cncf.io/projects/kubearmor/">CNCF Sandbox</Link>
12+
&nbsp;project.
13+
</h4>
14+
<Link to="https://www.cncf.io/projects/kubearmor/">
15+
<img className={styles.logo} src={sandboxImage} alt="logo" />
16+
</Link>
17+
</section>
18+
);
19+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.sandbox {
2+
display: flex;
3+
flex-direction: column;
4+
padding: 16rem 2rem 0;
5+
align-items: center;
6+
justify-content: center;
7+
}
8+
.sandboxText {
9+
font-family: var(--font-main-medium);
10+
font-weight: 500;
11+
font-size: 1.25rem;
12+
}

0 commit comments

Comments
 (0)