112 lines
4.8 KiB
JavaScript
112 lines
4.8 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { contact, megaCategories, navItems } from "./data";
|
|
import HeaderTools from "./HeaderTools";
|
|
|
|
export function Header() {
|
|
return (
|
|
<header className="site-header">
|
|
<div className="container header-box">
|
|
<div className="topbar">
|
|
<div className="topbar-inner">
|
|
<HeaderTools />
|
|
<div className="topbar-links">
|
|
<span className="top-icon" aria-label="تماس">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><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>
|
|
<a href="tel:02177133934">02177133934</a>
|
|
<span>|</span>
|
|
<a href="tel:02177132293">02177132293</a>
|
|
<a className="top-icon" href={contact.instagram} aria-label="Instagram">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="5" /><circle cx="12" cy="12" r="3.5" /><circle cx="17" cy="7" r="1" /></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="nav-row">
|
|
<nav className="main-nav" aria-label="ناوبری اصلی">
|
|
<details className="category-menu">
|
|
<summary>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
|
|
دسته بندی ها
|
|
</summary>
|
|
<div className="mega-menu">
|
|
<div className="mega-title">
|
|
<span>Categories</span>
|
|
<h3>خرید بر اساس دسته</h3>
|
|
</div>
|
|
<div className="mega-tabs">
|
|
{megaCategories.map((group) => <a href="#" key={group.tab}>{group.tab}</a>)}
|
|
</div>
|
|
<div className="mega-columns">
|
|
{megaCategories.map((group) => (
|
|
<div key={group.title}>
|
|
<h4>{group.title}</h4>
|
|
{group.items.map((item) => <a href="#" key={item}>{item}</a>)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
{navItems.map((item) => (
|
|
<Link key={item.href} href={item.href}>{item.label}</Link>
|
|
))}
|
|
</nav>
|
|
<details className="search-pop">
|
|
<summary aria-label="جستجو">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m16.5 16.5 4 4" /></svg>
|
|
</summary>
|
|
<form className="header-search" role="search">
|
|
<input placeholder="جستجوی سرور، رم، هارد یا CPU" aria-label="جستجو" />
|
|
</form>
|
|
</details>
|
|
<Link href="/" className="brand" aria-label="آریا شبکه پیشرو">
|
|
<Image src="/assets/logo.png" alt="آریا شبکه پیشرو" width={300} height={52} priority />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="footer">
|
|
<div className="container footer-grid">
|
|
<div>
|
|
<Image src="/assets/logo.png" alt="شرکت آریا شبکه پیشرو" width={263} height={45} />
|
|
<p>مارا در شبکه های اجتماعی دنبال کنید.</p>
|
|
<div className="socials">
|
|
<a href={contact.telegram}>Telegram</a>
|
|
<a href={contact.instagram}>Instagram</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>درباره ما</h3>
|
|
<p>آریا شبکه پیشرو شرکتی دانش بنیان، جوان و خلاق است. فعالیت مان را از سال ۱۳۹۵ با سرمایه ای اندک ولی با انگیزه سرشار و فکر و نیروی جوان آغاز کردیم. مجموعه ما در زمینه تامین تجهیزات شبکه از دو کمپانی HP و CISCO فعالیت دارد.</p>
|
|
</div>
|
|
<div>
|
|
<h3>تماس با ما</h3>
|
|
{contact.phones.slice(2).map((phone) => <a key={phone} href={`tel:${phone}`}>{phone}</a>)}
|
|
<p>{contact.address}</p>
|
|
</div>
|
|
<div>
|
|
<h3>صفحات</h3>
|
|
{navItems.map((item) => <Link key={item.href} href={item.href}>{item.label}</Link>)}
|
|
<a href="https://www.asphp.co/product-details/6232">خرید سرور اچ پی G9 DL380</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export function PageShell({ children }) {
|
|
return (
|
|
<>
|
|
<Header />
|
|
<main>{children}</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|