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

responsive bug fixing

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2025-11-04 15:19:47 +05:00
parent 9720f1a6d3
commit 0527b4bb20
13 changed files with 83 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/globals.css
View File

@@ -62,4 +62,25 @@ body {
}
.icon_animation{
animation: icon_animatsion_tool 2s infinite alternate-reverse ;
}
@media(max-width:640px){
/* 🟠 Sariq blok trapezoid shakl */
.clip-trapezoid {
clip-path: none;
}
/* Input blokining shakli */
.clip-input {
clip-path: none;
}
/* Tugma blokining shakli */
.clip-button {
clip-path: none;
}
.clip-part{
clip-path: none;
}
}

2
components/carPageParts/carType_head.tsx
View File

@@ -41,7 +41,7 @@ export default function CarType_Header() {
className="text-white flex items-center justify-center gap-3"
>
<Link
href={"/"}
href='/'
className="hover:cursor-pointer hover:text-secondary "
>
<Text txt="home" />

9
components/cards/productCard.tsx
View File

@@ -3,10 +3,13 @@
import { ProductTypes } from "@/types";
import Image from "next/image";
import Link from "next/link";
import Text from "../text";
import { useParams } from "next/navigation";
export default function ProductCard({data}:{data: ProductTypes}) {
const {lang} = useParams();
return (
<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]">
<Link href={`/${lang}/${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}
@@ -17,8 +20,8 @@ export default function ProductCard({data}:{data: ProductTypes}) {
/>
</div>
<div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center ">
<p>{data.truck_name}</p>
<p className="text-secondary">{data.desc}</p>
<p><Text txt={data.truck_name}/></p>
<p className="text-secondary"><Text txt={data.desc}/></p>
</div>
</Link>
);

4
components/cards/sliderCard.tsx
View File

@@ -13,8 +13,8 @@ export default function SliderCard({data}:{data:ProductTypes}) {
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">
<div className="relative overflow-visible 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-10 sm:-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>

8
components/nav_foot/footer.tsx
View File

@@ -15,8 +15,8 @@ import { FaLocationDot } from "react-icons/fa6";
export default function Footer() {
return (
<div dir="ltr" className="bg-primary">
<div className="max-w-[1200px] w-full mx-auto pt-10 ">
<div className="flex items-start justify-around">
<div className="max-w-[1200px] flex items-start w-full mx-auto pt-10 px-5">
<div className="flex flex-wrap items-start justify-between gap-5 max-sm:gap-10">
<div>
{/* logo */}
<div className="flex items-center gap-4">
@@ -108,7 +108,8 @@ export default function Footer() {
</div>
</div>
</div>
<div className="group flex flex-col items-end justify-end pt-15">
</div>
<div className="group flex flex-col items-end justify-end pt-15">
<div className="group relative">
<div
className="
@@ -165,7 +166,6 @@ export default function Footer() {
className="mt-3 hover:cursor-pointer icon_animation rounded-[50%] object-cover"
alt="icon image"
/>
</div>
</div>
</div>

20
components/nav_foot/navbar.css
View File

@@ -31,7 +31,6 @@
background-color: rgba(66, 64, 64, 0.199);
}
@media (max-width: 580px) {
.overflow.active {
display: block;
@@ -66,24 +65,23 @@
}
.nav_link_group_phone {
position: absolute;
z-index: 1;
top: 0vh;
position: fixed; /* ✅ absolute emas */
z-index: 1001; /* yuqoriroq bo‘lsin */
top: 0;
left: 0;
bottom: 0;
height: 100vh;
width: calc(40% + 100px);
max-width: 100%;
background-color: white;
width: 80%; /* ✅ width: calc(40% + 100px) o‘rniga */
max-width: 400px; /* qo‘shimcha himoya */
background: white;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 20px;
padding: 0 10px 10px 10px;
transform: translate(-100%);
transition: 0.4s ease-in-out;
padding: 10px;
transform: translateX(-100%);
transition: transform 0.4s ease-in-out;
box-sizing: border-box; /* ✅ scrollni oldini olish */
}
.overflow {

8
components/pageParts/contact.tsx
View File

@@ -1,21 +1,21 @@
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">
<section dir="ltr" className="relative w-full bg-primary py-20 flex justify-center mt-40 px-4">
<div className="mx-auto 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>
{/* Input va Button bloki */}
<div className="flex w-full max-w-2xl">
<div className="flex w-full max-w-2xl px-4">
<input
type="text"
placeholder="Your phone number"
className="flex-1 py-3 px-5 bg-white text-gray-600 placeholder-gray-400 text-lg clip-input focus:outline-none"
/>
<button className="bg-primary -ml-5 text-white px-6 py-3 text-lg font-medium clip-button">
<button className="bg-primary -ml-5 text-white sm:px-6 sm:py-3 p-2 text-lg font-medium clip-button">
Menga qo'ng'iroq qiling
</button>
</div>

10
components/pageParts/faq.tsx
View File

@@ -7,7 +7,7 @@ const FaqTexts: CollapseProps["items"] = [
{
key: "1",
showArrow: false,
className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-10",
label: (
<div className="text-black text-2xl font-[600]">
<Text txt="faq1" />
@@ -22,7 +22,7 @@ const FaqTexts: CollapseProps["items"] = [
{
key: "2",
showArrow: false,
className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-10",
label: (
<div className="text-black text-2xl font-[600]">
<Text txt="faq2" />
@@ -37,7 +37,7 @@ const FaqTexts: CollapseProps["items"] = [
{
key: "3",
showArrow: false,
className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-10",
label: (
<div className="text-black text-2xl font-[600]">
<Text txt="faq3" />
@@ -68,7 +68,7 @@ const FaqTexts: CollapseProps["items"] = [
{
key: "4",
showArrow: false,
className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-5",
className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-5",
label: (
<div className="text-black text-2xl font-[600]">
<Text txt="faq4" />
@@ -84,7 +84,7 @@ const FaqTexts: CollapseProps["items"] = [
export default function Faq() {
return (
<div className="max-w-[1200px] w-full mx-auto text-left mb-30">
<div className="max-w-[1200px] w-full mx-auto text-left mb-30 px-4">
<div className="mb-10">
<Title text="faq-h2" />
</div>

2
components/pageParts/newsSlider.tsx
View File

@@ -14,7 +14,7 @@ const navigationNextEl = ".custom-swiper-next";
export default function CustomSlider() {
return (
<div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20">
<div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20 px-4">
{/* Title */}
<div className="my-10 mb-20 flex items-center justify-between ">
<div className="">

4
components/pageParts/offer.tsx
View File

@@ -12,14 +12,14 @@ export default function Offer() {
</div>
{/* body */}
<div className="flex max-[1200px]:flex-wrap items-start justify-end max-w-[1200px] w-full mx-auto">
<div className="flex max-[1200px]:flex-wrap max-[1200px]:justify-center 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="flex flex-col px-4 items-end text-left justify-end gap-5 text-gray-500 max-w-[1000px] w-full ">
<div className="text-[16px] leading-[30px]">
<Text txt="about-p" />
</div>

54
components/pageParts/partners.tsx
View File

@@ -27,40 +27,38 @@ const images: StaticImageData[] = [
export default function Partners() {
return (
<div className="my-5 max-w-[1200px] w-full mx-auto ">
<div className="my-5 max-w-[1000px] w-full mx-auto ">
{/* title */}
<div className="mb-4">
<Title text="partner-h2" />
</div>
{/* slider */}
<div className="my-10">
<Swiper
autoplay={{
reverseDirection: true,
delay: 2500,
disableOnInteraction: false,
}}
modules={[Autoplay]}
slidesPerView={4}
breakpoints={{
320: { slidesPerView: 1 },
640: { slidesPerView: 2 },
1024: { slidesPerView: 4 },
}}
className="mySwiper flex items-center justify-center"
>
{images.map((item, index) => (
<SwiperSlide key={index}>
<Image
src={item}
alt="Partner images"
className="w-[200px] h-[200px] object-contain"
/>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="my-20">
<Swiper
autoplay={{
reverseDirection: true,
delay: 2500,
disableOnInteraction: false,
}}
loop={true}
modules={[Autoplay]}
slidesPerView={4}
className="mySwiper flex items-center justify-around"
>
{images.map((item, index) => (
<SwiperSlide key={index} className="!w-[200px] mx-10 " >
<Image
src={item}
alt="Partner images"
width={200}
height={200}
className="object-contain mx-auto max-w-[200px] h-auto"
/>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
);
}

2
components/pageParts/products.tsx
View File

@@ -78,7 +78,7 @@ export default function Products() {
</div>
{/* products */}
<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">
<div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]: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} />

2
components/pageParts/texnika.tsx
View File

@@ -30,7 +30,7 @@ export default function Texnika() {
return (
<div className="my-20 max-w-[1100px] w-full mx-auto">
{/* title */}
<div className="mb-4">
<div className="mb-4 px-2">
<Title text="brand-h2" />
</div>