Add image carousel

src/components/Carousel.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Carousel } from 'react-responsive-carousel';
+
+const ImageList = [
+	{
+		image: "https://pbs.twimg.com/media/E6HnwU1WYAQUATa.jpg:large",
+		alt: "A scene showing multiple widgets, including sliders like an equalizer and a virtual touchscreen.",
+		caption: "Multiple objects working independently all at once.",
+	},
+	{
+		image: "img/carousel/spatialcode.png",
+		alt: "To the left, a code editor showing Stardust Fusion creating several models and transforming them on the logicStep. To the right is the program running in Stardust.",
+		caption: "Code vs output of the Spatial Fusion demo.",
+	},
+]
+
+function CarouselImage({image, alt, caption}) {
+	return (
+		<div>
+			<img alt={alt} src={image} />
+			<p className="legend">{caption}</p>
+		</div>
+	);
+}
+
+export default () => (
+	<Carousel autoPlay className="gallery">
+		{ImageList.map((props, idx) => (
+			<CarouselImage key={idx} {...props} />
+		))}
+	</Carousel>
+);

src/css/custom.css

@@ -39,3 +39,8 @@ ul.contains-task-list {
 li.task-list-item > input[type="checkbox"] {
 	pointer-events: none;
 }
+
+.gallery {
+	margin: 0 auto;
+	max-width: 1250px;
+}

src/pages/index.js

@@ -5,6 +5,8 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
 import HomepageFeatures from '../components/HomepageFeatures';
+import Carousel from '../components/Carousel';
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
 
 function HomepageHeader() {
 	const {siteConfig} = useDocusaurusContext();
@@ -34,6 +36,7 @@ export default function Home() {
 			<HomepageHeader />
 			<main>
 				<HomepageFeatures />
+				<Carousel />
 			</main>
 		</Layout>
 	);