Image carrousel, featured content and downloads and some extras

docusaurus.config.ts

@@ -24,21 +24,28 @@ const config: Config = {
 
   customFields: {
     educatesProject: {
-      projectGitHubUrl: "https://github.com/educates/educates-training-platform",
-      contributingUrl: "https://github.com/educates/educates-training-platform/blob/develop/CONTRIBUTING.md",
+      projectGitHubUrl:
+        "https://github.com/educates/educates-training-platform",
+      projectSlackUrl: "https://kubernetes.slack.com/archives/C05UWT4SKRV",
+      contributingUrl:
+        "https://github.com/educates/educates-training-platform/blob/develop/CONTRIBUTING.md",
       sponsorshipUrl: "https://github.com/sponsors/educates",
+      downloadsUrl:
+        "https://github.com/educates/educates-training-platform/releases",
       descriptionTitle: "Interactive Training Platform",
-      description: "The Educates project provides a system for hosting interactive workshop environments in Kubernetes,"
-                      + "or on top of a local container runtime. It can be used for self paced or supervised workshops."
-                      + "It can also be useful where you need to package up demos of applications hosted in Kubernetes "
-                      + "or a local container runtime.",
+      description:
+        "The Educates project provides a system for hosting interactive workshop environments in Kubernetes, " +
+        "or on top of a local container runtime. It can be used for self paced or supervised workshops. " +
+        "It can also be useful where you need to package up demos of applications hosted in Kubernetes " +
+        "or a local container runtime.",
       screenshot: "/img/screenshot.png",
       youtubeUrl: "https://www.youtube.com/@EducatesTrainingPlatform",
-    }
+    },
   },
 
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
+  onBrokenAnchors: "warn",
 
   markdown: {
     mermaid: true,
@@ -119,7 +126,7 @@ const config: Config = {
     // Replace with your project's social card
     image: "img/logo.svg",
     colorMode: {
-      defaultMode: 'light',
+      defaultMode: "light",
       disableSwitch: true,
       respectPrefersColorScheme: false,
     },
@@ -138,15 +145,38 @@ const config: Config = {
         src: "img/logo.svg",
       },
       items: [
-        { to: '/#use-cases', label: 'Use Cases', position: 'left' },
-        { to: '/#features', label: 'Features', position: 'left' },
-        { to: '/#team', label: 'Team', position: 'left' },
-        // { to: '/#references', label: 'References', position: 'left' },
-        { to: '/#pricing', label: 'Pricing', position: 'left' },
-        { to: '/getting-started-guides', label: 'Getting Started', position: 'left' },
-        { to: '/blog', label: 'Blog', position: 'left' },
-        { href: 'https://docs.educates.dev', label: 'Docs', position: 'left' },
-        { href: 'https://github.com/educates/educates-training-platform', label: 'GitHub', position: 'right' },
+        {
+          type: "dropdown",
+          label: "Project",
+          position: "left",
+          items: [
+            { to: "/#use-cases", label: "Use Cases" },
+            { to: "/#features", label: "Features" },
+            { to: "/#team", label: "Team" },
+            // { to: '/#references', label: 'References', position: 'left' },
+            { to: "/#pricing", label: "Pricing" },
+            { to: "/#featured-content", label: "Featured Content" },
+          ],
+        },
+        { to: "/downloads", label: "Downloads", position: "left" },
+        {
+          type: "dropdown",
+          label: "Guides",
+          position: "left",
+          items: [
+            { to: "/getting-started-guides", label: "Getting Started" },
+            { to: "/getting-started-guides/setup", label: "Setup" },
+            { to: "/getting-started-guides/about", label: "About" },
+            { to: "/getting-started-guides/authoring", label: "Authoring" },
+          ],
+        },
+        { to: "/blog", label: "Blog", position: "left" },
+        { href: "https://docs.educates.dev", label: "Docs", position: "right" },
+        {
+          href: "https://github.com/educates/educates-training-platform",
+          label: "GitHub",
+          position: "right",
+        },
         // { href: '/login', label: 'Login / Sign Up', position: 'right', className: 'navbar-login-button' },
       ],
     },
@@ -161,11 +191,13 @@ const config: Config = {
             { label: "Team", to: "/#team" },
             // { label: "References", to: "/#references" },
             { label: "Pricing", to: "/#pricing" },
+            { label: "Downloads", to: "/downloads" },
           ],
         },
         {
           title: "Docs",
           items: [
+            { label: "Featured Content", to: "/#featured-content" },
             { label: "Blog", to: "/blog" },
             {
               label: "Getting Started Guides",

package.json

@@ -23,6 +23,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mdx-js/react": "^3.1.0",
+    "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
     "asciinema-player": "^3.9.0",
     "clsx": "^2.1.1",

src/components/Carrousel/Carrousel.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos';
+import ArrowForwardIos from '@mui/icons-material/ArrowForwardIos';
+import Typography from '@mui/material/Typography';
+
+export interface CarrouselItem {
+  image: string;
+  title: string;
+  description: string;
+}
+
+interface CarrouselProps {
+  images: CarrouselItem[];
+  altPrefix?: string;
+  imageClassName?: string;
+  boxSx?: object;
+}
+
+const Carrousel: React.FC<CarrouselProps> = ({ images, altPrefix = 'Carousel image', imageClassName, boxSx }) => {
+  const [currentImage, setCurrentImage] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const interval = 3000;
+
+  useEffect(() => {
+    if (!paused) {
+      intervalRef.current = setInterval(() => {
+        setCurrentImage((prev) => (prev + 1) % images.length);
+      }, interval);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [paused, images.length]);
+
+  const goToPrev = () => {
+    setCurrentImage((prev) => (prev - 1 + images.length) % images.length);
+  };
+  const goToNext = () => {
+    setCurrentImage((prev) => (prev + 1) % images.length);
+  };
+  const goToIndex = (idx: number) => setCurrentImage(idx);
+
+  const { image, title, description } = images[currentImage];
+
+  return (
+    <Box
+      sx={{ width: '80%', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', ...boxSx }}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+    >
+      {/* Left Arrow */}
+      <IconButton
+        aria-label="Previous image"
+        onClick={goToPrev}
+        sx={{ position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)', zIndex: 2, bgcolor: 'rgba(255,255,255,0.7)' }}
+      >
+        <ArrowBackIos />
+      </IconButton>
+      {/* Image */}
+      <img
+        src={image}
+        alt={`${altPrefix} ${currentImage + 1}`}
+        className={imageClassName}
+        style={{ width: '100%' }}
+      />
+      {/* Right Arrow */}
+      <IconButton
+        aria-label="Next image"
+        onClick={goToNext}
+        sx={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', zIndex: 2, bgcolor: 'rgba(255,255,255,0.7)' }}
+      >
+        <ArrowForwardIos />
+      </IconButton>
+      {/* Dots - below the image */}
+      <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center', gap: 1, position: 'static' }}>
+        {images.map((_, idx) => (
+          <Box
+            key={idx}
+            onClick={() => goToIndex(idx)}
+            sx={{
+              width: 12,
+              height: 12,
+              borderRadius: '50%',
+              background: idx === currentImage ? '#1976d2' : '#ccc',
+              cursor: 'pointer',
+              border: idx === currentImage ? '2px solid #1976d2' : '2px solid #ccc',
+              transition: 'background 0.2s, border 0.2s',
+            }}
+          />
+        ))}
+      </Box>
+      {/* Title and Description below indicators */}
+      <Box sx={{ mt: 2, textAlign: 'center', width: '100%' }}>
+        <Typography variant="h6" component="h3" sx={{ mb: 1 }}>
+          {title}
+        </Typography>
+        <Typography 
+          color="text.secondary" 
+          sx={{ 
+            maxWidth: 800, 
+            mx: 'auto',
+            height: '6rem', // Fixed height for 3 lines (1.5rem per line)
+            minHeight: '6rem',
+            lineHeight: '1.5rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 4, // Limit to 3 lines
+            WebkitBoxOrient: 'vertical',
+          }}
+        >
+          {description}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default Carrousel;