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";
---
<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="text-center">
<p class="text-base-content/80 font-medium">
<div class="footer footer-center py-10">
<aside class="space-y-4">
<div class="flex items-center gap-2 text-2xl font-bold">
<span>🔥</span>
<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()} - All rights reserved by {
siteConfig.name
}
© {new Date().getFullYear()} {siteConfig.name}. All rights reserved.
</p>
</div>
</div>

106
src/components/Header.astro
View File

@@ -2,69 +2,73 @@
import { siteConfig } from "../config/site";
---
<header class="navbar bg-base-100 shadow-lg" role="banner">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
<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="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
</div>
<ul
tabindex="0"
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"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
{
siteConfig.header.nav.map(({ text, href }) => (
<li role="none">
<a href={href} role="menuitem" class="py-3 px-4 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-colors">
{text}
</a>
</li>
))
}
</ul>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
role="menu"
<a
href={siteConfig.header.logo.href}
class="btn btn-ghost text-xl font-bold tracking-tight hover:bg-transparent hover:text-primary transition-colors"
aria-label="Home"
>
<span class="text-primary">🔥</span>
<span class="hidden sm:inline">{siteConfig.header.logo.text}</span>
<span class="sm:hidden">Atash</span>
</a>
</div>
<nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
<ul class="menu menu-horizontal gap-1" role="menubar">
{
siteConfig.header.nav.map(({ text, href }) => (
<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}
</a>
</li>
))
}
</ul>
</nav>
<div class="navbar-end">
<a
href={siteConfig.header.cta.href}
class="btn btn-primary btn-sm lg:btn-md shadow-md hover:shadow-lg transition-all"
role="button"
>
{siteConfig.header.cta.text}
</a>
</div>
<a
href={siteConfig.header.logo.href}
class="btn btn-ghost text-xl"
aria-label="Home"
>
{siteConfig.header.logo.text}
</a>
</div>
<nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
<ul class="menu menu-horizontal px-1" role="menubar">
{
siteConfig.header.nav.map(({ text, href }) => (
<li role="none">
<a href={href} role="menuitem">
{text}
</a>
</li>
))
}
</ul>
</nav>
<div class="navbar-end">
<a
href={siteConfig.header.cta.href}
class="btn btn-primary"
role="button"
>
{siteConfig.header.cta.text}
</a>
</div>
</header>

176
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="hero bg-base-200 rounded-2xl shadow-lg">
<div class="hero-content text-center py-12 lg:py-16 px-6">
<div class="max-w-4xl w-full space-y-8">
<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?
</div>
</div>
<p
class="text-lg text-base-content/80 leading-relaxed max-w-3xl mx-auto"
>
With over a decade of experience in the software
industry, I bring deep technical expertise and a
commitment to excellence to every project.
</p>
<div
class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 mt-12"
>
<div class="text-center space-y-4">
<div
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-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>
</div>
<h3 class="text-xl font-bold text-base-content">
Fast Delivery
</h3>
<p class="text-base-content/70 leading-relaxed">
Quick turnaround without compromising quality
</p>
</div>
<div class="text-center space-y-4">
<div
class="w-16 h-16 bg-secondary rounded-xl flex items-center justify-center mx-auto shadow-lg"
>
<svg
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>
</div>
<h3 class="text-xl font-bold text-base-content">
Quality Assured
</h3>
<p class="text-base-content/70 leading-relaxed">
Rigorous testing and quality control processes
</p>
</div>
<div class="text-center space-y-4">
<div
class="w-16 h-16 bg-accent rounded-xl flex items-center justify-center mx-auto shadow-lg"
>
<svg
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>
</div>
<h3 class="text-xl font-bold text-base-content">
Expert Support
</h3>
<p class="text-base-content/70 leading-relaxed">
Ongoing support and maintenance services
</p>
</div>
</div>
<div class="text-center mb-16">
<span class="badge badge-secondary badge-lg font-semibold mb-4">Why Us</span>
<h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
Why Choose Atash Consulting?
</h2>
<p class="text-lg text-base-content/60 max-w-2xl mx-auto">
With over a decade of experience in the software industry, we bring deep
technical expertise and a commitment to excellence to every project.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<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 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">
<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>
</div>
<h3 class="text-xl font-bold text-base-content mb-3">Fast Delivery</h3>
<p class="text-base-content/60 leading-relaxed">
Quick turnaround without compromising quality
</p>
</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">
<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">
<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>
</div>
<h3 class="text-xl font-bold text-base-content mb-3">Quality Assured</h3>
<p class="text-base-content/60 leading-relaxed">
Rigorous testing and quality control processes
</p>
</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">
<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">
<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>
</div>
<h3 class="text-xl font-bold text-base-content mb-3">Expert Support</h3>
<p class="text-base-content/60 leading-relaxed">
Ongoing support and maintenance services
</p>
</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>

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

