Skip to content

Commit 5cc6426

Browse files
nunowarnunowar
committed
- randomize the sponsors positions on each refresh
- fix the before/after behavior of browser testing section on mobile
1 parent 3f6b341 commit 5cc6426

File tree

1 file changed

+85
-97
lines changed

1 file changed

+85
-97
lines changed

‎resources/www/index.html‎

Lines changed: 85 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@
178178
</header>
179179

180180
<main>
181-
<section id="hero" class="text-center py-12 lg:py-24 max-w-7xl px-6 lg:px-8 mx-auto">
181+
<section id="hero" class="text-center pt-8 pb-12 lg:py-24 max-w-7xl px-6 lg:px-8 mx-auto">
182182
<div class="mb-8 flex justify-center motion-preset-blur-up-lg motion-delay-[300ms] motion-duration-1000">
183183
<div class="relative rounded-full px-3 py-1 text-sm/6 text-white/90 ring-1 ring-white/10 hover:ring-white/20">Pest v4.0 Talk <span class="sm:hidden">-</span><span class="hidden sm:inline-block">- Nuno Maduro at Laracon US 2025.</span> <a href="https://www.youtube.com/watch?v=f5gAgwwwwOI" target="_blank" class="font-semibold text-pink-400"><span aria-hidden="true" class="absolute inset-0"></span>Watch now <span aria-hidden="true">→</span></a></div>
184184
</div>
@@ -198,8 +198,8 @@ <h1 class="mt-8 text-4xl sm:text-5xl/14 xl:text-6xl/15 tracking-tight font-title
198198
</section>
199199

200200
<section id="partners" class="text-center py-8 sm:py-12 mx-auto max-w-7xl px-6 lg:px-8 motion-preset-blur-up-md motion-delay-[800ms] motion-duration-1000">
201-
<p class="text-xs md:text-base uppercase font-thin font-mono tracking-widest text-white/40">These companies sponsor Pest Framework</p>
202-
<div class="mx-auto mt-10 grid max-w-lg grid-cols-2 items-center gap-x-8 gap-y-10 lg:grid-cols-4 sm:gap-x-10 lg:mx-0 lg:max-w-none">
201+
<p class="text-xs md:text-base uppercase font-thin font-mono tracking-widest text-white/40 motion-preset-blur-up-md motion-delay-[800ms] motion-duration-1000">These companies sponsor Pest Framework</p>
202+
<div class="mx-auto mt-10 grid max-w-lg grid-cols-2 items-center gap-x-8 gap-y-10 lg:grid-cols-4 sm:gap-x-10 lg:mx-0 lg:max-w-none motion-preset-blur-up-md motion-delay-[800ms] motion-duration-1000">
203203
<a href="https://cmsmax.com/?ref=pestphp" target="_blank">
204204
<img src="/assets/sponsors/cmsmax.png" alt="CMS Max" class="h-7 md:h-9 object-contain mx-auto" />
205205
</a>
@@ -214,81 +214,49 @@ <h1 class="mt-8 text-4xl sm:text-5xl/14 xl:text-6xl/15 tracking-tight font-title
214214
</a>
215215
</div>
216216

