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

81
src/components/sections/AboutSection.astro
View File

@@ -1,6 +1,7 @@
---
import { Icon } from "astro-icon/components";
import { siteConfig } from "../../config/site";
import Section from "../Section.astro";
const features = [
{
@@ -16,34 +17,32 @@ const features = [
...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" class="py-20 lg:py-28">
<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.whyUs.title}
</h2>
</div>
<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;
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
{
features.map((feature) => (
<div class="group text-center p-8 rounded-2xl bg-base-100 border border-base-300/50 hover:border-primary/30 hover:shadow-xl transition-all duration-300">
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={`w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300
${feature.variant === "primary" ? "bg-primary/10" : ""}
${feature.variant === "secondary" ? "bg-secondary/10" : ""}
${feature.variant === "accent" ? "bg-accent/10" : ""}
`}
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={`w-8 h-8
${feature.variant === "primary" ? "text-primary" : ""}
${feature.variant === "secondary" ? "text-secondary" : ""}
${feature.variant === "accent" ? "text-accent" : ""}
`}
class:list={["w-8 h-8", styles.text]}
/>
</div>
<h3 class="text-xl font-bold text-base-content mb-3">
@@ -53,27 +52,27 @@ const features = [
{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
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>
</div>
</section>
</Section>