@@ -61,175 +61,147 @@ ${message()}`,
};
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="text-center mb-12 lg: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">
<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="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>
<div class="text-center mb-16">
<span class="badge badge-accent badge-lg font-semibold mb-4">Contact</span>
<h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
Get In Touch
</div>
<p class="text-lg text-base-content/70 max-w-2xl mx-auto leading-relaxed mt-6">
Ready to start your project? Let's discuss how I can help.
</h2>
<p class="text-lg text-base-content/60 max-w-2xl mx-auto">
Ready to start your project? Let's discuss how we can help.
</p>
</div>
<div class="max-w-2xl mx-auto">
<div class="card bg-base-100 shadow-xl border border-base-200 rounded-2xl">
<div class="card-body p-6 lg:p-8">
<div class="card bg-base-100 border border-base-300/50 shadow-xl">
<div class="card-body p-8 lg:p-10">
<form class="space-y-6" onSubmit={handleSubmit}>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base text-base-content">
First Name *
</span>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<fieldset class="fieldset">
<legend class="fieldset-legend text-sm font-semibold text-base-content">
First Name *
</legend>
<input
type="text"
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
value={firstName()}
onInput={(e) => setFirstName(e.currentTarget.value)}
disabled={status() === "sending"}
placeholder="Enter your first name"
placeholder="John"
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base text-base-content">
Last Name *
</span>
</label>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-sm font-semibold text-base-content">
Last Name *
</legend>
<input
type="text"
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
value={lastName()}
onInput={(e) => setLastName(e.currentTarget.value)}
disabled={status() === "sending"}
placeholder="Enter your last name"
placeholder="Doe"
/>
</div>
</fieldset>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base text-base-content">
Email Address *
</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-sm font-semibold text-base-content">
Email Address *
</legend>
<input
type="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
value={email()}
onInput={(e) => setEmail(e.currentTarget.value)}
disabled={status() === "sending"}
placeholder="your.email@example.com"
placeholder="john@example.com"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base text-base-content">
Company
</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-sm font-semibold text-base-content">
Company
</legend>
<input
type="text"
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()}
onInput={(e) => setCompany(e.currentTarget.value)}
disabled={status() === "sending"}
placeholder="Your company name (optional)"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base text-base-content">
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<fieldset class="fieldset">
<legend class="fieldset-legend text-sm font-semibold text-base-content">
Service Needed
</span>
</label>
<select
name="service"
class="select select-bordered w-full focus:select-primary"
value={service()}
onChange={(e) => setService(e.currentTarget.value)}
disabled={status() === "sending"}
>
<option value="">Select a service...</option>
<option value="web-development">Web Development</option>
<option value="mobile-development">
Mobile App Development
</option>
<option value="devops">DevOps</option>
<option value="it-support">IT Support Processes</option>
<option value="consultation">General Consultation</option>
</select>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base text-base-content">
</legend>
<select
name="service"
class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
value={service()}
onChange={(e) => setService(e.currentTarget.value)}
disabled={status() === "sending"}
>
<option value="">Select a service...</option>
<option value="web-development">Web Development</option>
<option value="mobile-development">Mobile App Development</option>
<option value="devops">DevOps</option>
<option value="it-support">IT Support Processes</option>
<option value="consultation">General Consultation</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-sm font-semibold text-base-content">
Project Budget
</span>
</label>
<select
name="budget"
class="select select-bordered w-full focus:select-primary"
value={budget()}
onChange={(e) => setBudget(e.currentTarget.value)}
disabled={status() === "sending"}
>
<option value="">Select budget range...</option>
<option value="under-5k">Under $5,000</option>
<option value="5k-15k">$5,000 - $15,000</option>
<option value="15k-50k">$15,000 - $50,000</option>
<option value="50k-plus">$50,000+</option>
</select>
</legend>
<select
name="budget"
class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
value={budget()}
onChange={(e) => setBudget(e.currentTarget.value)}
disabled={status() === "sending"}
>
<option value="">Select budget range...</option>
<option value="under-5k">Under $5,000</option>
<option value="5k-15k">$5,000 - $15,000</option>
<option value="15k-50k">$15,000 - $50,000</option>
<option value="50k-plus">$50,000+</option>
</select>
</fieldset>
</div>
<div class="form-control">
<label class="label" for="project-details">
<span class="label-text font-semibold text-base text-base-content">
Project Details *
</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-sm font-semibold text-base-content">
Project Details *
</legend>
<textarea
id="project-details"
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..."
required
value={message()}
onInput={(e) => setMessage(e.currentTarget.value)}
disabled={status() === "sending"}
/>
</div>
</fieldset>
<Show when={status() === "error"}>
<div class="alert alert-error">
<div role="alert" class="alert alert-error">
<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"
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"
/>
</svg>
<span>
{errorMessage() ||
"Error sending message. Please try again."}
<span class="text-sm">
{errorMessage() || "Error sending message. Please try again."}
</span>
</div>
</Show>
<Show when={status() === "success"}>
<div class="alert alert-success">
<div role="alert" class="alert alert-success">
<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"
viewBox="0 0 24 24"
>
@@ -262,44 +233,55 @@ ${message()}`,
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Message sent successfully!</span>
<span class="text-sm">Message sent successfully! We'll get back to you soon.</span>
</div>
</Show>
<div class="form-control pt-4">
<button
type="submit"
class="btn btn-primary btn-lg w-full"
disabled={status() === "sending"}
>
{status() === "sending" ? (
<>
<span class="loading loading-spinner"></span>
Sending Message...
</>
) : (
<>
<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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
></path>
</svg>
Send Message
</>
)}
</button>
</div>
<button
type="submit"
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"}
>
{status() === "sending" ? (
<>
<span class="loading loading-spinner loading-sm"></span>
Sending...
</>
) : (
<>
<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 19l9 2-9-18-9 18 9-2zm0 0v-8"
></path>
</svg>
Send Message
</>
)}
</button>
</form>
</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>
</section>

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>

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

