Repository: Afordin/web-afordin
Pull request #35: Comunidad
Author: login: ejimenezf2
Created: 2025-04-22T04:57:38Z | Merged: 2025-04-22T09:59:26Z


- Implementación de scroll infinito real en las columnas de la sección Comunidad


Diff:
diff --git a/public/js/scroll_loop.js b/public/js/scroll_loop.js
new file mode 100644
index 0000000..369e51c
--- /dev/null
+++ b/public/js/scroll_loop.js
@@ -0,0 +1,29 @@
+window.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.scroll-column').forEach((column) => {
+    const direction = column.dataset.direction || 'up'
+    const isUp = direction === 'up'
+    const speed = 0.5
+    let offset = 0
+    const gap = 16
+
+    const cards = Array.from(column.children)
+    cards.forEach((card) => {
+      const clone = card.cloneNode(true)
+      column.appendChild(clone)
+    })
+
+    const cardHeights = cards.map((card) => card.offsetHeight)
+    const totalHeight = cardHeights.reduce((a, b) => a + b + gap, 0)
+
+    const animate = () => {
+      offset += speed
+      if (offset >= totalHeight) offset = 0
+      if (offset <= -totalHeight) offset = 0
+
+      column.style.transform = `translateY(${isUp ? -offset : offset}px)`
+      requestAnimationFrame(animate)
+    }
+
+    requestAnimationFrame(animate)
+  })
+})
diff --git a/src/components/Community.astro b/src/components/Community.astro
index 73dd514..1eb17b7 100644
--- a/src/components/Community.astro
+++ b/src/components/Community.astro
@@ -11,30 +11,40 @@ const col3 = users.filter((_, i) => i % 3 === 2)
 <section
   class="relative flex min-h-screen w-full flex-col items-center justify-center gap-11 overflow-hidden bg-black text-white"
 >
-  <!-- Mask as gradient background at top and bottom -->
   <div
     class="pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-b from-transparent via-black/60 to-black"
   >
   </div>
 
-  <hgroup class="z-10 flex flex-col items-center gap-8 px-4 text-center">
+  <!-- Título -->
+  <div class="z-10 flex flex-col items-center gap-8 px-4 text-center">
     <h2 class="text-5xl font-bold drop-shadow-md">Comunidad</h2>
     <p class="text-lg md:text-xl">Conecta, colabora y encuentra apoyo en cada paso de tu camino.</p>
-  </hgroup>
+  </div>
 
-  <!-- Columns -->
-  <article class="z-10 mt-6 flex w-full justify-center gap-6 overflow-hidden px-8">
-    <div class="scroll-column scroll-down flex flex-col gap-4">
+  <!-- Columnas -->
+  <div class="z-10 mt-6 flex h-[600px] w-full justify-center gap-6 overflow-hidden px-8">
+    <div class="scroll-column scroll-left flex flex-col gap-4" data-direction="down">
       {col1.map((user, i) => <UserCard user={user} key={`col1-${i}`} />)}
     </div>
-    <div class="scroll-column scroll-up flex flex-col gap-4">
+    <div class="scroll-column scroll-center flex flex-col gap-4" data-direction="up">
       {col2.map((user, i) => <UserCard user={user} key={`col2-${i}`} />)}
     </div>
-    <div class="scroll-column scroll-down flex flex-col gap-4">
+    <div class="scroll-column scroll-right flex flex-col gap-4" data-direction="down">
       {col3.map((user, i) => <UserCard user={user} key={`col3-${i}`} />)}
     </div>
-  </article>
-  <article class="z-10">
+  </div>
+
+  <!-- Botón -->
+  <div class="z-20 mt-12">
     <Button href="#conocenos">Conócenos</Button>
-  </article>
+  </div>
 </section>
