Initial HOM arch studio website (home, about, contact) on Meshkee
This commit is contained in:
dev
@@ -0,0 +1,215 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
|
||||
import { SlotImage } from "@/components/SlotImage";
|
||||
import { gallery, processSteps, projects, services, site, stats } from "@/data/site";
|
||||
import { resolveAbout, resolveName } from "@/lib/content";
|
||||
import { getBusinessInfo } from "@/lib/meshkee";
|
||||
import { getPageSlots, slotImages, slotRatio } from "@/lib/static-images";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
description:
|
||||
"استودیو معماری هوم؛ طراحی معماری، طراحی داخلی، طراحی نما و اجرای پروژه‌های مسکونی و تجاری با نگاهی مینیمال و دقیق.",
|
||||
};
|
||||
|
||||
const ArrowIcon = () => (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<path d="M4 12h16M13 5l7 7-7 7" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default async function HomePage() {
|
||||
const [info, slots] = await Promise.all([getBusinessInfo(), getPageSlots("home")]);
|
||||
const name = resolveName(info);
|
||||
const about = resolveAbout(info);
|
||||
|
||||
const hero = slotImages("hero", slots, [{ url: gallery.hero, titleFa: "نمای آجری در غروب" }])[0];
|
||||
const studio = slotImages("studio-image", slots, [{ url: gallery.studio, titleFa: "ورودی سبز" }])[0];
|
||||
const projectSlots = slots.projects?.images ?? [];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hero */}
|
||||
<section className="hero">
|
||||
<div className="container">
|
||||
<div className="hero__grid">
|
||||
<h1 className="hero__title">
|
||||
معماری ساده،
|
||||
<br />
|
||||
<em>زندگی روشن</em>
|
||||
<span className="hero__dot" aria-hidden="true" />
|
||||
</h1>
|
||||
<div className="hero__aside">
|
||||
<p>
|
||||
{name} یک گروه معماری و طراحی داخلی است؛ از طراحی نما و پلان تا جزئیات داخلی و اجرای نهایی.
|
||||
</p>
|
||||
<Link href="/contact" className="btn">
|
||||
شروع یک پروژه
|
||||
<ArrowIcon />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<SlotImage image={hero} alt="نمونه پروژه استودیو معماری هوم" ratio={slotRatio("hero", slots)} className="hero__frame" priority />
|
||||
<div className="hero__caption">
|
||||
<span>{hero.titleFa || hero.titleEn || "پروژه منتخب"}</span>
|
||||
<span className="latin">{site.nameEn}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Intro */}
|
||||
<section className="section">
|
||||
<div className="container split">
|
||||
<div>
|
||||
<p className="eyebrow">استودیو</p>
|
||||
<h2 className="intro__text">{about[0]}</h2>
|
||||
</div>
|
||||
<div className="intro__meta">
|
||||
<p>{about[1] ?? site.about[1]}</p>
|
||||
<div>
|
||||
<strong>تمرکز ما</strong>
|
||||
<span>معماری مسکونی، طراحی داخلی، طراحی نما</span>
|
||||
</div>
|
||||
<Link href="/about" className="text-link">
|
||||
بیشتر درباره هوم
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services */}
|
||||
<section className="section section--surface">
|
||||
<div className="container">
|
||||
<div className="section-head">
|
||||
<div>
|
||||
<p className="eyebrow">خدمات</p>
|
||||
<h2 className="title">چه کاری انجام می‌دهیم</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="services">
|
||||
{services.map((service) => (
|
||||
<article key={service.index} className="service">
|
||||
<span className="service__index">{service.index}</span>
|
||||
<div>
|
||||
<h3>{service.titleFa}</h3>
|
||||
<span className="latin">{service.titleEn}</span>
|
||||
</div>
|
||||
<p>{service.text}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Projects */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="section-head">
|
||||
<div>
|
||||
<p className="eyebrow">پروژه‌ها</p>
|
||||
<h2 className="title">پروژه‌های منتخب</h2>
|
||||
</div>
|
||||
<p className="lead" style={{ maxWidth: "34ch" }}>
|
||||
گزیده‌ای از کارهای اخیر در معماری، طراحی داخلی و نما.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="projects">
|
||||
{projectSlots.length
|
||||
? projectSlots.map((image, index) => (
|
||||
<div key={`${image.url}-${index}`} className="project">
|
||||
<SlotImage image={image} alt={image.titleFa || `پروژه ${index + 1}`} ratio={slotRatio("projects", slots)} />
|
||||
<div className="project__meta">
|
||||
<h3>{image.titleFa || image.titleEn || `پروژه ${index + 1}`}</h3>
|
||||
{image.subtext ? <span>{image.subtext}</span> : null}
|
||||
</div>
|
||||
{image.titleFa && image.titleEn ? <p className="project__sub latin">{image.titleEn}</p> : null}
|
||||
</div>
|
||||
))
|
||||
: projects.map((project) => (
|
||||
<article key={project.slug} className="project">
|
||||
<div className="frame" style={{ aspectRatio: slotRatio("projects", slots) }}>
|
||||
<img src={project.image} alt={`${project.titleFa} — ${project.category}`} loading="lazy" decoding="async" />
|
||||
</div>
|
||||
<div className="project__meta">
|
||||
<h3>{project.titleFa}</h3>
|
||||
<span>
|
||||
{project.category} · {project.year}
|
||||
</span>
|
||||
</div>
|
||||
<p className="project__sub latin">{project.titleEn}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Studio */}
|
||||
<section className="section section--line-top">
|
||||
<div className="container split split--equal">
|
||||
<SlotImage image={studio} alt="ورودی یکی از پروژه‌های استودیو هوم" ratio={slotRatio("studio-image", slots)} className="studio__frame" />
|
||||
<div className="studio__body">
|
||||
<div>
|
||||
<p className="eyebrow">نگاه ما</p>
|
||||
<h2 className="title">فضایی که با شما زندگی می‌کند</h2>
|
||||
</div>
|
||||
<p>
|
||||
ما طراحی را از نیاز واقعی آغاز می‌کنیم؛ نه از فرم. نور، مسیر حرکت، متریال و تناسب، ابزار ما برای ساختن فضایی هستند که
|
||||
سال‌ها بعد هم آرام و خوانا بماند.
|
||||
</p>
|
||||
<p>{about[2] ?? site.about[2]}</p>
|
||||
<Link href="/about" className="btn btn--ghost">
|
||||
درباره استودیو
|
||||
<ArrowIcon />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process */}
|
||||
<section className="section section--dark">
|
||||
<div className="container">
|
||||
<p className="eyebrow eyebrow--light">فرآیند کار</p>
|
||||
<h2 className="title">از ایده تا تحویل، در چهار گام</h2>
|
||||
<div className="process">
|
||||
{processSteps.map((item) => (
|
||||
<div key={item.step} className="process__item">
|
||||
<span className="process__step">گام {item.step}</span>
|
||||
<h3>{item.titleFa}</h3>
|
||||
<p>{item.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats */}
|
||||
<section className="section--tight">
|
||||
<div className="container">
|
||||
<div className="stats">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="stat">
|
||||
<strong>{stat.value}</strong>
|
||||
<span>{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="section">
|
||||
<div className="container cta">
|
||||
<div>
|
||||
<p className="eyebrow">شروع همکاری</p>
|
||||
<h2>پروژه‌ای در ذهن دارید؟ درباره‌اش صحبت کنیم.</h2>
|
||||
</div>
|
||||
<Link href="/contact" className="btn">
|
||||
تماس با ما
|
||||
<ArrowIcon />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user