Initial import of the Astro vicibox.com site

src/components/Slideshow.astro

@@ -0,0 +1,84 @@
+---
+import { Image } from 'astro:assets';
+import release from '../data/release.json';
+import slideStable from '../assets/slides/slide-vicibox-12.png';
+import slideBeta from '../assets/slides/slide-vicibox-13-beta.png';
+import slideDocs from '../assets/slides/slide-docs.png';
+import slideCluster from '../assets/slides/slide-cluster.png';
+
+// Unlike VICIdial/VICIhost (which rotate their latest blog posts), ViciBox has
+// only a handful of posts, so the slides are a fixed list. Banners are 930x354
+// in the same style as the other sites: artwork on the left, text box on the right.
+const slides = [
+  {
+    title: `ViciBox Server v.${release.stable.version}`,
+    text: 'The official installation ISO for the VICIdial Contact Center Suite. Download the standard or MD Software RAID1 installer and have VICIdial running in no time.',
+    href: '/server',
+    image: slideStable,
+  },
+  {
+    title: `ViciBox v.${release.beta.version} available for testing`,
+    text: 'The next major ViciBox release is in beta. Help us test it on non-production systems and report what you find on the forum.',
+    href: release.beta.post,
+    image: slideBeta,
+  },
+  {
+    title: 'Installation Manual',
+    text: 'Step-by-step instructions for express single-server installs, multi-server clusters, and everything in between.',
+    href: 'https://docs.vicibox.com/',
+    image: slideDocs,
+  },
+  {
+    title: 'Multi-Server Clusters',
+    text: 'ViciBox automatically configures new servers into a VICIdial cluster, so scaling from a few agents to hundreds is straightforward.',
+    href: '/server',
+    image: slideCluster,
+  },
+];
+---
+
+<div id="slider">
+  <div id="slideshow" class="splide">
+    <div class="splide__track">
+      <ul class="splide__list">
+        {slides.map((slide) => (
+          <li class="splide__slide">
+            <a href={slide.href}>
+              <Image src={slide.image} alt={slide.title} width={930} height={354} />
+              <div class="post-slide">
+                <h2>{slide.title}</h2>
+                <p>{slide.text}<span class="read-more">Read More...</span></p>
+              </div>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script>
+  import Splide from '@splidejs/splide';
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const el = document.getElementById('slideshow');
+    if (el) {
+      new Splide(el, {
+        type: 'loop',
+        autoplay: true,
+        interval: 5000,
+        arrows: true,
+        pagination: true,
+        height: 354,
+      }).mount();
+    }
+  });
+</script>
+
+<style>
+  #slideshow img {
+    width: 100%;
+    height: 354px;
+    object-fit: cover;
+  }
+</style>