update home page
This commit is contained in:
171
components/shared/ContactFormSection.tsx
Normal file
171
components/shared/ContactFormSection.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { siteConfig } from "@/data/site-config";
|
||||
import { SectionHeading } from "@/components/shared/SectionHeading";
|
||||
import { SocialIcons } from "@/components/shared/SocialIcons";
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
||||
|
||||
/**
|
||||
* ContactFormSection — dark card with contact info + form.
|
||||
*
|
||||
* Shared by: About page (section 8) and Contacts page (section 2).
|
||||
* Single implementation — avoids duplicated markup.
|
||||
*
|
||||
* Data sourced from `data/site-config.ts`.
|
||||
*/
|
||||
export function ContactFormSection() {
|
||||
const [formState, setFormState] = useState({
|
||||
fullName: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
// Form submission logic will be implemented later
|
||||
}
|
||||
|
||||
function handleChange(
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) {
|
||||
setFormState((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionContainer paddingY="lg" className="bg-aiero-dark px-5">
|
||||
<div className="overflow-hidden rounded-[25px] bg-aiero-card-dark">
|
||||
<PageContainer className="grid grid-cols-1 gap-12 py-16 md:py-20 lg:grid-cols-2 lg:gap-16 lg:py-24">
|
||||
{/* ── Left: Info column ── */}
|
||||
<div className="flex flex-col">
|
||||
<SectionHeading
|
||||
tag="get in touch"
|
||||
title="We are always ready to help you and answer your questions"
|
||||
titleClassName="text-white"
|
||||
description="Pacific hake false trevally queen parrotfish black prickleback mosshead warbonnet sweeper! Greenling sleeper."
|
||||
/>
|
||||
|
||||
{/* Contact details grid */}
|
||||
<div className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
||||
{/* Call Center */}
|
||||
<div>
|
||||
<h6 className="mb-3 font-sora text-sm font-semibold text-white">
|
||||
Call Center
|
||||
</h6>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
href={`tel:${siteConfig.phoneRaw}`}
|
||||
className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
|
||||
>
|
||||
{siteConfig.phone}
|
||||
</a>
|
||||
<a
|
||||
href="tel:+11800234567"
|
||||
className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
|
||||
>
|
||||
+ (123) 1800-234-5678
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Our Location */}
|
||||
<div>
|
||||
<h6 className="mb-3 font-sora text-sm font-semibold text-white">
|
||||
Our Location
|
||||
</h6>
|
||||
<p className="text-[15px] leading-relaxed text-aiero-text-muted">
|
||||
{siteConfig.address.line1}
|
||||
<br />
|
||||
{siteConfig.address.line2}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<h6 className="mb-3 font-sora text-sm font-semibold text-white">
|
||||
Email
|
||||
</h6>
|
||||
<a
|
||||
href={`mailto:${siteConfig.email}`}
|
||||
className="text-[15px] text-aiero-text-muted underline transition-colors hover:text-aiero-teal"
|
||||
>
|
||||
{siteConfig.email}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Social */}
|
||||
<div>
|
||||
<h6 className="mb-3 font-sora text-sm font-semibold text-white">
|
||||
Social network
|
||||
</h6>
|
||||
<SocialIcons links={siteConfig.socials} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Right: Form column ── */}
|
||||
<div className="rounded-[25px] bg-white p-8 md:p-10">
|
||||
<h4
|
||||
className="mb-8 text-aiero-dark"
|
||||
style={{
|
||||
fontFamily: "var(--font-sora)",
|
||||
fontSize: "28px",
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
Get in Touch
|
||||
</h4>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-5">
|
||||
<input
|
||||
type="text"
|
||||
name="fullName"
|
||||
placeholder="Full name"
|
||||
value={formState.fullName}
|
||||
onChange={handleChange}
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
required
|
||||
value={formState.email}
|
||||
onChange={handleChange}
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
placeholder="Subject"
|
||||
value={formState.subject}
|
||||
onChange={handleChange}
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
/>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
rows={4}
|
||||
value={formState.message}
|
||||
onChange={handleChange}
|
||||
className="resize-none rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="aiero-button aiero-button-gradient-border mt-2 self-start rounded-full px-8 py-4 font-sora text-base font-semibold text-aiero-dark"
|
||||
>
|
||||
Send message
|
||||
<ArrowIcon className="h-3 w-3" />
|
||||
<span className="button-inner" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</div>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user