feat: ProductCarousel — sección de productos faltante en landing - #80
feat: ProductCarousel — sección de productos faltante en landing#80turbillon50 wants to merge 1 commit into
Conversation
Sección faltante de la landing. Muestra 6 verticales de producto que VForge construye (Delivery, Salud, MLM, Fintech, Servicios, SaaS). Sigue el design system exacto: VFIcons, framer-motion, tokens CSS void/ink/border-app, neon.tech dark premium. id='productos' para el anchor del Hero."
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cb942c7c0f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| initial={{ opacity: 0, y: 24 }} | ||
| animate={inView ? { opacity: 1, y: 0 } : {}} | ||
| transition={{ duration: 0.5, delay: 0.08 + i * 0.07, ease: EASE as unknown as number[] }} | ||
| onClick={() => setActive(active === p.id ? null : p.id)} |
There was a problem hiding this comment.
When navigating the landing carousel with a keyboard or screen reader, the clickable product cards are now plain motion.divs with only onClick; unlike the previous button cards, they cannot receive focus or be toggled with Enter/Space, so those users cannot reveal the CTA/details. Use a real button or add role, tabIndex, and key handling for the card trigger.
Useful? React with 👍 / 👎.
| {/* Fade edges */} | ||
| <div | ||
| aria-hidden | ||
| className="pointer-events-none absolute left-0 top-0 z-10 h-full w-10 bg-gradient-to-r from-[rgb(var(--color-void))] to-transparent" |
There was a problem hiding this comment.
With the current theme tokens, --color-void is a hex color in app/globals.css, so rgb(var(--color-void)) computes as rgb(#03020a) and the browser drops this gradient stop; the carousel edge fade will not render in the current themes. Use var(--color-void)/bg-void or change the token to RGB channels before wrapping it in rgb().
Useful? React with 👍 / 👎.
1 participant
Qué hace este PR
Crea
components/marketing/ProductCarousel.tsx— la única sección de landing que faltaba e impedía quepage.tsxcompilara correctamente.Diseño
VFIcons(cero Lucide),framer-motion, tokensvoid/ink/border-app/on-surface, glow único por secciónid="productos"— target del Hero button "Ver productos"Archivos
components/marketing/ProductCarousel.tsx(nuevo)Estado de la landing tras merge
Pendiente post-merge: revisar
Credenciales.tsxsi compila (no auditado en esta sesión).