added tons of features

components/shared/home/feature-cards.tsx

@@ -0,0 +1,44 @@
+import Image from 'next/image'
+import * as React from 'react'
+
+import {cards} from '@/lib/data'
+import {Card, CardContent} from '@/ui/card'
+import {Carousel, CarouselContent, CarouselItem} from '@/ui/carousel'
+
+export default function FeatureCards() {
+	return (
+		<Carousel className='mx-auto w-full'>
+			<CarouselContent className='-ml-2 md:-ml-4'>
+				{cards.map((card: any) => (
+					<CarouselItem
+						key={card.title}
+						className='pl-3 md:basis-1/3 lg:basis-1/4 xl:basis-1/5'
+					>
+						<div className='p-1'>
+							<Card className='border-[2px] border-brand-violet'>
+								<CardContent className='aspect-card flex items-center justify-center p-1'>
+									<CarouselItem>
+										<Image
+											src={card.image}
+											width={256}
+											height={256}
+											className='object-scale-down'
+											priority
+											alt={''}
+										/>
+									</CarouselItem>
+								</CardContent>
+							</Card>
+						</div>
+					</CarouselItem>
+				))}
+			</CarouselContent>
+		</Carousel>
+
+		/*<div className='container grid grid-cols-1 md:grid-cols-2 md:gap-44 lg:grid-cols-4'>
+			{cards.map((card: any) => (
+				<ProductCard card={card} key={card.title} />
+			))}
+		</div>*/
+	)
+}

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>
+	)
+}

components/shared/home/logo.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+
+import {APP_NAME} from '@/lib/constants'
+import logoImg from '@/public/images/logo.svg'
+
+export default function Logo() {
+	const ar = 121 / 192
+	const w = 112
+
+	return (
+		<div className='mt-0.5 flex items-center justify-center'>
+			<Link
+				href='/'
+				className='m-1 flex cursor-pointer items-center pt-[7px] text-2xl font-extrabold outline-0'
+			>
+				<Image
+					src={logoImg}
+					width={w}
+					height={w * ar}
+					alt={`${APP_NAME} logo`}
+					className='w-[131]'
+				/>
+			</Link>
+		</div>
+	)
+}