+
+<script src="/js/scroll_loop.js" defer></script>
+
+<style>
+  :global(a[href='#conocenos']) {
+    border-radius: 8px !important;
+  }
+</style>
diff --git a/src/components/ui/UserCard.astro b/src/components/ui/UserCard.astro
index ece8d70..ee0795b 100644
--- a/src/components/ui/UserCard.astro
+++ b/src/components/ui/UserCard.astro
@@ -6,25 +6,25 @@ const isSimple = user.avatar.includes('avatar2') || user.avatar.includes('avatar
 ---
 
 <div
-  class={`rounded-xl w-64 min-h-[140px] overflow-hidden ${
+  class={`rounded-xl w-full max-w-[410px] overflow-hidden ${
     isSimple
-      ? 'bg-white text-black flex items-center justify-between gap-2 p-4'
-      : 'bg-black border border-white/10 p-4 text-white'
+      ? 'bg-[#D9D9D9] min-h-[150px] text-black flex items-center justify-between gap-4 p-6'
+      : 'bg-black min-h-[369px] text-white p-4 border border-white/10'
   }`}
 >
-  <div class="flex items-center gap-3">
-    <img src={user.avatar} alt="avatar" class="h-10 w-10 rounded-full object-cover" />
+  <div class="flex items-center gap-4">
+    <img src={user.avatar} alt="avatar" class={`${isSimple ? 'w-18 h-18' : 'w-16 h-16'} rounded-full object-cover`} />
     <div class="flex flex-col">
-      <p class="font-bold">{user.name}</p>
-      <p class="text-sm opacity-70">@{user.username}</p>
+      <p class="text-2xl font-bold">{user.name}</p>
+      <p class="text-xl text-[#7B7B7B]">@{user.username}</p>
     </div>
   </div>
 
   {
     isSimple ? null : (
       <>
-        <div class="my-3 border-t border-dashed border-white/30" />
-        <p class="text-sm leading-snug">{user.message}</p>
+        <div class="my-4 border-t border-dashed border-white/30" />
+        <p class="text-base leading-snug">{user.message}</p>
       </>
     )
   }
diff --git a/src/index.css b/src/index.css
index 29472c0..2442f13 100644
--- a/src/index.css
+++ b/src/index.css
@@ -41,3 +41,7 @@
 .mask-gradient {
   background: linear-gradient(to bottom, black 0%, transparent 20%, transparent 80%, black 100%);
 }
+
+.scroll-column {
+  will-change: transform;
+}


Reviews:
user: login: afordigital
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T09:58:47Z
user: login: ejimenezf2
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T10:20:21Z

Review comments:
diff_hunk: @@ -11,30 +11,40 @@ const col3 = users.filter((_, i) => i % 3 === 2)
 <section
   class="relative flex min-h-screen w-full flex-col items-center justify-center gap-11 overflow-hidden bg-black text-white"
 >
-  <!-- Mask as gradient background at top and bottom -->
   <div
     class="pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-b from-transparent via-black/60 to-black"
   >
   </div>
 
-  <hgroup class="z-10 flex flex-col items-center gap-8 px-4 text-center">
path: src/components/Community.astro
user: login: afordigital
body: por qué quitaste etiquetas semánticas de accesibilidad? article o hgroup nos ayudan a dar información semántica ☺️
created_at: 2025-04-22T09:58:47Z
author_association: MEMBER
diff_hunk: @@ -11,30 +11,40 @@ const col3 = users.filter((_, i) => i % 3 === 2)
 <section
   class="relative flex min-h-screen w-full flex-col items-center justify-center gap-11 overflow-hidden bg-black text-white"
 >
-  <!-- Mask as gradient background at top and bottom -->
   <div
     class="pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-b from-transparent via-black/60 to-black"
   >
   </div>
 
-  <hgroup class="z-10 flex flex-col items-center gap-8 px-4 text-center">
path: src/components/Community.astro
user: login: ejimenezf2
body: Perdón, creo que hice mal el merge cuando baje cambios de la principal.
created_at: 2025-04-22T10:20:21Z
author_association: CONTRIBUTOR

PR comments:
user: login: netlify[bot]
created_at: 2025-04-22T04:57:52Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *afordin* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | a3c86eb42a058a60c236ae8fca02fbcd8b77a0c7 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/afordin/deploys/680721c45bf31a00085277cf |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-35--afordin.netlify.app](https://deploy-preview-35--afordin.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTM1LS1hZm9yZGluLm5ldGxpZnkuYXBwIn0.wJg0CmZWTZatVoXxMnNyNeeJGB_4Pxgob-NtAVUf5q4)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [afordin Preview](https://deploy-preview-35--afordin.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/afordin/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: ejimenezf2
created_at: 2025-04-22T04:59:18Z
body: 
Implementation of real infinite scroll in the columns of the Community section
author_association: CONTRIBUTOR
user: login: afordigital
created_at: 2025-04-22T09:59:22Z
body: cool! 🐹
author_association: MEMBER