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

product detail page responsive updated

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-01-09 14:50:11 +05:00
parent 5bb9a566ca
commit a700fdddc6
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/detailPage/detailInfo.tsx
View File

@@ -23,7 +23,7 @@ export default function DetailInfo() {
<div className="bg-white"> <div className="bg-white">
<div className="max-w-[1200px] mx-auto"> <div className="max-w-[1200px] mx-auto">
{/* Header */} {/* Header */}
<div className="sticky z-10 top-0 sm:p-6 p-2 flex justify-center items-center"> <div className="sticky z-10 top-0 md:p-6 p-2 flex justify-center items-center">
<h2 className="md:text-2xl text-lg font-bold text-gray-900"> <h2 className="md:text-2xl text-lg font-bold text-gray-900">
{languageIndex ? product.name_uz : product.name_ru} {languageIndex ? product.name_uz : product.name_ru}
</h2> </h2>
@@ -31,34 +31,35 @@ export default function DetailInfo() {
{/* Content */} {/* Content */}
<div className="sm:p-6 p-2"> <div className="sm:p-6 p-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8 mb-8">
{/* Image */} {/* Image */}
<div className="relative max-sm:w-full max-md:h-50 w-150 h-96 mx-auto rounded-lg overflow-hidden"> <div className="relative w-full h-64 sm:h-80 lg:h-96 rounded-lg overflow-hidden bg-gray-50">
<Image <Image
src={`https://admin.promtechno.uz${product.image}`} src={`https://admin.promtechno.uz${product.image}`}
alt="image" alt={languageIndex ? product.name_uz : product.name_ru}
fill fill
className="object-contain max-md:h-50" sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
className="object-contain p-4"
priority
/> />
</div> </div>
<div className="space-y-6 pt-10"> {/* Content */}
<div className="space-y-4 lg:space-y-6 lg:py-4">
{/* Description */} {/* Description */}
<div className="text-gray-800 max-sm:text-[14px]"> <div className="text-gray-800 text-sm sm:text-base leading-relaxed">
{languageIndex {languageIndex
? product.description_uz ? product.description_uz
: product.description_ru} : product.description_ru}
</div> </div>
{/* CTA Buttons */} {/* CTA Buttons */}
<div className="space-y-3"> <div className="pt-2">
<Link <Link href="#contact" onClick={() => handleScroll("#contact")}>
href={"#contact"}
onClick={() => handleScroll("#contact")}
>
<motion.button <motion.button
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.98 }}
className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors" className="w-full sm:w-auto px-8 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-all duration-300 shadow-md hover:shadow-lg"
> >
{t.contact.send} {t.contact.send}
</motion.button> </motion.button>