267 lines
8.3 KiB
JavaScript
267 lines
8.3 KiB
JavaScript
"use client";
|
|
import Header from "../../app/components/navbar";
|
|
import Image from "next/image";
|
|
import style from "../index.module.css";
|
|
import interduceImg from "../../public/assets/photos/secondInterDuce.png";
|
|
import Slider from "react-slick";
|
|
import "slick-carousel/slick/slick.css";
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
import Footer from "../../app/components/footer";
|
|
import { useEffect, useState } from "react";
|
|
import Head from "next/head";
|
|
import Link from "next/link";
|
|
|
|
const MainClient = ({ data }) => {
|
|
const [backwardStatus, setbackwardStatus] = useState(null);
|
|
|
|
const [customerSlider, setCustomerSlider] = useState(null);
|
|
const [companyServices, setCompanyServices] = useState(null);
|
|
// const [pageContent, setPageContent] = useState();
|
|
const settings = {
|
|
dots: false,
|
|
infinite: true,
|
|
autoplay: true,
|
|
autoplaySpeed: 2000,
|
|
speed: 2000,
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2,
|
|
infinite: true,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
initialSlide: 1,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
setCustomerSlider(JSON.parse(data.customer));
|
|
setCompanyServices(JSON.parse(data.service));
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{data?.company_name}</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<link rel="icon" href="/assets/photos/logo.svg" />
|
|
</Head>
|
|
<Header
|
|
backwardStatus={backwardStatus}
|
|
setbackwardStatus={setbackwardStatus}
|
|
data={data}
|
|
/>
|
|
<div className={style.parent}>
|
|
<div className="container">
|
|
<div className={style.headContent}>
|
|
<div className={style.content}>
|
|
{/* <div className={style.desc}>
|
|
<div className={`${style.title} right`}>
|
|
<h1 className="txtPrimary">معرفی</h1>
|
|
<h1 className="txtSecondPrimary">{data?.company_name}</h1>
|
|
</div>
|
|
<p>
|
|
{data?.company_introduction}
|
|
</p>
|
|
</div> */}
|
|
|
|
|
|
<div className={style.introduceSlider}>
|
|
<Slider
|
|
dots={true}
|
|
infinite={true}
|
|
autoplay={true}
|
|
autoplaySpeed={4000}
|
|
speed={1000}
|
|
slidesToShow={1}
|
|
slidesToScroll={1}
|
|
arrows={false}
|
|
>
|
|
{(() => {
|
|
let slides = [];
|
|
|
|
try {
|
|
slides = data?.slider ? JSON.parse(data.slider) : [];
|
|
} catch {
|
|
slides = [];
|
|
}
|
|
|
|
if (!Array.isArray(slides) || slides.length === 0) return null;
|
|
|
|
return slides.map((el, index) => (
|
|
<div key={`intro-slide-${index}`} className={style.slideItem}>
|
|
<div className={style.slideContent}>
|
|
<div className={style.slideImage}>
|
|
<Image
|
|
src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${el.ValueP1160S1746StageID}&nameOrID=image&token=`}
|
|
width={600}
|
|
height={600}
|
|
style={{ width: "100%", height: "auto", borderRadius: "20px" }}
|
|
alt={el.title ?? ""}
|
|
priority={true}
|
|
/>
|
|
</div>
|
|
<div className={style.slideText}>
|
|
<h1 className="txtPrimary">{el.title}</h1>
|
|
<p className="content">{el.description}</p>
|
|
{el.link && (
|
|
<Link href={el.link} target="_blank" className={style.slideLink}></Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
));
|
|
})()}
|
|
|
|
</Slider>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={style.image}>
|
|
<Image src={interduceImg} alt="interduce" priority={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={style.services}>
|
|
<div className={style.title}>
|
|
<h1 className="icon triAngleIcon txtPrimary">خدمات</h1>
|
|
<h1 className="txtSecondPrimary">{data?.company_name}</h1>
|
|
</div>
|
|
<div className={style.cards}>
|
|
{companyServices?.map((el) => {
|
|
return (
|
|
<div
|
|
className="card"
|
|
key={`service-${el.WorkflowID1}-${el.ValueP1161S1750StageID}`}
|
|
>
|
|
<div className="head">
|
|
<div className="cardLogo">
|
|
<Image
|
|
src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${el.ValueP1161S1750StageID}&nameOrID=patent_first_page_image&token=`}
|
|
width={500} // یک مقدار عددی
|
|
height={300} // یک مقدار عددی
|
|
style={{ width: '100%', height: 'auto' }} // ریسپانسیو
|
|
alt={el.title}
|
|
priority={true}
|
|
/>
|
|
</div>
|
|
<h1>{el?.title}</h1>
|
|
</div>
|
|
<div className="content">
|
|
<p className="minimize">{el?.description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
</div>
|
|
</div>
|
|
<div className={style.mainContent}>
|
|
<div className={style.hyperAutomation}>
|
|
<div className={style.aboutHyper}>
|
|
<div className={`${style.title} right`}>
|
|
<h1 className="icon triAngleIcon txtPrimary">{data?.title_product_introduction1}</h1>
|
|
<h1 className="txtSecondPrimary">{data?.title_product_introduction2}</h1>
|
|
</div>
|
|
<div className={style.hyperDesc}>
|
|
<p className="minimize seventh">
|
|
{data?.product_introduction}
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className={style.descRobot}>
|
|
<div className={style.imageSection}>
|
|
<img
|
|
src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${data?.ValueP1166S1770StageID}&nameOrID=product_introduction_image&token=`}
|
|
alt={data?.title_product_introduction1 +' ' +data?.title_product_introduction2}
|
|
className={style.robotImage}
|
|
/>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div className="customer">
|
|
<div className={style.title}>
|
|
<h1 className="icon triAngleIcon txtPrimary">مشتریان</h1>
|
|
<h1 className="txtSecondPrimary">{data?.company_name}</h1>
|
|
</div>
|
|
<Slider {...settings}>
|
|
{customerSlider?.map((el) => {
|
|
return (
|
|
<div key={`customer-${el.WorkflowID}-${el.ValueP1162S1754StageID}`} className={style.customerItem}>
|
|
<Link
|
|
className={style.customerBrand}
|
|
href={el.website}
|
|
target="_blank"
|
|
>
|
|
<Image
|
|
src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${el.ValueP1162S1754StageID}&nameOrID=image&token=`}
|
|
width={500}
|
|
height={300}
|
|
style={{ width: '100%', height: 'auto' }}
|
|
alt="brand"
|
|
priority={true}
|
|
/>
|
|
</Link>
|
|
{/* عنوان */}
|
|
<div className="customerTitle">
|
|
<p>{el?.title}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</Slider>
|
|
</div>
|
|
|
|
<div className={style.whatIsSepehrdata}>
|
|
<div className={style.title}>
|
|
<h1 className="icon triAngleIcon txtSecondPrimary">
|
|
{data?.company_name}
|
|
</h1>
|
|
<h1 className="txtPrimary">چیست؟</h1>
|
|
</div>
|
|
<div className={style.sepehrDesc}>
|
|
<p>
|
|
{data?.company_introduction}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Footer data={data} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`backward ${backwardStatus ? "show" : ""}`}></div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MainClient;
|