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