atash/atashdotdev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a new logo loop + optimized the component setup (DRY)
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m26s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2026-01-29 13:48:37 -07:00
parent 3e89a109ec
commit 9c95362800
14 changed files with 921 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/sections/ServicesSection.astro
View File

@@ -1,29 +1,35 @@
---
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" class="py-20 lg:py-28 bg-base-200">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
{siteConfig.services.title}
</h2>
</div>
<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;
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{
siteConfig.services.cards.map((card, index) => (
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={`
shrink-0 w-14 h-14 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-110
${card.variant === "primary" ? "bg-primary/10 text-primary" : ""}
${card.variant === "secondary" ? "bg-secondary/10 text-secondary" : ""}
${card.variant === "accent" ? "bg-accent/10 text-accent" : ""}
`}
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>
@@ -38,8 +44,8 @@ import { Icon } from "astro-icon/components";
</div>
</div>
</div>
))
}
</div>
);
})
}
</div>
</section>
</Section>