[Product Homepage Design] Implementation#147
Open
yetone wants to merge 20 commits into
Open
Conversation
added 20 commits
May 13, 2026 03:54
Implement the Demo section component that displays the animated usage.gif with numbered step-by-step command captions, responsive scaling for mobile devices, and dark mode theme adaptation. - Embed usage.gif with lazy loading and alt text for accessibility - Display 4 numbered captions explaining SET/GET/DELETE commands - Responsive layout that scales to fit 375px mobile viewports - Dark mode support with adapted background and border colors - Include unit and integration tests (18 tests covering all 5 test cases) Also sets up the initial Vite + React + TypeScript + Tailwind project structure as the first builder, including shared types, utilities, hooks, and stub components for all page sections.
Set up Vite + React + TypeScript + Tailwind project structure as the first builder. Implement Hero section with logo, product name, tagline, and CTAs (Get Started, View on GitHub) per REQ-1 and REQ-6. Includes shared resources: types, utilities, layout, hooks, and stub components for all remaining scenarios.
…vs Redis Adds REQ-8 comparison table component with accessible table structure, visual differentiation using SVG icons plus text labels (not color-only), and responsive horizontal scroll for mobile viewports at 375px width.
Add Docs component with three resource cards linking to project overview, API/protocol reference, and technical architecture docs. Cards feature hover/focus states, icons, and keyboard accessibility per REQ-5.
- Render 6 feature cards with Lucide icons, titles, and descriptions - Responsive grid: 3 cols desktop, 2 cols tablet, 1 col mobile - Hover effects: shadow, scale, and border color transitions - Dark mode support for all card elements - Icons marked aria-hidden for accessibility
…planned items Implements REQ-7, REQ-9, and US-5: - CircleCI build status badge linked to project page - Roadmap section showing 5 completed items (tokio, Memcached protocol, skiplist memtable, minor/major compaction) - 1 planned item (Raft consensus) - Visual distinction using icons + text labels, not color alone - Accessible: alt text, ARIA labels, semantic HTML
…7ymb-cbf0249' into feature/product-homepage-design-7ymb-cbf0249
Implement GitHubLink component with dynamic star count fetched from GitHub API, external link attributes for security, keyboard accessibility, and graceful error handling per REQ-10 and US-4.
…d localStorage persistence Implement ThemeProvider context, useTheme hook, and ThemeToggle button component. Fix Theme import path and add comprehensive unit tests covering system preference detection, toggle behavior, persistence, accessibility, and FOUC prevention.
…7ymb-cbf0249' into feature/product-homepage-design-7ymb-cbf0249
…oks and global CSS rules - Add BREAKPOINTS constants and useIsMobile/useIsTablet/useIsDesktop helper hooks - Add responsive typography, image scaling, tap target sizing, and overflow prevention CSS - Improve matchMedia mock to evaluate media queries based on viewport width - Add comprehensive tests for responsive hooks and layout across viewports (320px–2560px) Implements REQ-12 responsive design requirements.
Add responsive typography, image/media overflow prevention, mobile touch target sizing, and viewport-constrained containers. Includes unit and integration tests validating layout at desktop (1280px), tablet (800px), and mobile (375px) breakpoints, plus extreme viewport edge cases.
…7ymb-cbf0249' into feature/product-homepage-design-7ymb-cbf0249
…7ymb-cbf0249' into feature/product-homepage-design-7ymb-cbf0249
…1y features - Add proper heading hierarchy with single h1 and semantic landmark elements - Implement skip-to-content link as first focusable element - Add ARIA labels to icon-only controls, copy buttons, and external links - Ensure all images have descriptive alt text attributes - Add visible focus indicators with focus-visible outlines on all interactive elements - Implement color-not-sole-differentiator pattern with text+icon indicators - Add ARIA live region for copy confirmation announcements - Create useClipboard hook with Clipboard API and execCommand fallback
Update the skip-to-content assertion to use "Skip to main content" which is the WCAG-recommended wording for skip navigation links.
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
This PR implements the requirements for Product Homepage Design.
Generated by Something