fix: duplicate testimonials in startup caraousal for infinite scroll

[HarshMN2345]

What does this PR do?

• Fix testimonial image path to use .jpg extension
• Duplicate testimonials in carousel for seamless infinite scroll

Test Plan

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

yes

Summary by CodeRabbit

• Style
  • Updated Zach Handley’s testimonial photo to a JPG and refreshed his testimonial entry for consistency.
  • Expanded the testimonials carousel by displaying an additional set of cards, increasing the scrollable content.

[coderabbitai]

Walkthrough

The PR updates src/routes/startups/+page.svelte by replacing Zach Handley’s testimonial from a helper-generated entry to an inline object using a .jpg image path. It removes the previous reference in that position and adds a second {#each testimonials as t} block within the same carousel, duplicating testimonial rendering. No exported or public API signatures are changed.

Possibly related PRs

• feat: adding testimonial page for socialaize #2374: Modifies the same Zach Handley testimonial in src/routes/startups/+page.svelte using the testimonial(...) helper, intersecting directly with this PR’s inline replacement and rendering changes.

Suggested reviewers

• LauraDuRy
• ItzNotABug

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title concisely and accurately reflects the main change—fixing duplicate testimonials in the startup carousel for infinite scroll—but it contains a spelling error ("caraousal" should be "carousel") and an extra leading space that reduce clarity.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat-add-testimonial-startup-page

---

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.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/routes/startups/+page.svelte (2)

175-180: Unify testimonial image handling; prefer using the helper with an extension option

Inline object is fine, but it diverges from the testimonial() pattern and will drift over time. Extend the helper to support non‑PNG assets and use it here for consistency.

Also, please confirm the company spelling in handle: "Socialaize" vs "Socialize".

Apply these diffs:

Helper update (add optional extension, default png):

@@
-    const testimonial = (name: string, handle: string, text: string, image: string) => {
-        return {
-            name,
-            handle,
-            text,
-            image: `/images/testimonials/${image}.png`
-        };
-    };
+    const testimonial = (
+        name: string,
+        handle: string,
+        text: string,
+        image: string,
+        ext: 'png' | 'jpg' | 'webp' = 'png'
+    ) => {
+        return {
+            name,
+            handle,
+            text,
+            image: `/images/testimonials/${image}.${ext}`
+        };
+    };

Use the helper for Zach (keeps data shape uniform):

@@
-        {
-            name: 'Zach Handley',
-            handle: 'CTO // Socialaize',
-            text: "We have somewhere between 200,000 to 600,000 function executions per day. It's especially nice that you guys have to deal with the scaling now and not me.",
-            image: '/images/testimonials/zach-handley.jpg'
-        }
+        testimonial(
+            'Zach Handley',
+            'CTO // Socialaize',
+            "We have somewhere between 200,000 to 600,000 function executions per day. It's especially nice that you guys have to deal with the scaling now and not me.",
+            'zach-handley',
+            'jpg'
+        )

---

572-596: Make the duplicated loop accessible and lighter: keys, aria-hidden, dynamic alt, lazy images

The second loop duplicates interactive content for animation but will be read twice by screen readers and eagerly loads images again. Add a keyed each, hide duplicates from a11y, fix alt text, and lazy‑load.

Note: The first loop still uses a hardcoded alt; consider aligning it too (see additional diff).

Apply this diff to the second loop:

-                        {#each testimonials as t}
+                        {#each testimonials as t, i (t.name + '-dup-' + i)}
-                            <li>
+                            <li aria-hidden="true">
                                 <div
                                     class="web-card is-white web-u-margin-block-start-64 e-mt-12-mobile gap-5"
                                     style="inline-size:23.625rem"
                                 >
                                     <p class="aw-sub-body-500">{t.text}</p>
                                     <div class="web-user-box">
-                                        <img
+                                        <img loading="lazy" decoding="async"
                                             class="web-user-box-image"
                                             src={t.image}
-                                            alt="Avatar of Kap.ts"
+                                            alt={`Avatar of ${t.name}`}
                                             width="48"
                                             height="48"
                                         />

Optional alignments for the first loop (recommended):

-                        {#each testimonials as t}
+                        {#each testimonials as t, i (t.name + '-orig-' + i)}
@@
-                                        <img
+                                        <img loading="lazy" decoding="async"
                                             class="web-user-box-image"
                                             src={t.image}
-                                            alt="Avatar of Kap.ts"
+                                            alt={`Avatar of ${t.name}`}
                                             width="48"
                                             height="48"
                                         />

Optional: reduce markup duplication by doubling the data instead of the template:

<script lang="ts">
    // ...
    const testimonialsLoop = [...testimonials, ...testimonials];
</script>

<!-- then use a single loop -->
{#each testimonialsLoop as t, i (t.name + '-' + i)}
    <!-- card -->
{/each}

Verification: the CSS animation uses translate(calc(-50% - 1rem)) which assumes gap: 2rem; if the gap changes, adjust the offset to remain seamless.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3debb09 and f966e5d.

📒 Files selected for processing (1)

• src/routes/startups/+page.svelte (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: tests
• GitHub Check: build

[ItzNotABug]

wrong alt

[ItzNotABug]

why an object and not the testimonial method used like others?

[HarshMN2345]

by default it was .png, so image wasn’t rendering. This one’s .jpeg.