From 826cd5d7c3c2cf5ddd417cd8c00449cb9c15217e Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 25 Dec 2025 16:06:17 +0000 Subject: [PATCH 1/2] fix: implement landing page matching mockup design Replaced MVP scaffold page with landing page design from mockup-02-developer-dark.html. Key changes: - Stats section now properly positioned inside hero-content (left column) - Stats styled with minimal left border design instead of card boxes - Hero maintains two-column grid (content | terminal) - Removed default header/footer from layout to allow landing page full control - Added landing.css with all mockup styles - Terminal displays full installation sequence with proper color coding This matches the mockup specification exactly with stats integrated into the hero grid instead of appearing as separate card elements below. --- src/app/landing.css | 343 ++++++++++++++++++++++++++++++++++++++++++++ src/app/layout.tsx | 22 +-- src/app/page.tsx | 210 ++++++++++++++++++++------- 3 files changed, 502 insertions(+), 73 deletions(-) create mode 100644 src/app/landing.css diff --git a/src/app/landing.css b/src/app/landing.css new file mode 100644 index 0000000..79fe82c --- /dev/null +++ b/src/app/landing.css @@ -0,0 +1,343 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); + +:root { + --purple: #8B5CF6; + --amber: #F59E0B; + --bg: #0F172A; + --surface: #1E293B; + --border: #334155; + --text: #F1F5F9; + --text-secondary: #CBD5E1; + --text-tertiary: #94A3B8; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + color: var(--text); + background: var(--bg); + line-height: 1.5; + margin: 0; + padding: 0; +} + +.landing-container { + max-width: 1280px; + margin: 0 auto; + padding: 0 32px; +} + +/* Header */ +.landing-header { + padding: 24px 0; + border-bottom: 1px solid var(--border); + background: rgba(15, 23, 42, 0.8); + backdrop-filter: blur(10px); + position: sticky; + top: 0; + z-index: 100; +} + +.landing-nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.landing-logo { + display: flex; + align-items: center; + gap: 12px; + font-size: 20px; + font-weight: 700; + color: var(--text); + text-decoration: none; +} + +.logo-mark { + width: 32px; + height: 32px; + background: linear-gradient(135deg, var(--purple) 0%, var(--amber) 100%); + border-radius: 6px; +} + +.nav-links { + display: flex; + gap: 32px; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-links a { + color: var(--text-secondary); + text-decoration: none; + font-weight: 500; + transition: color 0.2s; +} + +.nav-links a:hover { + color: var(--text); +} + +.btn { + padding: 12px 24px; + border-radius: 8px; + font-weight: 600; + font-size: 16px; + cursor: pointer; + transition: all 0.2s; + text-decoration: none; + display: inline-block; + border: none; +} + +.btn-primary { + background: var(--purple); + color: white; +} + +.btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); +} + +/* Hero */ +.hero { + padding: 100px 0; + position: relative; +} + +.hero-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; +} + +.hero-content h1 { + font-size: 48px; + line-height: 1.2; + font-weight: 700; + letter-spacing: -0.02em; + margin-bottom: 20px; +} + +.gradient-text { + background: linear-gradient(135deg, var(--purple) 0%, var(--amber) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-content p { + font-size: 18px; + color: var(--text-secondary); + margin-bottom: 32px; + line-height: 1.6; +} + +.stats { + display: flex; + gap: 32px; + margin-top: 40px; +} + +.stat { + border-left: 2px solid var(--purple); + padding-left: 16px; +} + +.stat-number { + font-size: 32px; + font-weight: 700; + color: var(--purple); + display: block; +} + +.stat-label { + font-size: 14px; + color: var(--text-secondary); +} + +/* Terminal */ +.terminal { + background: #0A0F1E; + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); +} + +.terminal-header { + background: #1A1F2E; + padding: 12px 16px; + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + gap: 8px; +} + +.terminal-dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.dot-red { background: #EF4444; } +.dot-yellow { background: #F59E0B; } +.dot-green { background: #10B981; } + +.terminal-body { + padding: 24px; + font-family: 'JetBrains Mono', monospace; + font-size: 14px; + line-height: 1.8; +} + +.terminal-line { + margin-bottom: 8px; +} + +.prompt { + color: #10B981; +} + +.command { + color: #F59E0B; +} + +.output { + color: #94A3B8; +} + +.success { + color: #10B981; +} + +/* Features */ +.features { + padding: 80px 0; +} + +.features h2 { + text-align: center; + font-size: 36px; + font-weight: 700; + margin-bottom: 16px; +} + +.features-subtitle { + text-align: center; + color: var(--text-secondary); + font-size: 18px; + margin-bottom: 60px; +} + +.tech-stack { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + margin-top: 60px; +} + +.tech-item { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + padding: 20px; + text-align: center; +} + +.tech-item h4 { + font-size: 16px; + font-weight: 600; + margin-bottom: 8px; +} + +.tech-item p { + font-size: 14px; + color: var(--text-secondary); + margin: 0; +} + +/* Comparison */ +.comparison { + padding: 80px 0; + background: var(--surface); +} + +.comparison h2 { + text-align: center; + font-size: 36px; + font-weight: 700; + margin-bottom: 60px; +} + +.comparison-table { + max-width: 900px; + margin: 0 auto; + background: var(--bg); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; +} + +.comparison-row { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + border-bottom: 1px solid var(--border); +} + +.comparison-row:last-child { + border-bottom: none; +} + +.comparison-header { + background: #1A1F2E; + font-weight: 600; +} + +.comparison-cell { + padding: 16px 20px; + border-right: 1px solid var(--border); +} + +.comparison-cell:last-child { + border-right: none; +} + +.check { + color: #10B981; + font-weight: 600; +} + +.cross { + color: #EF4444; +} + +/* Footer */ +.landing-footer { + padding: 60px 0; + text-align: center; + border-top: 1px solid var(--border); +} + +.landing-footer p { + color: var(--text-secondary); + margin: 0; +} + +@media (max-width: 768px) { + .hero-grid { + grid-template-columns: 1fr; + } + + .tech-stack { + grid-template-columns: 1fr 1fr; + } + + .comparison-row { + grid-template-columns: 1.5fr 1fr 1fr 1fr; + font-size: 14px; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1552ebd..e41698f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,11 +1,9 @@ import './globals.css'; import type { Metadata } from 'next/types'; -import { Header } from '@/components/Header'; -import { SearchPalette } from '@/components/SearchPalette'; export const metadata: Metadata = { - title: 'EmberDocs', - description: 'Modern documentation framework with Git-native versioning and instant search.' + title: 'EmberDocs - Build docs that developers actually use', + description: 'Zero-config documentation framework for indie developers. Beautiful, fast, and maintainable.' }; export default function RootLayout({ @@ -23,20 +21,8 @@ export default function RootLayout({ rel="stylesheet" /> - -
- -
- {children} -
- -
-
- EmberDocs v0.0.0 • Built with Next.js, TypeScript, and Tailwind CSS -
-
- - + + {children} ); diff --git a/src/app/page.tsx b/src/app/page.tsx index a13971e..7cc41bd 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,64 +1,164 @@ -import Link from 'next/link'; - -const featureList = [ - { - title: 'Git-native docs', - detail: 'Version routes from git tags with zero manual config.' - }, - { - title: 'Instant search', - detail: 'Client-side FlexSearch with ⌘K/ctrl+k launcher and fast ranking.' - }, - { - title: 'DX-first', - detail: 'Next.js App Router, TypeScript, Tailwind, and sensible defaults.' - } -]; +import './landing.css'; export default function HomePage() { return ( -
-
EmberDocs • MVP scaffold
-

EmberDocs

-

- Modern documentation framework with git-native versioning, instant search, and - developer-focused design. Explore the specs in docs/ and user guides in{' '} - user-docs/. -

+ <> +
+ +
+ +
+
+
+
+
+

+ Build docs that
+ developers actually use +

+

+ Zero-config documentation framework for indie developers. + Beautiful, fast, and maintainable. Deploy in 30 seconds, + customize when you need to. +

+ npx emberdocs init → + +
+
+ <50ms + Search latency +
+
+ 30s + Setup time +
+
+ 100% + Free OSS +
+
+
+ +
+
+
+
+
+
+
+
+ ${' '} + npx emberdocs init my-docs +
+
Creating EmberDocs project...
+
✓ Created docs/ directory
+
✓ Generated example pages
+
✓ Installed dependencies
+
✓ Ready to go!
+

+
+ ${' '} + cd my-docs &&{' '} + npm run dev +
+
Starting development server...
+
✓ Server running at http://localhost:3000
+
+
+
+
+
+ +
+
+

Built for developers

+

Modern stack, zero complexity

+ +
+
+

Next.js 14

+

App Router, Edge Functions

+
+
+

TypeScript

+

Full type safety

+
+
+

FlexSearch

+

Client-side, <50ms

+
+
+

Tailwind CSS

+

Utility-first styling

+
+
+
+
+ +
+
+

Why EmberDocs?

-
- {featureList.map((item) => ( -
-

{item.title}

-

{item.detail}

+
+
+
Feature
+
EmberDocs
+
Docusaurus
+
GitBook
+
+
+
Setup time
+
30 seconds
+
15 minutes
+
5 minutes
+
+
+
Zero config
+
✓
+
✗
+
Partial
+
+
+
Self-hosted (free)
+
✓
+
✓
+
✗
+
+
+
Privacy-first
+
✓
+
✗
+
✗
+
+
+
Drop-in integration
+
✓
+
✗
+
✗
+
+
- ))} -
+
+
-
-

Get started

-
    -
  1. Install dependencies with npm install.
    2. -
  2. Run npm run dev to start the Next.js dev server.
    3. -
  3. - Read the specs in docs/ and user guides in user-docs/. -
    4. -
-

- Planning lives in docs/planning/ and daily logs in docs/progress/ - . Keep contributor guidelines in AGENTS.md, claude.md, and{' '} - .cursorrules synced. -

-
- Next.js docs - {' • '} - Tailwind docs - {' • '} - - Project docs - +
+
+

EmberDocs - Free self-hosted documentation framework

-
-
+ + ); } From b2fdb60c3a5eb41482edb85f65e940b07fe1c45d Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 25 Dec 2025 16:44:15 +0000 Subject: [PATCH 2/2] fix: update ESLint config for Next.js 16 and ESLint 9 compatibility Added TypeScript preset and ignore patterns to ensure Next.js 16 lint command works correctly with ESLint 9. This resolves CI lint errors about invalid project directory. --- .eslintrc.json | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 4cd83ec..8f4ed9d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["next/core-web-vitals"], + "extends": ["next/core-web-vitals", "next/typescript"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module" @@ -10,5 +10,15 @@ "node": true, "jest": true }, - "rules": {} + "rules": {}, + "ignorePatterns": [ + "node_modules/", + ".next/", + "out/", + "build/", + "dist/", + "coverage/", + "*.config.js", + "*.config.mjs" + ] }