feat(services): improve service cards and add service images

src/components/horizontal-swiper.tsx

@@ -1,54 +1,60 @@
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Autoplay, Pagination, Navigation } from 'swiper/modules'
-
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from '@/components/ui/card'
+import investment from '../assets/investment.jpg'
+import infrastructure from '../assets/infrastructure.jpg'
+import brain from '../assets/brain.jpg'
+import bigData from '../assets/big-data.jpg'
+import blockchain from '../assets/blockchain.jpg'
+import software from '../assets/software.jpg'
 
 // Import Swiper styles
 import 'swiper/css'
 import 'swiper/css/pagination'
+import SwiperCard from './swiper-card'
+import { IService } from '@/models/IService'
 
-const services = [
+const services: IService[] = [
 	{
 		id: 1,
 		title: 'Software',
 		description: 'Ad hoc software',
-		content: 'Card Content',
-		footer: 'Card Footer',
+		imageSrc: software,
+		brochureLink: '',
 	},
 	{
 		id: 2,
 		title: 'AI',
 		description: 'Artificial Intelligence',
-		content: 'Consulting Content',
-		footer: 'Consulting Footer',
+		imageSrc: brain,
+		brochureLink: '',
 	},
 	{
 		id: 3,
 		title: 'Blockchain',
 		description: '24/7 support services',
-		content: 'Support Content',
-		footer: 'Support Footer',
+		imageSrc: blockchain,
+		brochureLink: '',
 	},
 	{
 		id: 4,
 		title: 'Data',
 		description: 'Big Data, Analytics, and Visualization',
-		content: '',
-		footer: '',
+		imageSrc: bigData,
+		brochureLink: '',
 	},
 	{
 		id: 5,
 		title: 'Infrastructure',
 		description: 'Azure Cloud Infrastucture',
-		content: '',
-		footer: '',
+		imageSrc: infrastructure,
+		brochureLink: '',
+	},
+	{
+		id: 6,
+		title: 'Investment',
+		description: 'Azure Cloud Infrastucture',
+		imageSrc: investment,
+		brochureLink: '',
 	},
 ]
 
@@ -89,18 +95,7 @@ export default function HorizontalSwiper() {
 				{services.map((service) => (
 					<SwiperSlide key={service.id}>
 						<div className='p-4'>
-							<Card className='bg-secondary min-h-[40vh]'>
-								<CardHeader>
-									<CardTitle>{service.title}</CardTitle>
-									<CardDescription>{service.description}</CardDescription>
-								</CardHeader>
-								<CardContent>
-									<p>{service.content}</p>
-								</CardContent>
-								<CardFooter>
-									<p>{service.footer}</p>
-								</CardFooter>
-							</Card>
+							<SwiperCard service={service} />
 						</div>
 					</SwiperSlide>
 				))}

src/components/swiper-card.tsx

@@ -0,0 +1,39 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { IService } from '@/models/IService'
+
+interface Props {
+	service: IService
+}
+
+export default function SwiperCard({ service }: Props): JSX.Element {
+	return (
+		<Card className='w-full max-w-md bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800'>
+			<img
+				src={service.imageSrc}
+				alt='Service Image'
+				className='w-full h-48 object-cover'
+			/>
+			<CardContent className='p-6 space-y-4'>
+				<div>
+					<h3 className='text-2xl font-bold text-gray-900 dark:text-gray-100'>
+						{service.title}
+					</h3>
+					<p className='text-gray-600 dark:text-gray-400 mt-2'>
+						{service.description}
+					</p>
+				</div>
+				<div className='flex justify-between items-center'>
+					<Button
+						as='a'
+						href={service.brochureLink}
+						download
+						className='bg-gray-900 text-white hover:bg-gray-800 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-800'
+					>
+						Download Brochure
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	)
+}

src/models/IService.ts

@@ -0,0 +1,7 @@
+export interface IService {
+	id: number
+	title: string
+	description: string
+	imageSrc: string
+	brochureLink: string
+}