اصلاحات جدید کلی

app/components/footer/index.js

@@ -1,3 +1,4 @@
+
 import Link from "next/link";
 import style from "./footer.module.css";
 import styles from "../../../pages/index.module.css";
@@ -9,41 +10,19 @@ import panelAxios from "../../services/panelAxios";
 import dotenv from "dotenv";
 dotenv.config();
 
-function footer({ token, data }) {
+
+function Footer({ data }) {
   const [email, setEmail] = useState("");
   const [comment, setComment] = useState("");
   const submitComment = async () => {
     if (email != "") {
       const raw = JSON.stringify({
-        // ProcessName: "ConnectToUs",
-        // FieldValues: [
-        //   {
-        //     Name: "Email",
-        //     Value: email,
-        //   },
-        //   {
-        //     Name: "Comment",
-        //     Value: comment,
-        //   },
-        //   {
-        //     Name: "submitDate",
-        //     Value: "",
-        //   },
-        //   {
-        //     Name: "submitTime",
-        //     Value: "",
-        //   },
-        // ],
         ConnectToUs: {
           Email: email,
           Comment: comment,
         },
       });
-      await panelAxios.post("api/save", raw, {
+      await panelAxios.post("api/save", raw,{ });
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
 
       setEmail("");
       setComment("");
@@ -71,20 +50,20 @@ function footer({ token, data }) {
               </div>
               {data?.mobile1 && (
                 <div className={style.phone}>
-                  <Link href={`tel:${data.mobile1}`}>همراه:{data.mobile1}</Link>
+                  <Link href={`tel:${data?.mobile1}`}>همراه: {data?.mobile1}</Link>
                 </div>
               )}
 
               {data?.mobile2 && (
                 <div className={style.phone}>
-                  <Link href="tel:+989394396139">همراه:{data.mobile2}</Link>
+                  <Link href={`tel:${data?.mobile2}`}>همراه: {data?.mobile2}</Link>
                 </div>
               )}
             </div>
             <div className={style.links}>
-              <Link href="/telegram" className="icon telegramIcon"></Link>
+              <Link href={data?.link_social_title1 ?? ''}  target="_blank" className="icon telegramIcon"></Link>
-              <Link href="whatsApp" className="icon whatsAppIcon"></Link>
+              <Link href={data?.link_social_title2 ?? ''}  target="_blank" className="icon whatsAppIcon"></Link>
-              <Link href="/instagram" className="icon instagramIcon"></Link>
+              <Link href={data?.link_social_title3 ?? ''}  target="_blank" className="icon instagramIcon"></Link>
             </div>
             <div>
               <span>رایانامه: {data?.email1}</span>
@@ -141,7 +120,7 @@ function footer({ token, data }) {
           </div>
         </div>
         <span className={style.copyRight}>
-          تمام حقوق مادی و معنوی این وبسایت متعلق به این{" "}
+          تمام حقوق مادی و معنوی این وبسایت متعلق به شرکت{" "}
           <span className={style.domains}>{data?.company_name}</span> می باشد.
         </span>
       </div>
@@ -149,4 +128,4 @@ function footer({ token, data }) {
   );
 }
 
-export default footer;
+export default Footer;

app/components/navbar/header.module.css

@@ -39,12 +39,12 @@
 
 .logo {
     width: 50px;
-    height: 50px;
+    /* height: 50px; */
 }
 
 .logo img {
-    width: 100%;
+    width: 120%;
-    height: 100%;
+    height: 120%;
     object-fit: contain;
 }
 
@@ -62,7 +62,7 @@
 }
 
 .logoContent h1:last-child {
-    font-size: 10pt;
+    font-size: 17pt;
 }
 
 

app/components/navbar/index.js

@@ -1,3 +1,4 @@
+
 import Link from "next/link";
 import Image from "next/image";
 import logo from "../../../public/assets/photos/logo.svg";
@@ -35,13 +36,13 @@ const header = ({ backwardStatus, setbackwardStatus, data }) => {
         pageScroll(0);
         break;
       case "services":
-        pageScroll(550);
+        pageScroll(610);
         break;
       case "customers":
-        pageScroll(1450);
+        pageScroll(1750);
         break;
       case "aboutUs":
-        pageScroll(1830);
+        pageScroll(2170);
         break;
     }
   };

app/composables/index.js

@@ -1,5 +1,25 @@
-export async function fetchPageContent() {
+import panelAxios from "../services/panelAxios";
+
+export async function fetchPageContent(ip) {
   try {
+
+    try {
+      const raw = JSON.stringify({
+        ViewStatisticsFromTheSite: {
+          IP: ip,
+          ViewTime: "",
+          ViewDate: "",
+        },
+      });
+
+      await panelAxios.post("http://bpms-back.sepehrdata.com/api/save", raw);
+    } catch (err) {
+      console.log("Submit failed:", err);
+    }
+
+
+
+
     const response = await fetch("http://bpms-back.sepehrdata.com/api/select", {
       method: "POST",
       headers: {
@@ -17,6 +37,8 @@ export async function fetchPageContent() {
           "email1",
           "logo",
           "product_introduction",
+          "title_product_introduction1",
+          "title_product_introduction2",
           "product_introduction_image",
           "location_company",
           "link_social_title1",
@@ -57,3 +79,5 @@ export async function fetchPageContent() {
     };
   }
 }
+
+

app/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 import "../public/assets/styles/main.css";
 export const metadata = {
   title: "Create Next App",

pages/components/mainClient.js

@@ -1,23 +1,14 @@
 "use client";
 import Header from "../../app/components/navbar";
 import Image from "next/image";
-import dataMining from "../../public/assets/icons/mining.svg";
-import bmpImage from "../../public/assets/icons/bpms.svg";
-import alImage from "../../public/assets/icons/al.svg";
 import style from "../index.module.css";
 import interduceImg from "../../public/assets/photos/secondInterDuce.png";
 import Slider from "react-slick";
-import boton from "../../public/assets/photos/boton.png";
-import denik from "../../public/assets/photos/denik.jpg";
-import firstCustomer from "../../public/assets/photos/customer.jpg";
-import Customer2 from "../../public/assets/photos/customer2.jpg";
 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 panelAxios from "../../app/services/panelAxios";
-import dotenv from "dotenv";
 import Link from "next/link";
 
 const MainClient = ({ data }) => {
@@ -60,101 +51,15 @@ const MainClient = ({ data }) => {
       },
     ],
   };
-  const [authtoken, setAuthToken] = useState("");
-  dotenv.config();
 
-  // const getUser = async () => {
-  //   debugger;
-  //   const res = await panelAxios
-  //     .post("person/login", {
-  //       userName: "mehrdad",
-  //       password: "13811381",
-  //     })
-  //     .catch((err) => {
-  //       console.log(err);
-  //     });
-  //   const data = await JSON.parse(res.data.data)?.Token?.AccessToken;
-  //   return data;
-  // };
  
-  const submitView = async (tokenFromEnv, ip) => {
-    const raw = JSON.stringify({
-      // ViewStatisticsFromTheSite: [
-      //   {
-      //     Name: "IP",
-      //     Value: ip
-      //   },
-      //   {
-      //     Name: "ViewTime",
-      //     Value: ""
-      //   },
-      //   {
-      //     Name: "ViewDate",
-      //     Value: ""
-      //   }
-      // ]
-      ViewStatisticsFromTheSite: {
-        IP: ip,
-        ViewTime: "",
-        ViewDate: "",
-      },
-    });
-    await panelAxios
-      .post("api/save", raw, {
-        headers: {
-          Authorization: `Bearer ${tokenFromEnv}`,
-        },
-      })
-      .catch(async (err) => {
-        console.log("error is Active!", err);
-        const userToken = await getUser();
-        const ipAddress = await getIP();
-        const raw = JSON.stringify({
-          ViewStatisticsFromTheSite: {
-            IP: ipAddress,
-            ViewTime: "",
-            ViewDate: "",
-          },
-        });
 
-        await panelAxios.post("api/save", raw, {
-          headers: {
-            Authorization: `Bearer ${userToken}`,
-          },
-        });
-      });
-  };
-
-  // const getIP = async () => {
-  //   try {
-  //     const res = await fetch("https://api64.ipify.org?format=json");
-  //     const data = await res.json();
-  //     return data.ip;
-  //   } catch (e) {
-  //     console.log(e);
-  //   }
-  // };
 
   useEffect(() => {
     setCustomerSlider(JSON.parse(data.customer));
     setCompanyServices(JSON.parse(data.service));
   }, []);
 
-  // useEffect(async () => {
-  //   let tokenFromEnv = process.env.TOKEN;
-  //   if (tokenFromEnv != "" && tokenFromEnv != undefined) {
-  //     console.log("have token");
-  //     const ipAddress = await getIP();
-  //     await submitView(tokenFromEnv, ipAddress);
-  //   } else {
-  //     console.log("Do Not Have Token");
-  //     const userToken = await getUser();
-  //     // process.env.TOKEN = userToken;
-  //     setAuthToken(userToken);
-  //     const ipAddress = await getIP();
-  //     await submitView(userToken, ipAddress);
-  //   }
-  // }, []);
 
   return (
     <>
@@ -172,30 +77,71 @@ const MainClient = ({ data }) => {
         <div className="container">
           <div className={style.headContent}>
             <div className={style.content}>
-              <div className={style.desc}>
+              {/* <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>
@@ -217,12 +163,15 @@ const MainClient = ({ data }) => {
                     <div className="head">
                       <div className="cardLogo">
                         <Image
-                          src={dataMining}
+                          src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${el.ValueP1161S1750StageID}&nameOrID=patent_first_page_image&token=`}
-                          alt="DataMining"
+                          width={500}  // یک مقدار عددی
+                          height={300} // یک مقدار عددی
+                          style={{ width: '100%', height: 'auto' }} // ریسپانسیو
+                          alt={el.title}
                           priority={true}
                         />
                       </div>
-                      <h1>{data?.title}</h1>
+                      <h1>{el?.title}</h1>
                     </div>
                     <div className="content">
                       <p className="minimize">{el?.description}</p>
@@ -231,97 +180,34 @@ const MainClient = ({ data }) => {
                 );
               })}
 
-              {/* <div className="card">
-                <div className="head">
-                  <div className="cardLogo">
-                    <Image src={bmpImage} alt="DataMining" priority={true} />
-                  </div>
-                  <h1>BPMS</h1>
-                </div>
-                <div className="content">
-                  <p className="minimize ">
-                    مدیریت فرایند کسب و کار (BPM) بر استقرار فرایندی خودکار و
-                    یک‌پارچه برای معاملات معمول و تعاملات انسانی متمرکز است. این
-                    حوزه از مدیریت از طریق کاهش دوباره‌کاری و اتلاف‌، به کاهش
-                    هزینه در سازمان و کارایی تیم‌ها کمک می‌کند.
-                  </p>
-                </div>
-              </div>
-              <div className="card">
-                <div className="head">
-                  <div className="cardLogo">
-                    <Image src={alImage} alt="DataMining" priority={true} />
-                  </div>
-                  <h1>Artificial Intelligence</h1>
-                </div>
-                <div className="content">
-                  <p className="minimize">
-                    هوش مصنوعی شامل شاخه های متنوعی است که مباحث داده کاوی،
-                    پردازش متن، پردازش تصویر و در کل هوشمند سازی سامانه های
-                    مختلف با استفاده از پیشرفته ترین الگوریتم ها از توانمندی های
-                    متخصصین سپهر می باشد.
-                  </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">هایپر</h1>
+                  <h1 className="icon triAngleIcon txtPrimary">{data?.title_product_introduction1}</h1>
-                  <h1 className="txtSecondPrimary">اتوماسیون</h1>
+                  <h1 className="txtSecondPrimary">{data?.title_product_introduction2}</h1>
                 </div>
                 <div className={style.hyperDesc}>
                   <p className="minimize seventh">
                     {data?.product_introduction}
-                    {/* هایپر اتوماسیون ابزاری است که از فناوری های هوشمند برای
+
-                    خودکارسازی فعالیت هایی که توسط انسان انجام می شوند، استفاده
-                    می کند. فناوری های مورد استفاده در هایپر اتوماسیون شامل هوش
-                    مصنوعی (Artificial intelligence)، یادگیری ماشین (Machine
-                    Learning)، سیستم مدیریت فرآیندهای تجاری (Business Process
-                    Management System) و اتوماسیون فرآیند رباتیک (Robotic
-                    Process Automation) می باشند. هایپر اتوماسیون بر وظایف و
-                    فرآیندهای قابل خودکارسازی تمرکز دارد و اغلب از آن به عنوان
-                    مرحله اصلی بعدی تحول دیجیتال یاد می‌شود. */}
                   </p>
                 </div>
               </div>
               <div className={style.descRobot}>
-                <div className={style.interduce}>
+                <div className={style.imageSection}>
-                  <div className={`${style.BPMS} ${style.circleRight}`}>
+                  <img
-                    <h2>BPMS</h2>
+                    src={`http://bpms-back.sepehrdata.com/api/getimage?stageID=${data?.ValueP1166S1770StageID}&nameOrID=product_introduction_image&token=`}
-                    <p className="minimize forth">
+                    alt={data?.title_product_introduction1 +' ' +data?.title_product_introduction2}
-                      Business Process Management System
+                    className={style.robotImage}
-                    </p>
+                  />
-                  </div>
-                  <div className={style.AL}>
-                    <h2>AL</h2>
-                    <p className="minimize forth">Artificial Intelligence</p>
-                  </div>
-                  <div className={`${style.Others} ${style.circleRight}`}>
-                    <h2>Others</h2>
-                    <p className="minimize forth">
-                      Other AdvancedAutomation Tools And Analytics
-                    </p>
-                  </div>
-                  <div className={style.ML}>
-                    <h2>ML</h2>
-                    <p className="minimize forth">Machine Learning</p>
-                  </div>
-                </div>
-                <div className={style.robotic}>
-                  <div className={`${style.field} ${style.first}`}></div>
-                  <div className={`${style.field} ${style.seconde}`}></div>
-                  <div className={style.interduce}>
-                    <span>Robotic Process Automation</span>
-                  </div>
-                  <div className={`${style.field} ${style.third}`}></div>
-                  <div className={`${style.field} ${style.fourth}`}></div>
-                </div>
-              </div>
                 </div>
 
+
+              </div>
+            </div>
             <div className="customer">
               <div className={style.title}>
                 <h1 className="icon triAngleIcon txtPrimary">مشتریان</h1>
@@ -330,44 +216,28 @@ const MainClient = ({ data }) => {
               <Slider {...settings}>
   {customerSlider?.map((el) => {
     return (
+      <div key={`customer-${el.WorkflowID}-${el.ValueP1162S1754StageID}`} className={style.customerItem}>
         <Link
-                      key={`customer-${el.WorkflowID}-${el.ValueP1162S1754StageID}`}
           className={style.customerBrand}
           href={el.website}
           target="_blank"
         >
-                      <Image src={firstCustomer} alt="brand" priority={true} />
+          <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>
     );
   })}
-                {/* <Link
-                  className={style.customerBrand}
-                  href="https://smdpcb.ir/"
-                  target="_blank"
-                >
-                  <Image src={firstCustomer} alt="brand" priority={true} />
-                </Link>
-                <Link
-                  className={style.customerBrand}
-                  href="http://mojntco.ir/"
-                  target="_blank"
-                >
-                  <Image src={Customer2} alt="brand" priority={true} />
-                </Link>
-                <Link
-                  className={style.customerBrand}
-                  href="http://hyper.deniklaser.ir/"
-                  target="_blank"
-                >
-                  <Image src={denik} alt="brand" priority={true} />
-                </Link>
-                <Link
-                  className={style.customerBrand}
-                  href="http://betonbs.com/"
-                  target="_blank"
-                >
-                  <Image src={boton} alt="brand" priority={true} />
-                </Link> */}
 </Slider>
             </div>
 
@@ -380,14 +250,11 @@ const MainClient = ({ data }) => {
               </div>
               <div className={style.sepehrDesc}>
                 <p>
-                  هم اکنون شرکت داده کاوی سپهر توس بعد از پذیرش در{" "}
+                {data?.company_introduction}
-                  <span className="special">پارک علم و فناوری خراسان</span> حول
-                  محصولات <span className="special">مبتنی بر هوش مصنوعی</span>{" "}
-                  مشغول به فعالیت می باشد.
                 </p>
               </div>
             </div>
-            <Footer token={authtoken} data={data} />
+            <Footer  data={data} />
           </div>
         </div>
       </div>

pages/index.js

@@ -1,12 +1,22 @@
 // pages/index.js
 import { fetchPageContent } from "../app/composables";
+import { submitView  } from "../app/composables";
+
 import MainClient from "./components/mainClient";
 
-export async function getServerSideProps() {
+export async function getServerSideProps({ req }) {
-  const data = await fetchPageContent();
+  const ip =
+  req.headers["x-forwarded-for"]?.split(",")[0] ||
+  req.socket.remoteAddress ||
+  "";
+
+  const data = await fetchPageContent(ip);
   return data;
 }
 
+
 export default function Home({ data }) {
   return <MainClient data={data} />;
 }
+
+

pages/index.module.css

@@ -8,6 +8,190 @@
 }
 
 
+
+
+
+
+
+
+.introduceSlider {
+    width: 100%;
+    height: 600px;
+    margin-top: 40px;
+    direction: rtl;
+    position: relative;
+  }
+  
+  .slideItem {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    height: 440px;
+  }
+  
+  .slideContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 40px;
+    width: 100%;
+  }
+  
+  .slideImage {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  
+  .slideText {
+    flex: 1;
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .slideText h1 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .slideText p {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+    /* color: #333; */
+    color: var(--secondTextColor);
+    text-align: justify;
+    direction: rtl;
+    text-align: justify;
+  }
+  
+  .slideLink {
+    margin-top: 15px;
+    display: inline-block;
+    color: #0070f3;
+    text-decoration: underline;
+    font-weight: bold;
+  }
+  
+  /* --- نقطه‌های پایین اسلایدر --- */
+  .customDots {
+    position: absolute;
+    bottom: 10px; /* نزدیک‌تر به داخل کادر */
+    left: 0;
+    right: 0;
+    
+    display: flex !important;
+    justify-content: center;
+    pointer-events: none; /* روی نقاط کلیک هنوز کار می‌کنه */
+    
+  }
+  
+  .customDots ul {
+    display: flex !important;
+    gap: 8px;
+    padding: 0;
+    margin: 0;
+  }
+  
+  .dot {
+    width: 24px;
+    height: 24px;
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    pointer-events: auto; /* برای کلیک روی نقاط */
+  }
+  
+  .customDots li.slick-active .dot {
+    background-color: #0070f3;
+    transform: scale(1.2);
+    box-shadow: 0 0 4px rgba(0, 112, 243, 0.8);
+  }
+  
+  /* --- واکنش‌گرا --- */
+  @media (max-width: 768px) {
+    .slideContent {
+      flex-direction: column;
+      text-align: center;
+    }
+  
+    .slideImage,
+    .slideText {
+      flex: none;
+      width: 100%;
+    }
+  
+    .introduceSlider {
+      height: auto;
+    }
+  
+    .slideItem {
+      height: auto;
+      padding: 20px 0;
+    }
+  }
+  
+
+
+
+  .hyperAutomation {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: inherit; /* رنگ زمینه همونی که هست */
+    height: 100%; /* ارتفاع همون اندازه قبلی بمونه */
+    padding: 2rem 0;
+    font-family: inherit; /* فونت جاری سامانه حفظ شود */
+  }
+  
+  .contentWrapper {
+    display: flex;
+    flex-direction: row; /* عکس چپ، متن راست */
+    align-items: center;
+    justify-content: space-between;
+    width: 90%;
+    max-width: 1200px;
+    height: 100%; /* برای حفظ ارتفاع */
+  }
+  
+  .imageSection {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .robotImage {
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+  
+  .textSection {
+    flex: 1;
+    padding-right: 2rem;
+  }
+  
+  .title {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+  
+
+
+
+
+
+
+
+
+
+
 .parent::before {
     content: "";
     display: flow-root;
@@ -93,6 +277,7 @@
     margin-top: 60px;
 }
 
+
 /* services */
 .services {
     margin: 50px 0;

public/assets/styles/main.css

@@ -551,3 +551,37 @@ button {
         width: 280px;
     }
 }
+
+.customerItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 10px;
+  }
+  
+  .customerBrand {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+  }
+  
+  .titleContainer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 8px;
+  }
+  
+  .customerTitle {
+    font-size: 18px;
+    color:var(--textColor);
+    text-align: center;
+    line-height: 1.4;
+    font-weight: normal;
+    margin-top: 10px;
+    padding: 0 10px;
+  }