Atridad Lahiji
737a4dd7e8
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m49s
85 lines
2.9 KiB
Plaintext
85 lines
2.9 KiB
Plaintext
---
|
|
import Icon from "../Icon.astro";
|
|
import { type IconName } from "../../config/icons";
|
|
import { siteConfig } from "../../config/site";
|
|
import Section from "../Section.astro";
|
|
|
|
const features: {
|
|
icon: IconName;
|
|
variant: string;
|
|
title: string;
|
|
content: string;
|
|
}[] = [
|
|
{
|
|
icon: "bolt",
|
|
...siteConfig.whyUs.cards[0],
|
|
},
|
|
{
|
|
icon: "slopfree",
|
|
...siteConfig.whyUs.cards[1],
|
|
},
|
|
{
|
|
icon: "users",
|
|
...siteConfig.whyUs.cards[2],
|
|
},
|
|
];
|
|
|
|
const variantStyles: Record<string, { bg: string; text: string }> = {
|
|
primary: { bg: "bg-primary/10", text: "text-primary" },
|
|
secondary: { bg: "bg-secondary/10", text: "text-secondary" },
|
|
accent: { bg: "bg-accent/10", text: "text-accent" },
|
|
};
|
|
---
|
|
|
|
<Section id="about" title={siteConfig.whyUs.title} background="bg-base-200">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{
|
|
features.map((feature) => {
|
|
const styles =
|
|
variantStyles[feature.variant] || variantStyles.primary;
|
|
|
|
return (
|
|
<div class="group text-center p-8 rounded-2xl bg-base-200 border border-base-300/50 hover:border-primary/30 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
|
<div
|
|
class:list={[
|
|
"w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300",
|
|
styles.bg,
|
|
]}
|
|
>
|
|
<Icon
|
|
name={feature.icon}
|
|
class:list={["w-8 h-8", styles.text]}
|
|
/>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-base-content mb-3">
|
|
{feature.title}
|
|
</h3>
|
|
<p class="text-base-content/60 leading-relaxed">
|
|
{feature.content}
|
|
</p>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
|
|
<div
|
|
class="mt-20 p-8 lg:p-12 rounded-2xl bg-linear-to-br from-neutral to-neutral/90"
|
|
>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
|
|
{
|
|
siteConfig.whyUs.stats.map((stat) => (
|
|
<div class="text-center">
|
|
<div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">
|
|
{stat.value}
|
|
</div>
|
|
<div class="text-neutral-content/60 text-sm font-medium">
|
|
{stat.label}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</Section>
|