Create Saman Andish industrial website
Build a responsive Persian Next.js experience with product discovery and dedicated company contact pages. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowLeft, CheckCircle2 } from "lucide-react";
|
||||
import type { FormEvent } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ContactForm() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const submit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
if (submitted) {
|
||||
return (
|
||||
<div className="contact-success">
|
||||
<CheckCircle2 />
|
||||
<h3>پیام شما ثبت شد</h3>
|
||||
<p>کارشناسان سامان اندیش در اولین فرصت با شما تماس خواهند گرفت.</p>
|
||||
<button onClick={() => setSubmitted(false)}>ارسال پیام دیگر</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="contact-form" onSubmit={submit}>
|
||||
<div className="form-row">
|
||||
<label>
|
||||
نام و نام خانوادگی
|
||||
<input name="name" placeholder="نام شما" required />
|
||||
</label>
|
||||
<label>
|
||||
شماره تماس
|
||||
<input
|
||||
name="phone"
|
||||
inputMode="tel"
|
||||
placeholder="09xx xxx xxxx"
|
||||
dir="ltr"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label>
|
||||
ایمیل
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="name@company.com"
|
||||
dir="ltr"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
موضوع درخواست
|
||||
<select name="subject" defaultValue="">
|
||||
<option value="" disabled>
|
||||
انتخاب کنید
|
||||
</option>
|
||||
<option>خرید ماشین‌آلات</option>
|
||||
<option>خدمات فنی و مهندسی</option>
|
||||
<option>تأمین مواد اولیه</option>
|
||||
<option>همکاری تجاری</option>
|
||||
<option>سایر موارد</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
پیام شما
|
||||
<textarea
|
||||
name="message"
|
||||
rows={6}
|
||||
placeholder="درباره دستگاه، برند، ظرفیت تولید یا خدمات مورد نیاز توضیح دهید..."
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<button type="submit">
|
||||
ارسال درخواست
|
||||
<ArrowLeft size={18} />
|
||||
</button>
|
||||
<small>
|
||||
با ارسال فرم، کارشناسان ما برای تکمیل اطلاعات با شما تماس می‌گیرند.
|
||||
</small>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import type { Metadata } from "next";
|
||||
import {
|
||||
Clock3,
|
||||
ExternalLink,
|
||||
Mail,
|
||||
MapPin,
|
||||
MessageCircle,
|
||||
Phone,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { InteriorFooter, InteriorHeader } from "../components/InteriorShell";
|
||||
import ContactForm from "./ContactForm";
|
||||
|
||||
const assetBase =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/SamanAndish_OcHaRXRqAo/assets/files";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "تماس با سامان اندیش | مشاوره ماشین‌آلات صنعتی",
|
||||
description:
|
||||
"برای مشاوره خرید ماشین‌آلات، خدمات فنی و تأمین مواد اولیه صنعت سیم و کابل با کارشناسان سامان اندیش تماس بگیرید.",
|
||||
};
|
||||
|
||||
export default function ContactUsPage() {
|
||||
return (
|
||||
<main>
|
||||
<InteriorHeader active="contact" />
|
||||
|
||||
<section
|
||||
className="inner-hero inner-hero--contact"
|
||||
style={{ backgroundImage: `url("${assetBase}/ZLxH2tZ4dR.jpg")` }}
|
||||
>
|
||||
<div className="inner-hero__shade" />
|
||||
<div className="container inner-hero__content">
|
||||
<span>GET IN TOUCH</span>
|
||||
<h1>تماس با ما</h1>
|
||||
<p>برای انتخاب بهترین راهکار صنعتی، کنار شما هستیم</p>
|
||||
<div>
|
||||
<Link href="/">صفحه اصلی</Link>
|
||||
<i>/</i>
|
||||
<strong>تماس با ما</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="contact-info">
|
||||
<div className="container contact-info__grid">
|
||||
<a href="tel:+982188530256">
|
||||
<span>
|
||||
<Phone />
|
||||
</span>
|
||||
<div>
|
||||
<small>تماس مستقیم</small>
|
||||
<strong dir="ltr">021 8853 0256</strong>
|
||||
<p>پاسخ‌گویی شنبه تا چهارشنبه</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="mailto:info@samanandish.com">
|
||||
<span>
|
||||
<Mail />
|
||||
</span>
|
||||
<div>
|
||||
<small>ایمیل سازمانی</small>
|
||||
<strong>info@samanandish.com</strong>
|
||||
<p>برای ارسال مشخصات فنی و پیشنهادات</p>
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<span>
|
||||
<MapPin />
|
||||
</span>
|
||||
<div>
|
||||
<small>دفتر مرکزی</small>
|
||||
<strong>تهران، خیابان مطهری</strong>
|
||||
<p>خیابان ترکمنستان، دفتر سامان اندیش</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="contact-main">
|
||||
<div className="container contact-main__grid">
|
||||
<div className="contact-main__copy">
|
||||
<span className="inner-eyebrow">SEND A MESSAGE</span>
|
||||
<h2>درخواست خود را با ما در میان بگذارید</h2>
|
||||
<p>
|
||||
برای استعلام ماشین‌آلات، دریافت مشاوره فنی یا شروع همکاری، فرم را
|
||||
تکمیل کنید. اطلاعات شما مستقیماً به تیم مرتبط ارجاع می‌شود.
|
||||
</p>
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
<aside className="contact-aside">
|
||||
<div className="contact-aside__image">
|
||||
<img src={`${assetBase}/rf3fNjazCx.png`} alt="موقعیت سامان اندیش" />
|
||||
<a
|
||||
href="https://www.google.com/maps/place/Saman+Andish/@35.7424283,51.4396725,17z"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
مشاهده در نقشه
|
||||
<ExternalLink size={16} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="office-hours">
|
||||
<h3>
|
||||
<Clock3 />
|
||||
ساعت کاری
|
||||
</h3>
|
||||
<div>
|
||||
<span>شنبه تا چهارشنبه</span>
|
||||
<strong>۸:۳۰ تا ۱۷:۰۰</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>پنج‌شنبه</span>
|
||||
<strong>با هماهنگی قبلی</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>جمعه</span>
|
||||
<strong>تعطیل</strong>
|
||||
</div>
|
||||
</div>
|
||||
<a className="quick-contact" href="tel:+982188530256">
|
||||
<MessageCircle />
|
||||
<span>
|
||||
<small>نیاز به پاسخ سریع دارید؟</small>
|
||||
<strong>همین حالا تماس بگیرید</strong>
|
||||
</span>
|
||||
</a>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="contact-departments">
|
||||
<div className="container">
|
||||
<div className="inner-section-title">
|
||||
<span>DIRECT CONTACT</span>
|
||||
<h2>ارتباط با واحدهای تخصصی</h2>
|
||||
</div>
|
||||
<div>
|
||||
{[
|
||||
["فروش ماشین‌آلات", "machinery@samanandish.com", "داخلی ۱۰۱"],
|
||||
["خدمات فنی", "service@samanandish.com", "داخلی ۱۰۲"],
|
||||
["همکاری تجاری", "commerce@samanandish.com", "داخلی ۱۰۳"],
|
||||
].map(([title, email, extension]) => (
|
||||
<article key={title}>
|
||||
<small>{extension}</small>
|
||||
<h3>{title}</h3>
|
||||
<a href={`mailto:${email}`}>{email}</a>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<InteriorFooter />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user