Added swiper.js showcase

package.json

@@ -27,7 +27,8 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-feather": "^2.0.10",
-        "sharp": "^0.31.0"
+        "sharp": "^0.31.0",
+        "swiper": "^8.4.5"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.3",

src/components/Showcase.tsx

@@ -0,0 +1,7 @@
+import { Slides } from '@/components/Slides';
+
+export const Showcase = () => (
+    <section id='showcase'>
+        <Slides />
+    </section>
+);

src/components/Slides.tsx

@@ -0,0 +1,55 @@
+import Image from 'next/image';
+import { Navigation, Pagination, A11y } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+
+const metadata = [
+    {
+        source: '/Learn.Design.png',
+        alternativeText: 'Learn.Design',
+    },
+    {
+        source: '/Gyme.png',
+        alternativeText: 'Gyme',
+    },
+    {
+        source: '/CQT.png',
+        alternativeText: 'CQT',
+    },
+    {
+        source: '/CareSuccess.png',
+        alternativeText: 'Care Success',
+    },
+    {
+        source: '/TWSpotlight.png',
+        alternativeText: 'TWS Spotlight',
+    },
+];
+
+export const Slides = () => (
+    <section id='showcase'>
+        <Swiper
+            modules={[Navigation, Pagination, A11y]}
+            spaceBetween={50}
+            slidesPerView={1}
+            navigation
+            pagination={{ clickable: true }}
+            scrollbar={{ draggable: true }}>
+            {metadata.map(({ source, alternativeText }) => (
+                <SwiperSlide key={source} className='grid grid-cols-3'>
+                    <Image
+                        src={source}
+                        alt={alternativeText}
+                        width={600}
+                        height={600}
+                    />
+                    <div>Description</div>
+                </SwiperSlide>
+            ))}
+        </Swiper>
+    </section>
+);

src/data/links.ts

@@ -19,4 +19,9 @@ export const links: {
         label: 'FAQ',
         href: '#faq',
     },
+    {
+        id: 4,
+        label: 'Showcase',
+        href: '#showcase',
+    },
 ];

src/pages/index.tsx

@@ -1,13 +1,15 @@
 import { FAQ } from '@/components/FAQ';
 import { Hero } from '@/components/Hero';
 import { Pricing } from '@/components/Pricing';
+import { Showcase } from '@/components/Showcase';
 import { type GetStaticProps } from 'next';
 
 const Index = () => (
     <div className='container mx-auto flex-1 px-4 sm:px-6 lg:px-8'>
         <Hero />
         <Pricing />
         <FAQ />
+        <Showcase />
     </div>
 );