chore: css style and content fixes (#31)

Signed-off-by: Aditya Prasad Mohanty <[email protected]>

Author: Aditya-150

src/components/HomepageBlogs/index.js

@@ -66,7 +66,7 @@ export default function HomepageBlogs() {
               </div>
               <div className={styles.containerData}>
                 <p className={styles.containerAuthor}>
-                  by <span className={styles.author}>Shubham Tatvamasi</span>
+                  by <span className={styles.author}>Prashant Mishra</span>
                 </p>
                 <p className={styles.containerDate}>Aug 17, 2023</p>
               </div>

src/components/HomepageFeatures/index.js

@@ -1,54 +1,111 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useLayoutEffect, useRef, useMemo } from "react";
 import styles from "./styles.module.css";
 import featuresImage from "../../../static/img/features/features-illustration.webp";
 import CreatorLogo from "../../../static/img/accuknox/accuknox-light-bg.svg";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import featuresContent from "./content.json";
 import { icons } from "./icons";
+import Link from "@docusaurus/Link";
+
+gsap.registerPlugin(ScrollTrigger);
 
 function Item(props) {
   const Icon = props.icon;
 
   return (
     <div className={styles.content}>
-      <div className={styles.iconContainer}>
-        {Icon && <Icon className={styles.icon} />}
+      <div className={styles.contentTop}>
+        <div className={styles.iconContainer}>
+          {Icon && <Icon className={styles.icon} />}
+        </div>
+        <h3 className={styles.contentHeader}>{props.feature}</h3>
       </div>
       <div className={styles.contentWrapper}>
-        <h3 className={styles.contentHeader}>{props.feature}</h3>
+        {/* <h3 className={styles.contentHeader}>{props.feature}</h3> */}
         <p className={styles.contentDescription}>{props.description}</p>
       </div>
     </div>
   );
 }
 
 export default function HomepageFeatures() {
+  const featuresRef = useRef(null);
+
+  useLayoutEffect(() => {
+    const featuresEl = featuresRef.current;
+    const featuresImage = featuresEl.querySelector("features-image");
+    const featuresContentEl = featuresEl.querySelector("features-content");
+    // Pin the featuresImage element
+    gsap.to(featuresImage, {
+      position: "fixed",
+      top: "50%",
+      right: 0,
+    });
+
+     gsap.to(featuresContentEl, {
+       position: "absolute",
+       top: 0,
+       left: 0,
+       opacity: 1,
+       scrollTrigger: {
+         trigger: featuresEl,
+         start: "top",
+         end: "+100vh",
+       },
+     });
+
+    // Animate the opacity of content elements on scroll
+    featuresContent.forEach((item, index) => {
+      const contentEl = featuresEl.querySelector(`#content-${item.id}`);
+      gsap.to(contentEl, {
+        opacity: 0,
+        transform: "translate3d(100%, 0, 0)",
+        scrollTrigger: {
+          trigger: featuresEl,
+          start: `top ${index * window.innerHeight}px`,
+          end: `top ${(index + 1) * window.innerHeight}px`,
+          // opacity: 1,
+          transform: "translate3d(0, 0, 0)",
+          ease: "power1inOut",
+        },
+      });
+    });
+  }, []);
+
   return (
     <section className={`features ${styles.features}`}>
       <h2 className={styles.featuresTitle}>FEATURES</h2>
       <h1 className={styles.featuresHeader}>What Makes KubeArmor Unique?</h1>
       <div className={`features-container ${styles.container} `}>
         {/* <div className={`features-progress-bar ${styles.progressBar}`}>0%</div> */}
-        <div className={`features-content ${styles.containerContent}`}>
+        <div
+          className={`features-content ${styles.containerContent}`}
+          ref={featuresRef}
+          id="features-content"
+        >
           {featuresContent.map((item) => (
             <Item
               key={item.id}
+              id={`content-${item.id}`}
               feature={item.feature}
               description={item.description}
               icon={icons[item.icon]}
             />
           ))}
         </div>
-        {/* <img
+        <img
           src={featuresImage}
           className={styles.featuresImage}
           alt="feature image"
-        /> */}
+          id="features-image"
+        />
       </div>
       <div className={styles.creator}>
         Created By
-        <CreatorLogo className={styles.creatorLogo} />
+        <Link to="https://www.accuknox.com/" className={styles.creatorContainer}>
+          <CreatorLogo className={styles.creatorLogo} />
+        </Link>
       </div>
     </section>
   );

src/components/HomepageFeatures/styles.module.css

@@ -19,20 +19,29 @@
 }
 
 .featuresImage {
-  width: 100%;
+  display: none;
+  width: 50%;
   overflow: visible;
 }
 
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .containerContent {
   /* width: 40%; */
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 1.5rem;
+  /* display: flex;
+  flex-direction: column; */
   margin-top: 3rem;
 }
 .content {
-  height: 18rem;
+  /* height: 18rem; */
+  height: 15rem;
   padding: 1.5rem;
   color: var(--color-white);
   box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1),
@@ -62,12 +71,19 @@
   display: inline-block;
   align-items: center;
 }
