Add contact and about pages with shared CTA buttons.
Wire forms to the Meshkee contact API, tighten page-title spacing, and polish outline button hover so it fades cleanly. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
b0ba7b1de8
commit
e6404eaaec
@@ -0,0 +1,147 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ContentPageShell } from "@/components/ContentPageShell";
|
||||
import { ContactForm } from "@/components/ContactForm";
|
||||
import { site, socials } from "@/data/home";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "تماس با ما",
|
||||
description:
|
||||
"با تیم مشکی در تماس باشید — فرم تماس، تلفن، ایمیل و آدرس دفتر قم.",
|
||||
alternates: { canonical: "/contact" },
|
||||
};
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ContentPageShell flushTop>
|
||||
<section>
|
||||
<div className="page-title-band">
|
||||
<div className="relative mx-auto max-w-7xl px-5 pb-9 pt-[calc(var(--header-height)+0.15rem)] lg:px-8 lg:pb-12 lg:pt-[calc(var(--header-height)+0.3rem)]">
|
||||
<p
|
||||
aria-hidden
|
||||
className="latin pointer-events-none absolute inset-x-5 top-[calc(var(--header-height)+0.5rem)] z-0 text-[clamp(1.75rem,5.5vw,3.75rem)] font-light uppercase leading-none tracking-[0.05em] text-ink/[0.07] lg:inset-x-8 lg:top-[calc(var(--header-height)+0.65rem)]"
|
||||
>
|
||||
Contact
|
||||
</p>
|
||||
<div className="reveal relative z-10 max-w-2xl">
|
||||
<h1 className="whitespace-normal text-[clamp(1.35rem,3.6vw,2.75rem)] font-normal leading-tight tracking-tight text-ink">
|
||||
تماس با ما
|
||||
</h1>
|
||||
<p className="mt-1 text-sm leading-6 text-muted md:text-base">
|
||||
سوالی دارید یا میخواهید پروژهتان را شروع کنید؟ با تیم مشکی در
|
||||
تماس باشید.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex min-h-[calc(100svh-var(--header-height)-7.5rem)] items-center overflow-hidden bg-[linear-gradient(180deg,#fafafa_0%,#eef1f5_45%,#f3f5f7_100%)] py-16 lg:py-20">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_80%_20%,rgba(196,77,184,0.1),transparent_50%)]" />
|
||||
|
||||
<div className="relative mx-auto grid w-full max-w-7xl items-center gap-14 px-5 lg:grid-cols-[1fr_1.1fr] lg:gap-16 lg:px-8">
|
||||
<div className="reveal flex min-w-0 flex-col gap-8">
|
||||
<div className="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-4 gap-y-6">
|
||||
<span className="text-sm text-muted">شماره تماس</span>
|
||||
<a
|
||||
href={site.phoneHref}
|
||||
className="latin link-hover justify-self-start text-lg font-medium tracking-tight text-ink md:text-xl"
|
||||
dir="ltr"
|
||||
>
|
||||
{site.phone}
|
||||
</a>
|
||||
|
||||
<span className="text-sm text-muted">ایمیل</span>
|
||||
<a
|
||||
href={`mailto:${site.email}`}
|
||||
className="latin link-hover justify-self-start text-sm text-ink-soft md:text-base"
|
||||
dir="ltr"
|
||||
>
|
||||
{site.email}
|
||||
</a>
|
||||
|
||||
<span className="text-sm text-muted">آدرس</span>
|
||||
<a
|
||||
href={site.mapUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link-hover justify-self-start text-start text-sm leading-7 text-ink-soft md:text-base md:leading-8"
|
||||
>
|
||||
{site.address}
|
||||
</a>
|
||||
|
||||
<span className="pt-1 text-sm text-muted">شبکههای اجتماعی</span>
|
||||
<div className="flex flex-wrap items-center justify-start gap-3 pt-1">
|
||||
{socials.map((social) => (
|
||||
<a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={social.label}
|
||||
title={social.label}
|
||||
className="flex h-11 w-11 items-center justify-center rounded-full border border-line/70 bg-white/60 text-ink-soft shadow-[0_8px_20px_rgba(14,17,22,0.04)] backdrop-blur-sm transition hover:border-ink/20 hover:text-ink"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="h-4 w-4"
|
||||
aria-hidden
|
||||
>
|
||||
<path d={social.icon} />
|
||||
</svg>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-hidden rounded-[1.5rem] border border-line/70 bg-white/50 shadow-[0_16px_40px_rgba(14,17,22,0.05)] backdrop-blur-sm">
|
||||
<div className="relative aspect-[16/10] w-full overflow-hidden sm:aspect-[2/1]">
|
||||
<iframe
|
||||
title="موقعیت دفتر مشکی روی نقشه"
|
||||
src={`https://maps.google.com/maps?q=${site.mapLat},${site.mapLng}&z=16&hl=fa&output=embed`}
|
||||
className="absolute inset-0 h-full w-full border-0"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href={site.mapUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="absolute bottom-3 inset-inline-3 inline-flex max-w-max items-center gap-2 rounded-full border border-white/70 bg-white/90 px-3.5 py-2 text-sm text-ink shadow-sm backdrop-blur-md transition hover:bg-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="h-4 w-4 shrink-0 text-accent"
|
||||
aria-hidden
|
||||
>
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z" />
|
||||
</svg>
|
||||
مشاهده روی نقشه
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="reveal reveal-delay-1 relative min-w-0 overflow-hidden rounded-[1.75rem] border border-white/70 bg-white/45 p-5 shadow-[0_20px_50px_rgba(14,17,22,0.06)] backdrop-blur-xl sm:p-6 md:p-8">
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-0 bg-[linear-gradient(145deg,rgba(255,255,255,0.75)_0%,rgba(255,255,255,0.2)_40%,transparent_70%)]"
|
||||
/>
|
||||
<div className="relative">
|
||||
<h2 className="mb-2 text-xl font-normal text-ink md:text-2xl">
|
||||
فرم تماس
|
||||
</h2>
|
||||
<p className="mb-8 text-sm text-muted">
|
||||
ما همیشه دنبال دوستای جدید هستیم.
|
||||
</p>
|
||||
|
||||
<ContactForm variant="light" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</ContentPageShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user