Atridad Lahiji
9c95362800
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m26s
52 lines
2.1 KiB
Plaintext
52 lines
2.1 KiB
Plaintext
---
|
|
import { siteConfig } from "../../config/site";
|
|
import { Icon } from "astro-icon/components";
|
|
import Section from "../Section.astro";
|
|
|
|
const variantStyles: Record<string, string> = {
|
|
primary: "bg-primary/10 text-primary",
|
|
secondary: "bg-secondary/10 text-secondary",
|
|
accent: "bg-accent/10 text-accent",
|
|
};
|
|
---
|
|
|
|
<Section
|
|
id="services"
|
|
background="bg-base-100"
|
|
title={siteConfig.services.title}
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
|
{
|
|
siteConfig.services.cards.map((card) => {
|
|
const styles =
|
|
variantStyles[card.variant] || variantStyles.primary;
|
|
|
|
return (
|
|
<div class="group card bg-base-100 border border-base-300/50 hover:border-primary/30 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
|
<div class="card-body p-8">
|
|
<div class="flex items-start gap-5">
|
|
<div
|
|
class:list={[
|
|
"shrink-0 w-14 h-14 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-110",
|
|
styles,
|
|
]}
|
|
>
|
|
<Icon name={card.icon} class="w-6 h-6" />
|
|
</div>
|
|
<div class="flex-1 space-y-3">
|
|
<h3 class="text-xl font-bold text-base-content group-hover:text-primary transition-colors">
|
|
{card.title}
|
|
</h3>
|
|
<p class="text-base-content/60 leading-relaxed">
|
|
{card.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</Section>
|