+.contentTop {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}
 .contentHeader {
   font-family: var(--font-main-semibold);
   font-weight: 600;
   color: var(--color-font-header);
   font-size: 1.5rem;
-  margin-top: 1rem;
+  /* margin-top: 1rem; */
+  margin: 0;
 }
 .contentDescription {
   font-family: var(--font-main-regular);
@@ -86,7 +102,7 @@
   margin-top: 2rem;
 }
 .creatorLogo {
-  width: 20%;
+  width: 16rem;
   height: auto;
 }
 .containerDesktop {
@@ -103,3 +119,19 @@
     padding: 16rem 2rem 0;
   }
 }
+@media screen and (max-width: 550px) {
+  .icon {
+    height: 1rem;
+    width: 1rem;
+  }
+  .iconContainer {
+    padding: 0.25rem 0.5rem;
+  }
+  .contentHeader {
+    font-size: 1rem;
+  }
+  .contentTop {
+    margin-bottom: 0.5rem;
+  }
+
+}

src/components/HomepageHeader/styles.module.css

@@ -27,9 +27,6 @@
   justify-content: space-between;
   margin-bottom: 0.5rem;
 }
-.heroAnnouncement:hover {
-  text-decoration: none;
-}
 .heroTitle {
   font-family: var(--font-main-bold);
   font-size: 4rem;
@@ -72,10 +69,13 @@
     width: 24%;
   }
 }
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 880px) {
   .heroAnnouncement {
     width: 36%;
   }
+  .heroImage {
+    width: 80vw;
+  }
 }
 @media screen and (max-width: 550px) {
   .heroTitle {

src/components/HomepageInstallation/index.js

@@ -8,21 +8,13 @@ import Link from "@docusaurus/Link";
 export default function HomepageInstallation() {
   const videoId = "CH0qtp5DAhs";
   const code = `
-export HELM_EXPERIMENTAL_OCI=1
+helm repo add kubearmor https://kubearmor.github.io/charts
 
-aws ecr get-login-password \\
-    --region us-east-1 | helm registry login \\
-    --username AWS \\
-    --password-stdin 709825985650.dkr.ecr.us-east-1.amazonaws.com
+helm repo update kubearmor
 
-mkdir awsmp-chart && cd awsmp-chart
+helm upgrade --install kubearmor-operator kubearmor/kubearmor-operator -n kubearmor --create-namespace
 
-helm pull oci://709825985650.dkr.ecr.us-east-1.amazonaws.com/accuknox/kubearmor --version 0.10.3
-
-tar xf $(pwd)/* && find $(pwd) -maxdepth 1 -type f -delete
-
-helm install kubearmor \\
-    --namespace <ENTER_NAMESPACE_HERE> ./* 
+kubectl apply -f https://raw.githubusercontent.com/kubearmor/KubeArmor/main/pkg/KubeArmorOperator/config/samples/sample-config.yml 
     `;
 
   function copyToClipboard() {

src/components/HomepageMarketplaces/index.js

@@ -7,11 +7,11 @@ export default function HomepageMarketplaceImages() {
   return (
     <section className={`marketplaceImages ${styles.market}`}>
       <p className={styles.marketText}>KubeArmor is Now Available on</p>
-      <MarketplaceImage className={styles.marketImage}/>
+      <MarketplaceImage className={styles.marketImage} />
       <RedirectButton
         redirectColor="var(--color-primary)"
         redirectText="Install Now"
-        redirectLink="https://aws.amazon.com/marketplaceImage/pp/prodview-5npox4ixz64qk"
+        redirectLink="https://aws.amazon.com/marketplace/pp/prodview-5npox4ixz64qk"
       />
     </section>
   );