Feature Grid

<div class="w-full max-w-5xl mx-auto space-y-10">
    <div class="text-center space-y-4">
        <h2 class="scroll-m-20 text-3xl sm:text-4xl font-semibold tracking-tight">
            Features
        </h2>
        <BbTypographyLead class="mx-auto max-w-2xl text-muted-foreground">
            Everything you need to build modern web applications. Powerful, flexible, and easy to use.
        </BbTypographyLead>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <BbCard>
            <BbCardHeader>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 mb-3">
                    <!-- icon SVG -->
                </div>
                <BbCardTitle>Lightning Fast</BbCardTitle>
            </BbCardHeader>
            <BbCardContent>
                <BbTypographyP class="text-muted-foreground">
                    Optimized for performance with minimal overhead. Your applications stay snappy and responsive.
                </BbTypographyP>
            </BbCardContent>
        </BbCard>
        <BbCard>
            <BbCardHeader>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 mb-3">
                    <!-- icon SVG -->
                </div>
                <BbCardTitle>Secure by Default</BbCardTitle>
            </BbCardHeader>
            <BbCardContent>
                <BbTypographyP class="text-muted-foreground">
                    Built with security best practices in mind. Stay protected without extra configuration.
                </BbTypographyP>
            </BbCardContent>
        </BbCard>
        <BbCard>
            <BbCardHeader>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 mb-3">
                    <!-- icon SVG -->
                </div>
                <BbCardTitle>Composable</BbCardTitle>
            </BbCardHeader>
            <BbCardContent>
                <BbTypographyP class="text-muted-foreground">
                    Mix and match components to create complex interfaces from simple building blocks.
                </BbTypographyP>
            </BbCardContent>
        </BbCard>
        <BbCard>
            <BbCardHeader>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 mb-3">
                    <!-- icon SVG -->
                </div>
                <BbCardTitle>Accessible</BbCardTitle>
            </BbCardHeader>
            <BbCardContent>
                <BbTypographyP class="text-muted-foreground">
                    Every component follows WAI-ARIA standards ensuring your app is usable by everyone.
                </BbTypographyP>
            </BbCardContent>
        </BbCard>
        <BbCard>
            <BbCardHeader>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 mb-3">
                    <!-- icon SVG -->
                </div>
                <BbCardTitle>Developer Friendly</BbCardTitle>
            </BbCardHeader>
            <BbCardContent>
                <BbTypographyP class="text-muted-foreground">
                    Clean APIs and comprehensive documentation make integration a breeze for any developer.
                </BbTypographyP>
            </BbCardContent>
        </BbCard>
        <BbCard>
            <BbCardHeader>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 mb-3">
                    <!-- icon SVG -->
                </div>
                <BbCardTitle>Fully Customizable</BbCardTitle>
            </BbCardHeader>
            <BbCardContent>
                <BbTypographyP class="text-muted-foreground">
                    Tailor every component to match your brand with CSS variables and flexible theming.
                </BbTypographyP>
            </BbCardContent>
        </BbCard>
    </div>
</div>