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]">
|
<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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user