217-
<div class="relative mx-auto pt-8 will-change-transform overflow-hidden" style="mask-image: linear-gradient(to right, #0000, #000 10%, #000 90%, #0000)">
218-
<div class="flex items-center w-max gap-x-12" style="animation: marquee 50s linear infinite">
219-
<a href="https://akaunting.com/?ref=pestphp" target="_blank">
220-
<img src="/assets/sponsors/akaunting.svg" alt="Akaunting" class="h-6" />
221-
</a>
222-
<a href="https://www.docuwriter.ai/?ref=pestphp" target="_blank">
223-
<img src="/assets/sponsors/docuwriter-ai.svg" alt="DocuWriter" class="h-8" />
224-
</a>
225-
<a href="https://localazy.com/?ref=pestphp" target="_blank">
226-
<img src="/assets/sponsors/localazy.svg" alt="Localazy" class="h-5.5" />
227-
</a>
228-
<a href="https://forge.laravel.com/?ref=pestphp" target="_blank">
229-
<img src="/assets/sponsors/forge.svg" alt="Forge" class="h-4.5" />
230-
</a>
231-
<a href="https://devtools-for-livewire.com/?ref=pestphp" target="_blank">
232-
<img src="/assets/sponsors/devtools-for-livewire.svg" alt="Devtools for Livewire" class="h-4.5" />
233-
</a>
234-
<a href="https://loadforge.com/?ref=pestphp" target="_blank">
235-
<img src="/assets/sponsors/loadforge.svg" alt="Load Forge" class="h-5" />
236-
</a>
237-
<a href="https://route4me.com/pt?ref=pestphp" target="_blank">
238-
<img src="/assets/sponsors/route4me.svg" alt="Route4Me" class="h-6" />
239-
</a>
240-
<a href="https://spatie.be/?ref=pestphp" target="_blank">
241-
<img src="/assets/sponsors/spatie.svg" alt="Spatie" class="h-6" />
242-
</a>
243-
<a href="https://getnerdify.com/?ref=pestphp" target="_blank">
244-
<img src="/assets/sponsors/nerdify.png" alt="Nerdify" class="h-14" />
245-
</a>
246-
<a href="https://www.zapiet.com/?ref=pestphp" target="_blank">
247-
<img src="/assets/sponsors/zapiet.svg" alt="Zapiet" class="h-5" />
248-
</a>
249-
<a href="https://wefolio.com/?ref=pestphp" target="_blank">
250-
<img src="/assets/sponsors/wefolio.svg" alt="WeFolio" class="h-6" />
251-
</a>
252-
<a href="https://eufaturo.pt/?ref=pestphp" target="_blank">
253-
<img src="/assets/sponsors/eufaturo.svg" alt="EuFaturo" class="h-5" />
254-
</a>
255-
256-
<a href="https://akaunting.com/?ref=pestphp" target="_blank">
257-
<img src="/assets/sponsors/akaunting.svg" alt="Akaunting" class="h-6" />
258-
</a>
259-
<a href="https://www.docuwriter.ai/?ref=pestphp" target="_blank">
260-
<img src="/assets/sponsors/docuwriter-ai.svg" alt="DocuWriter" class="h-8" />
261-
</a>
262-
<a href="https://localazy.com/?ref=pestphp" target="_blank">
263-
<img src="/assets/sponsors/localazy.svg" alt="Localazy" class="h-5.5" />
264-
</a>
265-
<a href="https://forge.laravel.com/?ref=pestphp" target="_blank">
266-
<img src="/assets/sponsors/forge.svg" alt="Forge" class="h-4.5" />
267-
</a>
268-
<a href="https://devtools-for-livewire.com/?ref=pestphp" target="_blank">
269-
<img src="/assets/sponsors/devtools-for-livewire.svg" alt="Devtools for Livewire" class="h-4.5" />
270-
</a>
271-
<a href="https://loadforge.com/?ref=pestphp" target="_blank">
272-
<img src="/assets/sponsors/loadforge.svg" alt="Load Forge" class="h-5" />
273-
</a>
274-
<a href="https://route4me.com/pt?ref=pestphp" target="_blank">
275-
<img src="/assets/sponsors/route4me.svg" alt="Route4Me" class="h-6" />
276-
</a>
277-
<a href="https://spatie.be/?ref=pestphp" target="_blank">
278-
<img src="/assets/sponsors/spatie.svg" alt="Spatie" class="h-6" />
279-
</a>
280-
<a href="https://getnerdify.com/?ref=pestphp" target="_blank">
281-
<img src="/assets/sponsors/nerdify.png" alt="Nerdify" class="h-14" />
282-
</a>
283-
<a href="https://www.zapiet.com/?ref=pestphp" target="_blank">
284-
<img src="/assets/sponsors/zapiet.svg" alt="Zapiet" class="h-5" />
285-
</a>
286-
<a href="https://wefolio.com/?ref=pestphp" target="_blank">
287-
<img src="/assets/sponsors/wefolio.svg" alt="WeFolio" class="h-6" />
288-
</a>
289-
<a href="https://eufaturo.pt/?ref=pestphp" target="_blank">
290-
<img src="/assets/sponsors/eufaturo.svg" alt="EuFaturo" class="h-5" />
291-
</a>
217+
<div class="relative mx-auto pt-8 will-change-transform overflow-hidden motion-preset-blur-up-md motion-delay-[1000ms] motion-duration-1000" style="mask-image: linear-gradient(to right, #0000, #000 10%, #000 90%, #0000)">
218+
<div
219+
x-data="{
220+
pxPerSecond: 50,
221+
duration: 1,
222+
items: [
223+
{ href: 'https://akaunting.com/?ref=pestphp', src: '/assets/sponsors/akaunting.svg', alt: 'Akaunting', class: 'h-6' },
224+
{ href: 'https://www.docuwriter.ai/?ref=pestphp', src: '/assets/sponsors/docuwriter-ai.svg', alt: 'DocuWriter', class: 'h-8' },
225+
{ href: 'https://localazy.com/?ref=pestphp', src: '/assets/sponsors/localazy.svg', alt: 'Localazy', class: 'h-5.5' },
226+
{ href: 'https://forge.laravel.com/?ref=pestphp', src: '/assets/sponsors/forge.svg', alt: 'Forge', class: 'h-4.5' },
227+
{ href: 'https://devtools-for-livewire.com/?ref=pestphp', src: '/assets/sponsors/devtools-for-livewire.svg', alt: 'Devtools for Livewire', class: 'h-4.5' },
228+
{ href: 'https://loadforge.com/?ref=pestphp', src: '/assets/sponsors/loadforge.svg', alt: 'Load Forge', class: 'h-5' },
229+
{ href: 'https://route4me.com/pt?ref=pestphp', src: '/assets/sponsors/route4me.svg', alt: 'Route4Me', class: 'h-6' },
230+
{ href: 'https://spatie.be/?ref=pestphp', src: '/assets/sponsors/spatie.svg', alt: 'Spatie', class: 'h-6' },
231+
{ href: 'https://getnerdify.com/?ref=pestphp', src: '/assets/sponsors/nerdify.png', alt: 'Nerdify', class: 'h-14' },
232+
{ href: 'https://www.zapiet.com/?ref=pestphp', src: '/assets/sponsors/zapiet.svg', alt: 'Zapiet', class: 'h-5' },
233+
{ href: 'https://wefolio.com/?ref=pestphp', src: '/assets/sponsors/wefolio.svg', alt: 'WeFolio', class: 'h-7' },
234+
{ href: 'https://eufaturo.pt/?ref=pestphp', src: '/assets/sponsors/eufaturo.svg', alt: 'EuFaturo', class: 'h-5.5' }
235+
],
236+
shuffled: [],
237+
init() {
238+
this.shuffled = this.items.slice().sort(() => Math.random() - 0.5)
239+
this.$nextTick(() => {
240+
this.updateDuration()
241+
new ResizeObserver(() => this.updateDuration()).observe(this.$refs.track)
242+
this.$refs.track.addEventListener('load', () => this.updateDuration(), true)
243+
window.addEventListener('resize', () => this.updateDuration(), { passive: true })
244+
})
245+
},
246+
updateDuration() {
247+
this.duration = Math.max(1, this.$refs.track.scrollWidth / this.pxPerSecond)
248+
}
249+
}"
250+
class="overflow-hidden"
251+
>
252+
<div x-ref="track" class="flex items-center w-max gap-x-12" :style="`animation: marquee ${duration}s linear infinite`">
253+
<template x-for="s in shuffled" :key="s.alt + '-a'">
254+
<a :href="s.href" target="_blank"><img :src="s.src" :alt="s.alt" :class="s.class"></a>
255+
</template>
256+
<template x-for="s in shuffled" :key="s.alt + '-b'">
257+
<a :href="s.href" target="_blank"><img :src="s.src" :alt="s.alt" :class="s.class"></a>
258+
</template>
259+
</div>
292260
</div>
293261
</div>
294262
</section>
@@ -385,31 +353,51 @@ <h3 class="text-sm text-gray-400">All-in-one Framework</h3>
385353
x-data="{ x: 50, dragging: false }"
386354
x-init="() => {
387355
const handleWidth = 40;
356+
const getX = (e) => e.clientX ?? e.touches?.[0]?.clientX ?? e.changedTouches?.[0]?.clientX;
357+
388358
const update = (e) => {
389-
if (dragging) {
390-
const rect = $el.getBoundingClientRect();
391-
x = Math.min(100, Math.max(7, (((e.clientX - rect.left) - (handleWidth / 2)) / rect.width) * 100));
392-
}
359+
if (!dragging) return;
360+
const clientX = getX(e);
361+
if (clientX == null) return;
362+
363+
const rect = $refs.stage.getBoundingClientRect();
364+
x = Math.min(100, Math.max(0, (((clientX - rect.left) - (handleWidth / 2)) / rect.width) * 100));
365+
366+
if (e.type?.startsWith?.('touch')) e.preventDefault?.();
393367
};
394-
window.addEventListener('mousemove', update);
395-
window.addEventListener('mouseup', () => dragging = false);
368+
369+
const stop = () => { dragging = false; };
370+
371+
window.addEventListener('mousemove', update, { passive: true });
372+
window.addEventListener('mouseup', stop, { passive: true });
373+
window.addEventListener('touchmove', update, { passive: false });
374+
window.addEventListener('touchend', stop, { passive: true });
375+
window.addEventListener('touchcancel', stop, { passive: true });
396376
}"
397377
class="relative w-full grow h-85 overflow-hidden select-none"
398378
>
399-
<div class="absolute top-6 lg:top-10 bottom-0 z-10 w-1 bg-pink-400" :style="{ left: `${x}%`, transform: 'translateX(-50%)' }"></div>
400-
<div
401-
:style="{ left: `${x}%` }"
402-
@mousedown.prevent="dragging = true"
403-
class="absolute z-20 flex size-10 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize items-center justify-center rounded-full bg-pink-500 top-1/2 mt-5"
404-
title="Drag to understand the browser testing"
405-
>
406-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="size-5.5"><path fill="currentColor" fill-rule="evenodd" d="M1 12c0-.5523.44772-1 1-1h20c.5523 0 1 .4477 1 1s-.4477 1-1 1H2c-.55228 0-1-.4477-1-1Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M5.70709 8.29288c.39053.39052.39055 1.02368.00003 1.41421L3.41421 12.0001l2.29288 2.2928c.39053.3905.39055 1.0237.00003 1.4142-.39051.3905-1.02368.3905-1.41421 0l-3-2.9999A.99982.99982 0 0 1 1 12.0001c0-.2652.10535-.5195.29288-.7071l3-3.00009c.39052-.39053 1.02368-.39055 1.41421-.00003Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M18.2929 8.29288c.3905-.39052 1.0237-.3905 1.4142.00003l3 3.00009a.99993.99993 0 0 1 0 1.4142l-3 2.9999c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142l2.2929-2.2928-2.2929-2.29301c-.3905-.39053-.3905-1.02369 0-1.41421Z" clip-rule="evenodd"/></svg>
407-
<div class="absolute inset-1 rounded-full bg-pink-500 animate-ping"></div>
408-
</div>
379+
<div class="mt-6 lg:mt-10 ml-6 lg:ml-10 h-full w-full">
380+
<div x-ref="stage" class="relative h-full w-full overflow-hidden rounded-t-xl bg-gray-950/10 outline outline-gray-950/10">
381+
<div class="absolute top-0 bottom-0 z-10 w-1 bg-pink-400" :style="{ left: `${x}%`, transform: 'translateX(-50%)' }"></div>
382+
<div
383+
:style="{ left: `${x}%` }"
384+
@mousedown.prevent="dragging = true"
385+
@touchstart.prevent="dragging = true"
386+
class="absolute z-20 flex size-10 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize items-center justify-center rounded-full bg-pink-500 top-1/2 -mt-5 touch-none"
387+
title="Drag to understand the browser testing"
388+
>
389+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="size-5.5"><path fill="currentColor" fill-rule="evenodd" d="M1 12c0-.5523.44772-1 1-1h20c.5523 0 1 .4477 1 1s-.4477 1-1 1H2c-.55228 0-1-.4477-1-1Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M5.70709 8.29288c.39053.39052.39055 1.02368.00003 1.41421L3.41421 12.0001l2.29288 2.2928c.39053.3905.39055 1.0237.00003 1.4142-.39051.3905-1.02368.3905-1.41421 0l-3-2.9999A.99982.99982 0 0 1 1 12.0001c0-.2652.10535-.5195.29288-.7071l3-3.00009c.39052-.39053 1.02368-.39055 1.41421-.00003Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M18.2929 8.29288c.3905-.39052 1.0237-.3905 1.4142.00003l3 3.00009a.99993.99993 0 0 1 0 1.4142l-3 2.9999c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142l2.2929-2.2928-2.2929-2.29301c-.3905-.39053-.3905-1.02369 0-1.41421Z" clip-rule="evenodd"/></svg>
390+
<div class="absolute inset-1 rounded-full bg-pink-500 animate-ping"></div>
391+
</div>
392+
393+
{{-- AFTER --}}
394+
<img src="/assets/after.png" class="absolute inset-0 h-full max-w-none lg:w-full lg:h-auto pointer-events-none" alt="pestphp browser testing">
409395

410-
<div class="relative mt-6 lg:mt-10 ml-6 lg:ml-10 h-full w-full overflow-hidden rounded-t-xl bg-gray-950/10 outline outline-gray-950/10">
411-
<img src="/assets/after.png" class="absolute inset-0 h-full max-w-none lg:w-full lg:h-auto pointer-events-none">
412-
<img src="/assets/before.png" class="absolute inset-0 h-full max-w-none lg:w-full lg:h-auto pointer-events-none" :style="`clip-path: inset(0 calc(${100 - x}% + 40px) 0 0)`">
396+
{{-- BEFORE --}}
397+
<div class="absolute inset-0 pointer-events-none" :style="`clip-path: inset(0 calc(100% - ${x}%) 0 0)`">
398+
<img src="/assets/before.png" class="absolute inset-0 h-full max-w-none lg:w-full lg:h-auto" alt="pestphp browser testing">
399+
</div>
400+
</div>
413401
</div>
414402
</div>
415403

0 commit comments

Comments
 (0)