feat: main landing page at w3-kit.com#88
Merged
PetarStoev02 merged 9 commits intomainfrom Apr 14, 2026
Merged
Conversation
…, and dual-theme tokens Replaces the under-construction placeholder with a full marketing landing page for w3-kit.com. Adds hero, ecosystem overview, quick start, deep dive features, feature grid, open source callout, and CTA sections — all wired with scroll- triggered GSAP reveal animations and responsive design. - Add landing-specific CSS tokens (surface-translucent, border-subtle, hero-gradient, glow-accent) for both light/dark - Add GSAP ScrollTrigger plugin registration (gsap-plugins.ts) - Add reusable scroll animation hooks (useScrollReveal, useParallax, useEntranceAnimation) - Extract getSectionUrl/getLandingUrl into shared/lib/urls.ts - Add SectionContainer shared component for consistent layout - Create 14 landing page components using shadcn Button/Badge/Card/Separator - Wire LandingPage into /_landing/ route, replacing UnderConstructionLayout - Add Linear.app-inspired DESIGN.md reference Closes #77
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replace all ~/ path alias imports with relative paths across landing page components, widgets, and shared modules. TanStack Start's code-splitting plugin runs before Vite's tsconfigPaths resolver, causing "Failed to resolve import" errors at runtime. Also upgrades header (transparent/sticky mode + mobile hamburger), footer (multi-column layout with links), and PageShell (transparentHeader prop).
…lity
The unlayered `* { margin: 0; padding: 0 }` reset was overriding all
Tailwind utility classes (px-6, mx-auto, py-20, gap-8, etc.) because
unlayered CSS always beats layered CSS in the Cascade Layers spec.
Tailwind v4 already includes its own preflight, making the reset redundant.
Also removes unlayered h1/h2/h3 global styles that conflicted with
Tailwind text sizing classes, and moves body smoothing + code font
into @layer base.
…tags - Replace placeholder visuals with rich mockups: faux terminal (CLI), template cards grid, recipe checklist, and component preview cards - Add typewriter animation to code snippet with blinking cursor, triggered by IntersectionObserver with prefers-reduced-motion support - Add comprehensive SEO meta tags: description, Open Graph, and Twitter Card tags to the landing route head
…section flow Replace the 7-section linear layout with a focused 4-section design: 1. Hero — centered headline, CTAs, extra bottom padding for bento peek 2. Bento Grid — 7 interactive cells (CLI terminal, ecosystem, own your code, built for web3, theme toggle, recipes, open source) with negative margin pulling into hero viewport 3. Ecosystem Map — visual node diagram connecting w3-kit hub to subdomain tools (UI, Docs, Registry, Learn) 4. CTA Card — elevated card with accent glow blur, final conversion Removes 11 old section files (-1022 lines) and replaces with 3 new focused components (+569 lines). Each bento cell is interactive: lock toggle, theme switch, copy button, recipe checklist.
…nd real data
Replace generic placeholder cells with 6 purposeful, interactive cells:
- Smart Contract Scanner: real component from UI repo with live scan demo
- Registry: chain/token database with real logos, code preview, tab switch
- Get Started: interactive 3-step stepper with progress bar
- Documentation: expandable Q&A ("What do you need?") with doc links
- Recipes: clickable checklist with difficulty, time, and progress tracking
- Open Source: real GitHub repos with star counts
Also adds:
- Liquid glass design tokens (glass-bg, glass-border, glass-shadow, glass-inner-bg)
- Glass styling on CTA card and ecosystem map nodes
Code quality improvements from /simplify review:
- Extract shared CellLink and ProgressBar components (was duplicated 4x and 2x)
- Fix broken doc URLs (double /docs prefix in href concatenation)
- Fix setTimeout memory leak in SmartContractScanner (add cleanup ref)
- Use lazy initializer for RecipesCell useState
- Use RECIPES.length constant instead of derived Object.keys().length
- Remove redundant WHAT comments
- Ecosystem section: hub & spoke layout with real UI components (ConnectWallet, NetworkSwitcher, WalletBalance, TokenSwap, NFTCard) imported from the ui repo with unique detail panels per tool - Design page: full rewrite with Tailwind, scroll-tracking sidebar via IntersectionObserver, copyable color values with hex codes for both light/dark themes, live shadcn component previews - Hero: copyable npx w3-kit init command with copy/check feedback - CTA: tighter layout with install command + accent glow - Header: removed Design nav link - 5 UI components copied from ui repo with fixed imports
Code quality (from /simplify review): - Extract useCopyToClipboard hook — eliminates 3 duplicate implementations - Fix 5 leaked setTimeouts with ref + cleanup pattern - Export GlassCard, reuse in CTA + ecosystem instead of inline styles - GlassCard uses cn() instead of string concatenation - Extract TokenInputField + StatusIndicator outside render bodies - Module-level guard for TokenSwap style tag injection - Move GitHubIcon from pages/landing/ to shared/ui/ (FSD layer fix) - Hoist 4 static arrays to module scope - Add loading="lazy" to ~30 below-fold chain/token images Features: - SVG logo component (shared/ui/logo.tsx) replacing img tags - Logo in header, footer, ecosystem hub - Global gradient background layer across all landing sections - Under-construction pages: own header/footer, self-contained layout - Playwright test suite (16 tests covering all sections + subdomains) - .gitignore test-results/
Linear design reference file from npx getdesign, not used in codebase.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete rebuild of the main landing page at w3-kit.com (closes #77). Replaces the under-construction placeholder with a polished, interactive marketing page.
Landing Page — 4 sections
npx w3-kit initcommandInfrastructure
getSectionUrl/getLandingUrlextracted to shared/lib/urls.tsDesign System Page
Under-Construction Pages
Code Quality (/simplify)
useCopyToClipboardhook — eliminated 3 duplicate implementationsGlassCard— reused in CTA + ecosystemTokenInputField+StatusIndicatoroutside render bodiesGitHubIconmoved to shared/ui (FSD layer fix)loading="lazy"on ~30 below-fold imagesTests
Test plan
tsc --noEmit— zero errorseslint src/— cleannpx playwright test— 16/16 passing