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

14
app/globals.css
View File

@@ -52,6 +52,20 @@ body {
clip-path: polygon(100% 0, 55% 100%, 88% 100%);
}
#contactClip{
position: relative;
}
#contactClip::before{
content:'';
position: absolute;
top:-40px;
left: -50px;
z-index: 1000;
padding: 50px;
background-color: #d38307;
clip-path: polygon(100% 0, 55% 100%, 88% 100%);
}
/* footer ekxkavator icon animation */
@keyframes icon_animatsion_tool {

6
assets/index.ts
View File

@@ -185,3 +185,9 @@ export {default as Ekxkavator_vektor} from './excavator-vector.jpg';
// opacity back image
export {default as backOne} from './changeImg/jcb.avif';
export {default as backTwo} from './changeImg/4.jpg';
// slider image declare
export {default as ekskavatorSlider} from './changeImg/2.jpg';
export {default as oldYuklagich} from './details/loaders/1-5.webp'
export {default as kompressorSlider} from './details/roaders/4-1.png';
export {default as AvtokranSlider} from './details/cranes/2-1.png'

28
components/cards/sliderCard.tsx
View File

@@ -1,21 +1,23 @@
import { ProductTypes } from "@/types";
import Image, { StaticImageData } from "next/image";
import Link from "next/link";
import Text from "../text";
interface typePropData{
id:number;
image:StaticImageData | string;
text:string;
title:string;
path:string;
}
export default function SliderCard({data}:{data:typePropData}) {
export default function SliderCard({data}:{data:ProductTypes}) {
return (
<Link href={data.path} id="news_slider_card" className="group hover:cursor-pointer" >
<Image src={data.image} alt="slider image" width={100} height={100} />
<div className="relative border flex flex-col items-start justify-start">
<div>{data.title}</div>
<div>{data.text}</div>
<Image
src={data.image}
alt="slider image"
width={600}
height={600}
className="object-cover max-w-[600px] w-full h-[300px]"
/>
<div className="relative mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
<div className="absolute -top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
<Text txt={data.truck_name}/>
</div>
<div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary"><Text txt={data.desc}/></div>
</div>
</Link>
)

4
components/pageParts/contact.tsx
View File

@@ -3,6 +3,7 @@ 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">
<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>
@@ -19,7 +20,8 @@ export default function Contact() {
</button>
</div>
</div>
<div className="bg-[#d38307] clip-part absolute -top-25 py-[50px] px-18 left-[97px] z-10" ></div>
</div>
{/* <div className="bg-[#d38307] clip-part absolute -top-25 py-[50px] px-18 left-[97px] z-10" ></div> */}
</section>
);
}

62
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">
<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>
);
}

5
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">
<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>

38
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>
))}
</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>

37
data/index.ts
View File

@@ -1,12 +1,15 @@
import {
AvtokranSlider,
Balon,
Buldozer,
Digger,
ekskavatorSlider,
Forkliftlar,
Gazel,
Grayder,
Kat,
Kompressor,
kompressorSlider,
Kran1,
Kran2,
Kran3,
@@ -15,6 +18,7 @@ import {
Mikser,
Mini,
Old,
oldYuklagich,
Paletli,
Samasval,
Teleskop,
@@ -185,3 +189,36 @@ export const allProducts : ProductTypes[] = [
...excavators,
...road_repairs,
];
export const sliderData : ProductTypes[] = [
{
id: 1,
truck_name: 'excavators',
desc: 'news-title1',
path: 'crawler-excavators',
image: ekskavatorSlider,
},
{
id: 2,
truck_name: 'front-loaders',
desc: 'news-title2',
path: 'front-loaders',
image: oldYuklagich,
},
{
id: 3,
truck_name: 'compressors',
desc: 'news-title3',
path: 'compressors',
image: kompressorSlider,
},
{
id: 4,
truck_name: 'compressors',
desc: 'news-title3',
path: 'compressors',
image: AvtokranSlider,
},
]

4
i18n/index.ts
View File

@@ -5,7 +5,7 @@ import LanguageDetector from "i18next-browser-languagedetector";
// import lanaguage files
import uzWords from "../public/locales/uz/common.json";
import enWords from "../public/locales/ru/common.json";
import ruWords from "../public/locales/ru/common.json";
i18n
.use(Backend)
@@ -14,7 +14,7 @@ i18n
.init({
resources: {
uz: { translation: uzWords },
en: { translation: enWords },
ru: { translation: ruWords },
},
lng: "uz",
fallbackLng: "uz",

1
i18n/settings.ts
View File

@@ -1 +0,0 @@
export const languages = ["uz", "ru"] as const;

1
public/locales/ru/common.json
View File

@@ -1,4 +1,5 @@
{
"all":"Все машины",
"home": "Главное",
"products": "Продукты",
"news": "Новости",

1
public/locales/uz/common.json
View File

@@ -1,4 +1,5 @@
{
"all":"Barcha mashinalar",
"home": "Asosiy",
"products": "Maxsulotlar",
"news": "Yangiliklar",

2
types/index.ts
View File

@@ -7,7 +7,7 @@ export interface TitleType {
export interface productFilterTypes {
name: string;
image: StaticImageData;
image: StaticImageData|string;
}
export interface MainProductCard{