faq

app/page.tsx

@@ -2,15 +2,21 @@ import Image from "next/image";
 import Header from "../components/nav_foot/header";
 import Navbar from "@/components/nav_foot/navbar";
 import Products from "@/components/pageParts/products";
+import Texnika from "@/components/pageParts/texnika";
+import Offer from "@/components/pageParts/offer";
+import Faq from "@/components/pageParts/faq";
 
 export default function Home() {
   return (
     <div >
       <Header/>
       <Navbar/>
-      <section id="products" className="mt-50">  
+      <section id="products" className="mt-50 mb-10">  
         <Products/>
       </section>
+      <Texnika/>
+      <Offer/>
+      <Faq/>
     </div>
   );
 }

assets/index.ts

@@ -175,3 +175,6 @@ export {default as Kohota } from './partners/kohota.png';
 export {default as Minerva } from './partners/minerva.png';
 export {default as NRG } from './partners/nrg.png';
 export {default as ToshCity } from './partners/tashkentcity.png';
+
+// offer ekskavator image
+export {default as Ekskavator_offer} from './excavator.png';

components/nav_foot/navbar.tsx

@@ -33,7 +33,7 @@ export default function Navbar() {
 
   return (
     <div
-      className={`w-[100%] mt-12 bg-white  border-gray shadow-lg shadow-gray-200 fixed z-[1000] top-0`}
+      className={`w-[100%] bg-white  border-gray shadow-lg shadow-gray-200 z-[1000] top-0`}
     >
       <div className="container max-w-[1500px] w-full px-[10px] mx-auto items-center justify-between ">
         <div

components/pageParts/faq.tsx

@@ -0,0 +1,103 @@
+import type { CollapseProps } from "antd";
+import { Collapse } from "antd";
+import Text from "../text";
+import Title from "../tools/title";
+
+const FaqTexts: CollapseProps["items"] = [
+  {
+    key: "1",
+    showArrow: false,
+    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
+    label: (
+      <div className="text-black text-2xl font-[600]">
+        <Text txt="faq1" />
+      </div>
+    ),
+    children: (
+      <div className="pl-5 text-gray-500 text-[16px]">
+        <Text txt="faq-answer-1" />
+      </div>
+    ),
+  },
+  {
+    key: "2",
+    showArrow: false,
+    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
+    label: (
+      <div className="text-black text-2xl font-[600]">
+        <Text txt="faq2" />
+      </div>
+    ),
+    children: (
+      <div className="pl-5 text-gray-500 text-[16px]">
+        <Text txt="faq-answer-2" />
+      </div>
+    ),
+  },
+  {
+    key: "3",
+    showArrow: false,
+    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
+    label: (
+      <div className="text-black text-2xl font-[600]">
+        <Text txt="faq3" />
+      </div>
+    ),
+    children: (
+      <div className="pl-5 text-gray-500 text-[16px]">
+        <p className="mb-3">
+          <Text txt="faq-answer-3" />
+        </p>
+        <ul className="pl-4 flex flex-col gap-2">
+          <li className="flex items-center justify-end gap-3">
+            <Text txt="faq-answer-3-1" />
+            <span className="w-[8px] h-[8px] bg-gray-500 rounded-[50%]"></span>
+          </li>
+          <li className="flex items-center justify-end gap-3">
+            <Text txt="faq-answer-3-2" />
+            <span className="w-[8px] h-[8px] bg-gray-500 rounded-[50%]"></span>
+          </li>
+          <li className="flex items-center justify-end gap-3">
+            <Text txt="faq-answer-3-3" />
+            <span className="w-[8px] h-[8px] bg-gray-500 rounded-[50%]"></span>
+          </li>
+        </ul>
+      </div>
+    ),
+  },
+  {
+    key: "4",
+    showArrow: false,
+    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-5",
+    label: (
+      <div className="text-black text-2xl font-[600]">
+        <Text txt="faq4" />
+      </div>
+    ),
+    children: (
+      <div className="pl-5 text-gray-500 text-[16px]">
+        <Text txt="faq-answer-4" />
+      </div>
+    ),
+  },
+];
+
+export default function Faq() {
+  return (
+    <div className="max-w-[1200px] w-full mx-auto text-left  mb-30">
+      <div className="mb-10">
+        <Title text="faq-h2" />
+      </div>
+      <div>
+        <Collapse
+          ghost
+          accordion
+          className="border-[3px] border-b-[3px] bg-white border-secondary rounded-[50px] mb-5"
+          items={FaqTexts}
+          bordered={false}
+          defaultActiveKey={["1"]}
+        />
+      </div>
+    </div>
+  );
+}

components/pageParts/offer.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+import Title from "../tools/title";
+import Text from "../text";
+import { Ekskavator_offer } from "@/assets";
+
+export default function Offer() {
+  return (
+    <div className="my-6 mb-30 ">
+      {/* title */}
+      <div className="my-20">
+        <Title text="about-h2" />
+      </div>
+
+      {/* body */}
+      <div className="flex max-[1200px]:flex-wrap items-start justify-end max-w-[1200px] w-full mx-auto">
+        <Image
+          src={Ekskavator_offer}
+          alt="Ekskavator image"
+          className="max-[1200px]:flex hidden w-[700px] "
+        />
+
+        <div className="flex flex-col items-end text-left justify-end gap-5 text-gray-500 max-w-[500px] w-full min-w-[600px] ">
+          <div className="text-[16px] leading-[30px]">
+            <Text txt="about-p" />
+          </div>
+          <div className="text-primary flex flex-col text-[18px] relative pl-8">
+            <div className=" absolute left-0">
+                <div className="bg-primary w-[3px] h-[28px]"></div>
+                <div className="bg-secondary w-[3px] h-[100px]"></div>
+            </div>
+            <span>"</span>
+            <Text txt="about-block-quote" />
+            <span className="mt-2">"</span>
+          </div>
+          <button className="group relative text-white hover:text-primary">
+            <Text txt="contact-us" />
+          </button>
+        </div>
+
+        <Image
+          src={Ekskavator_offer}
+          alt="Ekskavator image"
+          className="min-[1200px]:flex hidden w-[700px] "
+        />
+      </div>
+    </div>
+  );
+}

components/pageParts/texnika.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Marquee from "react-fast-marquee";
+import Title from "../tools/title";
+import { Gehl, Hyundai, JCB, Lonking, Mitsubishi, XCMG } from "@/assets";
+import Image, { StaticImageData } from "next/image";
+
+const slideImage: StaticImageData[] = [
+  Lonking,
+  Hyundai,
+  Gehl,
+  JCB,
+  Mitsubishi,
+  XCMG,
+];
+
+export default function Texnika() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-20 mt-20 max-w-[1200px] w-full mx-auto">
+      <Title text="brand-h2" />
+      <Marquee
+        direction="left"
+        className="ml-20"
+      >
+        {slideImage.map((item, index) => (
+          <div
+            key={index}
+            className="mx-10 min-w-[200px] flex items-center justify-center"
+          >
+            <Image
+              src={item}
+              alt={`Brand ${index}`}
+              width={200}
+              height={200}
+              className="object-contain"
+            />
+          </div>
+        ))}
+      </Marquee>
+    </div>
+  );
+}

