Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Website: revamp and improve the landing page

Aperta
  • Qualcosa non va?
#37 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@anjalinayak01 ci sta già lavorando.

Dal 10/10/2026.

Valutazione

Difficoltà
4/5
Tempo stimato
Più di una settimana
Idoneità per principianti
30/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
nextjs, react, tailwindcss, typescript
Ambito
frontend, web-dev

Direzione di ricerca

Start with src/app/page.tsx and the unused files in src/components/landing/, then read the component registry in src/registry/registry.ts for the showcase. Read the Next.js guide in node_modules/next/dist/docs/ before adding any "use client" pieces. Done means the new sections render at / with one working interactive demo, the <main> nesting is fixed, and bun run lint, format:check, typecheck, test and build pass. Comment on the issue to claim one section first, such as the hero or the contribute block.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement help wanted priority: medium website

Website: revamp the landing page

The landing page (src/app/page.tsx) is thin. It renders only Hero → Features → Community → FAQ, so a visitor never sees the components working, never sees what's in the library, and gets no clear path to contributing. This issue covers a revamp that makes the page show the product instead of describing it.

Current problems
  • No live components. The hero and features show code snippets only. Nothing on the page can be clicked, so you can't try the LanguageSwitcher, PhoneInput or NavBar.
  • Unused sections. components.tsx (~700 lines), editing.tsx, getting-started.tsx and contribute.tsx in src/components/landing/ are not imported anywhere. Either use them in the new layout or delete them.
  • Copy promises things that don't exist yet. The features grid advertises "Searchable locale pickers" (no such component yet, see #33). The FAQ says components are "used in production apps worldwide". Copy should match what actually ships.
  • No component catalogue. There's no section listing the available components with links to their docs.
  • Weak contributor funnel. For a community-built library there's no section that points to good first issues or explains the contribution flow.
  • Markup: Hero renders its own <main> inside the page's <main>, which is invalid HTML and confuses screen readers.
Proposed structure
  1. Hero: clear headline and subhead, install command with a copy button, primary CTA (Get started) and secondary CTA (Browse components), and a live, interactive demo (for example a LanguageSwitcher that re-renders a sample UI in the chosen language, including RTL for Arabic or Hebrew).
  2. Component showcase: a grid of every shipped component, each a small live preview linking to its docs page. Build it from the registry (src/registry/registry.ts) so new components appear automatically.
  3. Why Elements: 3–4 concise value props (shadcn-style ownership, no framework lock-in, RTL and locale-aware, accessible), with no claims the code doesn't back up.
  4. Works with your i18n stack: short snippets showing the switcher wired to next-intl, react-i18next and react-intl.
  5. Install in two ways: npm package vs shadcn add / npx @babelize/elements add, in tabs.
  6. Contribute: how the flow works plus links to open good first issues; reuse or redesign contribute.tsx.
  7. Community + FAQ (trimmed) → Footer.
Design and quality requirements
  • Keep the current dark visual identity (emerald accent); stay consistent with the docs site
  • Responsive down to 360px wide, with no horizontal scroll
  • Respect prefers-reduced-motion for all motion animations
  • Accessible: semantic landmarks (one <main>), heading order, visible focus states, AA contrast
  • Performance: Lighthouse ≥ 90 for Performance, Accessibility, Best Practices and SEO on mobile. Load demos lazily below the fold, and don't load heavy client JS just for decoration.
  • Server components by default; "use client" only for interactive pieces. Read the relevant guide in node_modules/next/dist/docs/ first, because this Next.js version differs from older ones.
  • Keep SEO metadata, canonical URL and the OG image working
Out of scope
  • GitHub stars counter (tracked in #36)
  • Docs site layout changes
Acceptance
  • New section layout live at / with at least one interactive component demo
  • Unused landing components either used or removed
  • Copy reviewed against what actually ships
  • Before/after screenshots (desktop + mobile) and Lighthouse scores in the PR
  • bun run lint, format:check, typecheck, test and build pass

Large changes are welcome as a series of smaller PRs (for example hero → showcase → contribute section). Comment here first with the section you're taking so work doesn't overlap.

Lingua principale
TypeScript
Stelle
39
Fork
16
Merge medio
2g 12h
PR unite (30g)
10

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di babelize/babelize-elements

Tutte le issue di babelize/babelize-elements

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.