81 lines
2.0 KiB
Plaintext
81 lines
2.0 KiB
Plaintext
---
|
|
// Import the necessary dependencies
|
|
import { Image } from 'astro:assets';
|
|
import IconBlock from '@components/ui/blocks/IconBlock.astro';
|
|
import Icon from '@components/ui/icons/Icon.astro';
|
|
|
|
interface Feature {
|
|
heading: string;
|
|
content: string;
|
|
svg: string;
|
|
}
|
|
|
|
interface Props {
|
|
title?: string;
|
|
subTitle?: string;
|
|
features?: Feature[];
|
|
src?: any;
|
|
alt?: string;
|
|
}
|
|
// Define props from Astro
|
|
const { title, subTitle, src, alt, features } = Astro.props;
|
|
---
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
{/* Block to display the feature image */}
|
|
<div class="relative mb-6 overflow-hidden md:mb-8">
|
|
{
|
|
src && alt && (
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
class="h-full w-full object-cover object-center"
|
|
draggable={'false'}
|
|
format={'avif'}
|
|
loading={'eager'}
|
|
/>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
{
|
|
/* Displaying the main content consisting of title, subtitle, and several `IconBlock` components */
|
|
}
|
|
<div class="mt-5 grid gap-8 lg:mt-16 lg:grid-cols-3 lg:gap-12">
|
|
{/* Block for title and subtitle */}
|
|
<div class="lg:col-span-1">
|
|
{/* Rendering title */}
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{title}
|
|
</h2>
|
|
{/* Rendering subtitle */}
|
|
{
|
|
subTitle && (
|
|
<p class="mt-2 text-pretty text-neutral-600 md:mt-4 dark:text-neutral-400">
|
|
{subTitle}
|
|
</p>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
{/* Block to display the IconBlock components */}
|
|
<div class="lg:col-span-2">
|
|
<div class="grid gap-8 sm:grid-cols-2 md:gap-12">
|
|
{/* Injecting IconBlock components with different properties */}
|
|
{
|
|
features &&
|
|
features.map(feature => (
|
|
<IconBlock heading={feature.heading} content={feature.content}>
|
|
<Icon name={feature.svg} />
|
|
</IconBlock>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|