Skip to content

Commit 9bc6459

Browse files
Aditya-150Aditya-150
authored
feat: sections added (#27)
Signed-off-by: Aditya Prasad Mohanty <[email protected]>
1 parent 19778f9 commit 9bc6459

28 files changed

+721
-19
lines changed

‎src/components/HomepageAdopters/index.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from "react";
2+
import styles from "./styles.module.css";
3+
import AdoptersLogo1 from "../../../static/img/adopters/adopter-accuknox.svg";
4+
import adoptersLogo2 from "../../../static/img/adopters/adopter-openhorizon.webp";
5+
import adoptersLogo3 from "../../../static/img/adopters/adopter-intel-smart-edge.webp";
6+
import Link from "@docusaurus/Link";
7+
import { FaAngleRight } from "react-icons/fa6";
8+
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+
/>
22+
<img
23+
className={styles.logo}
24+
onClick={(e) => {
25+
window.location.href = "https://open-horizon.github.io/";
26+
}}
27+
src={adoptersLogo2}
28+
alt="adopter logo"
29+
/>
30+
<img
31+
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+
}}
36+
src={adoptersLogo3}
37+
alt="adopter logo"
38+
/>
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)" />
54+
</Link>
55+
</div>
56+
</section>
57+
);
58+
}

‎src/components/HomepageAdopters/styles.module.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
.adopters {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
.adoptersLogos {
6+
display: flex;
7+
flex-direction: column;
8+
padding: 10rem 5.625rem 0;
9+
align-items: center;
10+
justify-content: space-between;
11+
}
12+
.adoptersTitle {
13+
font-family: var(--font-main-medium);
14+
font-weight: 500;
15+
font-size: 1rem;
16+
color: var(--color-font-header);
17+
}
18+
.logos {
19+
display: flex;
20+
flex-direction: row;
21+
justify-content: space-between;
22+
align-items: center;
23+
width: 100%;
24+
}
25+
.logo {
26+
cursor: pointer;
27+
width: 12rem;
28+
}
29+
30+
.container {
31+
width: 80%;
32+
background: var(--color-primary);
33+
align-self: center;
34+
margin-top: 8rem;
35+
border-radius: 0.875rem;
36+
padding: 2.25rem;
37+
display: flex;
38+
flex-direction: row;
39+
justify-content: space-between;
40+
align-items: center;
41+
}
42+
.containerContent {
43+
display: flex;
44+
flex-direction: column;
45+
}
46+
.containerTitle {
47+
font-family: var(--font-main-semibold);
48+
font-size: 1.5rem;
49+
font-weight: 600;
50+
color: var(--color-white);
51+
margin: 0 0 1rem;
52+
}
53+
.containerDescription {
54+
color: var(--color-footer-field);
55+
font-family: var(--font-main-regular);
56+
font-size: 1rem;
57+
font-weight: 400;
58+
margin: 0;
59+
}
60+
.containerButton {
61+
background: var(--color-white);
62+
color: var(--color-primary);
63+
font-family: var(--font-main-medium);
64+
display: flex;
65+
flex-direction: row;
66+
justify-content: center;
67+
align-items: center;
68+
border: none;
69+
padding: 0.75rem 1.5rem;
70+
gap: 0.5rem;
71+
border-radius: 0.5rem;
72+
cursor: pointer;
73+
}
74+
.containerButton:hover {
75+
text-decoration: none;
76+
opacity: 0.8;
77+
color: var(--color-primary);
78+
}
79+
80+
@media screen and (max-width: 1080px) {
81+
.adoptersLogos {
82+
padding: 10rem 2rem 0;
83+
}
84+
}
85+
@media screen and (max-width: 550px) {
86+
.logos {
87+
flex-direction: column;
88+
height: 60vh;
89+
}
90+
.logo {
91+
cursor: pointer;
92+
width: 12rem;
93+
max-height: 10rem;
94+
}
95+
.container {
96+
flex-direction: column;
97+
align-items: flex-start;
98+
}
99+
.containerButton {
100+
margin-top: 1.5rem;
101+
}
102+
}

‎src/components/HomepageCommunity/Card.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
import styles from "./styles.module.css";
3+
import Link from "@docusaurus/Link";
4+
5+
export default function Card ({
6+
cardTitle,
7+
cardIcon,
8+
cardData,
9+
cardLink
10+
}) {
11+
return (
12+
<Link to={cardLink} className={styles.card}>
13+
<div className={styles.cardHeader}>
14+
<img
15+
className={styles.cardIcon}
16+
src={cardIcon}
17+
alt="Community Card"
18+
/>
19+
<div className={styles.cardData}>{cardData}</div>
20+
</div>
21+
{cardTitle}
22+
</Link>
23+
);
24+
}

‎src/components/HomepageCommunity/index.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useState, useEffect } from "react";
2+
import styles from "./styles.module.css";
3+
import Card from "./Card";
4+
import { FaStar } from "react-icons/fa6";
5+
import communityLogo1 from "../../../static/img/community/community-github.webp";
6+
import communityLogo2 from "../../../static/img/community/community-slack.webp";
7+
import communityLogo3 from "../../../static/img/community/community-youtube.webp";
8+
9+
10+
export default function HomepageCommunity() {
11+
const [stars, setStars] = useState(880);
12+
useEffect(() => {
13+
const fetchStars = async () => {
14+
try {
15+
const response = await fetch(
16+
`https://api.github.com/repos/kubearmor/KubeArmor`
17+
);
18+
const data = await response.json();
19+
setStars(data.stargazers_count);
20+
} catch (error) {
21+
console.error("Error fetching GitHub stars:", error);
22+
}
23+
};
24+
25+
fetchStars();
26+
}, []);
27+
return (
28+
<section className={`community ${styles.community}`}>
29+
<h2 className={styles.communityTitle}>COMMUNITY</h2>
30+
<h1 className={styles.communityHeader}>Join Our Awesome Community</h1>
31+
<div className={styles.communityCards}>
32+
<Card
33+
cardLink="https://github.com/kubearmor/KubeArmor"
34+
cardData={
35+
<>
36+
<FaStar color="var(--color-font-sub)" size={20} /> {stars}
37+
</>
38+
}
39+
cardTitle="GitHub"
40+
cardIcon={communityLogo1}
41+
/>
42+
<Card
43+
cardLink="https://join.slack.com/t/kubearmor/shared_invite/zt-1ltmqdbc6-rSHw~LM6MesZZasmP2hAcA/"
44+
cardData="600+ Members"
45+
cardTitle="Slack Channel"
46+
cardIcon={communityLogo2}
47+
/>
48+
<Card
49+
cardLink="https://www.youtube.com/watch?v=2OK3e87b5jA&list=PLQjomRVn7MXC4obhiz1wuKLrGGip07HiM"
50+
cardData="250+ Subscribers"
51+
cardTitle="YouTube Channel"
52+
cardIcon={communityLogo3}
53+
/>
54+
</div>
55+
</section>
56+
);
57+
}

