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

Visual and code overhaul, including Nix support
All checks were successful
Docker Deploy / build-and-push (push) Successful in 2m55s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2025-07-25 21:45:28 -06:00
parent 10926a00a8
commit 8cf1d5c2e1
15 changed files with 1316 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/components/sections/ContactSection.tsx Normal file
View 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;