Initial commit: Safeteb Next.js website.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,76 @@
|
||||
import { aboutText } from "@/data/home";
|
||||
|
||||
export default function AboutSection() {
|
||||
return (
|
||||
<div className="wb-frame" id="about-section">
|
||||
<section
|
||||
id="about"
|
||||
className="testimonial-area testimonial-default-area rtl position-relative"
|
||||
style={{ backgroundImage: "url(/images/sections/about-banner.jpg)" }}
|
||||
>
|
||||
<div className="container-xxl">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 order-force-2">
|
||||
<div className="section-title stitle-style2">
|
||||
<h2
|
||||
className="title mb-0"
|
||||
style={{ letterSpacing: 0, fontWeight: 300, fontSize: "40px", color: "rgb(0, 0, 0)" }}
|
||||
>
|
||||
درباره سیف طب
|
||||
</h2>
|
||||
<p
|
||||
className="mb-0"
|
||||
style={{
|
||||
letterSpacing: "5px",
|
||||
fontWeight: 100,
|
||||
fontSize: "10px",
|
||||
fontFamily: "montserrat",
|
||||
color: "rgb(193, 193, 193)",
|
||||
}}
|
||||
>
|
||||
ABOUT US
|
||||
</p>
|
||||
</div>
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-slider-content">
|
||||
<div className="testimonial-slider-container">
|
||||
<div className="testimonial-slider">
|
||||
<div className="testimonial-single">
|
||||
<div className="client-content">
|
||||
<p
|
||||
style={{
|
||||
letterSpacing: "0px",
|
||||
fontWeight: 200,
|
||||
textAlign: "justify",
|
||||
fontFamily: "iran-sans",
|
||||
fontSize: "15px",
|
||||
color: "#2c2c2c",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: aboutText }}
|
||||
/>
|
||||
</div>
|
||||
<a className="btn-theme" href="/about">
|
||||
<span style={{ fontWeight: 0 }}>مشاهده بیشتر</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-force-1">
|
||||
<div className="bg-img text-center">
|
||||
<img
|
||||
className="mt-5 mr-5"
|
||||
style={{ height: "450px" }}
|
||||
alt="درباره سیف طب"
|
||||
src="/images/sections/about-bg.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { articles } from "@/data/home";
|
||||
|
||||
export default function ArticlesSection() {
|
||||
return (
|
||||
<div className="wb-frame" id="article">
|
||||
<section id="articles" className="blog-area blog-default-area" style={{ backgroundColor: "#FFFFFF" }}>
|
||||
<div className="container">
|
||||
<div className="row mb-4 align-items-center">
|
||||
<div className="col-6 text-right">
|
||||
<div className="section-title text-center">
|
||||
<h2
|
||||
className="title mb-0"
|
||||
style={{
|
||||
fontWeight: 200,
|
||||
direction: "ltr",
|
||||
textAlign: "right",
|
||||
fontSize: "25px",
|
||||
letterSpacing: "0px",
|
||||
}}
|
||||
>
|
||||
مقاله ها
|
||||
</h2>
|
||||
<div className="desc">
|
||||
<p
|
||||
style={{
|
||||
fontWeight: 0,
|
||||
letterSpacing: "5px",
|
||||
textAlign: "justify",
|
||||
fontSize: "10px",
|
||||
fontFamily: "montserrat",
|
||||
color: "#C1C1C1",
|
||||
}}
|
||||
>
|
||||
ARTICLES
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 text-start">
|
||||
<a className="btn-theme" href="#articles">
|
||||
<span style={{ fontWeight: 0 }}>مشاهده بیشتر</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row pt-2 pb-2">
|
||||
{articles.map((article) => (
|
||||
<div key={article.id} className="col-6 col-md-3">
|
||||
<div className="post-item mb-md-30">
|
||||
<div className="thumb">
|
||||
<a href="#">
|
||||
<img src={article.image} alt={article.title} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h3 className="title">
|
||||
<a href="#">{article.title}</a>
|
||||
</h3>
|
||||
<p className="post-abstract">{article.excerpt}</p>
|
||||
<div className="meta">
|
||||
<div className="post-date">
|
||||
<i className="WMi-calendar-1" />
|
||||
<span>{article.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useState } from "react";
|
||||
|
||||
import { contactPage } from "@/data/pages";
|
||||
|
||||
export default function ContactForm() {
|
||||
const [sent, setSent] = useState(false);
|
||||
|
||||
function onSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setSent(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="contact-form-wrapper" onSubmit={onSubmit}>
|
||||
<div className="section-title mb-4">
|
||||
<h2 className="title mb-1" style={{ fontSize: "25px", fontWeight: 300, color: "#16171b" }}>
|
||||
{contactPage.formTitle}
|
||||
</h2>
|
||||
<p className="mb-0" style={{ letterSpacing: "5px", fontSize: "10px", color: "#c1c1c1", fontFamily: "montserrat" }}>
|
||||
{contactPage.formTitleEn}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<input className="form-control" type="text" name="name" placeholder="نام" required />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<input className="form-control" type="email" name="email" placeholder="ایمیل" required />
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<input className="form-control" type="text" name="title" placeholder="موضوع" required />
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<textarea className="form-control" name="message" rows={5} placeholder="متن پیام" required />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<button className="btn-theme" type="submit">
|
||||
<span>ارسال پیام</span>
|
||||
</button>
|
||||
{sent ? <p className="contact-form-success mt-3 mb-0">پیام شما با موفقیت ثبت شد.</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { footerDescription, footerLinks, phoneNumber } from "@/data/home";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="wb-footer">
|
||||
<div className="wb-frame" id="footer">
|
||||
<footer
|
||||
id="contact"
|
||||
className="footer-area pt-md-5 default-style bg-img"
|
||||
style={{ backgroundImage: "url(/images/footer/footer-bg.jpg)" }}
|
||||
>
|
||||
<div className="footer-main">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-6 col-lg-6">
|
||||
<div className="widget-item mb-sm-30">
|
||||
<div className="about-widget">
|
||||
<h1 style={{ letterSpacing: "0px", fontWeight: 0, color: "#FFFFFF", fontSize: "20px" }}>
|
||||
سیف طب
|
||||
</h1>
|
||||
<p
|
||||
style={{ fontWeight: 0, textAlign: "justify", letterSpacing: "0px" }}
|
||||
dangerouslySetInnerHTML={{ __html: footerDescription }}
|
||||
/>
|
||||
<div className="widget-social-icons">
|
||||
<a href="https://www.instagram.com/safetebcom" title="اینستاگرام">
|
||||
<i style={{ lineHeight: 0, fontSize: "16px" }} className="WMi-instagram-2" />
|
||||
</a>
|
||||
<a href="tel:02188430531" title="تماس">
|
||||
<i style={{ lineHeight: 0, fontSize: "16px" }} className="WMi-phone" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-3 col-lg-2">
|
||||
<div className="widget-item pr-20 pl-sm-0 mb-sm-30 mb-xs-40">
|
||||
<h3 style={{ fontWeight: 0, letterSpacing: "0px", color: "#FFFFFF", fontSize: "20px" }}>
|
||||
پیوند ها
|
||||
</h3>
|
||||
<nav className="widget-menu-wrap">
|
||||
<ul className="nav-menu nav">
|
||||
{footerLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<Link href={link.href}>
|
||||
<span style={{ fontWeight: 0, letterSpacing: "0" }}>{link.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-3 col-lg-2">
|
||||
<div className="widget-item mb-xs-50">
|
||||
<h3 style={{ fontWeight: 0, letterSpacing: "0px", fontSize: "20px", color: "#FFFFFF" }}>
|
||||
راه های ارتباطی
|
||||
</h3>
|
||||
<div className="widget-contact-info">
|
||||
<div className="contact-info-item">
|
||||
<div className="icon-box">
|
||||
<img alt="تلفن فروشگاه" src="/images/footer/phone-icon.png" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h3 className="title" style={{ fontWeight: 0 }}>
|
||||
تلفن تماس:
|
||||
</h3>
|
||||
<a href="tel:02188430531">
|
||||
<p
|
||||
style={{
|
||||
fontWeight: 0,
|
||||
letterSpacing: "0px",
|
||||
textAlign: "right",
|
||||
fontFamily: "iran-sans",
|
||||
}}
|
||||
>
|
||||
{phoneNumber}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-3 col-lg-2">
|
||||
<a
|
||||
referrerPolicy="origin"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://trustseal.enamad.ir/?id=301851&Code=dttwt9yz2JqjfXlEjIb6"
|
||||
>
|
||||
<img
|
||||
referrerPolicy="origin"
|
||||
src="/images/footer/enamad.png"
|
||||
alt="نماد اعتماد"
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<div className="container">
|
||||
<div className="footer-bottom-content">
|
||||
<div className="footer-bottom-bar">
|
||||
<div className="footer-bottom-site">سیف طب</div>
|
||||
<a
|
||||
href="https://meshkee.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
dir="ltr"
|
||||
className="meshkee-credit"
|
||||
>
|
||||
<span className="meshkee-credit__frame" aria-hidden>
|
||||
<span className="meshkee-credit__line meshkee-credit__line--l" />
|
||||
<span className="meshkee-credit__line meshkee-credit__line--t" />
|
||||
<span className="meshkee-credit__line meshkee-credit__line--r" />
|
||||
<span className="meshkee-credit__line meshkee-credit__line--b" />
|
||||
</span>
|
||||
<img
|
||||
src="/images/footer/MeshkeeLogo-White.png"
|
||||
alt="Meshkee"
|
||||
className="meshkee-credit__logo"
|
||||
width={42}
|
||||
height={42}
|
||||
/>
|
||||
<span className="meshkee-credit__text">
|
||||
<span className="meshkee-credit__label">Designed And Developed By</span>
|
||||
<span className="meshkee-credit__name">Meshkee E-Commerce Team</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { navLinks } from "@/data/home";
|
||||
|
||||
type SubMenuItem = {
|
||||
label: string;
|
||||
href: string;
|
||||
submenu?: { label: string; href: string }[];
|
||||
};
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="wb-header">
|
||||
<div className="wb-frame" id="header">
|
||||
<header className="header-area header-default header-style sticky-header">
|
||||
<div className="container">
|
||||
<div className="header-bar">
|
||||
<div className="header-logo-area">
|
||||
<Link href="/" title="سیف طب">
|
||||
<img
|
||||
className="logo-main"
|
||||
alt="سیف طب"
|
||||
src="/images/hero/banner-main.png"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="header-navigation-area d-none d-xl-block">
|
||||
<ul className="main-menu nav position-relative">
|
||||
{navLinks.map((link) => {
|
||||
const item = link as {
|
||||
label: string;
|
||||
href: string;
|
||||
submenu?: SubMenuItem[];
|
||||
};
|
||||
|
||||
if (item.submenu?.length) {
|
||||
return (
|
||||
<li key={item.label} className="has-submenu">
|
||||
<Link href={item.href}>
|
||||
{item.label}
|
||||
<i className="WMi-angle-down" />
|
||||
</Link>
|
||||
<ul className="submenu-nav">
|
||||
{item.submenu.map((sub) =>
|
||||
sub.submenu?.length ? (
|
||||
<li key={sub.label} className="has-submenu">
|
||||
<Link href={sub.href} className="d-flex justify-content-between">
|
||||
{sub.label}
|
||||
<i className="WMi-angle-left" />
|
||||
</Link>
|
||||
<ul className="submenu-nav">
|
||||
{sub.submenu.map((nested) => (
|
||||
<li key={nested.label}>
|
||||
<Link href={nested.href}>{nested.label}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
) : (
|
||||
<li key={sub.label}>
|
||||
<Link href={sub.href} className="d-flex justify-content-between">
|
||||
{sub.label}
|
||||
<i />
|
||||
</Link>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={item.label}>
|
||||
<Link href={item.href}>{item.label}</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="header-action-area">
|
||||
<button type="button" className="btn-menu d-xl-none">
|
||||
<i className="fa fa-bars" />
|
||||
</button>
|
||||
<div className="header-action-cart">
|
||||
<a className="btn-cart cart-icon" href="#">
|
||||
<span className="cart-count">0</span>
|
||||
<i className="WMi-shop-bag-2" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="d-none d-lg-block">
|
||||
<a className="d-inline-flex color-black align-items-center" href="#">
|
||||
<i className="WMi-user-linear btn-cart" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<aside className="off-canvas-wrapper">
|
||||
<div className="off-canvas-inner">
|
||||
<div className="off-canvas-overlay d-none" />
|
||||
<div className="off-canvas-content">
|
||||
<div className="off-canvas-header">
|
||||
<div className="close-action">
|
||||
<button type="button" className="btn-close">
|
||||
<i className="pe-7s-close" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="off-canvas-item">
|
||||
<div className="res-mobile-menu" />
|
||||
</div>
|
||||
<div className="off-canvas-footer" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { quickLinks } from "@/data/home";
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<>
|
||||
<div className="wb-frame" id="slider">
|
||||
<section className="home-slider-area slider-default mb-2">
|
||||
<div className="home-slider-content">
|
||||
<div className="swiper home-slider-container">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<div className="home-slider-item">
|
||||
<a href="#">
|
||||
<div
|
||||
className="bg-thumb bg-img"
|
||||
style={{ backgroundImage: "url(/images/sections/hero-bg.jpg)" }}
|
||||
/>
|
||||
<div className="slider-content-area" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper-btn-wrap">
|
||||
<div className="swiper-btn-prev">
|
||||
<i className="fa fa-angle-left" style={{ lineHeight: 0 }} />
|
||||
</div>
|
||||
<div className="swiper-btn-next">
|
||||
<i className="fa fa-angle-right" style={{ lineHeight: 0 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="wb-frame" id="search">
|
||||
<section className="wrapper direction-auto search-section py-sm-4 overflow-visible position-relative">
|
||||
<div className="container">
|
||||
<div className="row mt-md-n70p mb-0" style={{ position: "relative", zIndex: 2 }}>
|
||||
<div className="col-xl-10 mx-auto">
|
||||
<div className="card image-wrapper bg-full bg-overlay bg-overlay-400 radius-15">
|
||||
<div className="card-body p-0">
|
||||
<form className="search-form d-inline-flex align-items-center" action="#">
|
||||
<button
|
||||
className="button-search btn btn-outline-info radius-15 lh-1"
|
||||
type="submit"
|
||||
>
|
||||
<i className="WMi-search-1" />
|
||||
</button>
|
||||
<input
|
||||
className="form-control"
|
||||
type="text"
|
||||
placeholder="نام محصول مورد نظر را وارد کنید ..."
|
||||
/>
|
||||
</form>
|
||||
<p className="mb-0 noitem" style={{ display: "none" }}>
|
||||
چنین آیتم در فروشگاه وجود ندارد
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="wb-frame" id="section5">
|
||||
<section className="features-area py-lg-5 py-2" style={{ zIndex: 1, position: "relative" }}>
|
||||
<div className="container-xxl">
|
||||
<div className="row">
|
||||
{quickLinks.map((link) => (
|
||||
<div key={link.id} className="col-lg-3 col-md-6 col-12 mb-sm-20 mb-md-4">
|
||||
<div className="d-flex align-items-start">
|
||||
<div>
|
||||
<img alt={link.title} src={link.image} />
|
||||
</div>
|
||||
<div className="mr-10">
|
||||
<a href={link.href} title={link.title}>
|
||||
<p
|
||||
className="mb-0"
|
||||
style={{ letterSpacing: "0px", fontWeight: 600, color: "#16171B" }}
|
||||
>
|
||||
{link.title}
|
||||
</p>
|
||||
</a>
|
||||
<p
|
||||
className="mb-0"
|
||||
style={{
|
||||
letterSpacing: "5px",
|
||||
fontWeight: 200,
|
||||
fontSize: "10px",
|
||||
fontFamily: "montserrat",
|
||||
color: "#C1C1C1",
|
||||
}}
|
||||
>
|
||||
{link.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="wb-frame" id="infoitems_1">
|
||||
<section className="classical-workout-area">
|
||||
<div className="container-xxl">
|
||||
<div className="row align-items-stretch">
|
||||
<div className="col-lg-6 col-md-6 col-12 mb-3 mb-md-0">
|
||||
<a href="#online-program" className="d-block h-100 promo-banner">
|
||||
<img width="100%" alt="" src="/images/sections/online-program.png" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-12">
|
||||
<a href="#products" className="d-block h-100 promo-banner">
|
||||
<img width="100%" alt="" src="/images/sections/online-program-mobile.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import Script from "next/script";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
Swiper?: new (
|
||||
element: string | HTMLElement,
|
||||
options?: Record<string, unknown>,
|
||||
) => {
|
||||
destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function initSwipers() {
|
||||
const Swiper = window.Swiper;
|
||||
if (!Swiper) return [];
|
||||
|
||||
const instances: Array<{ destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void }> = [];
|
||||
|
||||
document.querySelectorAll<HTMLElement>(".home-slider-container").forEach((element) => {
|
||||
instances.push(
|
||||
new Swiper(element, {
|
||||
slidesPerView: 1,
|
||||
loop: true,
|
||||
spaceBetween: 0,
|
||||
effect: "fade",
|
||||
fadeEffect: { crossFade: true },
|
||||
autoplay: { delay: 2000, disableOnInteraction: true },
|
||||
navigation: {
|
||||
nextEl: ".home-slider-container .swiper-btn-next",
|
||||
prevEl: ".home-slider-container .swiper-btn-prev",
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
document.querySelectorAll<HTMLElement>(".gallery-slider-container").forEach((element) => {
|
||||
instances.push(
|
||||
new Swiper(element, {
|
||||
loop: true,
|
||||
spaceBetween: 30,
|
||||
autoplay: { delay: 20000, disableOnInteraction: true },
|
||||
navigation: {
|
||||
nextEl: element.parentElement?.querySelector(".swiper-btn-next"),
|
||||
prevEl: element.parentElement?.querySelector(".swiper-btn-prev"),
|
||||
},
|
||||
breakpoints: {
|
||||
1200: { slidesPerView: 4 },
|
||||
992: { slidesPerView: 3 },
|
||||
768: { slidesPerView: 3 },
|
||||
576: { slidesPerView: 2, spaceBetween: 15 },
|
||||
0: { slidesPerView: 2, spaceBetween: 15 },
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
return instances;
|
||||
}
|
||||
|
||||
export default function HomeSwipers() {
|
||||
const instancesRef = useRef<Array<{ destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void }>>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (window.Swiper) {
|
||||
instancesRef.current = initSwipers();
|
||||
}
|
||||
|
||||
return () => {
|
||||
instancesRef.current.forEach((instance) => instance.destroy(true, true));
|
||||
instancesRef.current = [];
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Script
|
||||
src="/theme/js/swiper.min.js"
|
||||
strategy="afterInteractive"
|
||||
onLoad={() => {
|
||||
instancesRef.current.forEach((instance) => instance.destroy(true, true));
|
||||
instancesRef.current = initSwipers();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { medicinalPlantsText } from "@/data/home";
|
||||
|
||||
export default function MedicinalPlantsSection() {
|
||||
return (
|
||||
<>
|
||||
<div className="wb-frame" id="medicinal-plants">
|
||||
<section
|
||||
className="testimonial-area testimonial-default-area rtl position-relative"
|
||||
style={{ backgroundColor: "#f5f5f5" }}
|
||||
>
|
||||
<div className="container-xxl">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 order-force-2">
|
||||
<div className="section-title stitle-style2">
|
||||
<h2
|
||||
className="title mb-0"
|
||||
style={{
|
||||
letterSpacing: "0px",
|
||||
fontWeight: 300,
|
||||
fontSize: "40px",
|
||||
color: "#252525",
|
||||
}}
|
||||
>
|
||||
گیاهان دارویی مخصوص ورزشکاران
|
||||
</h2>
|
||||
<p
|
||||
className="mb-0"
|
||||
style={{
|
||||
letterSpacing: "5px",
|
||||
fontWeight: 100,
|
||||
fontSize: "10px",
|
||||
fontFamily: "montserrat",
|
||||
color: "#C1C1C1",
|
||||
}}
|
||||
>
|
||||
MEDICINAL PLANTS
|
||||
</p>
|
||||
</div>
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-slider-content">
|
||||
<div className="testimonial-slider-container">
|
||||
<div className="testimonial-slider">
|
||||
<div className="testimonial-single">
|
||||
<div className="client-content">
|
||||
<p
|
||||
style={{
|
||||
letterSpacing: 0,
|
||||
fontWeight: 200,
|
||||
fontSize: "15px",
|
||||
fontFamily: "iran-sans",
|
||||
textAlign: "justify",
|
||||
color: "#2c2c2c",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: medicinalPlantsText }}
|
||||
/>
|
||||
</div>
|
||||
<a className="btn-theme" href="#">
|
||||
<span style={{ letterSpacing: "0px", fontWeight: 0 }}>مشاهده بیشتر</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-force-1">
|
||||
<div className="bg-img text-center">
|
||||
<img
|
||||
className="mt-5 mr-5"
|
||||
style={{ height: "450px" }}
|
||||
alt="گیاهان دارویی"
|
||||
src="/images/sections/medicinal-plants.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="wb-frame" id="section1">
|
||||
<section className="classical-workout-area">
|
||||
<div className="container-xxl">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<a href="#products" title="لوازم ورزشی">
|
||||
<img width="100%" alt="لوازم ورزشی" src="/images/sections/medicinal-plants-bg.png" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<a href="#products" title="لوازم ورزشی">
|
||||
<img width="100%" alt="لوازم ورزشی" src="/images/sections/about.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { onlineProgramText } from "@/data/home";
|
||||
|
||||
export default function OnlineProgramSection() {
|
||||
return (
|
||||
<div className="wb-frame" id="section2">
|
||||
<section
|
||||
id="online-program"
|
||||
className="testimonial-area testimonial-default-area rtl position-relative"
|
||||
style={{ backgroundColor: "#FFFFFF" }}
|
||||
>
|
||||
<div className="container-xxl">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 order-force-2">
|
||||
<div className="section-title stitle-style2">
|
||||
<h2
|
||||
className="title mb-0"
|
||||
style={{ letterSpacing: 0, fontWeight: 300, fontSize: "40px" }}
|
||||
>
|
||||
گوشیتو مربیت کن!
|
||||
</h2>
|
||||
<p
|
||||
className="mb-0"
|
||||
style={{
|
||||
letterSpacing: "5px",
|
||||
fontWeight: 100,
|
||||
fontFamily: "montserrat",
|
||||
color: "#C1C1C1",
|
||||
fontSize: "10px",
|
||||
}}
|
||||
>
|
||||
ONLINE PROGRAM
|
||||
</p>
|
||||
</div>
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-slider-content">
|
||||
<div className="testimonial-slider-container">
|
||||
<div className="testimonial-slider">
|
||||
<div className="testimonial-single">
|
||||
<div className="client-content">
|
||||
<p
|
||||
style={{
|
||||
letterSpacing: "0px",
|
||||
fontWeight: 200,
|
||||
fontSize: "15px",
|
||||
textAlign: "justify",
|
||||
color: "#2c2c2c",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: onlineProgramText }}
|
||||
/>
|
||||
</div>
|
||||
<a className="btn-theme" href="#online-program">
|
||||
<span style={{ letterSpacing: "0px", fontWeight: 0 }}>مشاهده بیشتر</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-force-1">
|
||||
<div className="bg-img text-center">
|
||||
<img
|
||||
className="mr-5"
|
||||
style={{ height: "450px" }}
|
||||
alt="برنامه آنلاین"
|
||||
src="/images/sections/rehab-equipment.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import Link from "next/link";
|
||||
|
||||
type Crumb = {
|
||||
label: string;
|
||||
href?: string;
|
||||
};
|
||||
|
||||
type PageHeroProps = {
|
||||
title: string;
|
||||
titleEn: string;
|
||||
breadcrumb: Crumb[];
|
||||
};
|
||||
|
||||
export default function PageHero({ title, titleEn, breadcrumb }: PageHeroProps) {
|
||||
return (
|
||||
<section className="page-title-area page-hero">
|
||||
<div className="container">
|
||||
<div className="page-title-content text-center">
|
||||
<h1 className="title mb-1">{title}</h1>
|
||||
<p className="page-hero-en mb-3">{titleEn}</p>
|
||||
<nav className="page-breadcrumb" aria-label="breadcrumb">
|
||||
<ol>
|
||||
{breadcrumb.map((item, index) => (
|
||||
<li key={`${item.label}-${index}`}>
|
||||
{item.href ? <Link href={item.href}>{item.label}</Link> : <span>{item.label}</span>}
|
||||
{index < breadcrumb.length - 1 ? <span className="sep">/</span> : null}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { products } from "@/data/home";
|
||||
|
||||
function ProductStars() {
|
||||
return (
|
||||
<div className="stars">
|
||||
<i className="fa fa-star" />
|
||||
<i className="fa fa-star" />
|
||||
<i className="fa fa-star" />
|
||||
<i className="fa fa-star" />
|
||||
<i className="fa fa-star-o" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ProductsSection() {
|
||||
return (
|
||||
<>
|
||||
<div className="wb-frame" id="product_last">
|
||||
<section
|
||||
id="products"
|
||||
className="product-area product-grid-area"
|
||||
style={{ backgroundColor: "#f5f5f5" }}
|
||||
>
|
||||
<div className="container-xxl position-relative">
|
||||
<div className="row align-items-center rtl">
|
||||
<div className="col-7 col-lg-6 text-right">
|
||||
<div className="section-title text-center">
|
||||
<h2
|
||||
className="title mb-1"
|
||||
style={{
|
||||
letterSpacing: 0,
|
||||
fontWeight: 300,
|
||||
textAlign: "right",
|
||||
direction: "ltr",
|
||||
fontSize: "25px",
|
||||
color: "#252525",
|
||||
}}
|
||||
>
|
||||
جدیدترین محصولات
|
||||
</h2>
|
||||
<div className="desc">
|
||||
<p
|
||||
style={{
|
||||
letterSpacing: "5px",
|
||||
fontWeight: 100,
|
||||
textAlign: "justify",
|
||||
fontSize: "10px",
|
||||
fontFamily: "montserrat",
|
||||
color: "#C1C1C1",
|
||||
}}
|
||||
>
|
||||
LASTES PRODUCTS
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-5 col-lg-6 text-start">
|
||||
<a className="btn-theme" href="#products">
|
||||
<span style={{ letterSpacing: "0px", fontWeight: 0 }}>مشاهده بیشتر</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="overflow-hidden position-relative-responsive py-3">
|
||||
<div className="swiper gallery-slider-container">
|
||||
<div className="swiper-wrapper">
|
||||
{products.map((product) => (
|
||||
<div key={product.id} className="swiper-slide">
|
||||
<div className="product-item">
|
||||
<div className="product-thumb">
|
||||
<a href="#">
|
||||
<img src={product.image} alt={product.title} />
|
||||
</a>
|
||||
<div className="product-action">
|
||||
<a className="btn-theme" title={product.contactOnly ? "تماس با فروشگاه" : "افزودن به سبد خرید"} href="#">
|
||||
{product.contactOnly ? "تماس با فروشگاه" : "افزودن به سبد خرید"}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="product-info">
|
||||
<h3 className="title mb-0">
|
||||
<a href="#">{product.title}</a>
|
||||
</h3>
|
||||
<ProductStars />
|
||||
<div className="prices">
|
||||
{product.contactOnly ? (
|
||||
<div className="mt-auto">
|
||||
<span className="callus">تماس بگیرید</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-auto">
|
||||
<span className="price">{product.price}</span>
|
||||
<span className="toman">تومان</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="swiper-btn-wrap">
|
||||
<div className="swiper-btn-prev">
|
||||
<i className="fa fa-angle-left" style={{ lineHeight: 0 }} />
|
||||
</div>
|
||||
<div className="swiper-btn-next">
|
||||
<i className="fa fa-angle-right" style={{ lineHeight: 0 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { serviceCards } from "@/data/home";
|
||||
|
||||
export default function ServicesSection() {
|
||||
return (
|
||||
<div className="wb-frame" id="section">
|
||||
<section className="features-area py-lg-5 py-2">
|
||||
<div className="container-xxl">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="featured-columns-wrap">
|
||||
<div
|
||||
className="featured-items-style2 bg-img"
|
||||
style={{ backgroundImage: "url(/images/sections/products-banner.png)" }}
|
||||
>
|
||||
<div className="row row-gutter-0">
|
||||
{serviceCards.map((card) => (
|
||||
<div key={card.id} className="col-md-6">
|
||||
<div className="featured-item">
|
||||
<div className="featured-icon">
|
||||
<img alt={card.title} src={card.image} />
|
||||
</div>
|
||||
<div className="featured-info">
|
||||
<a href={card.href} title={card.title}>
|
||||
<h2
|
||||
style={{
|
||||
letterSpacing: "0px",
|
||||
fontWeight: 600,
|
||||
fontFamily: "iran-sans",
|
||||
fontSize: "20px",
|
||||
color: "#000000",
|
||||
}}
|
||||
>
|
||||
{card.title}
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
letterSpacing: "5px",
|
||||
fontWeight: 100,
|
||||
color: "#C1C1C1",
|
||||
fontFamily: "montserrat",
|
||||
fontSize: "10px",
|
||||
}}
|
||||
>
|
||||
{card.subtitle}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="featured-discount-item">
|
||||
<div
|
||||
className="thumb"
|
||||
style={{ backgroundImage: "url(/images/sections/category-bg.png)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
export default function ThemeStyles() {
|
||||
const theme = "/theme/css";
|
||||
const cdn = "https://cdn.meshkee.com";
|
||||
|
||||
const styles = [
|
||||
`${cdn}/web-builder/global/main-color-image.min.css`,
|
||||
`${cdn}/web-builder/fonts/montserrat/montserrat.css`,
|
||||
`${cdn}/web-builder/fonts/iran-sans/iran-sans.css`,
|
||||
`${theme}/bootstrap.min.css`,
|
||||
`${theme}/font-awesome.min.css`,
|
||||
`${theme}/fontello.css`,
|
||||
`${theme}/pe-icon-7-stroke.min.css`,
|
||||
`${theme}/animate.css`,
|
||||
`${theme}/aos.css`,
|
||||
`${theme}/swiper.min.css`,
|
||||
`${theme}/slick.css`,
|
||||
`${theme}/style.css`,
|
||||
`${theme}/rtl.css`,
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{styles.map((href) => (
|
||||
<link key={href} rel="stylesheet" href={href} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { videos } from "@/data/home";
|
||||
|
||||
export default function VideosSection() {
|
||||
return (
|
||||
<>
|
||||
<div className="wb-frame" id="video-carousel">
|
||||
<section
|
||||
id="videos"
|
||||
className="product-area product-grid-area"
|
||||
style={{ backgroundColor: "#FFFFFF" }}
|
||||
>
|
||||
<div className="container-xxl position-relative">
|
||||
<div className="row align-items-center rtl">
|
||||
<div className="col-6 text-right">
|
||||
<div className="section-title text-center">
|
||||
<h2
|
||||
className="title mb-1"
|
||||
style={{
|
||||
letterSpacing: "0px",
|
||||
fontWeight: 200,
|
||||
fontSize: "25px",
|
||||
textAlign: "right",
|
||||
direction: "rtl",
|
||||
color: "#252525",
|
||||
}}
|
||||
>
|
||||
آخرین ویدیو ها
|
||||
</h2>
|
||||
<div className="desc">
|
||||
<p
|
||||
style={{
|
||||
letterSpacing: 5,
|
||||
fontWeight: 0,
|
||||
color: "rgb(193, 193, 193)",
|
||||
fontSize: "10px",
|
||||
textAlign: "justify",
|
||||
}}
|
||||
>
|
||||
LATEST VIDEO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 text-start">
|
||||
<a className="btn-theme" href="#videos">
|
||||
<span style={{ letterSpacing: "0px", fontWeight: 0 }}>مشاهده بیشتر</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="overflow-hidden position-relative-responsive py-3">
|
||||
<div className="swiper gallery-slider-container">
|
||||
<div className="swiper-wrapper">
|
||||
{videos.map((video) => (
|
||||
<div key={video.id} className="swiper-slide">
|
||||
<div className="video-wrapper">
|
||||
<a href="#">
|
||||
<div className="img">
|
||||
<img src={video.image} alt={video.title} height="auto" width="auto" />
|
||||
</div>
|
||||
</a>
|
||||
<div className="video-info rtl">
|
||||
<h4 className="title">
|
||||
<a href="#" className="mb-0 mt-1 text-extra-dark-gray">
|
||||
{video.title}
|
||||
</a>
|
||||
</h4>
|
||||
<span className="date d-block">{video.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="swiper-btn-wrap">
|
||||
<div className="swiper-btn-prev">
|
||||
<i className="fa fa-angle-left" style={{ lineHeight: 0 }} />
|
||||
</div>
|
||||
<div className="swiper-btn-next">
|
||||
<i className="fa fa-angle-right" style={{ lineHeight: 0 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user