# Homepage & React Development (GStack/Pretext Style)

This guide summarizes the best practices for building high-quality homepages and React components using the `design-html` logic from GStack.

## 1. Design finalization Workflow
- **Approved Mockups**: Always start with a visual reference (PNG/Screenshot).
- **Component Inventory**: Before coding, list all colors (hex), fonts (weights), and components.
- **Realistic Content**: Never use "Lorem Ipsum." Generate content that fits the product vision.

## 2. Dynamic Layouts (The Pretext Way)
- **Fluidity**: Text should reflow on resize, and container heights should adjust to content.
- **Self-Sizing Cards**: Use layout logic where cards size themselves based on internal content density.
- **Tight-Fit Elements**: For chat bubbles or specific UI elements, use "shrinkwrap" logic to minimize unused space.

## 3. React Component Best Practices
- **Framework-Native with Hooks**: Use React-native patterns combined with Pretext-style layout hooks for fluid UI.
- **TypeScript First**: Ensure all components are strongly typed.
- **Zero Deps CSS**: Prioritize vanilla CSS (or CSS Modules) for maximum control and zero overhead.
- **Performance**: Minimize re-renders by using optimized sub-components with specific selectors (e.g., `useGameStore(s => s.score)`).

## 4. Visual Polish (Premium Aesthetics)
- **Typography**: Use modern fonts (Inter, Roboto, Outfit) from Google Fonts.
- **Micro-Animations**: Add subtle transitions for hover states and interactive elements.
- **Gradients & Shadows**: Use harmonious, sleek dark mode palettes and subtle glassmorphism effects.

## 5. Deployment & PRs (The /ship way)
- **Atomic Commits**: Group changes by intent.
- **Quality Gate**: Run linting and tests before every PR creation.
- **Documentation**: Update `CHANGELOG.md` or a release doc immediately after shipping.

## 🔗 Knowledge Connections
### Related Concepts (Auto-Linked)
* [[CSS Modules]]
* [[Logic]]
* [[React]]
* [[Reference]]