[Docs] Rework home page (#2368)

Preview: https://yatarkan.github.io/openvino.genai/

Author: yatarkan

site/docs/concepts/beam-search.md

@@ -3,3 +3,5 @@ sidebar_position: 3
 ---
 
 # Beam Search
+
+> **Note:** This page is a work in progress.

site/docs/concepts/optimization-techniques/continuous-batching.md

@@ -3,3 +3,5 @@ sidebar_position: 3
 ---
 
 # Continuous Batching
+
+> **Note:** This page is a work in progress.

site/docs/concepts/optimization-techniques/prefix-caching.md

@@ -3,3 +3,5 @@ sidebar_position: 4
 ---
 
 # Prefix Caching
+
+> **Note:** This page is a work in progress.

site/docs/concepts/optimization-techniques/speculative-decoding.md

@@ -3,3 +3,5 @@ sidebar_position: 1
 ---
 
 # Speculative Decoding
+
+> **Note:** This page is a work in progress.

site/docusaurus.config.ts

@@ -86,11 +86,6 @@ const config: Config = {
           label: 'Documentation',
           to: '/docs',
         },
-        {
-          type: 'html',
-          position: 'left',
-          value: '<i style="color: #fec91b"><b>Status:</b> Work in progress</i>',
-        },
         {
           href: 'https://github.com/openvinotoolkit/openvino.genai',
           label: 'GitHub',

site/src/components/Button/index.tsx

@@ -45,17 +45,9 @@ export default function Button({
   const destination = disabled ? null : link;
 
   return (
-    <Link to={destination}>
+    <Link className={className} to={destination}>
       <button
-        className={clsx(
-          'button',
-          sizeClass,
-          outlineClass,
-          variantClass,
-          blockClass,
-          disabledClass,
-          className
-        )}
+        className={clsx('button', sizeClass, outlineClass, variantClass, blockClass, disabledClass)}
         style={style}
         role="button"
         aria-disabled={disabled}

site/src/components/Carousel/index.tsx

@@ -0,0 +1,171 @@
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+
+import styles from './styles.module.css';
+
+type ChevronIconProps = {
+  size?: number;
+};
+
+const ChevronLeftIcon: React.FC<ChevronIconProps> = ({ size = 24 }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+  >
+    <polyline points="15,18 9,12 15,6"></polyline>
+  </svg>
+);
+
+const ChevronRightIcon: React.FC<ChevronIconProps> = ({ size = 24 }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+  >
+    <polyline points="9,18 15,12 9,6"></polyline>
+  </svg>
+);
+
+type CarouselProps = {
+  slides: React.ReactNode[];
+  autoSlideTimeout?: number;
+  enableAutoSlide?: boolean;
+  slidesToShow?: number;
+};
+
+const Carousel: React.FC<CarouselProps> = ({
+  slides = [],
+  autoSlideTimeout = 5000,
+  enableAutoSlide = true,
+  slidesToShow = 1,
+}) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const timeoutRef = useRef(null);
+
+  const totalSlides = slides.length;
+  const slideWidth = 100 / slidesToShow;
+  const maxSlideIndex = Math.max(0, totalSlides - slidesToShow);
+
+  const slidesPages = totalSlides - slidesToShow + 1;
+
+  useEffect(() => {
+    if (!enableAutoSlide || isPaused || totalSlides <= slidesToShow) {
+      return;
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setCurrentSlide((prev) => {
+        const nextSlide = prev + 1;
+        return nextSlide > maxSlideIndex ? 0 : nextSlide;
+      });
+    }, autoSlideTimeout);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [
+    currentSlide,
+    autoSlideTimeout,
+    enableAutoSlide,
+    isPaused,
+    totalSlides,
+    slidesToShow,
+    maxSlideIndex,
+  ]);
+
+  const goToSlide = (index) => {
+    const clampedIndex = Math.min(Math.max(0, index), maxSlideIndex);
+    setCurrentSlide(clampedIndex);
+  };
+
+  const goToPrevious = () => {
+    setCurrentSlide((prev) => {
+      return prev === 0 ? maxSlideIndex : prev - 1;
+    });
+  };
+
+  const goToNext = () => {
+    setCurrentSlide((prev) => {
+      const nextSlide = prev + 1;
+      return nextSlide > maxSlideIndex ? 0 : nextSlide;
+    });
+  };
+
+  const handleMouseEnter = () => {
+    setIsPaused(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsPaused(false);
+  };
+
+  if (!slides || slides.length === 0) {
+    return <div>No slides to display</div>;
+  }
+
+  return (
+    <div
+      className={styles.carousel}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className={styles.slidesWrapper}>
+        <div
+          className={styles.slidesContainer}
+          style={{
+            transform: `translateX(-${currentSlide * slideWidth}%)`,
+          }}
+        >
+          {slides.map((slide, index) => (
+            <div
+              key={`carousel-slide-${index}`}
+              className={styles.slide}
+              style={{ minWidth: `${slideWidth}%` }}
+            >
+              {slide}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <button
+        className={clsx(styles.chevron, styles.chevronLeft)}
+        onClick={goToPrevious}
+        aria-label="Previous slide"
+      >
+        <ChevronLeftIcon size={40} />
+      </button>
+
+      <button
+        className={clsx(styles.chevron, styles.chevronRight)}
+        onClick={goToNext}
+        aria-label="Next slide"
+      >
+        <ChevronRightIcon size={40} />
+      </button>
+
+      <div className={styles.pagination}>
+        {new Array(slidesPages).fill(null).map((_, index) => (
+          <button
+            key={index}
+            className={clsx(styles.dot, currentSlide === index && styles.dotActive)}
+            onClick={() => goToSlide(index)}
+            aria-label={`Go to slide ${index + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;

site/src/components/Carousel/styles.module.css

@@ -0,0 +1,69 @@
+.carousel {
+  position: relative;
+  padding: 0 2rem;
+
+  .slidesWrapper {
+    overflow: hidden;
+  }
+
+  .slidesContainer {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+
+    .slide {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 1rem;
+    }
+  }
+}
+
+.chevron {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: transparent;
+  border: none;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 2;
+  color: white;
+  padding: 0;
+}
+
+.chevronLeft {
+  left: 0px;
+}
+
+.chevronRight {
+  right: 0px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  padding-bottom: 5px;
+
+  .dot {
+    padding: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    opacity: 0.5;
+  }
+
+  .dotActive {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}