diff --git a/app/[carType]/layout.tsx b/app/[carType]/layout.tsx new file mode 100644 index 0000000..9646ce3 --- /dev/null +++ b/app/[carType]/layout.tsx @@ -0,0 +1,11 @@ +import CarType_Header from "@/components/carPageParts/carType_head"; +import React, { ReactNode } from "react"; + +export default function Layout({ children }: { children: ReactNode }) { + return ( +
+ + {children} +
+ ); +} diff --git a/app/[carType]/page.tsx b/app/[carType]/page.tsx index 7d0611f..73423e1 100644 --- a/app/[carType]/page.tsx +++ b/app/[carType]/page.tsx @@ -1,13 +1,13 @@ -"use client" +"use client"; -import CarType_Header from "@/components/carPageParts/carType_head"; -import { useParams } from "next/navigation" +import Title from "@/components/title"; +import { useParams } from "next/navigation"; export default function CartType() { - const router = useParams(); + const router = useParams(); return ( -
- +
+ </div> - ) + ); } diff --git a/app/layout.tsx b/app/layout.tsx index d10b476..351f2b7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -33,8 +33,8 @@ export default function RootLayout({ return ( <html lang={params.lang} dir={dir(params.lang)}> <body> - <Header/> - <Navbar/> + <Header /> + <Navbar /> {children} <section id="contact" className=""> <Contact /> diff --git a/app/page.tsx b/app/page.tsx index 55e7e8e..49248a8 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,18 +4,20 @@ import Offer from "@/components/pageParts/offer"; import Faq from "@/components/pageParts/faq"; import Partners from "@/components/pageParts/partners"; import Map from "@/components/pageParts/map"; +import CustomSlider from "@/components/pageParts/newsSlider"; export default function Home() { return ( - <div > - <section id="products" className="mt-50 mb-10"> - <Products/> + <div> + <section id="products" className="mt-50 mb-10"> + <Products /> </section> - <Texnika/> - <Offer/> - <Faq/> - <Partners/> - <Map/> + <Texnika /> + <Offer /> + <CustomSlider/> + <Faq /> + <Partners /> + <Map /> </div> ); } diff --git a/assets/index.ts b/assets/index.ts index 6022baf..231edb0 100644 --- a/assets/index.ts +++ b/assets/index.ts @@ -179,5 +179,9 @@ export {default as ToshCity } from './partners/tashkentcity.png'; // offer ekskavator image export {default as Ekskavator_offer} from './excavator.png'; -//footer icon image -export {default as Ekxkavator_vektor} from './excavator-vector.jpg'; \ No newline at end of file +// footer icon image +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'; \ No newline at end of file diff --git a/components/carPageParts/carType_head.tsx b/components/carPageParts/carType_head.tsx index f080151..39b42ce 100644 --- a/components/carPageParts/carType_head.tsx +++ b/components/carPageParts/carType_head.tsx @@ -1,10 +1,57 @@ -"use client" +"use client"; -import { useParams } from "next/navigation" +import { backOne } from "@/assets"; +import Image from "next/image"; +import { useParams } from "next/navigation"; +import Text from "../text"; +import Link from "next/link"; export default function CarType_Header() { - const router = useParams(); + const params = useParams(); + console.log(params); return ( - <div>Header</div> - ) + <div + dir="ltr" + className="w-full h-[300px] relative flex items-center justify-center " + > + {/* back image */} + <Image + alt="CarTypeImage" + src={backOne} + className="w-full h-full object-center object-cover absolute top-0 left-0 -z-20" + /> + + {/* opacity */} + <div className="absolute top-0 left-0 w-full h-full -z-10 bg-black opacity-70"></div> + + {/* title */} + <div + id="title-Part" + className="flex flex-col items-center justify-center gap-4" + > + <div + id="title" + className="text-white font-bold text-[50px] tracking-[2px]" + > + <Text txt={`${params.carType}`} /> + </div> + + <div + id="under-title" + className="text-white flex items-center justify-center gap-3" + > + <Link + href={"/"} + className="hover:cursor-pointer hover:text-secondary " + > + <Text txt="home" /> + </Link> + / + <div className="text-secondary" > + <Text txt={`${params.carType}`} /> + </div> + </div> + </div> + </div> + ); } diff --git a/components/carPageParts/productCard.tsx b/components/cards/productCard.tsx similarity index 71% rename from components/carPageParts/productCard.tsx rename to components/cards/productCard.tsx index 65b5dc5..06c6d77 100644 --- a/components/carPageParts/productCard.tsx +++ b/components/cards/productCard.tsx @@ -6,14 +6,14 @@ import Link from "next/link"; export default function ProductCard({data}:{data: ProductTypes}) { return ( - <Link href={`/${data.path}`} className="flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]"> + <Link href={`/${data.path}`} className="h-[400px] flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]"> <div className="rounded-t-lg bg-white py-15 px-2" > <Image src={data.image} alt={data.truck_name} width={200} height={200} - className="object-contain h-auto" + className="object-contain max-h-[200px] h-full" /> </div> <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center "> diff --git a/components/cards/sliderCard.tsx b/components/cards/sliderCard.tsx new file mode 100644 index 0000000..f6afa75 --- /dev/null +++ b/components/cards/sliderCard.tsx @@ -0,0 +1,22 @@ +import Image, { StaticImageData } from "next/image"; +import Link from "next/link"; + +interface typePropData{ + id:number; + image:StaticImageData | string; + text:string; + title:string; + path:string; +} + +export default function SliderCard({data}:{data:typePropData}) { + return ( + <Link href={data.path} id="news_slider_card" className="group" > + <Image src={data.image} alt="slider image" width={1} height={1} /> + <div className="relative border flex flex-col items-start justify-start"> + <div>{data.title}</div> + <div>{data.text}</div> + </div> + </Link> + ) +} diff --git a/components/nav_foot/footer.tsx b/components/nav_foot/footer.tsx index d6ddbfa..ed9c7dd 100644 --- a/components/nav_foot/footer.tsx +++ b/components/nav_foot/footer.tsx @@ -23,9 +23,9 @@ export default function Footer() { <Image src={logoImg} alt="logo image" width={100} height={100} /> <p className="text-white text-2xl font-bold">SPES-TEXNIKA</p> </div> - <p className="leading-[28px] text-white text-xl max-w-[430px] w-full mt-8"> + <div className="leading-[28px] text-white text-xl max-w-[430px] w-full mt-8"> <Text txt="footer-p" /> - </p> + </div> <div className="flex flex-col items-start gap-4 mt-10 "> <div className="text-white text-xl font-semibold"> <Text txt="subscribe" /> @@ -63,18 +63,18 @@ export default function Footer() { <div className="text-white text-2xl font-bold"> <Text txt="links" /> </div> - <p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer "> + <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer "> <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span> <Text txt="products" /> - </p> - <p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer "> + </div> + <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer "> <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span> <Text txt="news" /> - </p> - <p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer "> + </div> + <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer "> <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span> <Text txt="contact" /> - </p> + </div> </div> <div className="flex flex-col justify-start"> diff --git a/components/nav_foot/navbar.tsx b/components/nav_foot/navbar.tsx index 67c51ee..e101e3b 100644 --- a/components/nav_foot/navbar.tsx +++ b/components/nav_foot/navbar.tsx @@ -33,7 +33,7 @@ export default function Navbar() { return ( <div - className={`w-[100%] bg-white border-gray shadow-lg shadow-gray-200 z-[1000] top-0`} + className={`w-[100%] bg-white border-gray shadow-md shadow-gray-500 z-[1000] top-0`} > <div className="container max-w-[1500px] w-full px-[10px] mx-auto items-center justify-between "> <div diff --git a/components/pageParts/newsSlider.tsx b/components/pageParts/newsSlider.tsx new file mode 100644 index 0000000..4414fc6 --- /dev/null +++ b/components/pageParts/newsSlider.tsx @@ -0,0 +1,86 @@ +"use client"; + +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"; + +// 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"> + {/* Title */} + <div className="my-10 mb-20 flex items-center justify-between"> + <Title text="news-h2" /> + </div> + + {/* Swiper */} + <Swiper + modules={[Navigation]} + slidesPerView={3} + spaceBetween={30} + loop={true} + navigation={{ + // Pass the class selectors here + prevEl: navigationPrevEl, + nextEl: navigationNextEl, + }} + breakpoints={{ + 0: { slidesPerView: 1 }, + 768: { slidesPerView: 2 }, + 1024: { slidesPerView: 3 }, + }} + > + {data.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> + ); +} diff --git a/components/pageParts/products.tsx b/components/pageParts/products.tsx index da7c133..30d6f82 100644 --- a/components/pageParts/products.tsx +++ b/components/pageParts/products.tsx @@ -5,9 +5,9 @@ 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 type { productFilterTypes, ProductTypes } from "@/types"; import { allProducts } from "@/data"; -import ProductCard from "../carPageParts/productCard"; +import ProductCard from "../cards/productCard"; const productFilterTypes: productFilterTypes[] = [ { name: "trucks", image: Truck }, @@ -58,9 +58,11 @@ export default function Products() { </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)=>( - <ProductCard data={item} /> + <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 key={index} > + <ProductCard data={item} /> + </div> ))} </div> </div> diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json index 16b5fae..e7365f5 100644 --- a/public/locales/ru/common.json +++ b/public/locales/ru/common.json @@ -167,5 +167,6 @@ "news-title1": "Лучший прокат оборудования для твой следующий проект", "news-title2": "Новый погрузчик - это именно то, что вам нужно!", "news-title3": "Новый комплект компрессоров специально для вас", - "news-title4": "С нашими мощными кранами ваша работа станет проще" + "news-title4": "С нашими мощными кранами ваша работа станет проще", + "tex-rent":"Аренда оборудования" } \ No newline at end of file diff --git a/public/locales/uz/common.json b/public/locales/uz/common.json index d06d285..54765c3 100644 --- a/public/locales/uz/common.json +++ b/public/locales/uz/common.json @@ -169,5 +169,6 @@ "news-title1": "Keyingi loyihangiz uchun eng yaxshi texnikalar ijarasi", "news-title2": "Yangi yuklagich siz uchun eng yaxshi texnika!", "news-title3": "Yangi kompressorlar to'plami aynan siz uchun", - "news-title4": "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi." + "news-title4": "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi.", + "tex-rent":"Texnikalar ijarasi" } \ No newline at end of file