Add carousel in index page

Author: tishion

src/components/CarouselBox.js

@@ -0,0 +1,35 @@
+import React from "react";
+import styles from "./CarouselBox.module.css";
+import ReactCardCarousel from "react-card-carousel";
+
+const CardList = [
+  {
+    img: "img/windows-demo.png",
+  },
+  {
+    img: "img/macOS-demo.png",
+  },
+  {
+    img: "img/linux-demo.png",
+  },
+];
+
+function Card({ img }) {
+  return (
+    <div className={styles.cardItem}>
+      <img src={img} className={styles.cardImage} />
+    </div>
+  );
+}
+
+export default function HomepageCarousel() {
+  return (
+    <div className={styles.carouselBox}>
+      <ReactCardCarousel autoplay={true} spread={"wide"} autoplay_speed={5000}>
+        {CardList.map((props, idx) => (
+          <Card key={idx} {...props} />
+        ))}
+      </ReactCardCarousel>
+    </div>
+  );
+}

src/components/CarouselBox.module.css

@@ -0,0 +1,20 @@
+.carouselBox {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: middle;
+}
+
+.cardItem {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
+}
+
+.cardImage {
+  display: block;
+}

src/components/HomepageCarousel.js

@@ -62,14 +62,14 @@ function Feature({ Svg, title, description }) {
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
+    <div className={styles.featuresSec}>
       <div className="container">
         <div className="row">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
         </div>
       </div>
-    </section>
+    </div>
   );
 }

src/components/HomepageCarousel.module.css

@@ -1,4 +1,4 @@
-.features {
+.featuresSec {
   display: flex;
   align-items: center;
   padding: 2rem 0;

src/components/HomepageFeatures.js

@@ -7,7 +7,7 @@ import Translate from "@docusaurus/Translate";
 
 import styles from "./index.module.css";
 import HomepageFeatures from "../components/HomepageFeatures";
-import HomepageCarousel from "../components/HomepageCarousel";
+import CarouselBox from "../components/CarouselBox";
 
 import CefViewBridge from "../components/CefViewBridge";
 
@@ -17,20 +17,32 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intros"
-          >
-            <Translate
-              id="index.ButtonText.getStated"
-              description="The text for button on index center"
-            >
-              Get Started
-            </Translate>
-          </Link>
+        <div className={clsx("row", styles.indexRow)}>
+          <div className="col">
+            <h1 className="hero__title">{siteConfig.title}</h1>
+            <p className="hero__subtitle">{siteConfig.tagline}</p>
+            <div className={styles.buttons}>
+              <Link
+                className="button button--secondary button--lg"
+                to="/docs/intros"
+              >
+                <Translate
+                  id="index.ButtonText.getStated"
+                  description="The text for button on index center"
+                >
+                  Get Started
+                </Translate>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className={clsx("row", styles.indexRow)}>
+          <div className="col">
+            <div className={styles.carousel}>
+              <CarouselBox />
+            </div>
+          </div>
         </div>
       </div>
     </header>
@@ -43,7 +55,6 @@ export default function Home() {
     <Layout title={`${siteConfig.title}`} description="">
       <HomepageHeader />
       <main>
-        <HomepageCarousel />
         <HomepageFeatures />
       </main>
     </Layout>

src/components/HomepageFeatures.module.css

@@ -4,16 +4,20 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 0 0;
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 
-@media screen and (max-width: 966px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.indexRow {
+  padding: 1rem 0;
+}
+
+.carousel {
+  width: 100%;
+  padding-top: 15%;
+  padding-bottom: 15%;
 }
 
 .buttons {