@@ -1,127 +1,57 @@
---
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="text-center mb-12 lg:mb-16">
<div
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"
>
<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>
<div class="text-center mb-16">
<span class="badge badge-primary badge-lg font-semibold mb-4">What We Do</span>
<h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
Our Services
</div>
<p
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
</h2>
<p class="text-lg text-base-content/60 max-w-2xl mx-auto">
Comprehensive software solutions designed to drive your business forward
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{
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="card-body p-6 lg:p-8">
<div class="flex items-start gap-4">
<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={`
w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0
${
card.variant === "primary"
? "bg-primary text-primary-content"
: card.variant === "secondary"
? "bg-secondary text-secondary-content"
: "bg-accent text-accent-content"
}
`}
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 === "secondary" ? "bg-secondary/10 text-secondary" : ""}
${card.variant === "accent" ? "bg-accent/10 text-accent" : ""}
`}
>
{index === 0 && (
<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>
)}
<Fragment set:html={serviceIcons[index]} />
</div>
<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}
</h3>
<p class="text-base-content/70 leading-relaxed">
<p class="text-base-content/60 leading-relaxed">
{card.content}
</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>

22
src/config/site.ts
View File

@@ -16,20 +16,24 @@ export const siteConfig = {
nav: [
{
text: "Home",
href: "/",
href: "#",
},
{
text: "Services",
href: "/services",
href: "#services",
},
{
text: "About",
href: "#about",
},
{
text: "Contact",
href: "/contact",
href: "#contact",
},
],
cta: {
text: "Get Started",
href: "/contact",
href: "#contact",
},
},
@@ -59,19 +63,19 @@ export const siteConfig = {
{
title: "IT Support Processes",
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",
},
] as Card[],
},
contact: {
title: "Contact Me",
description: "Ready to get started? Reach out to me for a consultation.",
title: "Contact Us",
description: "Ready to get started? Reach out to us for a consultation.",
cta: {
text: "Get in Touch",
href: "/contact",
ariaLabel: "Contact me for consultation",
href: "#contact",
ariaLabel: "Contact us for consultation",
},
},
} 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 { siteConfig } from "../config/site";
import "../styles/global.css";
@@ -19,7 +20,7 @@ const metaTitle =
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
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>"
@@ -27,8 +28,12 @@ const metaTitle =
<meta name="generator" content={Astro.generator} />
<meta name="description" content={description} />
<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>
<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">
<slot />
</main>

11
src/styles/global.css
View File

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