Skip to content

Commit 19778f9

Browse files
Aditya-150Aditya-150
authored
feat: added video section (#26)
Signed-off-by: Aditya Prasad Mohanty <[email protected]>
1 parent bd07ed1 commit 19778f9

File tree

10 files changed

+271
-14
lines changed

10 files changed

+271
-14
lines changed

‎src/components/HomepageTestimonials/content.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
[
2+
{
3+
"id": 1,
4+
"header": "Kubesploit",
5+
"description": "KubeArmor is a cloud-native runtime security enforcement system that restricts the behaviour (such as process execution, file access, and networking operations) of pods, containers, and nodes (VMs) at the system level",
6+
"image": "tweet1",
7+
"url": "https://twitter.com/kubesploit/status/1711081978424906018"
8+
},
9+
{
10+
"id": 2,
11+
"header": "Oracle Developers",
12+
"description": "We're excited to announce that #developers can now use @KubeArmor, a runtime security engine that can enhance security of containerized applications on Oracle Container Engine for #Kubernetes. https://social.ora.cl/60153sOwv",
13+
"image": "tweet2",
14+
"url": "https://twitter.com/OracleDevs/status/1630711955211051009"
15+
},
16+
{
17+
"id": 3,
18+
"header": "Whitney Lee",
19+
"description": "♫~ On tomorrow's Enlightning, @daemon1024 will teach @KubeArmor, a @CloudNativeFdn project that protects your modern, cloud native workloads at runtime!",
20+
"image": "tweet3",
21+
"url": "https://twitter.com/wiggitywhitney/status/1666870707375206401"
22+
},
23+
{
24+
"id": 4,
25+
"header": "Sachin Maurya",
26+
"description": "Finally, I Graduated from the @linuxfoundation Mentorship Program. It was fun and lots of learning working on the @KubeArmor Project. I learned a lot about Container Security and #eBPF. Now I'm looking to continue working on this awesome technology.",
27+
"image": "tweet4",
28+
"url": "https://twitter.com/0x_Mantis/status/1532611960302206977"
29+
},
30+
{
31+
"id": 5,
32+
"header": "ITNEXT DevOps",
33+
"description": "Protecting Your Kubernetes Environment With KubeArmor by Patrick Kalkman at #ITNEXT. #containers #cybersecurity #kubernetes #cyberattack #hacker https://itnext.io/protecting-your-kubernetes-environment-with-kubearmor-76b02fc2209b?source=rss----5b301f10ddcd---4… (s)",
34+
"image": "tweet5",
35+
"url": "https://twitter.com/ITNEXT_DevOps/status/1644203403835330562"
36+
},
37+
{
38+
"id": 6,
39+
"header": "Manish Kapur",
40+
"description": "Happy to share that @KubeArmor Zero trust #Security solution for #Kubernetes has added support for Oracle Kubernetes Engine and @OracleLinux. Thank you to our friends at @AccuKnox https://github.com/kubearmor/KubeArmor/wiki/KubeArmor-support-for-Oracle-Container-Engine-for-Kubernetes-(OKE)… #k8s #cncf",
41+
"image": "tweet6",
42+
"url": "https://twitter.com/kapmani/status/1624061284214878210"
43+
}
44+
]

‎src/components/HomepageTestimonials/images.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Tweet1 from "../../../static/img/tweets/tw1.png";
2+
import Tweet2 from "../../../static/img/tweets/tw2.png";
3+
import Tweet3 from "../../../static/img/tweets/tw3.png";
4+
import Tweet4 from "../../../static/img/tweets/tw4.png";
5+
import Tweet5 from "../../../static/img/tweets/tw5.png";
6+
import Tweet6 from "../../../static/img/tweets/tw6.png";
7+
8+
export const images = {
9+
tweet1: Tweet1,
10+
tweet2: Tweet2,
11+
tweet3: Tweet3,
12+
tweet4: Tweet4,
13+
tweet5: Tweet5,
14+
tweet6: Tweet6,
15+
};

‎src/components/HomepageTestimonials/index.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from "react";
2+
import styles from "./styles.module.css";
3+
import Link from "@docusaurus/Link";
4+
import { FaXTwitter } from "react-icons/fa6";
5+
import { images } from "./images";
6+
import tweetContent from "./content.json";
7+
8+
function Item(props) {
9+
const Image = props.image;
10+
return (
11+
<Link className={styles.container} to={props.url}>
12+
<div className={styles.containerHeader}>
13+
<div className={styles.containerImage}>
14+
{Image && <img src={Image} alt="tweet" className={styles.image} />}
15+
</div>
16+
<h4 className={styles.containerTitle}>{props.header}</h4>
17+
<FaXTwitter size={20} color="var(--color-black)" />
18+
</div>
19+
<p className={styles.containerDescription}>{props.description}</p>
20+
</Link>
21+
);
22+
}
23+
24+
export default function HomepageTestimonials() {
25+
return (
26+
<section className={`testimonials ${styles.testimonials}`}>
27+
<h2 className={styles.testimonialsTitle}>TESTIMONIALS</h2>
28+
<h1 className={styles.testimonialsHeader}>
29+
Developers Love Using KubeArmor
30+
</h1>
31+
<div className={styles.tweets}>
32+
{tweetContent.map((item) => (
33+
<Item
34+
key={item.id}
35+
header={item.header}
36+
description={item.description}
37+
url={item.url}
38+
image={images[item.image]}
39+
/>
40+
))}
41+
</div>
42+
</section>
43+
);
44+
}

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.testimonials {
2+
display: flex;
3+
flex-direction: column;
4+
padding: 16rem 5.625rem 0;
5+
background: var(--color-bg);
6+
}
7+
.testimonialsTitle {
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+
.testimonialsHeader {
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+
}

‎src/components/HomepageVideos/content.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -4,69 +4,69 @@
44
"title": "How to Install KubeArmor? | Oct 2021",
55
"video": "https://www.youtube.com/watch?v=2OK3e87b5jA",
66
"alt": "video 1",
7-
"image": "../../../static/img/videos/video1"
7+
"image": "video1"
88
},
99
{
1010
"id": 2,
1111
"title": "KubeArmor Working Demo",
1212
"video": "https://www.youtube.com/watch?v=u1PpRsk03Ao",
1313
"alt": "video 2",
14-
"image": "../../../static/img/videos/video2"
14+
"image": "video2"
1515
},
1616
{
1717
"id": 3,
1818
"title": "KubeArmor Explanation",
1919
"video": "https://www.youtube.com/watch?v=NS8XC78wSME",
2020
"alt": "video 3",
21-
"image": "../../../static/img/videos/video3"
21+
"image": "video3"
2222
},
2323
{
2424
"id": 4,
2525
"title": "Kubernetes Clusters Defense with KubeArmor | Demo & QnA",
2626
"video": "https://www.youtube.com/watch?v=7fx4U0PLL6w",
2727
"alt": "video 4",
28-
"image": "../../../static/img/videos/video4"
28+
"image": "video4"
2929
},
3030
{
3131
"id": 5,
3232
"title": "Secure Workloads on GCOOS: KubeArmor's Shielding Strategies",
3333
"video": "https://www.youtube.com/watch?v=9L28xhRl5u4",
3434
"alt": "video 5",
35-
"image": "../../../static/img/videos/video5"
35+
"image": "video5"
3636
},
3737
{
3838
"id": 6,
3939
"title": "How to Install KubeArmor - Complete Guide",
4040
"video": "https://www.youtube.com/watch?v=CH0qtp5DAhs",
4141
"alt": "video 6",
42-
"image": "../../../static/img/videos/video6"
42+
"image": "video6"
4343
},
4444
{
4545
"id": 7,
4646
"title": "Inside KubeArmor: Hands-On Fireside Chat with Kurtis Velarde",
4747
"video": "https://www.youtube.com/watch?v=-LxQTYGcciA",
4848
"alt": "video 7",
49-
"image": "../../../static/img/videos/video7"
49+
"image": "video7"
5050
},
5151
{
5252
"id": 8,
5353
"title": "Kyverno Admission Controller Policies Made Easy with KubeArmor",
5454
"video": "https://www.youtube.com/watch?v=IJFwDIMRnQM",
5555
"alt": "video 8",
56-
"image": "../../../static/img/videos/video8"
56+
"image": "video8"
5757
},
5858
{
5959
"id": 9,
6060
"title": "Securing Nephio 5G control plane using KubeArmor",
6161
"video": "https://www.youtube.com/watch?v=hE9kMlLNl_s",
6262
"alt": "video 9",
63-
"image": "../../../static/img/videos/video9"
63+
"image": "video9"
6464
},
6565
{
6666
"id": 10,
6767
"title": "Power of Zero Trust in DevSecOps | Must-Watch Webinar",
6868
"video": "https://www.youtube.com/watch?v=d16OvW17ehs",
6969
"alt": "video 10",
70-
"image": "../../../static/img/videos/video10"
70+
"image": "video10"
7171
}
7272
]

