fix: testimonial section consistency across product pages

[AbhiVarde]

What does this PR do?

Problem

Testimonials sections across product pages had multiple inconsistencies creating a fragmented user experience:

Functions Page:

• Inconsistent spacing (4px gaps vs 8px)
• Different testimonial images (e.g., k-collect.png vs ryan-oconner.png)
• Non-responsive cards on mobile (fixed w-lg)
• Taller cards (60 units vs 52 units)
• Animation hover syntax error

Auth, Storage & Sites Pages:

• Variable card heights using h-fit with justify-center
• No minimum height constraint

Solution

Standardized all testimonials components for unified design consistency across the website.

Changes Made

File: src/routes/products/functions/(components)/Testimonials.svelte

1. Updated testimonial images

<!-- Before -->
image: '/images/testimonials/k-collect.png'
image: '/images/testimonials/open-mind.png'
image: '/images/testimonials/shoefitter.png'

<!-- After -->
image: '/images/testimonials/ryan-oconner.png'
image: '/images/testimonials/david-forster.png'
image: '/images/testimonials/marius-bolik2.png'

2. Fixed spacing consistency (Line 47)

<!-- Before -->
gap-4 pl-4

<!-- After -->
gap-8 pl-8

3. Made cards responsive with consistent height

<!-- Before -->
class="flex min-h-60 w-lg flex-col justify-between..."

<!-- After -->
class="flex min-h-52 w-[90vw] flex-col justify-between... md:w-lg"

File: src/lib/components/product-pages/testimonials.svelte

Updated card height and layout

<!-- Before -->
class="flex h-fit w-[90vw] flex-col justify-center..."

<!-- After -->
class="flex min-h-52 w-[90vw] flex-col justify-between... md:w-lg"

File: src/lib/components/marketing/testimonials.svelte

Updated card height and layout

<!-- Before -->
class="flex h-fit w-[90vw] flex-col justify-center..."

<!-- After -->
class="flex min-h-52 w-[90vw] flex-col justify-between... md:w-lg"

Test Plan

• ✅ Tested on Chrome (latest versions)
• ✅ Tablet and desktop viewports
• ✅ Mobile viewports (< 768px) - Physical device: iPhone 15
• ✅ Verified consistent spacing, heights, and images across all product pages

Before

After

Before (Mobile)

After (Mobile)

Related PRs and Issues

Fixes #2583

Have you read the Contributing Guidelines on issues?

Yes, I have read and followed the contributing guidelines.

Summary by CodeRabbit

Release Notes

• Style
  • Improved testimonial card layouts with enhanced spacing and responsiveness across all viewport sizes
  • Optimized horizontal testimonial scrollers with increased visual separation
  • Updated testimonial imagery for better visual presentation
  • Enhanced mobile-friendly design for improved user experience on smaller screens

[coderabbitai]

Walkthrough

This pull request updates testimonial components across three Svelte files with consistent layout refinements. The changes replace fixed height constraints (h-fit) with minimum height containers (min-h-52) and adjust vertical content distribution from center-aligned to space-between alignment. Additionally, horizontal scrolling spacing is increased, card sizing becomes responsive with viewport-aware constraints, and image paths are updated in one component with specific contributor images.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Image path updates: Verify that three new contributor image paths in src/routes/products/functions/(components)/Testimonials.svelte reference valid, existing assets
• Responsive layout changes: Confirm that the new responsive sizing constraints (w-[90vw] with md:w-lg breakpoint) maintain proper layout across mobile and desktop viewports
• Visual spacing: Ensure increased horizontal gap (gap-8) and padding (pl-8) do not create unintended whitespace or overflow issues in the horizontal scroller
• Content distribution: Verify that justify-between spacing works correctly with variable-length testimonial content without excessive gaps

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: standardizing testimonial section consistency across product pages, which matches the primary objective of the PR.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #2583: consistent gaps (gap-4→gap-8), uniform minimum height (min-h-52), identical images across pages, and responsive cards (w-[90vw] md:w-lg).
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the linked issue #2583: spacing adjustments, card height standardization, image updates, and responsive design improvements. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce72079 and 13e87ec.

📒 Files selected for processing (3)

• src/lib/components/marketing/testimonials.svelte (1 hunks)
• src/lib/components/product-pages/testimonials.svelte (1 hunks)
• src/routes/products/functions/(components)/Testimonials.svelte (3 hunks)

🔇 Additional comments (5)

src/lib/components/product-pages/testimonials.svelte (1)

57-57: LGTM! Styling changes achieve consistency.

The updates correctly implement the PR objectives:

• min-h-52 enforces uniform minimum height across all cards
• justify-between distributes content evenly (quote at top, author info at bottom)
• md:w-lg adds responsive width for desktop breakpoint

These changes align with the standardization goals.

src/lib/components/marketing/testimonials.svelte (1)

63-63: LGTM! Consistent styling applied.

The class changes mirror those in src/lib/components/product-pages/testimonials.svelte, ensuring uniform card behavior across all testimonial components.

src/routes/products/functions/(components)/Testimonials.svelte (3)

50-50: Spacing standardized to match other components.

The increased spacing (gap-8 and pl-8) aligns with the horizontal layout used in the other testimonial components, achieving visual consistency across product pages.

---

54-54: Card styling now consistent and responsive.

The changes successfully address all PR objectives:

• min-h-52 replaces min-h-60 for uniform height across all components
• w-[90vw] md:w-lg makes cards responsive on mobile (fixes the fixed w-lg issue)
• justify-between ensures consistent vertical content distribution

These updates complete the standardization effort.

Also applies to: 80-80

---

6-6: Image paths verified and confirmed.

All referenced testimonial image files exist at the expected paths in static/images/testimonials/. The updates for consistency are validated.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sara-k-48]

@HarshMN2345 could you review this? Thanks!

[AbhiVarde]

Thanks, @sara-k-48 ma’am! 🙂

[HarshMN2345]

Heyy @AbhiVarde , thanks for the contribution 👏🙌
I think the testimonials are intended to look like they did before, so we don’t need to enforce consistency here for now.
cc @ItzNotABug

[AbhiVarde]

Hey @HarshMN2345, totally understand! 🙏

Just to clarify, the goal wasn’t to enforce global consistency, but to fix a few UX issues I noticed:

• On small screens, the testimonial cards stretch too wide, making the text harder to read.
• Some testimonials used mismatched images for the same person.
• The updated version (screenshots above) gives a cleaner, more readable layout on both mobile and desktop.

If the original layout is intentional, I’m happy to adjust but these fixes came from a usability perspective. Maybe worth a quick check with design to confirm what they prefer 😊