fix: repeat social proof logos to fill ultrawide screens

Pre-compute repeated logo arrays in script setup instead of
spreading in templates. Desktop row now repeats 4x (48 items)
to cover 8K ultrawide (7680px) viewports.

Amp-Thread-ID: https://ampcode.com/threads/T-019d93a2-3fad-731f-b3a3-8aba5e6c3660
Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
DrJKL
2026-04-15 17:15:50 -07:00
parent 1fb0eeb736
commit b7eba22048

View File

@@ -14,8 +14,11 @@ const logos = [
'Ubisoft'
]
const desktopLogos = Array.from({ length: 4 }, () => logos).flat()
const row1 = logos.slice(0, 6)
const mobileRow1 = [...row1, ...row1]
const row2 = logos.slice(6)
const mobileRow2 = [...row2, ...row2]
</script>
<template>
@@ -23,7 +26,7 @@ const row2 = logos.slice(6)
<!-- Single row on desktop -->
<div class="animate-marquee hidden items-center gap-2 md:flex">
<div
v-for="(logo, i) in [...logos, ...logos]"
v-for="(logo, i) in desktopLogos"
:key="`${logo}-${i}`"
class="flex h-20 w-50 shrink-0 items-center justify-center"
>
@@ -38,7 +41,7 @@ const row2 = logos.slice(6)
>
<div class="animate-marquee flex items-center gap-8">
<div
v-for="(logo, i) in [...row1, ...row1]"
v-for="(logo, i) in mobileRow1"
:key="`${logo}-${i}`"
class="flex h-14 w-40 shrink-0 items-center justify-center"
>
@@ -47,7 +50,7 @@ const row2 = logos.slice(6)
</div>
<div class="animate-marquee-reverse flex items-center gap-8">
<div
v-for="(logo, i) in [...row2, ...row2]"
v-for="(logo, i) in mobileRow2"
:key="`${logo}-${i}`"
class="flex h-14 w-40 shrink-0 items-center justify-center"
>