From e6404eaaec4724392678a8bbeccc601c3aa8cb8a Mon Sep 17 00:00:00 2001 From: Alireza Hassani Date: Fri, 18 Sep 2026 17:54:34 +0330 Subject: [PATCH] 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 --- src/app/about/page.tsx | 207 ++++++++++++++++++++++++++++ src/app/api/contact/route.ts | 43 ++++++ src/app/blog/[slug]/page.tsx | 4 +- src/app/contact/page.tsx | 147 ++++++++++++++++++++ src/app/globals.css | 117 +++++++++++++++- src/app/instruction/[slug]/page.tsx | 4 +- src/app/instruction/page.tsx | 4 +- src/app/portfolio/[slug]/page.tsx | 4 +- src/app/portfolio/page.tsx | 4 +- src/components/AppSection.tsx | 2 +- src/components/Button.tsx | 108 +++++++++++++++ src/components/CmsSection.tsx | 4 +- src/components/ContactForm.tsx | 155 +++++++++++++++++++++ src/components/ContactSection.tsx | 50 ++----- src/components/Footer.tsx | 20 ++- src/components/Header.tsx | 73 +++++----- src/data/home.ts | 31 +++++ 17 files changed, 880 insertions(+), 97 deletions(-) create mode 100644 src/app/about/page.tsx create mode 100644 src/app/api/contact/route.ts create mode 100644 src/app/contact/page.tsx create mode 100644 src/components/Button.tsx create mode 100644 src/components/ContactForm.tsx diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..b07f970 --- /dev/null +++ b/src/app/about/page.tsx @@ -0,0 +1,207 @@ +import type { Metadata } from "next"; +import Link from "next/link"; +import { Button } from "@/components/Button"; +import { ContentPageShell } from "@/components/ContentPageShell"; +import { images } from "@/data/assets"; +import { services, site } from "@/data/home"; + +export const metadata: Metadata = { + title: "درباره ما", + description: + "آشنایی با تیم برنامه‌نویسی و تجارت الکترونیک مشکی — طراحی وبسایت، اپلیکیشن، CMS، سئو و گرافیک.", + alternates: { canonical: "/about" }, +}; + +const highlights = [ + { + title: "تیم متخصص", + body: "برای هر بخش — از گرافیک و برنامه‌نویسی تا سرور و سئو — متخصص جداگانه‌ای کنار پروژه‌تان می‌ماند.", + }, + { + title: "یکپارچگی کامل", + body: "وبسایت، اپلیکیشن و سیستم‌های مدیریتی طوری طراحی می‌شوند که با هم کار کنند، نه جدا از هم.", + }, + { + title: "رشد پایدار", + body: "از طراحی اولیه تا سئو و مدیریت محتوا، مسیر رشد برند آنلاین شما را همراهی می‌کنیم.", + }, +]; + +const stats = [ + { value: "112+", label: "وبسایت" }, + { value: "28+", label: "لوگو و هویت بصری" }, + { value: "7+", label: "اپلیکیشن" }, +]; + +export default function AboutPage() { + return ( + +
+
+
+

+ About +

+
+

+ درباره ما +

+

+ تیم برنامه‌نویسی و تجارت الکترونیک مشکی — راهکارهای مدرن برای + تجارت شما. +

+
+
+
+ +
+
+
+

ما کی هستیم؟

+

+ {site.fullTitle} +

+

+ مشکی یک تیم تخصصی در حوزه طراحی و توسعه محصولات دیجیتال است. ما + کنار کسب‌وکارها می‌ایستیم تا وبسایت، اپلیکیشن، سیستم مدیریتی و + هویت بصری‌شان را از ایده تا اجرا پیش ببریم. +

+

+ دفتر ما در قم است و پروژه‌ها را با تمرکز روی کیفیت فنی، تجربه + کاربری و رشد پایدار جلو می‌بریم — نه فقط تحویل یک محصول، بلکه + ساخت مسیری برای فروش و حضور آنلاین قوی‌تر. +

+
+ + +
+
+ +
+
+
+ {site.fullTitle} +
+
+
+ +
+
+ {stats.map((stat) => ( +
+

+ {stat.value} +

+ +

{stat.label}

+
+ ))} +
+
+ +
+
+

+ چطور کار می‌کنیم؟ +

+

+ سه اصل ساده که در همه پروژه‌های مشکی ثابت می‌ماند. +

+
+ +
+ {highlights.map((item, index) => ( +
+

+ 0{index + 1} +

+

+ {item.title} +

+

{item.body}

+
+ ))} +
+
+ +
+
+
+

+ خدمات ما +

+

+ از ایده تا اجرا، هر بخشی که برای حضور دیجیتال نیاز دارید. +

+
+ +
    + {services.map((service, index) => ( +
  • + +

    + {service.title} +

    +

    + {service.titleEn} +

    + +
    • + ))} +
+ +
+
+

+ آماده‌اید پروژه بعدی را شروع کنید؟ +

+

+ از طریق فرم تماس یا شماره{" "} + + {site.phone} + {" "} + با ما در ارتباط باشید. +

+
+ +
+
+
+
+
+ + ); +} diff --git a/src/app/api/contact/route.ts b/src/app/api/contact/route.ts new file mode 100644 index 0000000..60f811b --- /dev/null +++ b/src/app/api/contact/route.ts @@ -0,0 +1,43 @@ +import { NextResponse } from "next/server"; +import { SITE_DOMAIN } from "@/lib/api"; + +const API_BASE_URL = "https://api.meshkee.com/api/v1"; + +export async function POST(request: Request) { + const body = (await request.json()) as { + title?: string; + name?: string; + email?: string; + cellNumber?: string; + text?: string; + }; + + if (!body.title?.trim() || !body.name?.trim() || !body.text?.trim()) { + return NextResponse.json( + { message: "نام، موضوع و متن پیام الزامی است." }, + { status: 400 }, + ); + } + + const response = await fetch( + `${API_BASE_URL}/tenants/${SITE_DOMAIN}/contact-submissions`, + { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + title: body.title.trim(), + name: body.name.trim(), + email: body.email?.trim() || undefined, + cellNumber: body.cellNumber?.trim() || undefined, + text: body.text.trim(), + }), + cache: "no-store", + }, + ); + + const data = await response.json().catch(() => ({})); + return NextResponse.json(data, { status: response.status }); +} diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx index 8334a61..058073f 100644 --- a/src/app/blog/[slug]/page.tsx +++ b/src/app/blog/[slug]/page.tsx @@ -84,10 +84,10 @@ export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
-
+

{titleEn}

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx new file mode 100644 index 0000000..e09d202 --- /dev/null +++ b/src/app/contact/page.tsx @@ -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 ( + +
+
+
+

+ Contact +

+
+

+ تماس با ما +

+

+ سوالی دارید یا می‌خواهید پروژه‌تان را شروع کنید؟ با تیم مشکی در + تماس باشید. +

+
+
+
+ +
+
+ +
+
+
+ شماره تماس + + {site.phone} + + + ایمیل + + {site.email} + + + آدرس + + {site.address} + + + شبکه‌های اجتماعی +
+ {socials.map((social) => ( + + + + + + ))} +
+
+ +
+
+