Fixed some wording
All checks were successful
Build and Deploy / build-and-push (push) Successful in 2m54s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 2m54s
This commit is contained in:
@@ -1,5 +1,13 @@
|
||||
import { createSignal, type Component } from "solid-js";
|
||||
import { Show } from "solid-js/web";
|
||||
import { Icon } from "solid-heroicons";
|
||||
import {
|
||||
xCircle,
|
||||
checkCircle,
|
||||
paperAirplane,
|
||||
envelope,
|
||||
} from "solid-heroicons/outline";
|
||||
import { siteConfig } from "../../config/site";
|
||||
|
||||
const ContactSection: Component = () => {
|
||||
const [firstName, setFirstName] = createSignal("");
|
||||
@@ -64,13 +72,10 @@ ${message()}`,
|
||||
<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-16">
|
||||
<span class="badge badge-accent badge-lg font-semibold mb-4">Contact</span>
|
||||
<span class="badge badge-accent badge-lg font-semibold mb-4">{siteConfig.contact.badge}</span>
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
|
||||
Get In Touch
|
||||
{siteConfig.contact.mainTitle}
|
||||
</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">
|
||||
@@ -80,7 +85,7 @@ ${message()}`,
|
||||
<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 *
|
||||
{siteConfig.contact.form.firstName}
|
||||
</legend>
|
||||
<input
|
||||
type="text"
|
||||
@@ -90,12 +95,12 @@ ${message()}`,
|
||||
value={firstName()}
|
||||
onInput={(e) => setFirstName(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
placeholder="John"
|
||||
placeholder={siteConfig.contact.form.placeholders.firstName}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-sm font-semibold text-base-content">
|
||||
Last Name *
|
||||
{siteConfig.contact.form.lastName}
|
||||
</legend>
|
||||
<input
|
||||
type="text"
|
||||
@@ -105,14 +110,14 @@ ${message()}`,
|
||||
value={lastName()}
|
||||
onInput={(e) => setLastName(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
placeholder="Doe"
|
||||
placeholder={siteConfig.contact.form.placeholders.lastName}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-sm font-semibold text-base-content">
|
||||
Email Address *
|
||||
{siteConfig.contact.form.email}
|
||||
</legend>
|
||||
<input
|
||||
type="email"
|
||||
@@ -122,13 +127,13 @@ ${message()}`,
|
||||
value={email()}
|
||||
onInput={(e) => setEmail(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
placeholder="john@example.com"
|
||||
placeholder={siteConfig.contact.form.placeholders.email}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-sm font-semibold text-base-content">
|
||||
Company
|
||||
{siteConfig.contact.form.company}
|
||||
</legend>
|
||||
<input
|
||||
type="text"
|
||||
@@ -137,59 +142,58 @@ ${message()}`,
|
||||
value={company()}
|
||||
onInput={(e) => setCompany(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
placeholder="Your company name (optional)"
|
||||
placeholder={siteConfig.contact.form.placeholders.company}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<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
|
||||
{siteConfig.contact.form.service}
|
||||
</legend>
|
||||
<select
|
||||
name="service"
|
||||
aria-label="Service Needed"
|
||||
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>
|
||||
<option value="">{siteConfig.contact.form.selectPlaceholders.service}</option>
|
||||
{siteConfig.contact.form.services.map((s) => (
|
||||
<option value={s.value}>{s.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-sm font-semibold text-base-content">
|
||||
Project Budget
|
||||
{siteConfig.contact.form.budget}
|
||||
</legend>
|
||||
<select
|
||||
name="budget"
|
||||
aria-label="Project 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>
|
||||
<option value="">{siteConfig.contact.form.selectPlaceholders.budget}</option>
|
||||
{siteConfig.contact.form.budgets.map((b) => (
|
||||
<option value={b.value}>{b.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-sm font-semibold text-base-content">
|
||||
Project Details *
|
||||
{siteConfig.contact.form.message}
|
||||
</legend>
|
||||
<textarea
|
||||
id="project-details"
|
||||
name="message"
|
||||
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..."
|
||||
placeholder={siteConfig.contact.form.placeholders.message}
|
||||
required
|
||||
value={message()}
|
||||
onInput={(e) => setMessage(e.currentTarget.value)}
|
||||
@@ -199,41 +203,17 @@ ${message()}`,
|
||||
|
||||
<Show when={status() === "error"}>
|
||||
<div role="alert" class="alert alert-error">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-5 w-5"
|
||||
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>
|
||||
<Icon path={xCircle} class="stroke-current shrink-0 h-5 w-5" />
|
||||
<span class="text-sm">
|
||||
{errorMessage() || "Error sending message. Please try again."}
|
||||
{errorMessage() || siteConfig.contact.form.error}
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={status() === "success"}>
|
||||
<div role="alert" class="alert alert-success">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-5 w-5"
|
||||
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 class="text-sm">Message sent successfully! We'll get back to you soon.</span>
|
||||
<Icon path={checkCircle} class="stroke-current shrink-0 h-5 w-5" />
|
||||
<span class="text-sm">{siteConfig.contact.form.success}</span>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
@@ -245,24 +225,12 @@ ${message()}`,
|
||||
{status() === "sending" ? (
|
||||
<>
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Sending...
|
||||
{siteConfig.contact.form.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
|
||||
<Icon path={paperAirplane} class="w-5 h-5" />
|
||||
{siteConfig.contact.form.submit}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
@@ -271,15 +239,13 @@ ${message()}`,
|
||||
</div>
|
||||
|
||||
<div class="mt-10 text-center">
|
||||
<p class="text-base-content/60 mb-4">Prefer to reach out directly?</p>
|
||||
<p class="text-base-content/60 mb-4">{siteConfig.contact.direct.text}</p>
|
||||
<a
|
||||
href="mailto:contact@atash.dev"
|
||||
class="link link-primary font-medium inline-flex items-center gap-2 hover:gap-3 transition-all"
|
||||
href={`mailto:${siteConfig.contact.direct.email}`}
|
||||
class="link font-medium inline-flex items-center gap-2 hover:gap-3 transition-all text-base-content hover:text-primary"
|
||||
>
|
||||
<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>
|
||||
contact@atash.dev
|
||||
<Icon path={envelope} class="w-5 h-5" />
|
||||
{siteConfig.contact.direct.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user