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]">
{/* Left: Image */}
<div className="relative w-full lg:w-1/2 h-64 lg:h-auto min-h-[300px]">
{selectedProject.images.map((image, idx) => (
<Image
key={idx}
src={process.env.NEXT_PUBLIC_BACK_URL + "/images/projects/" + image.src}
alt={`Image for ${selectedProject.title}`}
fill
className={`object-cover ${idx === 0 ? "opacity-100" : "opacity-0"}`}
/>
))}
{selectedProject.images.map((image, idx) => {
const imgSrc = image.src.startsWith("http")
? image.src
: `/images/projects/${image.src}`;
return (
<Image
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>
{/* Right: Details */}
<div className="flex flex-col w-full lg:w-1/2 p-8 lg:p-10 overflow-hidden">
<div className="flex-grow overflow-y-auto custom-scrollbar pr-2">
<div className="flex flex-col justify-between h-full w-full lg:w-1/2 p-8 lg:p-10">
<div className="flex-shrink-0">
<span className="text-xs font-mono text-primary uppercase tracking-widest">
{selectedProject.category}
</span>
@ -316,16 +321,16 @@ export default function Projects({ dict }: MyProjectsProps) {
{isRTL ? "توسعه" : "Development"}
</span>
</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>
{/* Navigation */}
<div className="flex items-center justify-between pt-6 mt-6 border-t border-border flex-shrink-0">
<p className="max-h-[250px] overflow-y-auto pr-2 custom-scrollbar 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 className="flex-shrink-0">
<div className="flex items-center justify-between pt-6 mt-6 border-t border-border">
<button
onClick={isRTL ? handleNext : handlePrev}
disabled={isRTL ? currentModalIndex >= filteredProjects.length - 1 : currentModalIndex <= 0}
@ -353,6 +358,7 @@ export default function Projects({ dict }: MyProjectsProps) {
</button>
</div>
</div>
</div>
</div>
</motion.div>
</motion.div>

View File

@ -88,7 +88,7 @@ export default function Testimonials({ dict }: TestimonialsProps) {
{tData.map((testimonial, index) => (
<div
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
initial={{ opacity: 0, y: 30 }}
@ -103,7 +103,7 @@ export default function Testimonials({ dict }: TestimonialsProps) {
</div>
<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}"
</p>
</div>