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

30
src/components/Footer.astro
View File

@@ -2,14 +2,32 @@
import { siteConfig } from "../config/site"; import { siteConfig } from "../config/site";
--- ---
<footer class="bg-base-200 py-8" role="contentinfo"> <footer class="bg-neutral text-neutral-content" role="contentinfo">
<div class="max-w-7xl mx-auto px-6"> <div class="max-w-7xl mx-auto px-6">
<div class="text-center"> <div class="footer footer-center py-10">
<p class="text-base-content/80 font-medium"> <aside class="space-y-4">
<span class="sr-only">Copyright</span> <div class="flex items-center gap-2 text-2xl font-bold">
© {new Date().getFullYear()} - All rights reserved by { <span>🔥</span>
siteConfig.name <span>{siteConfig.name}</span>
</div>
<p class="text-neutral-content/70 max-w-md">
{siteConfig.description}
</p>
<nav class="flex gap-6">
{
siteConfig.header.nav.map(({ text, href }) => (
<a href={href} class="link link-hover text-neutral-content/70 hover:text-neutral-content transition-colors">
{text}
</a>
))
} }
</nav>
</aside>
</div>
<div class="border-t border-neutral-content/10 py-6">
<p class="text-center text-neutral-content/60 text-sm">
<span class="sr-only">Copyright</span>
© {new Date().getFullYear()} {siteConfig.name}. All rights reserved.
</p> </p>
</div> </div>
</div> </div>

22
src/components/Header.astro
View File

