228 lines
11 KiB
JavaScript
228 lines
11 KiB
JavaScript
import Image from "next/image";
|
||
import { articles, contact, features, heroSlides, products, projectSteps, services, sourceBanners, testimonials } from "./data";
|
||
import { PageShell } from "./components";
|
||
import Countdown from "./Countdown";
|
||
import { getStaticImageSlotMap, staticSlotImages } from "./meshkee";
|
||
|
||
export default async function Home() {
|
||
const staticSlots = await getStaticImageSlotMap("home");
|
||
const sliderImages = staticSlotImages(staticSlots, "slider", heroSlides);
|
||
const belowSliderBanners = staticSlotImages(staticSlots, "three-banner-below-slider", heroSlides.slice(1, 4)).slice(0, 3);
|
||
const specialSaleBanner = staticSlotImages(staticSlots, "special-sale-banner", ["/assets/banner-2.jpg"])[0];
|
||
const serverBanner = staticSlotImages(staticSlots, "server-banner", ["/assets/server-info-1.jpg"])[0];
|
||
const aboutusBanner = staticSlotImages(staticSlots, "aboutus-banner", ["/assets/server-info-1.jpg"])[0];
|
||
const threeBanners = staticSlotImages(staticSlots, "three-banner", sourceBanners).slice(0, 3);
|
||
|
||
return (
|
||
<PageShell>
|
||
<h1 className="sr-only">آریا شبکه پیشرو، فروش تجهیزات سرور HP و شبکه</h1>
|
||
<section className="hero-section">
|
||
<div className="container">
|
||
<div className="hero">
|
||
<div className="hero-slider" aria-hidden="true">
|
||
{sliderImages.map((slide, index) => {
|
||
const content = <Image src={slide.url} alt={slide.alt || ""} fill priority={index === 0} sizes="(max-width: 900px) 92vw, 860px" />;
|
||
return slide.href ? (
|
||
<a className={`slide-card slide-${index + 1}`} href={slide.href} key={`${slide.url}-${index}`} style={slotStyle(slide)}>
|
||
{content}
|
||
</a>
|
||
) : (
|
||
<div className={`slide-card slide-${index + 1}`} key={`${slide.url}-${index}`} style={slotStyle(slide)}>
|
||
{content}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="banner-row">
|
||
{belowSliderBanners.map((banner, index) => (
|
||
<a className="promo-banner" href={banner.href || "tel:02177133934"} key={`${banner.url}-${index}`} style={slotStyle(banner)}>
|
||
<Image src={banner.url} alt={banner.alt || `بنر فروش تجهیزات سرور ${index + 1}`} fill sizes="(max-width: 900px) 100vw, 33vw" />
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section" id="special-sale">
|
||
<div className="container special-sale-frame">
|
||
<div className="special-heading">
|
||
<SectionTitle fa="فروش ویژه" en="SPECIAL SALE" align="right" />
|
||
<Countdown />
|
||
</div>
|
||
<div className="product-grid special-grid">
|
||
<a className="special-banner-card" href={specialSaleBanner.href || "tel:02177133934"} style={slotStyle(specialSaleBanner)}>
|
||
<Image src={specialSaleBanner.url} alt={specialSaleBanner.alt || "فروش ویژه تجهیزات سرور"} fill sizes="(max-width: 900px) 100vw, 25vw" />
|
||
</a>
|
||
{products.map((product) => (
|
||
<a className="product-card" href={product.link} key={product.title}>
|
||
<div className="product-image">
|
||
<Image src={product.image} alt={product.title} fill sizes="(max-width: 800px) 50vw, 25vw" />
|
||
</div>
|
||
<span>{product.category}</span>
|
||
<h3>{product.title}</h3>
|
||
<strong>تماس با فروشگاه</strong>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section split-section">
|
||
<div className="container split">
|
||
<div>
|
||
<SectionTitle fa="سرور (Server) چیست؟" en="SERVER" align="right" />
|
||
<p>در ویکی پدیا نیز معنی سرور، سرویس دهنده ذکر شده است. به بیان ساده معنی سرور یا در پاسخ سوال server به چه معناست باید گفت، کامپیوتری همیشه روشن و قدرتمند است که کاربران در زمان‌های متفاوت، از آن انتظار پاسخ به درخواست‌ها را دارند.</p>
|
||
<a className="secondary-btn" href="https://www.asphp.co/article-details/191">درباره سرور بیشتر بدانید</a>
|
||
</div>
|
||
<div className="image-pair">
|
||
<Image src={serverBanner.url} alt={serverBanner.alt || "تجهیزات سرور"} width={Number(serverBanner.width) || 520} height={Number(serverBanner.height) || 390} style={slotStyle(serverBanner)} />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section muted">
|
||
<div className="container">
|
||
<SectionTitle fa="خدمات آریا شبکه پیشرو" en="SERVICES" />
|
||
<div className="service-grid">
|
||
{[...services].reverse().map((service) => (
|
||
<article className="service-card" key={service.title}>
|
||
<Image src={service.icon} alt="" width={64} height={64} />
|
||
<h3>{service.title}</h3>
|
||
<p>{service.body}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section about-band">
|
||
<div className="container split">
|
||
<div>
|
||
<SectionTitle fa="آریا شبکه پیشرو" en="ARYA SHABAKE PISHRO" align="right" />
|
||
<h3>شرکتی جوان خلاق، با انگیزه و دانش بنیان</h3>
|
||
<p>انضباط، مشتری مداری، ارائه محصولات با کیفیت و تضمین شده می باشد. برای مشاوره و خرید در زمینه تجهیزات شبکه با مشاوران ما در آریا شبکه پیشرو تماس بگیرید.</p>
|
||
<a className="primary-btn" href="tel:02177133934">تماس با ما</a>
|
||
</div>
|
||
<div className="image-pair">
|
||
<Image src={aboutusBanner.url} alt={aboutusBanner.alt || "تجهیزات سرور آریا شبکه پیشرو"} width={Number(aboutusBanner.width) || 560} height={Number(aboutusBanner.height) || 420} style={slotStyle(aboutusBanner)} />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section feature-section" id="features">
|
||
<div className="container feature-showcase">
|
||
<div className="feature-copy">
|
||
<SectionTitle fa="ویژگـــی مــــا" en="PROCESS" align="right" />
|
||
<p>انضباط، مشتری مداری، ارائه محصولات با کیفیت و تضمین شده می باشد.</p>
|
||
</div>
|
||
<div className="feature-grid">
|
||
{features.map((feature) => (
|
||
<div className="feature" key={feature.body}>
|
||
<Image src={feature.icon} alt="" width={58} height={58} />
|
||
<p>{feature.body}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section source-banner-section" id="source-frame">
|
||
<div className="container source-banner-grid">
|
||
<a className="source-banner source-banner-large" href={threeBanners[0]?.href || sourceBanners[0].href} style={slotStyle(threeBanners[0])}>
|
||
<Image src={threeBanners[0]?.url || sourceBanners[0].image} alt={threeBanners[0]?.alt || sourceBanners[0].alt} fill sizes="(max-width: 900px) 100vw, 50vw" />
|
||
</a>
|
||
<div className="source-banner-stack">
|
||
{threeBanners.slice(1).map((banner, index) => (
|
||
<a className="source-banner" href={banner.href || sourceBanners[index + 1]?.href || "#"} key={`${banner.url}-${index}`} style={slotStyle(banner)}>
|
||
<Image src={banner.url} alt={banner.alt || sourceBanners[index + 1]?.alt || ""} fill sizes="(max-width: 900px) 100vw, 50vw" />
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section navy">
|
||
<div className="container">
|
||
<SectionTitle fa="طرح یک پروژه" en="PROJECT A DESIGN" light />
|
||
<div className="steps">
|
||
{projectSteps.map((step) => (
|
||
<article key={step.number}>
|
||
<strong>{step.number}</strong>
|
||
<h3>{step.title}</h3>
|
||
<p>{step.body}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section" id="articles">
|
||
<div className="container">
|
||
<SectionTitle fa="نظرات مشتریان" en="CUSTOMERS COMMENTS" />
|
||
<div className="testimonial-grid">
|
||
{testimonials.map((item) => (
|
||
<article className="quote" key={item.name}>
|
||
<h3>{item.title}</h3>
|
||
<p>{item.body}</p>
|
||
<strong>{item.name}</strong>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="cta">
|
||
<div className="container cta-inner">
|
||
<div className="cta-copy">
|
||
<span>مشاوره خرید تجهیزات شبکه</span>
|
||
<p>برای انتخاب سرور، رم، هارد و تجهیزات شبکه با مشاوران آریا شبکه پیشرو تماس بگیرید؛ بهترین راهکارها با مناسب ترین قیمت ها در اختیار شما قرار می گیرد.</p>
|
||
</div>
|
||
<a className="cta-phone" href="tel:02177133934" aria-label="تماس با کارشناسان آریا شبکه پیشرو">
|
||
<span className="cta-phone-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M6.6 10.8c1.5 3 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.3 22 2 13.7 2 3.4 2 2.7 2.5 2.2 3.2 2.2h3.5c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .9-.3 1.2l-1.6 2.2Z" />
|
||
</svg>
|
||
</span>
|
||
<span>با کارشناسان ما تماس بگیرید</span>
|
||
<strong>۰۲۱۷۷۱۳۳۹۳۴</strong>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section">
|
||
<div className="container">
|
||
<SectionTitle fa="مقــــالــات" en="ARTICLES" />
|
||
<div className="article-carousel" aria-label="مقالات">
|
||
{articles.map((article) => (
|
||
<article className="article-card" key={article.title}>
|
||
<div className="article-image">
|
||
<Image src={article.image} alt={article.title} fill sizes="(max-width: 700px) 78vw, 320px" />
|
||
</div>
|
||
<time>{article.date}</time>
|
||
<h3>{article.title}</h3>
|
||
<p>{article.abstract}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<a className="telegram-float" href={contact.telegram}>تلگرام</a>
|
||
</PageShell>
|
||
);
|
||
}
|
||
|
||
function SectionTitle({ fa, en, light = false, align = "center" }) {
|
||
return (
|
||
<div className={`section-title ${light ? "light" : ""} ${align === "right" ? "right" : ""}`}>
|
||
<span>{en}</span>
|
||
<h2>{fa}</h2>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function slotStyle(image) {
|
||
return image?.aspectRatio ? { aspectRatio: image.aspectRatio } : undefined;
|
||
}
|