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

Redesign!
All checks were successful
Build and Deploy / build-and-push (push) Successful in 2m47s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2025-12-18 09:09:22 -07:00
parent 840b51eba5
commit 95bb381033
9 changed files with 416 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/components/sections/HeroSection.astro
View File

@@ -2,80 +2,91 @@
import { siteConfig } from "../../config/site";
---
<section class="relative overflow-hidden py-12 lg:py-20">
<div class="max-w-7xl mx-auto px-6">
<div
class="hero min-h-[65vh] bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-2xl shadow-xl relative"
>
<div
class="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-secondary/20 rounded-2xl"
>
<section class="relative overflow-hidden bg-neutral">
<div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff06_1px,transparent_1px),linear-gradient(to_bottom,#ffffff06_1px,transparent_1px)] bg-[size:4rem_4rem]"></div>
<div class="relative max-w-7xl mx-auto px-6 py-20 lg:py-32">
<div class="text-center max-w-4xl mx-auto">
<div class="inline-flex items-center gap-2 bg-white/10 text-white px-4 py-2 rounded-full text-sm font-medium mb-8 border border-white/10">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-success"></span>
</span>
Accepting new clients
</div>
<div
class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-black/5 rounded-2xl"
>
<h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6">
Building
Digital Solutions
<br class="hidden sm:block" />
That Drive Growth
</h1>
<p class="text-lg sm:text-xl text-white/70 max-w-2xl mx-auto mb-10 leading-relaxed">
{siteConfig.hero.description}. Delivering reliable, scalable
solutions tailored to your business needs.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a
href="#contact"
class="btn btn-accent btn-lg shadow-lg shadow-accent/25 hover:shadow-xl hover:shadow-accent/30 hover:-translate-y-0.5 transition-all duration-300 group"
>
<svg
class="w-5 h-5 transition-transform group-hover:rotate-12"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
Start Your Project
</a>
<a
href="#services"
class="btn btn-outline btn-lg border-white/30 text-white hover:bg-white hover:text-neutral hover:border-white transition-all duration-300"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
Explore Services
</a>
</div>
<div
class="hero-content text-center text-primary-content py-16 lg:py-20 px-8"
>
<div class="max-w-4xl w-full space-y-8">
<div>
<h1
class="text-4xl sm:text-6xl lg:text-7xl font-bold mb-4 leading-tight text-white"
>
{siteConfig.name}
</h1>
<div
class="w-20 h-1 bg-accent mx-auto mb-6 rounded-full"
>
</div>
<div class="mt-16 pt-10 border-t border-white/10">
<p class="text-white/50 text-sm mb-6 uppercase tracking-wider font-medium">Trusted expertise in</p>
<div class="flex flex-wrap justify-center items-center gap-8 lg:gap-12">
<div class="flex items-center gap-2.5 text-white/80">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<span class="font-medium">Web Development</span>
</div>
<p
class="text-lg sm:text-xl lg:text-2xl mb-8 opacity-90 max-w-3xl mx-auto leading-relaxed text-white"
>
{siteConfig.hero.description} — Delivering reliable, scalable
solutions tailored to your business needs.
</p>
<div
class="flex flex-col sm:flex-row gap-4 justify-center items-center"
>
<a
href="#contact"
class="btn btn-accent btn-lg text-accent-content hover:bg-accent/90 shadow-lg border-0"
>
<svg
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
Start Your Project
</a>
<a
href="#services"
class="btn btn-outline btn-lg text-white border-white hover:bg-white hover:text-primary"
>
<svg
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
></path>
</svg>
View Services
</a>
<div class="flex items-center gap-2.5 text-white/80">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
<span class="font-medium">Mobile Apps</span>
</div>
<div class="flex items-center gap-2.5 text-white/80">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="font-medium">DevOps</span>
</div>
</div>
</div>