@@ -2,10 +2,11 @@
import { siteConfig } from "../config/site"; import { siteConfig } from "../config/site";
--- ---
<header class="navbar bg-base-100 shadow-lg" role="banner"> <header class="sticky top-0 z-50 backdrop-blur-lg bg-base-100/80 border-b border-base-200" role="banner">
<div class="navbar max-w-7xl mx-auto px-4 lg:px-6">
<div class="navbar-start"> <div class="navbar-start">
<div class="dropdown"> <div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden"> <div tabindex="0" role="button" class="btn btn-ghost btn-circle lg:hidden">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" class="h-5 w-5"
@@ -23,13 +24,13 @@ import { siteConfig } from "../config/site";
</div> </div>
<ul <ul
tabindex="0" tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow" class="menu menu-sm dropdown-content bg-base-100 rounded-xl z-50 mt-3 w-56 p-3 shadow-xl border border-base-200"
role="menu" role="menu"
> >
{ {
siteConfig.header.nav.map(({ text, href }) => ( siteConfig.header.nav.map(({ text, href }) => (
<li role="none"> <li role="none">
<a href={href} role="menuitem"> <a href={href} role="menuitem" class="py-3 px-4 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-colors">
{text} {text}
</a> </a>
</li> </li>
@@ -39,18 +40,20 @@ import { siteConfig } from "../config/site";
</div> </div>
<a <a
href={siteConfig.header.logo.href} href={siteConfig.header.logo.href}
class="btn btn-ghost text-xl" class="btn btn-ghost text-xl font-bold tracking-tight hover:bg-transparent hover:text-primary transition-colors"
aria-label="Home" aria-label="Home"
> >
{siteConfig.header.logo.text} <span class="text-primary">🔥</span>
<span class="hidden sm:inline">{siteConfig.header.logo.text}</span>
<span class="sm:hidden">Atash</span>
</a> </a>
</div> </div>
<nav class="navbar-center hidden lg:flex" aria-label="Main navigation"> <nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
<ul class="menu menu-horizontal px-1" role="menubar"> <ul class="menu menu-horizontal gap-1" role="menubar">
{ {
siteConfig.header.nav.map(({ text, href }) => ( siteConfig.header.nav.map(({ text, href }) => (
<li role="none"> <li role="none">
<a href={href} role="menuitem"> <a href={href} role="menuitem" class="font-medium px-4 py-2 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">
{text} {text}
</a> </a>
</li> </li>
@@ -61,10 +64,11 @@ import { siteConfig } from "../config/site";
<div class="navbar-end"> <div class="navbar-end">
<a <a
href={siteConfig.header.cta.href} href={siteConfig.header.cta.href}
class="btn btn-primary" class="btn btn-primary btn-sm lg:btn-md shadow-md hover:shadow-lg transition-all"
role="button" role="button"
> >
{siteConfig.header.cta.text} {siteConfig.header.cta.text}
</a> </a>
</div> </div>
</div>
</header> </header>

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

@@ -1,113 +1,71 @@
<section id="about" class="py-16 lg:py-24"> <section id="about" class="py-20 lg:py-28">
<div class="max-w-7xl mx-auto px-6"> <div class="max-w-7xl mx-auto px-6">
<div class="hero bg-base-200 rounded-2xl shadow-lg"> <div class="text-center mb-16">
<div class="hero-content text-center py-12 lg:py-16 px-6"> <span class="badge badge-secondary badge-lg font-semibold mb-4">Why Us</span>
<div class="max-w-4xl w-full space-y-8"> <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
<div class="space-y-4">
<div
class="inline-flex items-center gap-3 bg-secondary/10 text-secondary px-8 py-4 rounded-full text-2xl lg:text-3xl font-bold"
>
<svg
class="w-8 h-8"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
Why Choose Atash Consulting? Why Choose Atash Consulting?
</div> </h2>
</div> <p class="text-lg text-base-content/60 max-w-2xl mx-auto">
<p With over a decade of experience in the software industry, we bring deep
class="text-lg text-base-content/80 leading-relaxed max-w-3xl mx-auto" technical expertise and a commitment to excellence to every project.
>
With over a decade of experience in the software
industry, I bring deep technical expertise and a
commitment to excellence to every project.
</p> </p>
<div </div>
class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 mt-12"
> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center space-y-4"> <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">
<div <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center mx-auto shadow-lg" <svg class="w-8 h-8 text-primary" 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
class="w-8 h-8 text-primary-content"
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> </svg>
</div> </div>
<h3 class="text-xl font-bold text-base-content"> <h3 class="text-xl font-bold text-base-content mb-3">Fast Delivery</h3>
Fast Delivery <p class="text-base-content/60 leading-relaxed">
</h3>
<p class="text-base-content/70 leading-relaxed">
Quick turnaround without compromising quality Quick turnaround without compromising quality
</p> </p>
</div> </div>
<div class="text-center space-y-4">
<div <div class="group text-center p-8 rounded-2xl bg-base-100 border border-base-300/50 hover:border-secondary/30 hover:shadow-xl transition-all duration-300">
class="w-16 h-16 bg-secondary rounded-xl flex items-center justify-center mx-auto shadow-lg" <div class="w-16 h-16 bg-secondary/10 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
> <svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
class="w-8 h-8 text-secondary-content"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg> </svg>
</div> </div>
<h3 class="text-xl font-bold text-base-content"> <h3 class="text-xl font-bold text-base-content mb-3">Quality Assured</h3>
Quality Assured <p class="text-base-content/60 leading-relaxed">
</h3>
<p class="text-base-content/70 leading-relaxed">
Rigorous testing and quality control processes Rigorous testing and quality control processes
</p> </p>
</div> </div>
<div class="text-center space-y-4">
<div <div class="group text-center p-8 rounded-2xl bg-base-100 border border-base-300/50 hover:border-accent/30 hover:shadow-xl transition-all duration-300">
class="w-16 h-16 bg-accent rounded-xl flex items-center justify-center mx-auto shadow-lg" <div class="w-16 h-16 bg-accent/10 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
> <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
class="w-8 h-8 text-accent-content"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
></path>
</svg> </svg>
</div> </div>
<h3 class="text-xl font-bold text-base-content"> <h3 class="text-xl font-bold text-base-content mb-3">Expert Support</h3>
Expert Support <p class="text-base-content/60 leading-relaxed">
</h3>
<p class="text-base-content/70 leading-relaxed">
Ongoing support and maintenance services Ongoing support and maintenance services
</p> </p>
</div> </div>
</div> </div>
<div class="mt-20 p-8 lg:p-12 rounded-2xl bg-gradient-to-br from-neutral to-neutral/90">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center">
<div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">10+</div>
<div class="text-neutral-content/60 text-sm font-medium">Years Experience</div>
</div>
<div class="text-center">
<div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">50+</div>
<div class="text-neutral-content/60 text-sm font-medium">Projects Delivered</div>
</div>
<div class="text-center">
<div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">100%</div>
<div class="text-neutral-content/60 text-sm font-medium">Client Satisfaction</div>
</div>
<div class="text-center">
<div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">24/7</div>
<div class="text-neutral-content/60 text-sm font-medium">Support Available</div>
</div> </div>
</div> </div>
</div> </div>

166
src/components/sections/ContactSection.tsx
View File

@@ -61,140 +61,113 @@ ${message()}`,
}; };
return ( return (
<section id="contact" class="py-16 lg:py-24"> <section id="contact" class="py-20 lg:py-28 bg-base-200/50">
<div class="max-w-7xl mx-auto px-6"> <div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-12 lg:mb-16"> <div class="text-center mb-16">
<div class="inline-flex items-center gap-3 bg-accent/10 text-accent px-8 py-4 rounded-full text-2xl lg:text-3xl font-bold"> <span class="badge badge-accent badge-lg font-semibold mb-4">Contact</span>
<svg <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
class="w-8 h-8"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
></path>
</svg>
Get In Touch Get In Touch
</div> </h2>
<p class="text-lg text-base-content/70 max-w-2xl mx-auto leading-relaxed mt-6"> <p class="text-lg text-base-content/60 max-w-2xl mx-auto">
Ready to start your project? Let's discuss how I can help. Ready to start your project? Let's discuss how we can help.
</p> </p>
</div> </div>
<div class="max-w-2xl mx-auto"> <div class="max-w-2xl mx-auto">
<div class="card bg-base-100 shadow-xl border border-base-200 rounded-2xl"> <div class="card bg-base-100 border border-base-300/50 shadow-xl">
<div class="card-body p-6 lg:p-8"> <div class="card-body p-8 lg:p-10">
<form class="space-y-6" onSubmit={handleSubmit}> <form class="space-y-6" onSubmit={handleSubmit}>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="form-control"> <fieldset class="fieldset">
<label class="label"> <legend class="fieldset-legend text-sm font-semibold text-base-content">
<span class="label-text font-semibold text-base text-base-content">
First Name * First Name *
</span> </legend>
</label>
<input <input
type="text" type="text"
name="firstName" name="firstName"
class="input input-bordered w-full focus:input-primary" class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
required required
value={firstName()} value={firstName()}
onInput={(e) => setFirstName(e.currentTarget.value)} onInput={(e) => setFirstName(e.currentTarget.value)}
disabled={status() === "sending"} disabled={status() === "sending"}
placeholder="Enter your first name" placeholder="John"
/> />
</div> </fieldset>
<div class="form-control"> <fieldset class="fieldset">
<label class="label"> <legend class="fieldset-legend text-sm font-semibold text-base-content">
<span class="label-text font-semibold text-base text-base-content">
Last Name * Last Name *
</span> </legend>
</label>
<input <input
type="text" type="text"
name="lastName" name="lastName"
class="input input-bordered w-full focus:input-primary" class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
required required
value={lastName()} value={lastName()}
onInput={(e) => setLastName(e.currentTarget.value)} onInput={(e) => setLastName(e.currentTarget.value)}
disabled={status() === "sending"} disabled={status() === "sending"}
placeholder="Enter your last name" placeholder="Doe"
/> />
</div> </fieldset>
</div> </div>
<div class="form-control"> <fieldset class="fieldset">
<label class="label"> <legend class="fieldset-legend text-sm font-semibold text-base-content">
<span class="label-text font-semibold text-base text-base-content">
Email Address * Email Address *
</span> </legend>
</label>
<input <input
type="email" type="email"
name="email" name="email"
class="input input-bordered w-full focus:input-primary" class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
required required
value={email()} value={email()}
onInput={(e) => setEmail(e.currentTarget.value)} onInput={(e) => setEmail(e.currentTarget.value)}
disabled={status() === "sending"} disabled={status() === "sending"}
placeholder="your.email@example.com" placeholder="john@example.com"
/> />
</div> </fieldset>
<div class="form-control"> <fieldset class="fieldset">
<label class="label"> <legend class="fieldset-legend text-sm font-semibold text-base-content">
<span class="label-text font-semibold text-base text-base-content">
Company Company
</span> </legend>
</label>
<input <input
type="text" type="text"
name="company" name="company"
class="input input-bordered w-full focus:input-primary" class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
value={company()} value={company()}
onInput={(e) => setCompany(e.currentTarget.value)} onInput={(e) => setCompany(e.currentTarget.value)}
disabled={status() === "sending"} disabled={status() === "sending"}
placeholder="Your company name (optional)" placeholder="Your company name (optional)"
/> />
</div> </fieldset>
<div class="form-control"> <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<label class="label"> <fieldset class="fieldset">
<span class="label-text font-semibold text-base text-base-content"> <legend class="fieldset-legend text-sm font-semibold text-base-content">
Service Needed Service Needed
</span> </legend>
</label>
<select <select
name="service" name="service"
class="select select-bordered w-full focus:select-primary" class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
value={service()} value={service()}
onChange={(e) => setService(e.currentTarget.value)} onChange={(e) => setService(e.currentTarget.value)}
disabled={status() === "sending"} disabled={status() === "sending"}
> >
<option value="">Select a service...</option> <option value="">Select a service...</option>
<option value="web-development">Web Development</option> <option value="web-development">Web Development</option>
<option value="mobile-development"> <option value="mobile-development">Mobile App Development</option>
Mobile App Development
</option>
<option value="devops">DevOps</option> <option value="devops">DevOps</option>
<option value="it-support">IT Support Processes</option> <option value="it-support">IT Support Processes</option>
<option value="consultation">General Consultation</option> <option value="consultation">General Consultation</option>
</select> </select>
</div> </fieldset>
<fieldset class="fieldset">
<div class="form-control"> <legend class="fieldset-legend text-sm font-semibold text-base-content">
<label class="label">
<span class="label-text font-semibold text-base text-base-content">
Project Budget Project Budget
</span> </legend>
</label>
<select <select
name="budget" name="budget"
class="select select-bordered w-full focus:select-primary" class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
value={budget()} value={budget()}
onChange={(e) => setBudget(e.currentTarget.value)} onChange={(e) => setBudget(e.currentTarget.value)}
disabled={status() === "sending"} disabled={status() === "sending"}
@@ -205,31 +178,30 @@ ${message()}`,
<option value="15k-50k">$15,000 - $50,000</option> <option value="15k-50k">$15,000 - $50,000</option>
<option value="50k-plus">$50,000+</option> <option value="50k-plus">$50,000+</option>
</select> </select>
</fieldset>
</div> </div>
<div class="form-control"> <fieldset class="fieldset">
<label class="label" for="project-details"> <legend class="fieldset-legend text-sm font-semibold text-base-content">
<span class="label-text font-semibold text-base text-base-content">
Project Details * Project Details *
</span> </legend>
</label>
<textarea <textarea
id="project-details" id="project-details"
name="message" name="message"
class="textarea textarea-bordered h-32 w-full resize-none focus:textarea-primary" class="textarea textarea-bordered h-36 w-full resize-none bg-base-100 focus:border-primary focus:outline-primary"
placeholder="Tell me about your project requirements, timeline, and any specific needs..." placeholder="Tell me about your project requirements, timeline, and any specific needs..."
required required
value={message()} value={message()}
onInput={(e) => setMessage(e.currentTarget.value)} onInput={(e) => setMessage(e.currentTarget.value)}
disabled={status() === "sending"} disabled={status() === "sending"}
/> />
</div> </fieldset>
<Show when={status() === "error"}> <Show when={status() === "error"}>
<div class="alert alert-error"> <div role="alert" class="alert alert-error">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="stroke-current shrink-0 h-6 w-6" class="stroke-current shrink-0 h-5 w-5"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
@@ -240,18 +212,17 @@ ${message()}`,
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/> />
</svg> </svg>
<span> <span class="text-sm">
{errorMessage() || {errorMessage() || "Error sending message. Please try again."}
"Error sending message. Please try again."}
</span> </span>
</div> </div>
</Show> </Show>
<Show when={status() === "success"}> <Show when={status() === "success"}>
<div class="alert alert-success"> <div role="alert" class="alert alert-success">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="stroke-current shrink-0 h-6 w-6" class="stroke-current shrink-0 h-5 w-5"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
@@ -262,25 +233,24 @@ ${message()}`,
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/> />
</svg> </svg>
<span>Message sent successfully!</span> <span class="text-sm">Message sent successfully! We'll get back to you soon.</span>
</div> </div>
</Show> </Show>
<div class="form-control pt-4">
<button <button
type="submit" type="submit"
class="btn btn-primary btn-lg w-full" class="btn btn-primary btn-lg w-full shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300"
disabled={status() === "sending"} disabled={status() === "sending"}
> >
{status() === "sending" ? ( {status() === "sending" ? (
<> <>
<span class="loading loading-spinner"></span> <span class="loading loading-spinner loading-sm"></span>
Sending Message... Sending...
</> </>
) : ( ) : (
<> <>
<svg <svg
class="w-5 h-5 mr-2" class="w-5 h-5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -296,10 +266,22 @@ ${message()}`,
</> </>
)} )}
</button> </button>
</div>
</form> </form>
</div> </div>
</div> </div>
<div class="mt-10 text-center">
<p class="text-base-content/60 mb-4">Prefer to reach out directly?</p>
<a
href="mailto:hello@atash.dev"
class="link link-primary font-medium inline-flex items-center gap-2 hover:gap-3 transition-all"
>
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
hello@atash.dev
</a>
</div>
</div> </div>
</div> </div>
</section> </section>

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

@@ -2,49 +2,38 @@
import { siteConfig } from "../../config/site"; import { siteConfig } from "../../config/site";
--- ---
<section class="relative overflow-hidden py-12 lg:py-20"> <section class="relative overflow-hidden bg-neutral">
<div class="max-w-7xl mx-auto px-6"> <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="hero min-h-[65vh] bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-2xl shadow-xl relative" <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 <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">
class="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-secondary/20 rounded-2xl" <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>
<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
</div> Digital Solutions
<div <br class="hidden sm:block" />
class="hero-content text-center text-primary-content py-16 lg:py-20 px-8" That Drive Growth
>
<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> </h1>
<div
class="w-20 h-1 bg-accent mx-auto mb-6 rounded-full" <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
</div>
</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. solutions tailored to your business needs.
</p> </p>
<div
class="flex flex-col sm:flex-row gap-4 justify-center items-center" <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
>
<a <a
href="#contact" href="#contact"
class="btn btn-accent btn-lg text-accent-content hover:bg-accent/90 shadow-lg border-0" 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 <svg
class="w-5 h-5 mr-2" class="w-5 h-5 transition-transform group-hover:rotate-12"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -59,10 +48,10 @@ import { siteConfig } from "../../config/site";
</a> </a>
<a <a
href="#services" href="#services"
class="btn btn-outline btn-lg text-white border-white hover:bg-white hover:text-primary" 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 <svg
class="w-5 h-5 mr-2" class="w-5 h-5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -71,12 +60,34 @@ import { siteConfig } from "../../config/site";
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" 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" d="M19 9l-7 7-7-7"></path>
></path>
</svg> </svg>
View Services Explore Services
</a> </a>
</div> </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>
<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>
</div> </div>
</div> </div>

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

@@ -1,127 +1,57 @@
--- ---
import { siteConfig } from "../../config/site"; import { siteConfig } from "../../config/site";
const serviceIcons = [
`<svg class="w-6 h-6" 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" /></svg>`,
`<svg class="w-6 h-6" 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" /></svg>`,
`<svg class="w-6 h-6" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>`,
`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 109.75 9.75A9.75 9.75 0 0012 2.25z" /></svg>`,
];
--- ---
<section id="services" class="py-16 lg:py-24"> <section id="services" class="py-20 lg:py-28 bg-base-200/50">
<div class="max-w-7xl mx-auto px-6"> <div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-12 lg:mb-16"> <div class="text-center mb-16">
<div <span class="badge badge-primary badge-lg font-semibold mb-4">What We Do</span>
class="inline-flex items-center gap-3 bg-primary/10 text-primary px-8 py-4 rounded-full text-2xl lg:text-3xl font-bold" <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
>
<svg
class="w-8 h-8"
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>
Our Services Our Services
</div> </h2>
<p <p class="text-lg text-base-content/60 max-w-2xl mx-auto">
class="text-lg text-base-content/70 max-w-2xl mx-auto leading-relaxed mt-6" Comprehensive software solutions designed to drive your business forward
>
Comprehensive software solutions designed to drive your business
forward
</p> </p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{ {
siteConfig.featureCards.cards.map((card, index) => ( siteConfig.featureCards.cards.map((card, index) => (
<div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 border border-base-200 hover:border-primary/30 rounded-xl"> <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-6 lg:p-8"> <div class="card-body p-8">
<div class="flex items-start gap-4"> <div class="flex items-start gap-5">
<div <div
class={` class={`
w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0 flex-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 === "primary" ${card.variant === "secondary" ? "bg-secondary/10 text-secondary" : ""}
? "bg-primary text-primary-content" ${card.variant === "accent" ? "bg-accent/10 text-accent" : ""}
: card.variant === "secondary"
? "bg-secondary text-secondary-content"
: "bg-accent text-accent-content"
}
`} `}
> >
{index === 0 && ( <Fragment set:html={serviceIcons[index]} />
<svg
class="w-7 h-7"
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"
/>
</svg>
)}
{index === 1 && (
<svg
class="w-7 h-7"
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"
/>
</svg>
)}
{index === 2 && (
<svg
class="w-7 h-7"
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
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
)}
{index === 3 && (
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 109.75 9.75A9.75 9.75 0 0012 2.25z"
/>
</svg>
)}
</div> </div>
<div class="flex-1 space-y-3"> <div class="flex-1 space-y-3">
<h3 class="text-xl font-bold text-base-content"> <h3 class="text-xl font-bold text-base-content group-hover:text-primary transition-colors">
{card.title} {card.title}
</h3> </h3>
<p class="text-base-content/70 leading-relaxed"> <p class="text-base-content/60 leading-relaxed">
{card.content} {card.content}
</p> </p>
<div class="pt-2">
<a href="#contact" class="inline-flex items-center gap-2 text-primary font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Learn more
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

22
src/config/site.ts
View File

@@ -16,20 +16,24 @@ export const siteConfig = {
nav: [ nav: [
{ {
text: "Home", text: "Home",
href: "/", href: "#",
}, },
{ {
text: "Services", text: "Services",
href: "/services", href: "#services",
},
{
text: "About",
href: "#about",
}, },
{ {
text: "Contact", text: "Contact",
href: "/contact", href: "#contact",
}, },
], ],
cta: { cta: {
text: "Get Started", text: "Get Started",
href: "/contact", href: "#contact",
}, },
}, },
@@ -59,19 +63,19 @@ export const siteConfig = {
{ {
title: "IT Support Processes", title: "IT Support Processes",
content: content:
"I provide expert technical support expertise, backed by over a decade of client support experience.", "We provide expert technical support expertise, backed by over a decade of client support experience.",
variant: "primary", variant: "primary",
}, },
] as Card[], ] as Card[],
}, },
contact: { contact: {
title: "Contact Me", title: "Contact Us",
description: "Ready to get started? Reach out to me for a consultation.", description: "Ready to get started? Reach out to us for a consultation.",
cta: { cta: {
text: "Get in Touch", text: "Get in Touch",
href: "/contact", href: "#contact",
ariaLabel: "Contact me for consultation", ariaLabel: "Contact us for consultation",
}, },
}, },
} as const; } as const;

9
src/layouts/Layout.astro
View File

@@ -1,4 +1,5 @@
--- ---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import { siteConfig } from "../config/site"; import { siteConfig } from "../config/site";
import "../styles/global.css"; import "../styles/global.css";
@@ -19,7 +20,7 @@ const metaTitle =
<html lang="en" data-theme="light"> <html lang="en" data-theme="light">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link <link
rel="icon" rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔥</text></svg>" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔥</text></svg>"
@@ -27,8 +28,12 @@ const metaTitle =
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<title>{metaTitle}</title> <title>{metaTitle}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
</head> </head>
<body class="min-h-screen flex flex-col bg-base-100"> <body class="min-h-screen flex flex-col bg-base-100 font-sans antialiased">
<Header />
<main class="flex-grow"> <main class="flex-grow">
<slot /> <slot />
</main> </main>

11
src/styles/global.css
View File

@@ -26,9 +26,9 @@
--color-warning-content: oklch(20% 0 0); --color-warning-content: oklch(20% 0 0);
--color-error: oklch(60% 0.25 30); --color-error: oklch(60% 0.25 30);
--color-error-content: oklch(98% 0 0); --color-error-content: oklch(98% 0 0);
--radius-selector: 1rem; --radius-selector: 0.5rem;
--radius-field: 1rem; --radius-field: 0.5rem;
--radius-box: 1rem; --radius-box: 0.75rem;
--size-selector: 0.25rem; --size-selector: 0.25rem;
--size-field: 0.25rem; --size-field: 0.25rem;
--border: 1px; --border: 1px;
@@ -36,7 +36,10 @@
--noise: 0; --noise: 0;
} }
/* Only essential styles - all visual styling handled by Tailwind */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}