features-3

1---
2import type { ImageMetadata } from "astro"
3import { Image } from "astro:assets"
4 
5import { cn } from "@/lib/utils"
6import { Section, SectionContainer } from "@/components/ui/section"
7 
8type Props = {
9  class?: string
10  title: string
11  description: string
12  features: {
13    title: string
14    description: string
15    image: {
16      src: ImageMetadata
17      alt: string
18    }
19  }[]
20}
21 
22const { class: className, title, description, features } = Astro.props
23---
24 
25<Section class={cn("", className)}>
26  <SectionContainer class="items-center gap-6 text-center">
27    <div class="flex max-w-2xl flex-col items-center gap-4">
28      <h2
29        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
30      >
31        {title}
32      </h2>
33      <p
34        class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
35      >
36        {description}
37      </p>
38    </div>
39  </SectionContainer>
40  <SectionContainer>
41    <div class="grid gap-6 sm:grid-cols-2">
42      {
43        features.map((feature) => (
44          <div class="group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors">
45            <Image
46              src={feature.image.src}
47              alt={feature.image.alt}
48              class="size-20 shrink-0 rounded-lg object-cover"
49              widths={[160, 320]}
50              sizes="80px"
51            />
52            <div class="flex flex-col gap-1.5">
53              <h3 class="text-foreground text-base font-medium">
54                {feature.title}
55              </h3>
56              <p class="text-muted-foreground text-sm leading-relaxed">
57                {feature.description}
58              </p>
59            </div>
60          </div>
61        ))
62      }
63    </div>
64  </SectionContainer>
65</Section>