+```
+
+### Navigation
+
+```html
+
+```
+
+## Layout Structure
+
+```
+apps/web/src/
+├── app/
+│ ├── layout.tsx # Root layout (Geist font, RootProvider)
+│ ├── global.css # Tailwind imports + custom styles
+│ ├── page.tsx # Homepage
+│ └── docs/
+│ ├── layout.tsx # DocsLayout with sidebar
+│ └── [[...slug]]/ # Dynamic doc pages
+├── components/
+│ ├── mdx.tsx # MDX component factory
+│ └── ui/ # shadcn/ui components (future)
+└── lib/
+ ├── source.ts # FumaDocs content loader
+ └── shared.ts # App config
+```
+
+### Max Width
+
+- Content: `max-w-6xl mx-auto px-6` (1152px)
+- Hero: `max-w-6xl mx-auto px-6`
+- Docs: handled by FumaDocs layouts
+
+### Spacing Scale
+
+Use Tailwind's 4px incremental scale consistently:
+- `pt-20 lg:pt-28` for hero sections
+- `py-24` for section padding
+- `gap-12 lg:gap-20` for large grids
+
+## Responsive Breakpoints
+
+| Breakpoint | Target |
+|------------|--------|
+| `sm` (640px) | Mobile landscape |
+| `md` (768px) | Tablets |
+| `lg` (1024px) | Laptops |
+| `xl` (1280px) | Desktops |
+
+## shadcn/ui Integration
+
+```bash
+npx shadcn@latest init
+```
+
+### Core Components to Implement
+
+| Component | Purpose | Status |
+|-----------|---------|--------|
+| Button | Primary/secondary actions | TBD |
+| Card | Feature highlights, deployment options | TBD |
+| Callout | Notes, warnings, tips, errors | TBD |
+| Code | Syntax highlighted code blocks | TBD |
+| Tabs | API reference navigation | TBD |
+| Table | Parameter documentation | TBD |
+| Badge | Labels, version tags | TBD |
+
+### shadcn/ui Configuration
+
+Update `components.json` to match our design tokens:
+
+```json
+{
+ "rounded": "none",
+ "cssVariables": true,
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "src/app/global.css"
+ }
+}
+```
+
+## Design Principles
+
+1. **Developer-First**: Clarity over decoration. Code examples are the hero.
+2. **Minimal**: Ample whitespace, clean layouts, `rounded-none` everywhere.
+3. **Blueprint Aesthetic**: Subtle grid backgrounds, floating squares, schematic vibes.
+4. **Dark Mode Ready**: All components work in both light and dark.
+5. **Consistent Spacing**: 4px increments via Tailwind scale.
+
+## Future Enhancements
+
+- [ ] Integrate shadcn/ui with `rounded-none`
+- [ ] Implement Geist font
+- [ ] Add blueprint grid SVG components
+- [ ] Create floating squares animation
+- [ ] Custom callout components for error types
+- [ ] Deploy section with platform cards
+- [ ] Architecture diagram component
+
+---
+
+**Last updated**: 2026-06-02
+**Inspiration**: [Flue Framework](https://flueframework.com)
\ No newline at end of file
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index c936084..c5f003d 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -1,16 +1,304 @@
import Link from 'next/link';
+import { CodeBlock } from '@/components/code-block';
+import { CtaCard } from '@/components/cta-card';
+import { Footer } from '@/components/footer';
+
+// Floating squares data for blueprint aesthetic
+const floatingSquares = [
+ { x: 300, y: 120, opacity: 1.0, delay: 0.7 },
+ { x: 220, y: 60, opacity: 0.8, delay: 0.3 },
+ { x: 160, y: 160, opacity: 0.5, delay: 0.0 },
+];
+
+// Hero code example
+const HERO_CODE = `import { error, raise, is, causes } from '@deessejs/errors';
+
+const ValidationError = error({
+ name: 'ValidationError',
+ message: 'Field "{field}" is invalid: {reason}',
+});
+
+const err = ValidationError({
+ field: 'email',
+ reason: 'invalid format',
+});
+
+// Chain errors with .from()
+appErr.from(err);
+
+// Type-safe checking
+if (is(err, ValidationError)) {
+ console.log(err.fields.field); // "email"
+}`;
+
+// Features data
+const features = [
+ {
+ title: 'Exception Chaining',
+ description:
+ 'Preserve the full context of errors with the .from() method. Traverse the complete error chain to understand what went wrong.',
+ href: '/docs/from-method',
+ },
+ {
+ title: 'Hierarchical Inheritance',
+ description:
+ 'Organize errors in meaningful hierarchies that reflect your domain. Use inheritance to categorize and handle errors by type.',
+ href: '/docs/single-inheritance',
+ },
+ {
+ title: 'Message Templates',
+ description:
+ 'Define errors with {placeholder} templates that are replaced at runtime. Rich, contextual error messages made easy.',
+ href: '/docs/message-templates',
+ },
+ {
+ title: 'TypeScript Native',
+ description:
+ 'Full type safety with generic error factories. Leverage TypeScript to catch errors before they happen.',
+ href: '/docs/type-checking',
+ },
+];
+
+// Code examples for showcase
+const BEFORE_CODE = `// Traditional approach
+throw new Error('Validation failed');
+
+catch (err) {
+ if (err.message.includes('Validation')) {
+ // String matching... fragile!
+ }
+}`;
+
+const AFTER_CODE = `// @deessejs/errors approach
+raise(ValidationError({ field: 'email' }));
+
+catch (err) {
+ if (is(err, ValidationError)) {
+ // Type-safe, reliable
+ console.log(err.fields.field);
+ }
+}`;
export default function HomePage() {
return (
-
-
Hello World
-
- You can open{' '}
-
- /docs
- {' '}
- and see the documentation.
-
-
+ <>
+ {/* Blueprint grid background */}
+
+
+
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+ Error Handling,
+
+ Reimagined.
+
+
+ A TypeScript library that brings Python-inspired error handling to
+ JavaScript. Exception chaining, hierarchical inheritance, and rich
+ error semantics through a function-based API.
+
+
+
+ Get Started
+
+
+ npm install @deessejs/errors
+
+
+
+
+
+ {/* Hero Code Section */}
+
+
+
+
+
+
+ {/* Features Section */}
+
+
+
+
+ Features
+
+
+ Everything you need for robust error handling in TypeScript.
+