Visual and code overhaul, including Nix support
All checks were successful
Docker Deploy / build-and-push (push) Successful in 2m55s
All checks were successful
Docker Deploy / build-and-push (push) Successful in 2m55s
This commit is contained in:
@@ -1 +1,5 @@
|
|||||||
# Atash Website
|
# Atash Website
|
||||||
|
|
||||||
|
This project requires Nix with Flakes enabled.
|
||||||
|
|
||||||
|
Run ```nix develop``` in order to install dependencies. Then, use pnpm as normal.
|
||||||
|
|||||||
61
flake.lock
generated
Normal file
61
flake.lock
generated
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
{
|
||||||
|
"nodes": {
|
||||||
|
"flake-utils": {
|
||||||
|
"inputs": {
|
||||||
|
"systems": "systems"
|
||||||
|
},
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1731533236,
|
||||||
|
"narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "flake-utils",
|
||||||
|
"rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "flake-utils",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nixpkgs": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1753250450,
|
||||||
|
"narHash": "sha256-i+CQV2rPmP8wHxj0aq4siYyohHwVlsh40kV89f3nw1s=",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "fc02ee70efb805d3b2865908a13ddd4474557ecf",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "NixOS",
|
||||||
|
"ref": "nixos-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": {
|
||||||
|
"inputs": {
|
||||||
|
"flake-utils": "flake-utils",
|
||||||
|
"nixpkgs": "nixpkgs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"systems": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1681028828,
|
||||||
|
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
|
||||||
|
"owner": "nix-systems",
|
||||||
|
"repo": "default",
|
||||||
|
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "nix-systems",
|
||||||
|
"repo": "default",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "root",
|
||||||
|
"version": 7
|
||||||
|
}
|
||||||
33
flake.nix
Normal file
33
flake.nix
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
description = "Development environment for atashdotdev with Node and pnpm";
|
||||||
|
|
||||||
|
inputs = {
|
||||||
|
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
|
||||||
|
flake-utils.url = "github:numtide/flake-utils";
|
||||||
|
};
|
||||||
|
|
||||||
|
outputs = { self, nixpkgs, flake-utils }:
|
||||||
|
flake-utils.lib.eachDefaultSystem (system:
|
||||||
|
let
|
||||||
|
pkgs = nixpkgs.legacyPackages.${system};
|
||||||
|
in
|
||||||
|
{
|
||||||
|
devShells.default = pkgs.mkShell {
|
||||||
|
packages = with pkgs; [
|
||||||
|
nodejs_24
|
||||||
|
nodePackages.pnpm
|
||||||
|
];
|
||||||
|
|
||||||
|
shellHook = ''
|
||||||
|
echo "🚀 atashdotdev development environment loaded!"
|
||||||
|
echo "Node version: $(node --version)"
|
||||||
|
echo "pnpm version: $(pnpm --version)"
|
||||||
|
|
||||||
|
if [ ! -d "node_modules" ]; then
|
||||||
|
echo "📦 Installing pnpm dependencies..."
|
||||||
|
pnpm install --frozen-lockfile
|
||||||
|
fi
|
||||||
|
'';
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
17
package.json
17
package.json
@@ -1,25 +1,26 @@
|
|||||||
{
|
{
|
||||||
"name": "atashdotdev",
|
"name": "atashdotdev",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "1.0.0",
|
"version": "1.1.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
|
"nix:run": "nix develop",
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/node": "^9.2.2",
|
"@astrojs/node": "^9.3.0",
|
||||||
"@astrojs/solid-js": "^5.1.0",
|
"@astrojs/solid-js": "^5.1.0",
|
||||||
"@tailwindcss/vite": "^4.1.10",
|
"@tailwindcss/vite": "^4.1.11",
|
||||||
"astro": "^5.9.4",
|
"astro": "^5.12.3",
|
||||||
"nodemailer": "^7.0.3",
|
"nodemailer": "^7.0.5",
|
||||||
"solid-js": "^1.9.7",
|
"solid-js": "^1.9.7",
|
||||||
"tailwindcss": "^4.1.10"
|
"tailwindcss": "^4.1.11"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^24.0.3",
|
"@types/node": "^24.1.0",
|
||||||
"@types/nodemailer": "^6.4.17",
|
"@types/nodemailer": "^6.4.17",
|
||||||
"daisyui": "^5.0.43"
|
"daisyui": "^5.0.47"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
1041
pnpm-lock.yaml
generated
1041
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,254 +0,0 @@
|
|||||||
import { createSignal, type Component } from "solid-js";
|
|
||||||
import { Show } from "solid-js/web";
|
|
||||||
|
|
||||||
const ContactForm: Component = () => {
|
|
||||||
const [firstName, setFirstName] = createSignal("");
|
|
||||||
const [lastName, setLastName] = createSignal("");
|
|
||||||
const [email, setEmail] = createSignal("");
|
|
||||||
const [company, setCompany] = createSignal("");
|
|
||||||
const [service, setService] = createSignal("");
|
|
||||||
const [budget, setBudget] = createSignal("");
|
|
||||||
const [message, setMessage] = createSignal("");
|
|
||||||
const [status, setStatus] = createSignal<
|
|
||||||
"idle" | "sending" | "success" | "error"
|
|
||||||
>("idle");
|
|
||||||
const [errorMessage, setErrorMessage] = createSignal("");
|
|
||||||
|
|
||||||
const handleSubmit = async (e: Event) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setStatus("sending");
|
|
||||||
setErrorMessage("");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/contact", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
subject: `New Contact Form Message from ${firstName()} ${lastName()}`,
|
|
||||||
message: `From: ${firstName()} ${lastName()}
|
|
||||||
Email: ${email()}
|
|
||||||
Company: ${company() || "Not specified"}
|
|
||||||
Service Needed: ${service() || "Not specified"}
|
|
||||||
Budget: ${budget() || "Not specified"}
|
|
||||||
|
|
||||||
Project Details:
|
|
||||||
${message()}`,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(data.error || data.message || "Failed to send message");
|
|
||||||
}
|
|
||||||
|
|
||||||
setStatus("success");
|
|
||||||
setFirstName("");
|
|
||||||
setLastName("");
|
|
||||||
setEmail("");
|
|
||||||
setCompany("");
|
|
||||||
setService("");
|
|
||||||
setBudget("");
|
|
||||||
setMessage("");
|
|
||||||
setTimeout(() => setStatus("idle"), 3000);
|
|
||||||
} catch (error) {
|
|
||||||
setStatus("error");
|
|
||||||
setErrorMessage(
|
|
||||||
error instanceof Error ? error.message : "Failed to send message",
|
|
||||||
);
|
|
||||||
console.error("Submission error:", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form class="space-y-4 lg:space-y-6" onSubmit={handleSubmit}>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 lg:gap-4">
|
|
||||||
<div class="form-control">
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text font-semibold text-sm lg:text-base">
|
|
||||||
First Name *
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="firstName"
|
|
||||||
class="input input-bordered input-sm lg:input-md w-full"
|
|
||||||
required
|
|
||||||
value={firstName()}
|
|
||||||
onInput={(e) => setFirstName(e.currentTarget.value)}
|
|
||||||
disabled={status() === "sending"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-control">
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text font-semibold text-sm lg:text-base">
|
|
||||||
Last Name *
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="lastName"
|
|
||||||
class="input input-bordered input-sm lg:input-md w-full"
|
|
||||||
required
|
|
||||||
value={lastName()}
|
|
||||||
onInput={(e) => setLastName(e.currentTarget.value)}
|
|
||||||
disabled={status() === "sending"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-control">
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text font-semibold text-sm lg:text-base">
|
|
||||||
Email Address *
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
class="input input-bordered input-sm lg:input-md w-full"
|
|
||||||
required
|
|
||||||
value={email()}
|
|
||||||
onInput={(e) => setEmail(e.currentTarget.value)}
|
|
||||||
disabled={status() === "sending"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-control">
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text font-semibold text-sm lg:text-base">
|
|
||||||
Company
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="company"
|
|
||||||
class="input input-bordered input-sm lg:input-md w-full"
|
|
||||||
value={company()}
|
|
||||||
onInput={(e) => setCompany(e.currentTarget.value)}
|
|
||||||
disabled={status() === "sending"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-control">
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text font-semibold text-sm lg:text-base">
|
|
||||||
Service Needed
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
name="service"
|
|
||||||
class="select select-bordered select-sm lg:select-md w-full"
|
|
||||||
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-sm lg:text-base">
|
|
||||||
Project Budget
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
name="budget"
|
|
||||||
class="select select-bordered select-sm lg:select-md w-full"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-control">
|
|
||||||
<label class="label" for="project-details">
|
|
||||||
<span class="label-text font-semibold text-sm lg:text-base">
|
|
||||||
Project Details *
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="project-details"
|
|
||||||
name="message"
|
|
||||||
class="textarea textarea-bordered textarea-sm lg:textarea-md h-24 lg:h-32 w-full resize-none"
|
|
||||||
placeholder="Tell us about your project requirements, timeline, and any specific needs..."
|
|
||||||
required
|
|
||||||
value={message()}
|
|
||||||
onInput={(e) => setMessage(e.currentTarget.value)}
|
|
||||||
disabled={status() === "sending"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Show when={status() === "error"}>
|
|
||||||
<div class="alert alert-error">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class="stroke-current shrink-0 h-6 w-6"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={status() === "success"}>
|
|
||||||
<div class="alert alert-success">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class="stroke-current shrink-0 h-6 w-6"
|
|
||||||
fill="none"
|
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>Message sent successfully!</span>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<div class="form-control pt-2 lg:pt-4">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary btn-md lg:btn-lg w-full"
|
|
||||||
disabled={status() === "sending"}
|
|
||||||
>
|
|
||||||
{status() === "sending" ? (
|
|
||||||
<>
|
|
||||||
<span class="loading loading-spinner"></span>
|
|
||||||
Sending...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
"Send Message"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContactForm;
|
|
||||||
@@ -2,16 +2,15 @@
|
|||||||
import { siteConfig } from "../config/site";
|
import { siteConfig } from "../config/site";
|
||||||
---
|
---
|
||||||
|
|
||||||
<footer
|
<footer class="bg-base-200 py-8" role="contentinfo">
|
||||||
class="footer footer-center p-4 bg-base-300 text-base-content"
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
role="contentinfo"
|
<div class="text-center">
|
||||||
>
|
<p class="text-base-content/80 font-medium">
|
||||||
<aside>
|
<span class="sr-only">Copyright</span>
|
||||||
<p>
|
© {new Date().getFullYear()} - All rights reserved by {
|
||||||
<span class="sr-only">Copyright</span>
|
siteConfig.name
|
||||||
© {new Date().getFullYear()} - All rights reserved by {
|
}
|
||||||
siteConfig.name
|
</p>
|
||||||
}
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</aside>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
115
src/components/sections/AboutSection.astro
Normal file
115
src/components/sections/AboutSection.astro
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
<section id="about" class="py-16 lg:py-24">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
309
src/components/sections/ContactSection.tsx
Normal file
309
src/components/sections/ContactSection.tsx
Normal file
@@ -0,0 +1,309 @@
|
|||||||
|
import { createSignal, type Component } from "solid-js";
|
||||||
|
import { Show } from "solid-js/web";
|
||||||
|
|
||||||
|
const ContactSection: Component = () => {
|
||||||
|
const [firstName, setFirstName] = createSignal("");
|
||||||
|
const [lastName, setLastName] = createSignal("");
|
||||||
|
const [email, setEmail] = createSignal("");
|
||||||
|
const [company, setCompany] = createSignal("");
|
||||||
|
const [service, setService] = createSignal("");
|
||||||
|
const [budget, setBudget] = createSignal("");
|
||||||
|
const [message, setMessage] = createSignal("");
|
||||||
|
const [status, setStatus] = createSignal<
|
||||||
|
"idle" | "sending" | "success" | "error"
|
||||||
|
>("idle");
|
||||||
|
const [errorMessage, setErrorMessage] = createSignal("");
|
||||||
|
|
||||||
|
const handleSubmit = async (e: Event) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setStatus("sending");
|
||||||
|
setErrorMessage("");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/contact", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
subject: `New Contact Form Message from ${firstName()} ${lastName()}`,
|
||||||
|
message: `From: ${firstName()} ${lastName()}
|
||||||
|
Email: ${email()}
|
||||||
|
Company: ${company() || "Not specified"}
|
||||||
|
Service Needed: ${service() || "Not specified"}
|
||||||
|
Budget: ${budget() || "Not specified"}
|
||||||
|
|
||||||
|
Project Details:
|
||||||
|
${message()}`,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(data.error || data.message || "Failed to send message");
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus("success");
|
||||||
|
setFirstName("");
|
||||||
|
setLastName("");
|
||||||
|
setEmail("");
|
||||||
|
setCompany("");
|
||||||
|
setService("");
|
||||||
|
setBudget("");
|
||||||
|
setMessage("");
|
||||||
|
setTimeout(() => setStatus("idle"), 3000);
|
||||||
|
} catch (error) {
|
||||||
|
setStatus("error");
|
||||||
|
setErrorMessage(
|
||||||
|
error instanceof Error ? error.message : "Failed to send message",
|
||||||
|
);
|
||||||
|
console.error("Submission error:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="contact" class="py-16 lg:py-24">
|
||||||
|
<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>
|
||||||
|
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.
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="firstName"
|
||||||
|
class="input input-bordered w-full focus:input-primary"
|
||||||
|
required
|
||||||
|
value={firstName()}
|
||||||
|
onInput={(e) => setFirstName(e.currentTarget.value)}
|
||||||
|
disabled={status() === "sending"}
|
||||||
|
placeholder="Enter your first name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-control">
|
||||||
|
<label class="label">
|
||||||
|
<span class="label-text font-semibold text-base text-base-content">
|
||||||
|
Last Name *
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="lastName"
|
||||||
|
class="input input-bordered w-full focus:input-primary"
|
||||||
|
required
|
||||||
|
value={lastName()}
|
||||||
|
onInput={(e) => setLastName(e.currentTarget.value)}
|
||||||
|
disabled={status() === "sending"}
|
||||||
|
placeholder="Enter your last name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control">
|
||||||
|
<label class="label">
|
||||||
|
<span class="label-text font-semibold text-base text-base-content">
|
||||||
|
Email Address *
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
class="input input-bordered w-full focus:input-primary"
|
||||||
|
required
|
||||||
|
value={email()}
|
||||||
|
onInput={(e) => setEmail(e.currentTarget.value)}
|
||||||
|
disabled={status() === "sending"}
|
||||||
|
placeholder="your.email@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control">
|
||||||
|
<label class="label">
|
||||||
|
<span class="label-text font-semibold text-base text-base-content">
|
||||||
|
Company
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="company"
|
||||||
|
class="input input-bordered w-full focus:input-primary"
|
||||||
|
value={company()}
|
||||||
|
onInput={(e) => setCompany(e.currentTarget.value)}
|
||||||
|
disabled={status() === "sending"}
|
||||||
|
placeholder="Your company name (optional)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control">
|
||||||
|
<label class="label">
|
||||||
|
<span class="label-text font-semibold text-base 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">
|
||||||
|
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>
|
||||||
|
</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>
|
||||||
|
<textarea
|
||||||
|
id="project-details"
|
||||||
|
name="message"
|
||||||
|
class="textarea textarea-bordered h-32 w-full resize-none focus:textarea-primary"
|
||||||
|
placeholder="Tell us about your project requirements, timeline, and any specific needs..."
|
||||||
|
required
|
||||||
|
value={message()}
|
||||||
|
onInput={(e) => setMessage(e.currentTarget.value)}
|
||||||
|
disabled={status() === "sending"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Show when={status() === "error"}>
|
||||||
|
<div class="alert alert-error">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="stroke-current shrink-0 h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<Show when={status() === "success"}>
|
||||||
|
<div class="alert alert-success">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="stroke-current shrink-0 h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>Message sent successfully!</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>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContactSection;
|
||||||
84
src/components/sections/HeroSection.astro
Normal file
84
src/components/sections/HeroSection.astro
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
---
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-black/5 rounded-2xl"
|
||||||
|
>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
133
src/components/sections/ServicesSection.astro
Normal file
133
src/components/sections/ServicesSection.astro
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
---
|
||||||
|
import { siteConfig } from "../../config/site";
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="services" class="py-16 lg:py-24">
|
||||||
|
<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>
|
||||||
|
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
|
||||||
|
</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={`
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 space-y-3">
|
||||||
|
<h3 class="text-xl font-bold text-base-content">
|
||||||
|
{card.title}
|
||||||
|
</h3>
|
||||||
|
<p class="text-base-content/70 leading-relaxed">
|
||||||
|
{card.content}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -71,7 +71,7 @@ export const siteConfig = {
|
|||||||
{
|
{
|
||||||
title: "IT Support Processes",
|
title: "IT Support Processes",
|
||||||
content:
|
content:
|
||||||
"Providing expert technical support expertise, backed by over a decade of client support experience.",
|
"I provide expert technical support expertise, backed by over a decade of client support experience.",
|
||||||
variant: "primary",
|
variant: "primary",
|
||||||
},
|
},
|
||||||
] as Card[],
|
] as Card[],
|
||||||
@@ -93,12 +93,12 @@ export const siteConfig = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
contact: {
|
contact: {
|
||||||
title: "Contact Us",
|
title: "Contact Me",
|
||||||
description: "Ready to get started? Reach out to us for a consultation.",
|
description: "Ready to get started? Reach out to me for a consultation.",
|
||||||
cta: {
|
cta: {
|
||||||
text: "Get in Touch",
|
text: "Get in Touch",
|
||||||
href: "/contact",
|
href: "/contact",
|
||||||
ariaLabel: "Contact us for consultation",
|
ariaLabel: "Contact me for consultation",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ const metaTitle =
|
|||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<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" />
|
||||||
@@ -28,8 +28,8 @@ const metaTitle =
|
|||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
<title>{metaTitle}</title>
|
<title>{metaTitle}</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="min-h-screen flex flex-col">
|
<body class="min-h-screen flex flex-col bg-base-100">
|
||||||
<main class="container mx-auto px-4 py-8 flex-grow">
|
<main class="flex-grow">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import { siteConfig } from "../config/site";
|
import { siteConfig } from "../config/site";
|
||||||
import ContactForm from "../components/ContactForm.tsx";
|
import HeroSection from "../components/sections/HeroSection.astro";
|
||||||
|
import ServicesSection from "../components/sections/ServicesSection.astro";
|
||||||
|
import AboutSection from "../components/sections/AboutSection.astro";
|
||||||
|
import ContactSection from "../components/sections/ContactSection.tsx";
|
||||||
|
|
||||||
const pageMetaInfo = {
|
const pageMetaInfo = {
|
||||||
title: siteConfig.name,
|
title: siteConfig.name,
|
||||||
@@ -10,290 +13,8 @@ const pageMetaInfo = {
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={pageMetaInfo.title} description={pageMetaInfo.description}>
|
<Layout title={pageMetaInfo.title} description={pageMetaInfo.description}>
|
||||||
<!-- Hero Section -->
|
<HeroSection />
|
||||||
<section class="py-8 lg:py-16">
|
<ServicesSection />
|
||||||
<div class="max-w-6xl mx-auto px-4">
|
<AboutSection />
|
||||||
<div
|
<ContactSection client:load />
|
||||||
class="hero bg-gradient-to-br from-primary to-secondary rounded-xl lg:rounded-2xl"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="hero-content text-center text-primary-content py-8 lg:py-16 px-4"
|
|
||||||
>
|
|
||||||
<div class="max-w-4xl w-full">
|
|
||||||
<h1
|
|
||||||
class="text-4xl sm:text-6xl lg:text-8xl font-bold mb-4 lg:mb-6 leading-tight"
|
|
||||||
>
|
|
||||||
{siteConfig.name}
|
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
class="text-base sm:text-lg lg:text-xl mb-6 lg:mb-8 opacity-90 max-w-2xl mx-auto leading-relaxed"
|
|
||||||
>
|
|
||||||
{siteConfig.hero.description} — Delivering reliable,
|
|
||||||
scalable solutions tailored to your business needs.
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row gap-3 lg:gap-4 justify-center"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#contact"
|
|
||||||
class="btn btn-secondary btn-md lg:btn-lg text-white border-white"
|
|
||||||
>
|
|
||||||
Start Your Project
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#services"
|
|
||||||
class="btn btn-secondary btn-md lg:btn-lg text-white border-white"
|
|
||||||
>
|
|
||||||
View Services
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="max-w-6xl mx-auto px-4">
|
|
||||||
<!-- Services Grid -->
|
|
||||||
<section id="services" class="mb-16 lg:mb-20">
|
|
||||||
<div class="text-center mb-8 lg:mb-12">
|
|
||||||
<h2
|
|
||||||
class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 lg:mb-4"
|
|
||||||
>
|
|
||||||
Our Services
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-base lg:text-lg text-base-content/70 max-w-2xl mx-auto px-4"
|
|
||||||
>
|
|
||||||
Comprehensive software solutions designed to drive your
|
|
||||||
business forward
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
|
|
||||||
{
|
|
||||||
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">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div
|
|
||||||
class={`
|
|
||||||
w-12 h-12 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"
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
{index === 0 && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{index === 1 && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{index === 2 && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{index === 3 && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="card-title text-xl mb-3">
|
|
||||||
{card.title}
|
|
||||||
</h3>
|
|
||||||
<p class="text-base-content/70 leading-relaxed">
|
|
||||||
{card.content}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- About Section -->
|
|
||||||
<section class="mb-16 lg:mb-20">
|
|
||||||
<div class="hero bg-base-200 rounded-xl lg:rounded-2xl">
|
|
||||||
<div class="hero-content text-center py-12 lg:py-16 px-4">
|
|
||||||
<div class="max-w-3xl w-full">
|
|
||||||
<h2 class="text-2xl sm:text-3xl font-bold mb-4 lg:mb-6">
|
|
||||||
Why Choose Atash Consulting?
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-base lg:text-lg mb-6 lg:mb-8 text-base-content/80 leading-relaxed"
|
|
||||||
>
|
|
||||||
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
|
|
||||||
class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6 mt-6 lg:mt-8"
|
|
||||||
>
|
|
||||||
<div class="text-center">
|
|
||||||
<div
|
|
||||||
class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4"
|
|
||||||
>
|
|
||||||
<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="font-semibold mb-2">
|
|
||||||
Fast Delivery
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-base-content/70">
|
|
||||||
Quick turnaround without compromising
|
|
||||||
quality
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center">
|
|
||||||
<div
|
|
||||||
class="w-16 h-16 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4"
|
|
||||||
>
|
|
||||||
<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="font-semibold mb-2">
|
|
||||||
Quality Assured
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-base-content/70">
|
|
||||||
Rigorous testing and quality control
|
|
||||||
processes
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center">
|
|
||||||
<div
|
|
||||||
class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4"
|
|
||||||
>
|
|
||||||
<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="font-semibold mb-2">
|
|
||||||
Expert Support
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-base-content/70">
|
|
||||||
Ongoing support and maintenance services
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Contact Section -->
|
|
||||||
<section id="contact" class="mb-16 lg:mb-20">
|
|
||||||
<div class="text-center mb-8 lg:mb-12">
|
|
||||||
<h2
|
|
||||||
class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 lg:mb-4"
|
|
||||||
>
|
|
||||||
Get In Touch
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-base lg:text-lg text-base-content/70 max-w-2xl mx-auto px-4"
|
|
||||||
>
|
|
||||||
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">
|
|
||||||
<div class="card-body">
|
|
||||||
<ContactForm client:load />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -9,23 +9,23 @@
|
|||||||
--color-base-100: oklch(98% 0 0);
|
--color-base-100: oklch(98% 0 0);
|
||||||
--color-base-200: oklch(95% 0 0);
|
--color-base-200: oklch(95% 0 0);
|
||||||
--color-base-300: oklch(91% 0 0);
|
--color-base-300: oklch(91% 0 0);
|
||||||
--color-base-content: oklch(0% 0 0);
|
--color-base-content: oklch(20% 0 0);
|
||||||
--color-primary: oklch(74% 0.16 232.661);
|
--color-primary: oklch(55% 0.25 250);
|
||||||
--color-primary-content: oklch(0% 0 0);
|
--color-primary-content: oklch(98% 0 0);
|
||||||
--color-secondary: oklch(50% 0.134 242.749);
|
--color-secondary: oklch(40% 0.2 280);
|
||||||
--color-secondary-content: oklch(98% 0.003 247.858);
|
--color-secondary-content: oklch(98% 0 0);
|
||||||
--color-accent: oklch(90% 0.058 230.902);
|
--color-accent: oklch(45% 0.2 320);
|
||||||
--color-accent-content: oklch(18.556% 0.052 122.962);
|
--color-accent-content: oklch(98% 0 0);
|
||||||
--color-neutral: oklch(42% 0.199 265.638);
|
--color-neutral: oklch(35% 0.15 260);
|
||||||
--color-neutral-content: oklch(84.262% 0.025 278.68);
|
--color-neutral-content: oklch(95% 0 0);
|
||||||
--color-info: oklch(60.72% 0.227 252.05);
|
--color-info: oklch(60% 0.2 220);
|
||||||
--color-info-content: oklch(12.144% 0.045 252.05);
|
--color-info-content: oklch(98% 0 0);
|
||||||
--color-success: oklch(85.72% 0.266 158.53);
|
--color-success: oklch(65% 0.2 150);
|
||||||
--color-success-content: oklch(17.144% 0.053 158.53);
|
--color-success-content: oklch(98% 0 0);
|
||||||
--color-warning: oklch(91.01% 0.212 100.5);
|
--color-warning: oklch(75% 0.2 80);
|
||||||
--color-warning-content: oklch(18.202% 0.042 100.5);
|
--color-warning-content: oklch(20% 0 0);
|
||||||
--color-error: oklch(64.84% 0.293 29.349);
|
--color-error: oklch(60% 0.25 30);
|
||||||
--color-error-content: oklch(12.968% 0.058 29.349);
|
--color-error-content: oklch(98% 0 0);
|
||||||
--radius-selector: 1rem;
|
--radius-selector: 1rem;
|
||||||
--radius-field: 1rem;
|
--radius-field: 1rem;
|
||||||
--radius-box: 1rem;
|
--radius-box: 1rem;
|
||||||
@@ -35,3 +35,8 @@
|
|||||||
--depth: 1;
|
--depth: 1;
|
||||||
--noise: 0;
|
--noise: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Only essential styles - all visual styling handled by Tailwind */
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user