parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: testimonials layout - fix card width/gap alignment, remove overflow-visible, adjust quote icon size

Browse Source
This commit is contained in:
parsa aghaei 2026-06-29 14:47:48 +03:30
parent 4ed83bbecf
commit dc529ffa4e
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/(routes)/(website)/components/testimonials/testimonials.tsx
View File

@ -75,16 +75,16 @@ export default function Testimonials({ dict }: TestimonialsProps) {
</motion.p>
</div>
<div className="relative w-full px-12">
<div className="relative w-full px-14">
<div
ref={scrollRef}
className="flex gap-8 overflow-x-auto snap-x snap-mandatory scrollbar-none pb-4"
className="flex gap-6 overflow-x-auto snap-x snap-mandatory scrollbar-none pb-4"
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
>
{tData.map((testimonial, index) => (
<div
key={index}
className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.1rem)] snap-start flex-shrink-0"
className="w-full md:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)] snap-start flex-shrink-0"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
@ -92,14 +92,14 @@ export default function Testimonials({ dict }: TestimonialsProps) {
transition={{ duration: 0.5, delay: index * 0.1 }}
viewport={{ once: true }}
whileHover={{ y: -10 }}
className="relative p-6 md:p-8 rounded-3xl glass-panel flex flex-col h-full overflow-visible"
className="relative p-6 md:p-8 rounded-3xl glass-panel flex flex-col h-full"
>
<div className="absolute -top-6 -start-6 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg">
<Quote className="w-6 h-6" />
<div className="absolute -top-5 -start-5 w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg">
<Quote className="w-5 h-5" />
</div>
<div className="flex-grow pt-2 overflow-visible">
<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">
<div className="flex-grow pt-2">
<p className="w-full min-w-0 normal-case whitespace-normal break-words tracking-normal block mb-6 italic text-sm md:text-base text-start px-6 md:px-10 leading-relaxed">
"{testimonial.quote}"
</p>
</div>
@ -135,7 +135,7 @@ export default function Testimonials({ dict }: TestimonialsProps) {
<button
onClick={isRTL ? handleNext : handlePrev}
disabled={isRTL ? currentIndex >= maxIndex : currentIndex === 0}
className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-background border border-border shadow-lg flex items-center justify-center text-foreground hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed z-20"
className="absolute left-0 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-background border border-border shadow-lg flex items-center justify-center text-foreground hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed z-20"
aria-label="Previous testimonials"
>
<ChevronLeft className="w-5 h-5" />
@ -143,7 +143,7 @@ export default function Testimonials({ dict }: TestimonialsProps) {
<button
onClick={isRTL ? handlePrev : handleNext}
disabled={isRTL ? currentIndex === 0 : currentIndex >= maxIndex}
className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-background border border-border shadow-lg flex items-center justify-center text-foreground hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed z-20"
className="absolute right-0 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-background border border-border shadow-lg flex items-center justify-center text-foreground hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed z-20"
aria-label="Next testimonials"
>
<ChevronRight className="w-5 h-5" />