docs: Improve landing page

Author: Danielku15

src/components/HomepageFeatures/index.tsx

@@ -1,66 +1,118 @@
 import React from 'react';
 import styles from './styles.module.scss';
 
+type FeatureItemImage = string | (() => React.ReactElement);
+
 type FeatureItem = {
   title: string;
-  Image: any;
+  Images: FeatureItemImage | FeatureItemImage[];
   description: React.ReactNode;
 };
 
 const FeatureList: FeatureItem[] = [
+  {
+    title: 'Feature Rich',
+    Images: '/img/landing/options.png',
+    description: (
+      <>
+        alphaTab provides a huge variety of features to build your music notation app:
+
+        <ul>
+          <li>Load music notation from formats like Guitar Pro 3-8, MusicXML, Capella or use the built-in text language alphaTex.</li>
+          <li>Show standard music notation, guitar tabs, drum tabs, numbered notation (jiǎnpǔ) and slash notation.</li>
+          <li>Adjust the music sheet look with layouts (horizontal/vertical), zoom levels, custom paddings and coloring elements to your preference.</li>
+          <li>Interactively play songs with the built-in synthesizer including tempo control, looping, transposing.</li>
+          <li>Synchronize songs with real audio or video recordings.</li>
+          <li>Show individual instruments (tracks) of the overall song, or combine multiple tracks. Control the volume, pan and transposition of all instruments live.</li>
+        </ul>
+      </>
+    ),
+  },
   {
     title: 'Responsive Display',
-    Image: require('@site/static/img/undraw-responsive.svg').default,
+    Images: [
+      '/img/landing/alphatab-desktop.png',
+      '/img/landing/alphatab-tablet.png',
+      '/img/landing/alphatab-phone.png'
+    ],
     description: (
       <>
-        Depending on the available screen resolution alphaTab can resize
-        dynamically to make the music sheet fit the available space.
+        alphaTab adjusts to the available screen resolution. Resizing rearranges the 
+        music sheet dynamically to fit again the available space. We provide a wide variety
+        of layout options to adjust scaling, paddings and the general arrangement used. 
+        Your app will be notified about any resizing so you can adjust as needed. This way you can serve your users always the best viewing experience.
       </>
     ),
   },
   {
-    title: 'Designed for Cross Platform usage',
-    Image: require('@site/static/img/undraw-cross-platform.svg').default,
+    title: 'Designed for Cross Platform and Full-Stack usage',
+    Images: '/img/landing/platforms.png',
     description: (
       <>
         The core of alphaTab is designed to run with minimal external dependencies
-        and on multiple platforms. From one central code base we provide
-        alphaTab for web based apps, apps using .net and Kotlin for Android.
+        and on multiple platforms and runtime environments. From one central code base we provide
+        alphaTab for web based apps (JavaScript), apps using .net and Kotlin for Android.
+        Use alphaTab in your backend and frontend using your preferred technologies to build the app you want.
       </>
     ),
   },
   {
     title: 'Audio Playback',
-    Image: require('@site/static/img/undraw-audio.svg').default,
+    Images: () => {
+      return (
+        <video src='/img/landing/audio.mp4' autoPlay={true} muted={true} loop={true} controls={false} style={{maxWidth: "100%"}} />
+      )
+    },
     description: (
       <>
         The built-in audio synthesizer allows users to hear what they are
         seeing. Using SoundFont2 and SoundFont3 containers as input, alphaTab can generate the
         matching audio to the displayed music notation and provide a live
         display cursor including interactive selection of playback position and
-        ranges.
+        ranges. <br />
+        Or use real audio and video recordings and synchronize them with your music sheet.
+        Let your users play along backing tracks, real songs or build training lessons.
+        alphaTab can be integrated with any custom external media as you need it.
       </>
     ),
   },
   {
-    title: 'Powerful API',
-    Image: require('@site/static/img/undraw-api.svg').default,
+    title: 'Free as in Beer',
+    Images: '/img/landing/opensource.png',
     description: (
       <>
-        Use the alphaTab APIs to build your customized look&amp;feel on top of
-        the main rendering component. Access the full data model of the music
-        sheet to derive UI components tailored for your needs.
+        alphaTab is provided to you for free under the terms of the MPL-2.0 license. 
+        It is developed and continuously improved since more than 15 years (2010). 
+        Simply use it in your projects or even contribute to it making it better for everyone.
       </>
     ),
   },
 ];
 
