Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

everything

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2025-10-22 02:17:48 +05:00
parent 90b1cd765a
commit abcccfbf4b
13 changed files with 140 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/pageParts/contact.tsx
View File

@@ -3,7 +3,8 @@ export default function Contact() {
return (
<section dir="ltr" className="relative w-full bg-primary py-20 flex justify-center mt-40">
<div className=" absolute z-20 -top-25 bg-secondary max-w-[1200px] w-full py-10 flex flex-col items-center clip-trapezoid">
<h2 className="text-2xl md:text-3xl font-bold text-primary mb-5 text-center">
<div id="contactClip" className="w-full flex flex-col items-center justify-center">
<h2 className="text-2xl md:text-3xl font-bold text-primary mb-5 text-center">
Qo'ng'iroqni buyurtma qiling
</h2>
@@ -18,8 +19,9 @@ export default function Contact() {
Menga qo'ng'iroq qiling
</button>
</div>
</div>
</div>
<div className="bg-[#d38307] clip-part absolute -top-25 py-[50px] px-18 left-[97px] z-10" ></div>
{/* <div className="bg-[#d38307] clip-part absolute -top-25 py-[50px] px-18 left-[97px] z-10" ></div> */}
</section>
);
}

64
components/pageParts/newsSlider.tsx
View File

@@ -4,44 +4,37 @@ import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import Image from "next/image";
import Title from "../title";
import SliderCard from "../cards/sliderCard";
import { sliderData } from "@/data";
// The custom CSS selectors for navigation
const navigationPrevEl = ".custom-swiper-prev";
const navigationNextEl = ".custom-swiper-next";
const data = [
{
id: 1,
image: "/images/yuklagich.jpg",
title: "Old Yuklagich",
text: "Yangi yuklagich siz uchun eng yaxshi texnika!",
path: "",
},
{
id: 2,
image: "/images/kompressor.jpg",
title: "Kompressor",
text: "Yangi kompressorlar to'plami aynan siz uchun",
path: "",
},
{
id: 3,
image: "/images/avtokran.jpg",
title: "Avtokran",
text: "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi.",
path: "",
},
];
export default function CustomSlider() {
return (
<div dir="ltr" className="w-full relative">
<div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20">
{/* Title */}
<div className="my-10 mb-20 flex items-center justify-between">
<Title text="news-h2" />
<div className="my-10 mb-20 flex items-center justify-between ">
<div className="">
<Title text="news-h2" />
</div>
{/* Custom buttons */}
<div className="flex gap-2 items-center justify-center">
<button
className={`${navigationPrevEl.replace('.', '')} w-10 h-10 p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
>
‹
</button>
<button
className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
>
›
</button>
</div>
</div>
{/* Swiper */}
@@ -61,26 +54,13 @@ export default function CustomSlider() {
1024: { slidesPerView: 3 },
}}
>
{data.map((item, index) => (
{sliderData.map((item, index) => (
<SwiperSlide key={index}>
<SliderCard data={item} />
</SwiperSlide>
))}
</Swiper>
{/* Custom buttons */}
<div className="absolute top-1/2 right-4 flex gap-2 -translate-y-1/2">
<button
className={`${navigationPrevEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
>
‹
</button>
<button
className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
>
›
</button>
</div>
</div>
);
}

7
components/pageParts/offer.tsx
View File

@@ -32,8 +32,11 @@ export default function Offer() {
<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 className="w-[200px] h-[50px] flex items-center justify-center group relative text-white hover:text-primary bg-primary text-lg font-bold py-2 px-5 hover:cursor-pointer">
<div className="w-full h-full flex items-center justify-center z-20 absolute">
<Text txt="contact-us" />
</div>
<span className="w-[15px] h-[15px] bg-secondary absolute z-10 bottom-0 right-0 group-hover:w-full group-hover:h-full "></span>
</button>
</div>

40
components/pageParts/products.tsx
View File

@@ -1,12 +1,12 @@
"use client";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import Title from "../title";
import Text from "../text";
import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
import Image from "next/image";
import type { productFilterTypes, ProductTypes } from "@/types";
import { allProducts } from "@/data";
import { allProducts, cranes, excavators, forklift, road_repairs, trucks } from "@/data";
import ProductCard from "../cards/productCard";
const productFilterTypesMainPage: productFilterTypes[] = [
@@ -15,13 +15,33 @@ const productFilterTypesMainPage: productFilterTypes[] = [
{ name: "forklift-trucks", image: Ekskavator },
{ name: "excavators", image: Forklift },
{ name: "road-repairs", image: Asphalt },
{ name: "all", image: '' },
];
export default function Products() {
//product type togle states
const [productFilter, setProductFilter] = useState<string | null>(null);
const [cars,setCars] = useState(allProducts)
// execute filetr function
useEffect(()=>{
if(productFilter === 'trucks'){
setCars(trucks);
}else if(productFilter === 'cranes'){
setCars(cranes);
}else if(productFilter === 'forklift-trucks'){
setCars(forklift);
} else if(productFilter === 'excavators'){
setCars(excavators);
}else if(productFilter === 'road-repairs'){
setCars(road_repairs)
}else {
setCars(allProducts)
}
},[productFilter])
return (
<div className="max-w-[1200px] w-full mx-auto">
<div dir="ltr" className="max-w-[1200px] w-full mx-auto">
{/* title part */}
<div className="flex flex-col md:gap-8 gap-4">
<div className="flex items-center justify-center w-full ">
@@ -36,7 +56,7 @@ export default function Products() {
</div>
{/* product filters */}
<div className="flex flex-wrap gap-1 items-center justify-center mb-10 ">
<div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
{productFilterTypesMainPage.map((item, index) => (
<button
key={index}
@@ -46,20 +66,20 @@ export default function Products() {
} flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
>
<Text txt={item.name} />
<Image
{item.image && (<Image
src={item.image}
alt="Truck images"
width={50}
height={50}
className="object-cover"
/>
</button>
/>)}
</button>
))}
</div>
{/* products */}
<div className="grid gap-5 grid-cols-1 min-sm:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
{allProducts.map((item: ProductTypes, index: number) => (
<div className="grid gap-5 grid-cols-1 place-content-center min-sm:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
{cars.map((item: ProductTypes, index: number) => (
<div key={index} >
<ProductCard data={item} />
</div>