‎src/components/HomepageCommunity/styles.module.css

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
.community {
2+
display: flex;
3+
flex-direction: column;
4+
padding: 16rem 5.625rem 0;
5+
background: var(--color-bg);
6+
}
7+
.communityTitle {
8+
font-family: var(--font-main-medium);
9+
font-size: 1rem;
10+
font-weight: 500;
11+
color: var(--color-primary);
12+
letter-spacing: 0.18rem;
13+
align-self: center;
14+
}
15+
.communityHeader {
16+
font-family: var(--font-main-semibold);
17+
font-size: 2rem;
18+
font-weight: 600;
19+
color: var(--color-font-header);
20+
align-self: center;
21+
text-align: center;
22+
}
23+
.card {
24+
height: 20rem;
25+
padding: 1.5rem;
26+
background: var(--color-white);
27+
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1),
28+
-1px 0px 4px 0px rgba(0, 0, 0, 0.1);
29+
border: none;
30+
border-radius: 0.75rem;
31+
display: flex;
32+
flex-direction: column;
33+
align-items: flex-start;
34+
justify-content: space-between;
35+
font-family: var(--font-main-medium);
36+
font-weight: 500;
37+
font-size: 1.5rem;
38+
color: var(--color-font-sub);
39+
}
40+
.cardHeader {
41+
display: flex;
42+
flex-direction: row;
43+
justify-content: space-between;
44+
width: 100%;
45+
}
46+
.cardIcon {
47+
height: 3rem;
48+
width: auto;
49+
filter: grayscale(1);
50+
}
51+
.card:hover {
52+
text-decoration: none;
53+
}
54+
.card:hover .cardIcon {
55+
filter: grayscale(0);
56+
transition: filter 0.3s ease;
57+
}
58+
.cardData {
59+
display: flex;
60+
flex-direction: row;
61+
gap: 0.5rem;
62+
align-items: center;
63+
font-family: var(--font-main-medium);
64+
font-weight: 500;
65+
color: var(--color-font-sub);
66+
font-size: 1.25rem;
67+
text-align: right;
68+
}
69+
.communityCards {
70+
display: grid;
71+
grid-template-columns: repeat(3, 1fr);
72+
grid-template-rows: repeat(1, 1fr);
73+
gap: 5rem;
74+
margin-top: 3rem;
75+
}
76+
@media screen and (max-width: 1080px) {
77+
.community {
78+
padding: 10rem 2rem 0;
79+
}
80+
.communityCards {
81+
gap: 1rem;
82+
}
83+
.card {
84+
height: 16rem;
85+
}
86+
.cardIcon {
87+
height: 2rem;
88+
}
89+
}
90+
@media screen and (max-width: 550px) {
91+
.communityCards {
92+
gap: 1.5rem;
93+
}
94+
.card {
95+
height: 16rem;
96+
}
97+
.cardIcon {
98+
height: 3rem;
99+
}
100+
.communityCards {
101+
grid-template-columns: repeat(1, 1fr);
102+
grid-template-rows: repeat(3, 1fr);
103+
}
104+
}

