Initial commit of the Dr Asadian Next.js site.
Persian RTL clinic site with Meshkee blog, auth, sitemap config, and on-page SEO. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,222 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
import HeroSlider from "@/components/HeroSlider";
|
||||
import Reveal from "@/components/Reveal";
|
||||
import SectionHeading from "@/components/SectionHeading";
|
||||
import { articles, serviceIcons, site, testimonials } from "@/data/site";
|
||||
import { blogExcerpt, blogHref, blogImage, fetchBlogs } from "@/lib/blog";
|
||||
import { formatFaDate } from "@/lib/format";
|
||||
import { pageMetadata } from "@/lib/seo";
|
||||
|
||||
export const revalidate = 60;
|
||||
|
||||
export const metadata = pageMetadata({
|
||||
title: `${site.doctorName} | مطب پوست، مو و زیبایی در قم`,
|
||||
description: site.description,
|
||||
path: "/",
|
||||
image: "/images/banners/banner-1.jpg",
|
||||
});
|
||||
|
||||
function StarIcon() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M12 2.5l2.7 6.4 6.8.6-5.2 4.5 1.6 6.6L12 16.9 6.1 20.6l1.6-6.6L2.5 9.5l6.8-.6L12 2.5z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function HomePage() {
|
||||
const latest = await fetchBlogs({ page: 1, pageSize: 8 });
|
||||
const posts = latest.items.slice(0, 8);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Reveal className="reveal-solo" delay={40}>
|
||||
<HeroSlider />
|
||||
</Reveal>
|
||||
|
||||
<Reveal className="home-intro reveal-solo">
|
||||
<div className="container">
|
||||
<h1>{site.fullName}</h1>
|
||||
<p>{site.description}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal as="section" className="section" id="services" delay={80}>
|
||||
<div className="container">
|
||||
<div className="stagger-child" style={{ "--i": 0 } as CSSProperties}>
|
||||
<SectionHeading title="خدمــات تخصصــی مطــب" kicker="Specialized Services" />
|
||||
</div>
|
||||
<div className="service-icons">
|
||||
{serviceIcons.map((item, i) => (
|
||||
<Link
|
||||
key={item.src}
|
||||
href={item.href}
|
||||
className="service-icon stagger-child"
|
||||
style={{ "--i": i + 1 } as CSSProperties}
|
||||
>
|
||||
<Image src={item.src} alt={item.alt} width={150} height={150} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal as="section" className="section-tight" id="articles">
|
||||
<div className="container">
|
||||
<div className="stagger-child" style={{ "--i": 0 } as CSSProperties}>
|
||||
<SectionHeading title="دربـاره سلامــت پوســت و مو بیشتــر بدانید" kicker="Article" />
|
||||
</div>
|
||||
{posts.length > 0 ? (
|
||||
<>
|
||||
<div className="articles-grid">
|
||||
{posts.map((post, i) => (
|
||||
<Link
|
||||
key={post.id}
|
||||
href={blogHref(post)}
|
||||
className="article-card article-card--link stagger-child"
|
||||
style={{ "--i": i + 1 } as CSSProperties}
|
||||
>
|
||||
<Image src={blogImage(post)} alt={post.title} width={780} height={520} />
|
||||
<div className="body">
|
||||
<h3>{post.title}</h3>
|
||||
<span className="kicker">
|
||||
{formatFaDate(post.publishedAt || post.createdAt) || "Article"}
|
||||
</span>
|
||||
{blogExcerpt(post) ? <p>{blogExcerpt(post)}</p> : null}
|
||||
<span className="more" aria-hidden>
|
||||
‹
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="section-cta stagger-child" style={{ "--i": posts.length + 1 } as CSSProperties}>
|
||||
<Link href="/blog" className="btn btn-dark">
|
||||
مشاهده همه مقالات
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="articles-grid">
|
||||
{articles.map((article, i) => (
|
||||
<Link
|
||||
key={article.title}
|
||||
href="/blog"
|
||||
className="article-card article-card--link stagger-child"
|
||||
style={{ "--i": i + 1 } as CSSProperties}
|
||||
>
|
||||
<Image src={article.src} alt={article.title} width={780} height={780} />
|
||||
<div className="body">
|
||||
<h3>{article.title}</h3>
|
||||
<span className="kicker">{article.kicker}</span>
|
||||
<p>{article.body}</p>
|
||||
<span className="more" aria-hidden>
|
||||
‹
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal as="section" className="section">
|
||||
<div className="container">
|
||||
<div className="stagger-child" style={{ "--i": 0 } as CSSProperties}>
|
||||
<SectionHeading title="خدمــات تخصصــی مطــب" kicker="Specialized Services" />
|
||||
</div>
|
||||
<div className="testimonials-grid">
|
||||
{testimonials.map((item, i) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="stagger-child"
|
||||
style={{ "--i": i + 1 } as CSSProperties}
|
||||
>
|
||||
<Image
|
||||
className="testimonial-photo"
|
||||
src={item.src}
|
||||
alt={`نمونه کار ${item.title} در مطب دکتر اسدیان`}
|
||||
width={101}
|
||||
height={101}
|
||||
/>
|
||||
<div className="testimonial-quote">
|
||||
<p>{item.body}</p>
|
||||
<div className="testimonial-meta">
|
||||
<StarIcon />
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal as="section" className="section-tight">
|
||||
<div className="container two-col">
|
||||
<div className="skin-copy stagger-child" style={{ "--i": 0 } as CSSProperties}>
|
||||
<SectionHeading title="ترمیــم پوســت" kicker="Skin Repair" />
|
||||
<p>
|
||||
زمانیکه پوست آسیب میبیند، از طریق ترمیم بافت آسیب دیده و جایگزین ساختن بافت از دست رفته با
|
||||
سلولهای جدید، پاسخ میدهد. طی روند ترمیم، بافت مرده یا آسیب دیده، ابتدا توسط بافت اسکار و به
|
||||
تدریج با سلولهای جدید سالم جایگزین میشود.
|
||||
</p>
|
||||
<Link href="/about" className="btn btn-dark">
|
||||
درباره ما
|
||||
</Link>
|
||||
</div>
|
||||
<div className="yoga-shadow stagger-child" style={{ "--i": 1 } as CSSProperties}>
|
||||
<Image
|
||||
src="/images/about/skin-repair.jpg"
|
||||
alt="ترمیم پوست در مطب دکتر محمد اسدیان"
|
||||
width={780}
|
||||
height={780}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal as="section" className="about-cta">
|
||||
<div className="container">
|
||||
<Image
|
||||
className="deco stagger-child"
|
||||
style={{ "--i": 0 } as CSSProperties}
|
||||
src="/images/about/deco.png"
|
||||
alt=""
|
||||
width={274}
|
||||
height={293}
|
||||
/>
|
||||
<h2 className="stagger-child" style={{ "--i": 1 } as CSSProperties}>
|
||||
با مــراجعه به مطـب دکــتر محمد اســدیان از کلیـه
|
||||
<br />
|
||||
خدمــات زیبایی با قیمــتی مناســب بهره منــد شویـد.
|
||||
</h2>
|
||||
<span className="section-kicker stagger-child" style={{ "--i": 2 } as CSSProperties}>
|
||||
About Us
|
||||
</span>
|
||||
<p className="lead stagger-child" style={{ "--i": 3 } as CSSProperties}>
|
||||
نـخـستین گـام برای زیبایی پوست صورت ، آگاهی یافتن ازنوع پوست میباشد.
|
||||
<br />
|
||||
زیرا ازاین طریق شما قادر خواهید بودهر چه بهتر از پوستتان مراقبت و هـمـچنـیـن فـراورده های
|
||||
بـهـداشـتـی و آرایشی مناسب نوع پوست خود را انتخاب کنید.
|
||||
<br />
|
||||
<br />
|
||||
مطب دکتر محمد اسدیان ارائه دهنده انواع خدمات زیبایی و پوست و مو همگام با تکنوژوی روز دنیا.
|
||||
</p>
|
||||
<div className="cta-row stagger-child" style={{ "--i": 4 } as CSSProperties}>
|
||||
<Link href="/about" className="btn btn-dark">
|
||||
مشاهده اطلاعات بیشتر
|
||||
</Link>
|
||||
<Link href="/contact" className="btn btn-mint">
|
||||
با ما در تماس باشید
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user