added tons of features

components/shared/home/home-carousel.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import Autoplay from 'embla-carousel-autoplay'
+import Image from 'next/image'
+import Link from 'next/link'
+import * as React from 'react'
+
+import {Button} from '@/components/ui/button'
+import {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious
+} from '@/components/ui/carousel'
+import {cn} from '@/lib/utils'
+
+export function HomeCarousel({
+	items
+}: {
+	items: {
+		image: string
+		url: string
+		title: string
+		buttonCaption: string
+	}[]
+}) {
+	const plugin = React.useRef(Autoplay({delay: 5000, stopOnInteraction: true}))
+
+	return (
+		<Carousel
+			dir='ltr'
+			plugins={[plugin.current]}
+			className='mx-auto w-full'
+			onMouseEnter={plugin.current.stop}
+			onMouseLeave={plugin.current.reset}
+		>
+			<CarouselContent>
+				{items.map(item => (
+					<CarouselItem key={item.title}>
+						<Link href={item.url}>
+							<div className='relative -m-0.5 flex aspect-univisium items-center justify-center'>
+								<Image
+									src={item.image}
+									alt={item.title}
+									fill
+									className='object-cover'
+									priority
+								/>
+								<div className='absolute left-16 top-1/2 hidden w-1/3 -translate-y-1/2 transform md:left-32'>
+									<h2
+										className={cn(
+											'mb-4 text-lg font-bold text-primary shadow-brand-violet drop-shadow-xl md:text-6xl'
+										)}
+									>
+										{`${item.title}`}
+									</h2>
+									<Button className='hidden md:block'>
+										{`${item.buttonCaption}`}
+									</Button>
+								</div>
+							</div>
+						</Link>
+					</CarouselItem>
+				))}
+			</CarouselContent>
+			{/*<CarouselPrevious className='left-0 h-[78px] w-[78px] text-6xl md:left-12' />
+			<CarouselNext className='right-0 h-[78px] w-[78px] md:right-12' />*/}
+
+			<CarouselPrevious className='absolute left-[1rem] top-1/2 z-10 h-[78px] w-[78px] -translate-y-1/2 transform' />
+			<CarouselNext className='absolute right-[1rem] top-1/2 z-10 h-[78px] w-[78px] -translate-y-1/2 transform' />
+		</Carousel>
+	)
+}