42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
package main
|
|
|
|
// featuresComponent renders a Gotham-styled feature cards grid.
|
|
templ featuresComponent(data FeaturesData) {
|
|
<section class="py-20 flex-1">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
if data.SectionTitle != "" {
|
|
<h2 class="text-3xl font-bold text-center mb-12 gotham-accent">{ data.SectionTitle }</h2>
|
|
}
|
|
<div class={ "grid gap-8", featureGridCols(data.Columns) }>
|
|
for _, feature := range data.Features {
|
|
<div class="p-6 gotham-surface rounded-lg gotham-border border hover:border-primary/30 transition-colors">
|
|
if feature.Icon != "" {
|
|
<div class="mb-4 gotham-accent">
|
|
@iconSVG(feature.Icon)
|
|
</div>
|
|
}
|
|
<h3 class="text-xl font-semibold text-foreground mb-3">{ feature.Title }</h3>
|
|
if feature.Description != "" {
|
|
<p class="text-muted-foreground leading-relaxed">{ feature.Description }</p>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
// featureGridCols returns the appropriate grid column class.
|
|
func featureGridCols(cols int) string {
|
|
switch cols {
|
|
case 1:
|
|
return "grid-cols-1"
|
|
case 2:
|
|
return "grid-cols-1 md:grid-cols-2"
|
|
case 4:
|
|
return "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
|
|
default:
|
|
return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
|
|
}
|
|
}
|