‎src/components/HomepageVideos/index.js

+33-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,30 @@ import "slick-carousel/slick/slick-theme.css";
55
import styles from "./styles.module.css";
66
import { CustomPrevArrow, CustomNextArrow } from "../CustomArrows";
77
import { FaPlay } from "react-icons/fa6";
8+
import { videos } from "./videos";
9+
import videoContent from "./content.json";
10+
import Link from "@docusaurus/Link";
11+
12+
function Item(props) {
13+
const Image = props.image;
14+
15+
const truncatedTitle =
16+
props.title.length > 36
17+
? props.title.substring(0, 36) + "..." // Truncate the title
18+
: props.title;
19+
20+
return (
21+
<Link className={styles.container} to={props.video}>
22+
<div className={styles.containerContent}>
23+
<FaPlay color="var(--color-white)" size={20} className={styles.containerIcon} />
24+
<p className={styles.containerTitle}>{truncatedTitle}</p>
25+
</div>
26+
{Image && (
27+
<img src={Image} alt={props.alt} className={styles.containerImage} />
28+
)}
29+
</Link>
30+
);
31+
}
832

933
export default function HomepageVideos() {
1034
const settings = {
@@ -42,9 +66,15 @@ export default function HomepageVideos() {
4266
</h1>
4367
<div className={styles.videosSlider}>
4468
<Slider {...settings}>
45-
<Link className={styles.container}>
46-
<div className={styles.containerContent}></div>
47-
</Link>
69+
{videoContent.map((item) => (
70+
<Item
71+
key={item.id}
72+
title={item.title}
73+
alt={item.alt}
74+
video={item.video}
75+
image={videos[item.image]}
76+
/>
77+
))}
4878
</Slider>
4979
</div>
5080
</section>

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

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.videos {
2+
display: flex;
3+
flex-direction: column;
4+
padding: 16rem 5.625rem 0;
5+
background: var(--color-bg);
6+
}
7+
.videosTitle {
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+
.videosHeader {
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+
.container {
24+
height: 16rem;
25+
color: var(--color-white);
26+
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1),
27+
-1px 0px 4px 0px rgba(0, 0, 0, 0.1);
28+
border: none;
29+
border-radius: 0.75rem;
30+
overflow: hidden;
31+
padding: 0;
32+
cursor: pointer;
33+
position: relative;
34+
}
35+
.containerImage {
36+
max-width: 100%;
37+
max-height: 100%;
38+
object-fit: cover;
39+
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1),
40+
-1px 0px 4px 0px rgba(0, 0, 0, 0.1);
41+
border: none;
42+
border-radius: 0.75rem;
43+
}
44+
.container:hover .containerImage {
45+
filter: blur(3px) grayscale(30%);
46+
}
47+
.containerContent {
48+
display: none;
49+
}
50+
.container:hover {
51+
color: var(--color-white);
52+
text-decoration: none !important;
53+
}
54+
.containerTitle {
55+
font-family: var(--font-main-medium);
56+
font-weight: 500;
57+
color: var(--color-white);
58+
margin: 0;
59+
}
60+
.container:hover .containerContent {
61+
display: flex;
62+
position: absolute;
63+
bottom: 5%;
64+
left: 5%;
65+
display: flex;
66+
flex-direction: row;
67+
justify-content: center;
68+
align-items: center;
69+
gap: 0.5rem;
70+
z-index: 1;
71+
}
72+
73+
@media screen and (max-width: 1080px) {
74+
.videos {
75+
padding: 10rem 2rem 0;
76+
}
77+
}

‎src/components/HomepageVideos/videos.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Video1 from "../../../static/img/videos/video1.jpg";
2+
import Video2 from "../../../static/img/videos/video2.jpg";
3+
import Video3 from "../../../static/img/videos/video3.jpg";
4+
import Video4 from "../../../static/img/videos/video4.jpg";
5+
import Video5 from "../../../static/img/videos/video5.jpg";
6+
import Video6 from "../../../static/img/videos/video6.jpg";
7+
import Video7 from "../../../static/img/videos/video7.jpg";
8+
import Video8 from "../../../static/img/videos/video8.jpg";
9+
import Video9 from "../../../static/img/videos/video9.jpg";
10+
import Video10 from "../../../static/img/videos/video10.jpg";
11+
12+
export const videos = {
13+
video1: Video1,
14+
video2: Video2,
15+
video3: Video3,
16+
video4: Video4,
17+
video5: Video5,
18+
video6: Video6,
19+
video7: Video7,
20+
video8: Video8,
21+
video9: Video9,
22+
video10: Video10
23+
}

‎src/pages/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import HomepageMarketplaces from "../components/HomepageMarketplaces";
1414
import HomepageExpansions from "../components/HomepageExpansions";
1515
import HomepageVersionChangelog from "../components/HomepageVersionChangelog";
1616
import HomepageBlogs from "../components/HomepageBlogs";
17+
import HomepageVideos from "../components/HomepageVideos";
1718

1819
// function HomepageHeader() {
1920
// const {siteConfig} = useDocusaurusContext();
@@ -51,6 +52,7 @@ export default function Home() {
5152
<HomepageVersionChangelog />
5253
<HomepageExpansions />
5354
<HomepageBlogs />
55+
<HomepageVideos />
5456
</main>
5557
</Layout>
5658
);

‎static/CNAME

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
https://kubearmor.io/
1+
kubearmor.io

0 commit comments

Comments
 (0)