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
|
||||
|
||||
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",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"nix:run": "nix develop",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/node": "^9.2.2",
|
||||
"@astrojs/node": "^9.3.0",
|
||||
"@astrojs/solid-js": "^5.1.0",
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"astro": "^5.9.4",
|
||||
"nodemailer": "^7.0.3",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"astro": "^5.12.3",
|
||||
"nodemailer": "^7.0.5",
|
||||
"solid-js": "^1.9.7",
|
||||
"tailwindcss": "^4.1.10"
|
||||
"tailwindcss": "^4.1.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.0.3",
|
||||
"@types/node": "^24.1.0",
|
||||
"@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";
|
||||
---
|
||||
|
||||
<footer
|
||||
class="footer footer-center p-4 bg-base-300 text-base-content"
|
||||
role="contentinfo"
|
||||
>
|
||||
<aside>
|
||||
<p>
|
||||
<span class="sr-only">Copyright</span>
|
||||
© {new Date().getFullYear()} - All rights reserved by {
|
||||
siteConfig.name
|
||||
}
|
||||
</p>
|
||||
</aside>
|
||||
<footer class="bg-base-200 py-8" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center">
|
||||
<p class="text-base-content/80 font-medium">
|
||||
<span class="sr-only">Copyright</span>
|
||||
© {new Date().getFullYear()} - All rights reserved by {
|
||||
siteConfig.name
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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",
|
||||
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",
|
||||
},
|
||||
] as Card[],
|
||||
@@ -93,12 +93,12 @@ export const siteConfig = {
|
||||
},
|
||||
|
||||
contact: {
|
||||
title: "Contact Us",
|
||||
description: "Ready to get started? Reach out to us for a consultation.",
|
||||
title: "Contact Me",
|
||||
description: "Ready to get started? Reach out to me for a consultation.",
|
||||
cta: {
|
||||
text: "Get in Touch",
|
||||
href: "/contact",
|
||||
ariaLabel: "Contact us for consultation",
|
||||
ariaLabel: "Contact me for consultation",
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
|
||||
@@ -16,7 +16,7 @@ const metaTitle =
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
@@ -28,8 +28,8 @@ const metaTitle =
|
||||
<meta name="description" content={description} />
|
||||
<title>{metaTitle}</title>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
<main class="container mx-auto px-4 py-8 flex-grow">
|
||||
<body class="min-h-screen flex flex-col bg-base-100">
|
||||
<main class="flex-grow">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
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 = {
|
||||
title: siteConfig.name,
|
||||
@@ -10,290 +13,8 @@ const pageMetaInfo = {
|
||||
---
|
||||
|
||||
<Layout title={pageMetaInfo.title} description={pageMetaInfo.description}>
|
||||
<!-- Hero Section -->
|
||||
<section class="py-8 lg:py-16">
|
||||
<div class="max-w-6xl mx-auto px-4">
|
||||
<div
|
||||
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>
|
||||
<HeroSection />
|
||||
<ServicesSection />
|
||||
<AboutSection />
|
||||
<ContactSection client:load />
|
||||
</Layout>
|
||||
|
||||
@@ -9,23 +9,23 @@
|
||||
--color-base-100: oklch(98% 0 0);
|
||||
--color-base-200: oklch(95% 0 0);
|
||||
--color-base-300: oklch(91% 0 0);
|
||||
--color-base-content: oklch(0% 0 0);
|
||||
--color-primary: oklch(74% 0.16 232.661);
|
||||
--color-primary-content: oklch(0% 0 0);
|
||||
--color-secondary: oklch(50% 0.134 242.749);
|
||||
--color-secondary-content: oklch(98% 0.003 247.858);
|
||||
--color-accent: oklch(90% 0.058 230.902);
|
||||
--color-accent-content: oklch(18.556% 0.052 122.962);
|
||||
--color-neutral: oklch(42% 0.199 265.638);
|
||||
--color-neutral-content: oklch(84.262% 0.025 278.68);
|
||||
--color-info: oklch(60.72% 0.227 252.05);
|
||||
--color-info-content: oklch(12.144% 0.045 252.05);
|
||||
--color-success: oklch(85.72% 0.266 158.53);
|
||||
--color-success-content: oklch(17.144% 0.053 158.53);
|
||||
--color-warning: oklch(91.01% 0.212 100.5);
|
||||
--color-warning-content: oklch(18.202% 0.042 100.5);
|
||||
--color-error: oklch(64.84% 0.293 29.349);
|
||||
--color-error-content: oklch(12.968% 0.058 29.349);
|
||||
--color-base-content: oklch(20% 0 0);
|
||||
--color-primary: oklch(55% 0.25 250);
|
||||
--color-primary-content: oklch(98% 0 0);
|
||||
--color-secondary: oklch(40% 0.2 280);
|
||||
--color-secondary-content: oklch(98% 0 0);
|
||||
--color-accent: oklch(45% 0.2 320);
|
||||
--color-accent-content: oklch(98% 0 0);
|
||||
--color-neutral: oklch(35% 0.15 260);
|
||||
--color-neutral-content: oklch(95% 0 0);
|
||||
--color-info: oklch(60% 0.2 220);
|
||||
--color-info-content: oklch(98% 0 0);
|
||||
--color-success: oklch(65% 0.2 150);
|
||||
--color-success-content: oklch(98% 0 0);
|
||||
--color-warning: oklch(75% 0.2 80);
|
||||
--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;
|
||||
@@ -35,3 +35,8 @@
|
||||
--depth: 1;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
/* Only essential styles - all visual styling handled by Tailwind */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user