‎src/components/HomepageFeatures/index.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@ function Item(props) {
1111
const Icon = props.icon;
1212

1313
return (
14-
<>
14+
<div className={styles.content}>
1515
<div className={styles.iconContainer}>
1616
{Icon && <Icon className={styles.icon} />}
1717
</div>
18-
<h3 className={styles.contentHeader}>{props.feature}</h3>
19-
<p className={styles.contentDescription}>{props.description}</p>
20-
</>
18+
<div className={styles.contentWrapper}>
19+
<h3 className={styles.contentHeader}>{props.feature}</h3>
20+
<p className={styles.contentDescription}>{props.description}</p>
21+
</div>
22+
</div>
2123
);
2224
}
2325

@@ -26,8 +28,8 @@ export default function HomepageFeatures() {
2628
<section className={`features ${styles.features}`}>
2729
<h2 className={styles.featuresTitle}>FEATURES</h2>
2830
<h1 className={styles.featuresHeader}>What Makes KubeArmor Unique?</h1>
29-
<div className={`features-container ${styles.container}`}>
30-
<div className={`features-progress-bar ${styles.progressBar}`}>0%</div>
31+
<div className={`features-container ${styles.container} `}>
32+
{/* <div className={`features-progress-bar ${styles.progressBar}`}>0%</div> */}
3133
<div className={`features-content ${styles.containerContent}`}>
3234
{featuresContent.map((item) => (
3335
<Item
@@ -38,11 +40,11 @@ export default function HomepageFeatures() {
3840
/>
3941
))}
4042
</div>
41-
<img
43+
{/* <img
4244
src={featuresImage}
4345
className={styles.featuresImage}
4446
alt="feature image"
45-
/>
47+
/> */}
4648
</div>
4749
<div className={styles.creator}>
4850
Created By

0 commit comments

Comments
 (0)