fix: testimonials card width + text wrapping, modal scroll structure, local image paths

This commit is contained in:
parsa aghaei 2026-06-29 11:14:43 +03:30
parent 8666d8067a
commit a91adaff28
2 changed files with 27 additions and 21 deletions

View File

@ -283,21 +283,26 @@ export default function Projects({ dict }: MyProjectsProps) {
<div className="flex flex-col lg:flex-row h-full max-h-[90vh]"> <div className="flex flex-col lg:flex-row h-full max-h-[90vh]">
{/* Left: Image */} {/* Left: Image */}
<div className="relative w-full lg:w-1/2 h-64 lg:h-auto min-h-[300px]"> <div className="relative w-full lg:w-1/2 h-64 lg:h-auto min-h-[300px]">
{selectedProject.images.map((image, idx) => ( {selectedProject.images.map((image, idx) => {
<Image const imgSrc = image.src.startsWith("http")
key={idx} ? image.src
src={process.env.NEXT_PUBLIC_BACK_URL + "/images/projects/" + image.src} : `/images/projects/${image.src}`;
alt={`Image for ${selectedProject.title}`} return (
fill <Image
className={`object-cover ${idx === 0 ? "opacity-100" : "opacity-0"}`} key={idx}
/> src={imgSrc}
))} alt={`Image for ${selectedProject.title}`}
fill
className={`object-cover ${idx === 0 ? "opacity-100" : "opacity-0"}`}
/>
);
})}
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
</div> </div>
{/* Right: Details */} {/* Right: Details */}
<div className="flex flex-col w-full lg:w-1/2 p-8 lg:p-10 overflow-hidden"> <div className="flex flex-col justify-between h-full w-full lg:w-1/2 p-8 lg:p-10">
<div className="flex-grow overflow-y-auto custom-scrollbar pr-2"> <div className="flex-shrink-0">
<span className="text-xs font-mono text-primary uppercase tracking-widest"> <span className="text-xs font-mono text-primary uppercase tracking-widest">
{selectedProject.category} {selectedProject.category}
</span> </span>
@ -316,16 +321,16 @@ export default function Projects({ dict }: MyProjectsProps) {
{isRTL ? "توسعه" : "Development"} {isRTL ? "توسعه" : "Development"}
</span> </span>
</div> </div>
<p className="text-muted-foreground leading-relaxed text-sm md:text-base">
{isRTL
? "این پروژه با استفاده از آخرین تکنولوژی‌های وب توسعه یافته است. تیم ما با دقت و توجه به جزئیات، راهکاری scalable و maintainable ارائه داده است که نیازهای کسب و کار را به بهترین شکل برآورده می‌کند. از طراحی رابط کاربری گرفته تا بهینه‌سازی performance، تمامی جنبه‌های این پروژه با بالاترین استانداردها پیاده‌سازی شده است."
: "This project was built using the latest web technologies. Our team delivered a scalable and maintainable solution with meticulous attention to detail, meeting business requirements effectively. From UI/UX design to performance optimization, every aspect was implemented to the highest standards."}
</p>
</div> </div>
{/* Navigation */} <p className="max-h-[250px] overflow-y-auto pr-2 custom-scrollbar text-muted-foreground leading-relaxed text-sm md:text-base">
<div className="flex items-center justify-between pt-6 mt-6 border-t border-border flex-shrink-0"> {isRTL
? "این پروژه با استفاده از آخرین تکنولوژی‌های وب توسعه یافته است. تیم ما با دقت و توجه به جزئیات، راهکاری scalable و maintainable ارائه داده است که نیازهای کسب و کار را به بهترین شکل برآورده می‌کند. از طراحی رابط کاربری گرفته تا بهینه‌سازی performance، تمامی جنبه‌های این پروژه با بالاترین استانداردها پیاده‌سازی شده است."
: "This project was built using the latest web technologies. Our team delivered a scalable and maintainable solution with meticulous attention to detail, meeting business requirements effectively. From UI/UX design to performance optimization, every aspect was implemented to the highest standards."}
</p>
<div className="flex-shrink-0">
<div className="flex items-center justify-between pt-6 mt-6 border-t border-border">
<button <button
onClick={isRTL ? handleNext : handlePrev} onClick={isRTL ? handleNext : handlePrev}
disabled={isRTL ? currentModalIndex >= filteredProjects.length - 1 : currentModalIndex <= 0} disabled={isRTL ? currentModalIndex >= filteredProjects.length - 1 : currentModalIndex <= 0}
@ -353,6 +358,7 @@ export default function Projects({ dict }: MyProjectsProps) {
</button> </button>
</div> </div>
</div> </div>
</div>
</div> </div>
</motion.div> </motion.div>
</motion.div> </motion.div>

View File

@ -88,7 +88,7 @@ export default function Testimonials({ dict }: TestimonialsProps) {
{tData.map((testimonial, index) => ( {tData.map((testimonial, index) => (
<div <div
key={index} key={index}
className="min-w-[100%] md:min-w-[calc(50%-1rem)] lg:min-w-[calc(33.333%-1.1rem)] snap-start flex-shrink-0" className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.1rem)] snap-start flex-shrink-0"
> >
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
@ -103,7 +103,7 @@ export default function Testimonials({ dict }: TestimonialsProps) {
</div> </div>
<div className="flex-grow pt-2 overflow-visible"> <div className="flex-grow pt-2 overflow-visible">
<p className="w-full text-start px-8 md:px-14 leading-relaxed whitespace-normal mb-8 italic text-sm md:text-base break-words"> <p className="w-full min-w-0 normal-case whitespace-normal break-words tracking-normal block mb-8 italic text-sm md:text-base text-start px-8 md:px-14 leading-relaxed">
"{testimonial.quote}" "{testimonial.quote}"
</p> </p>
</div> </div>