-function Feature({title, Image, description}: FeatureItem) {
+const FeatureImage: React.FC<{ image: FeatureItemImage }> = ({ image }) => {
+  if (typeof image === 'string') {
+    return <img src={image} />
+  }
+
+  const ImageComponent = image;
+  return (
+    <ImageComponent />
+  )
+};
+
+function Feature({ title, Images, description }: FeatureItem) {
   return (
     <div className={styles.feature}>
-      <div className={styles.featureImageWrap}>
-        <Image className={styles.featureImage} />
-      </div>
+      <div className={styles.featureImageWrap}>{
+        Array.isArray(Images)
+          ?
+          (
+            <div className={`${styles.featureImageGallery} ${styles['featureImageGallery' + Images.length]}`}>
+              {Images.map(i => <FeatureImage image={i} />)}
+            </div>
+          )
+          : <FeatureImage image={Images} />
+      }</div>
       <div className={styles.featureDescription}>
         <h3>{title}</h3>
         <p>{description}</p>

src/components/HomepageFeatures/styles.module.scss

@@ -2,35 +2,128 @@
   display: flex;
   align-items: center;
   padding: 2rem 0;
-  width: 50%;
+  width: 80%;
   margin: 0 auto;
+  gap: 1rem;
 }
 
 .feature {
   display: flex;
   align-items: center;
+
+  & > * {
+    padding: 1rem;
+  }
 }
 
 .feature:nth-child(even) .featureDescription,
 .feature:nth-child(odd) .featureImageWrap {
   order: 0;
-  margin-right: 1em;
 }
 
 .feature:nth-child(odd) .featureDescription,
 .feature:nth-child(even) .featureImageWrap {
   order: 1;
 }
 
+
 .featureImageWrap {
-  height: 200px;
-  width: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 66%;
+}
+
+.featureDescription {
+  width: 33%;
 }
 
-.featureImage {
-  width: 200px;
-  max-width: 200px;
+.featureImageGallery {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+
+  &>* {
+    grid-area: 1 / 1 / 2 / 2;
+
+    color: transparent;
+    opacity: 0;
+    z-index: 0;
+    animation: featureImageGalleryFade 1s linear infinite 0s;
+    backface-visibility: hidden;
+  }
+
+  &.featureImageGallery1>* {
+    animation-duration: 5s;
+  }
+
+  &.featureImageGallery2>* {
+    animation-duration: 10s;
+  }
+
+  &.featureImageGallery3>* {
+    animation-duration: 15s;
+  }
+
+  &.featureImageGallery4>* {
+    animation-duration: 20s;
+  }
+
+  &.featureImageGallery5>* {
+    animation-duration: 25s;
+  }
+
+  &.featureImageGallery6>* {
+    animation-duration: 30s;
+  }
+
+  &>*:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  &>*:nth-child(2) {
+    animation-delay: 5s;
+  }
+
+  &>*:nth-child(3) {
+    animation-delay: 10s;
+  }
+
+  &>*:nth-child(4) {
+    animation-delay: 15s;
+  }
+
+  &>*:nth-child(5) {
+    animation-delay: 20s;
+  }
+
+  &>*:nth-child(6) {
+    animation-delay: 25s;
+  }
 }
+
+@keyframes featureImageGalleryFade {
+  0% {
+    opacity: 0;
+    animation-timing-function: ease-in;
+  }
+
+  10% {
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}