components/text.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useTranslation } from "react-i18next";
 
 export default function Text({txt}:{txt:string}) {

components/tools/title.tsx

@@ -4,6 +4,6 @@ import Text from '../text'
 
 export default function Title({text}:TitleType) {
   return (
-    <div className='text-primary md:text-[45px] text-[25px] w-full text-center font-bold '><Text txt={text} /></div>
+    <div className='text-primary md:text-[40px] text-[25px] w-full text-center font-bold '><Text txt={text} /></div>
   )
 }

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "antd": "^5.27.4",
     "i18next": "^25.5.3",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
@@ -16,6 +17,7 @@
     "next-i18next": "^15.4.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-fast-marquee": "^1.6.5",
     "react-i18next": "^16.0.0",
     "react-icons": "^5.5.0",
     "react-scroll": "^1.9.3"

public/locales/uz/common.json

@@ -59,23 +59,23 @@
     "feedback-4": "Biz SPES-TEXNIKA kompaniyasining ijaraga berish xizmatlaridan bir yildan ortiq vaqt davomida foydalanib kelmoqdamiz va ular doimo yuqori sifatli xizmat ko'rsatishmoqda. Ijaraga olgan kranlarimiz va kompressorlarimiz yaxshi holatda bo'lib, muammosiz ishladi. Ularning jamoasi yuqori malakali bo'lib, loyihalarimiz uzluksiz davom etishi uchun barcha imkoniyatlarni ishga soladilar. Biz boshqa hech kimga o'z jihozlarimizni ishonib topshirmaymiz.",
     "brand-h2": "Avtoparkimiz jahon brendlarining maxsus texnikalaridan iborat",
     "about-h2": "Biz sizga eng yaxshisini taklif qilamiz",
-    "about-p": "Toshkentda ixtisoslashtirilgan uskunalarni ijaraga olish murakkab loyihalarni amalga oshirishni soddalashtiradigan va qurilish jarayonlarini tezlashtiradigan, shu bilan birga eng yuqori natijani ta'minlaydigan eng muhim xizmatdir. Bunday uskunani sotib olish muammosi bir nechta jihozlarni sotib olish bilan bog'liq yuqori xarajatlar va uzoq muddatli qoplash muddatlarini hisobga olgan holda qiyin bo'lishi mumkin. Yaxshiyamki, bizning kompaniyamiz tejamkor alternativani taklif qiladi: ixtisoslashtirilgan uskunalarni ijaraga berish xizmatlari.",
+    "about-p": "Toshkentda ixtisoslashtirilgan uskunalarni ijaraga olish murakkab loyihalarni amalga oshirishni soddalashtiradigan va qurilish jarayonlarini tezlashtiradigan, shu bilan birga eng yuqori natijani ta'minlaydigan eng muhim xizmatdir. Bunday uskunani sotib olish muammosi bir nechta jihozlarni sotib olish bilan bog'liq yuqori xarajatlar va uzoq muddatli qoplash muddatlarini hisobga olgan holda qiyin bo'lishi mumkin. Yaxshiyamki, bizning kompaniyamiz tejamkor alternativani taklif qiladi: ixtisoslashtirilgan uskunalarni ijaraga berish xizmatlari",
     "about-block-quote": "Iltimos, bizning maxsus takliflarimiz va chegirmalarimizga e'tibor bering! Bugun biz bilan bog'laning va mutaxassislarimizdan maslahat oling",
     "contact-us": "Biz bilan bog'laning",
     "news-h2": "So'nggi yangiliklar va yangilanishlar",
     "Excavator": "Ekskavator",
     "faq-h2": "Tez-tez so'raladigan savollar",
-    "faq1": "Dam olish kunlari maxsus jihozlarga buyurtma berish mumkinmi ?",
-    "faq-answer-1": "Ha, mumkin. Biz 24/7 buyurtmalarni qabul qilamiz va bajaramiz.",
-    "faq2": "Maxsus texnika xizmatlarini ko'rsatishning minimal muddati qancha ?",
-    "faq-answer-2": "Minimal ijara muddati 30 soatdan boshlanadi.",
-    "faq3": "Sizda qanday maxsus uskunalar mavjud?",
-    "faq-answer-3": "Bizning parkimizda quyidagilar mavjud:",
+    "faq1": "? Dam olish kunlari maxsus jihozlarga buyurtma berish mumkinmi",
+    "faq-answer-1": "Ha, mumkin. Biz 24/7 buyurtmalarni qabul qilamiz va bajaramiz",
+    "faq2": "? Maxsus texnika xizmatlarini ko'rsatishning minimal muddati qancha",
+    "faq-answer-2": "Minimal ijara muddati 30 soatdan boshlanadi",
+    "faq3": "? Sizda qanday maxsus uskunalar mavjud",
+    "faq-answer-3": ": Bizning parkimizda quyidagilar mavjud",
     "faq-answer-3-1": "Yuk ko'tarish quvvati 7 tonnagacha bo'lgan manipulyatorlar",
     "faq-answer-3-2": "G'ildirakli va izli ekskavatorlar",
     "faq-answer-3-3": "Old va vilkalar (teleskopik) yuklagichlar va boshqalar",
-    "faq4": "To'lov shakli qanday?",
-    "faq-answer-4": "Shakl to'lov har qanday, shu jumladan mobil ilovalar orqali.",
+    "faq4": "? To'lov shakli qanday",
+    "faq-answer-4": "To`lov shakli har qanday, shu jumladan mobil ilovalar orqali",
     "partner-h2": "Bizning sheriklarimiz",
     "contact-h2": "Qo'ng'iroqni buyurtma qiling",
     "footer-p": "Har qanday qurilish loyihalarini muvaffaqiyatli bajarish uchun ishonchlilik, ishlash va chidamlilik.",