fix: testimonials card width + text wrapping, modal scroll structure, local image paths
This commit is contained in:
parent
8666d8067a
commit
a91adaff28
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user