+
+ {/* Middle: FilePreview */}
+ ...
}
+
+```
+
+Note: `AppLayout` already provides `` and `
`, so WorkspacePage renders directly inside that flex container.
+
+- [ ] **Step 2: Update App.tsx**
+
+Replace `App.tsx` with a simple redirect to maintain backward compatibility if anything imports it:
+
+```tsx
+import { Navigate } from 'react-router-dom';
+export default function App() {
+ return
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/routes/AppRouter.tsx
+git commit -m "feat: update AppRouter with layout routes and lazy loading"
+```
+
+---
+
+### Task 8: Create placeholder Docs and Blog pages
+
+**Files:**
+- Create: `src/pages/DocsListPage.tsx`
+- Create: `src/pages/DocDetailPage.tsx`
+- Create: `src/pages/BlogListPage.tsx`
+- Create: `src/pages/BlogDetailPage.tsx`
+
+- [ ] **Step 1: Create DocsListPage**
+
+List page showing available docs. For now, hardcode a few placeholder entries. Each entry links to `/docs/:slug`. Include SEOHead.
+
+```tsx
+import { Link } from 'react-router-dom';
+import SEOHead from '../components/seo/SEOHead';
+import { useLanguage } from '../contexts/LanguageContext';
+
+const docs = [
+ { slug: 'getting-started', title: 'Getting Started', titleZh: '快速开始', description: 'Learn how to use TexPixel', descriptionZh: '了解如何使用 TexPixel' },
+];
+
+export default function DocsListPage() {
+ const { language } = useLanguage();
+ return (
+ <>
+ {
+ const res = await fetch(`${BASE}/${type}-manifest.json`);
+ return res.json();
+}
+
+export async function loadContent(type: 'docs' | 'blog', lang: Language, slug: string): Promise {
+ const res = await fetch(`${BASE}/${type}/${lang}/${slug}.json`);
+ return res.json();
+}
+```
+
+- [ ] **Step 4: Add npm script**
+
+In `package.json`, add:
+```json
+"build:content": "npx tsx scripts/build-content.ts",
+"build": "npm run build:content && vite build"
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add content/ scripts/build-content.ts src/lib/content.ts package.json
+git commit -m "feat: add markdown content pipeline with build script"
+```
+
+---
+
+### Task 10: Wire Docs/Blog pages to content pipeline
+
+**Files:**
+- Modify: `src/pages/DocsListPage.tsx`
+- Modify: `src/pages/DocDetailPage.tsx`
+- Modify: `src/pages/BlogListPage.tsx`
+- Modify: `src/pages/BlogDetailPage.tsx`
+
+- [ ] **Step 1: Update DocsListPage to load from manifest**
+
+Use `useEffect` + `loadManifest('docs')` to fetch doc list. Render based on current language.
+
+- [ ] **Step 2: Update DocDetailPage to load content**
+
+Use `useEffect` + `loadContent('docs', language, slug)` to fetch and render HTML. Use `dangerouslySetInnerHTML` for the compiled HTML (safe since we control the source markdown). Apply Tailwind typography classes (`prose`).
+
+- [ ] **Step 3: Update Blog pages similarly**
+
+Same pattern. BlogListPage shows date + cover image. BlogDetailPage renders article with `type="article"` in SEOHead.
+
+- [ ] **Step 4: Run build:content and test**
+
+```bash
+npm run build:content && npm run dev
+```
+
+Visit `/docs`, `/docs/getting-started`, `/blog`, `/blog/introducing-texpixel`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/pages/
+git commit -m "feat: wire Docs and Blog pages to markdown content pipeline"
+```
+
+---
+
+### Task 11: Update sitemap and SEO infrastructure
+
+**Files:**
+- Modify: `public/sitemap.xml`
+- Modify: `public/robots.txt`
+- Modify: `index.html`
+
+- [ ] **Step 1: Update sitemap.xml**
+
+Add all new routes: `/`, `/app`, `/docs`, `/docs/getting-started`, `/blog`, `/blog/introducing-texpixel`. Set appropriate `changefreq` and `priority`.
+
+- [ ] **Step 2: Update robots.txt**
+
+Add `Disallow: /app` to prevent indexing of the workspace.
+
+- [ ] **Step 3: Clean up index.html**
+
+Since SEOHead now manages per-page meta tags via react-helmet-async, simplify `index.html` to only keep the base defaults. Remove the inline language detection script (LanguageContext handles this).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add public/sitemap.xml public/robots.txt index.html
+git commit -m "feat: update sitemap, robots.txt, and index.html for new routes"
+```
+
+---
+
+### Task 12: Final verification
+
+- [ ] **Step 1: Type check**
+
+```bash
+npm run typecheck
+```
+
+- [ ] **Step 2: Lint**
+
+```bash
+npm run lint
+```
+
+- [ ] **Step 3: Build**
+
+```bash
+npm run build
+```
+
+- [ ] **Step 4: Test all routes in dev**
+
+```bash
+npm run dev
+```
+
+Visit: `/`, `/app`, `/docs`, `/docs/getting-started`, `/blog`, `/blog/introducing-texpixel`
+
+Verify:
+- Home page shows all sections, anchor links work
+- `/app` workspace functions as before
+- Docs/Blog pages load content
+- Language switching works across all pages
+- Mobile responsive nav works
+
+- [ ] **Step 5: Commit any fixes and final commit**
+
+```bash
+git add -A
+git commit -m "feat: complete website restructure with marketing pages, docs, and blog"
+```
diff --git a/docs/superpowers/specs/2026-03-25-website-restructure-design.md b/docs/superpowers/specs/2026-03-25-website-restructure-design.md
new file mode 100644
index 0000000..01c1183
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-25-website-restructure-design.md
@@ -0,0 +1,75 @@
+# Website Restructure Design
+
+## Overview
+Restructure the single-page OCR app into a multi-section website with Home, Docs, Blog, Pricing, Contact modules while maintaining the core OCR tool functionality in a dedicated workspace page.
+
+## Routes
+
+| Route | Page | SEO | Layout |
+|-------|------|-----|--------|
+| `/` | HomePage (Hero + Features + HowItWorks + Pricing + Contact) | Prerender | MarketingLayout |
+| `/app` | WorkspacePage (current 3-panel OCR layout) | noindex | AppLayout |
+| `/docs` | DocsListPage | Prerender | MarketingLayout |
+| `/docs/:slug` | DocDetailPage | Prerender | MarketingLayout |
+| `/blog` | BlogListPage | Prerender | MarketingLayout |
+| `/blog/:slug` | BlogDetailPage | Prerender | MarketingLayout |
+| `/auth/google/callback` | AuthCallbackPage | noindex | None |
+
+## Home Page Sections
+1. **Hero** — Product tagline + mini upload demo + CTA to `/app`
+2. **Features** — Feature cards grid (formula recognition, multi-format export, etc.)
+3. **How it works** — 3-step process
+4. **Pricing** — Static price cards (Free / Pro / Enterprise), payment integration later
+5. **Contact** — Contact info display + form submission
+
+## SEO Strategy
+- **Prerendering**: `vite-plugin-prerender` for static HTML generation of marketing pages
+- **Meta tags**: `react-helmet-async` for per-page title, description, OG/Twitter cards
+- **Structured data**: JSON-LD (SoftwareApplication, Article, TechArticle)
+- **Sitemap**: Auto-generated at build time from routes + markdown content
+- **i18n SEO**: `hreflang` tags for zh/en
+- `/app` route gets `noindex`
+
+## Markdown Content System
+```
+content/
+├── docs/{en,zh}/*.md
+└── blog/{en,zh}/*.md
+```
+- Frontmatter: title, description, slug, date, tags, order, cover
+- Build script scans content/, parses frontmatter, generates manifest JSON
+- Body compiled via remark + rehype (reusing existing KaTeX pipeline)
+
+## Component Architecture
+
+### Layouts
+- `MarketingLayout` — MarketingNavbar + Outlet + Footer
+- `AppLayout` — AppNavbar + Outlet
+
+### New Pages
+- `src/pages/HomePage.tsx`
+- `src/pages/WorkspacePage.tsx` (migrated from App.tsx)
+- `src/pages/DocsListPage.tsx`
+- `src/pages/DocDetailPage.tsx`
+- `src/pages/BlogListPage.tsx`
+- `src/pages/BlogDetailPage.tsx`
+
+### Home Sections
+- `src/components/home/HeroSection.tsx`
+- `src/components/home/FeaturesSection.tsx`
+- `src/components/home/HowItWorksSection.tsx`
+- `src/components/home/PricingSection.tsx`
+- `src/components/home/ContactSection.tsx`
+
+### Shared Layout Components
+- `src/components/layout/MarketingNavbar.tsx`
+- `src/components/layout/AppNavbar.tsx` (evolved from current Navbar.tsx)
+- `src/components/layout/Footer.tsx`
+
+## Migration
+- `App.tsx` core logic → `WorkspacePage.tsx`
+- `Navbar.tsx` → split into `MarketingNavbar` + `AppNavbar`
+- All existing components (LeftSidebar, FilePreview, ResultPanel, etc.) unchanged, referenced by WorkspacePage
+
+## Lazy Loading
+All page components use `React.lazy()` + `Suspense` to keep initial bundle small.
diff --git a/index.html b/index.html
index 8375d8f..21b127f 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,11 @@
+
+
+
+
+
diff --git a/skills-lock.json b/skills-lock.json
new file mode 100644
index 0000000..17b9382
--- /dev/null
+++ b/skills-lock.json
@@ -0,0 +1,10 @@
+{
+ "version": 1,
+ "skills": {
+ "frontend-design": {
+ "source": "anthropics/skills",
+ "sourceType": "github",
+ "computedHash": "063a0e6448123cd359ad0044cc46b0e490cc7964d45ef4bb9fd842bd2ffbca67"
+ }
+ }
+}
diff --git a/src/components/home/ContactSection.tsx b/src/components/home/ContactSection.tsx
index 720b533..0a167e9 100644
--- a/src/components/home/ContactSection.tsx
+++ b/src/components/home/ContactSection.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import { Mail, Users, Send } from 'lucide-react';
+import { Mail, Users, Send, ArrowUpRight } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
export default function ContactSection() {
@@ -10,7 +10,6 @@ export default function ContactSection() {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
setStatus('sending');
- // Simulate send — replace with actual API call later
setTimeout(() => {
setStatus('sent');
setTimeout(() => setStatus('idle'), 3000);
@@ -19,75 +18,77 @@ export default function ContactSection() {
};
return (
-
-
+
+
+ );
+}
+
+export default function AppRouter() {
+ return (
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Create DocDetailPage**
+
+Placeholder that reads `:slug` from params and shows a coming-soon message.
+
+```tsx
+import { useParams } from 'react-router-dom';
+import SEOHead from '../components/seo/SEOHead';
+
+export default function DocDetailPage() {
+ const { slug } = useParams<{ slug: string }>();
+ return (
+ <>
+ {language === 'en' ? 'Documentation' : '文档'}
+
+ {docs.map((doc) => (
+
+
+ {language === 'en' ? doc.title : doc.titleZh}
+{language === 'en' ? doc.description : doc.descriptionZh}
+ + ))} +
+
+
+ );
+}
+```
+
+- [ ] **Step 3: Create BlogListPage and BlogDetailPage**
+
+Same pattern as docs. BlogListPage shows placeholder blog entries with date and title. BlogDetailPage reads `:slug` param.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/pages/DocsListPage.tsx src/pages/DocDetailPage.tsx src/pages/BlogListPage.tsx src/pages/BlogDetailPage.tsx
+git commit -m "feat: add placeholder Docs and Blog pages"
+```
+
+---
+
+### Task 9: Build content pipeline (Markdown → JSON)
+
+**Files:**
+- Create: `content/docs/en/getting-started.md`
+- Create: `content/docs/zh/getting-started.md`
+- Create: `content/blog/en/2026-03-25-introducing-texpixel.md`
+- Create: `content/blog/zh/2026-03-25-introducing-texpixel.md`
+- Create: `scripts/build-content.ts`
+- Create: `src/lib/content.ts`
+- Modify: `package.json` (add build:content script)
+
+- [ ] **Step 1: Create sample markdown files**
+
+Each file has frontmatter (title, description, slug, date, tags, order) and body content.
+
+- [ ] **Step 2: Create build-content script**
+
+Node script that:
+1. Scans `content/docs/{en,zh}/` and `content/blog/{en,zh}/`
+2. Parses frontmatter with `gray-matter`
+3. Compiles markdown body with `remark` + `rehype` → HTML string
+4. Outputs `public/content/docs-manifest.json` and `public/content/blog-manifest.json`
+5. Outputs individual `public/content/docs/{lang}/{slug}.json` and `public/content/blog/{lang}/{slug}.json`
+
+Manifest format:
+```json
+{
+ "en": [{ "slug": "getting-started", "title": "...", "description": "...", "date": "...", "tags": [], "order": 1 }],
+ "zh": [...]
+}
+```
+
+Individual file format:
+```json
+{ "meta": { ... frontmatter ... }, "html": "{slug}
+Content coming soon.
+compiled html
" } +``` + +- [ ] **Step 3: Create content loader utility** + +```tsx +// src/lib/content.ts +import type { Language } from './translations'; + +export interface ContentMeta { + slug: string; + title: string; + description: string; + date: string; + tags: string[]; + order?: number; + cover?: string; +} + +export interface ContentManifest { + en: ContentMeta[]; + zh: ContentMeta[]; +} + +export interface ContentItem { + meta: ContentMeta; + html: string; +} + +const BASE = '/content'; + +export async function loadManifest(type: 'docs' | 'blog'): Promise
+
+
-
- {c.title}
-{c.subtitle}
+{c.title}
+{c.subtitle}
- {/* Contact info */}
-
-
-
-
+ {/* Contact info — 2 cols */}
+
+
+
+
-
+
-
-
-
- {/* Contact form */}
-
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index 7522c96..749b428 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -2,6 +2,14 @@ import { PenTool, FileOutput, FileText, Layers, Zap, Gift } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
const iconMap = [PenTool, FileOutput, FileText, Layers, Zap, Gift];
+const accentColors = [
+ { bg: 'bg-coral-50', icon: 'text-coral-500', border: 'hover:border-coral-200' },
+ { bg: 'bg-sage-50', icon: 'text-sage-600', border: 'hover:border-sage-200' },
+ { bg: 'bg-amber-50', icon: 'text-amber-600', border: 'hover:border-amber-200' },
+ { bg: 'bg-violet-50', icon: 'text-violet-500', border: 'hover:border-violet-200' },
+ { bg: 'bg-coral-50', icon: 'text-coral-500', border: 'hover:border-coral-200' },
+ { bg: 'bg-sage-50', icon: 'text-sage-600', border: 'hover:border-sage-200' },
+];
export default function FeaturesSection() {
const { t } = useLanguage();
@@ -17,23 +25,31 @@ export default function FeaturesSection() {
];
return (
-
+
+
-
{c.qqGroup}
- 1018282100
+ {c.qqGroup}
+ 1018282100
-
-
+ {/* Subtle top border accent */}
+
+
+
{f.title}
-{f.subtitle}
+
+
+
- {f.title}
+{f.subtitle}
+
{items.map((item, i) => {
const Icon = iconMap[i];
+ const color = accentColors[i];
return (
-
-
-
-
+
);
})}
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 8fc0fd0..6e4712b 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -1,71 +1,121 @@
import { Link } from 'react-router-dom';
-import { ArrowRight, Upload } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
export default function HeroSection() {
- const { t } = useLanguage();
+ const { t, language } = useLanguage();
return (
-
+
- {item.title}
-{item.description}
+{item.title}
+{item.description}
-
- {/* Left: Text */}
-
-
+
+
+ {/* Warm gradient background */}
+
+
+ {/* Decorative elements */}
+
+
+
+
+ {/* Grid pattern */}
+
+
+
+
+ {/* Left: Text — takes 7 cols for asymmetry */}
+
+ {/* Badge */}
+
+
+ {language === 'zh' ? '免费使用 · 无需注册' : 'Free to use · No sign-up required'}
+
+
+
{t.marketing.hero.title}
-
+
+
{t.marketing.hero.subtitle}
+
{t.marketing.hero.cta}
- {t.sidebar.uploadInstruction}
-
-
- {/* Mock result preview */}
-
-
-
- LaTeX Output
+
+
+ {/* Upload zone */}
+
+
+
+
+
+ {t.sidebar.uploadInstruction}
+
+
+
+ {/* Mock result */}
+
+
+
+ LaTeX Output
+
+
+ {'\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'}
+
+
-
- {'\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'}
-
-
- {/* Background decoration */}
-
-
);
}
+
diff --git a/src/components/home/HowItWorksSection.tsx b/src/components/home/HowItWorksSection.tsx
index b0247a5..28df9e3 100644
--- a/src/components/home/HowItWorksSection.tsx
+++ b/src/components/home/HowItWorksSection.tsx
@@ -2,6 +2,11 @@ import { Upload, Cpu, Download } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
const icons = [Upload, Cpu, Download];
+const stepColors = [
+ { num: 'text-coral-500', ring: 'ring-coral-100', bg: 'bg-coral-50' },
+ { num: 'text-sage-600', ring: 'ring-sage-100', bg: 'bg-sage-50' },
+ { num: 'text-amber-600', ring: 'ring-amber-100', bg: 'bg-amber-50' },
+];
export default function HowItWorksSection() {
const { t } = useLanguage();
@@ -14,23 +19,33 @@ export default function HowItWorksSection() {
];
return (
-
-
+
+
- {h.title}
+ {h.title}
-
+
+ {/* Connecting line (desktop only) */}
+
+
{steps.map((step, i) => {
const Icon = icons[i];
+ const color = stepColors[i];
return (
-
-
- {step.title}
- {step.description}
+
+ {step.title}
+ {step.description}
);
})}
diff --git a/src/components/home/PricingSection.tsx b/src/components/home/PricingSection.tsx
index 2bf92dd..1820240 100644
--- a/src/components/home/PricingSection.tsx
+++ b/src/components/home/PricingSection.tsx
@@ -16,6 +16,7 @@ export default function PricingSection() {
href: '/app',
disabled: false,
popular: false,
+ accent: 'sage',
},
{
name: p.pro,
@@ -26,6 +27,7 @@ export default function PricingSection() {
href: '#',
disabled: true,
popular: true,
+ accent: 'coral',
},
{
name: p.enterprise,
@@ -36,43 +38,44 @@ export default function PricingSection() {
href: '#contact',
disabled: false,
popular: false,
+ accent: 'ink',
},
];
return (
-
-
+
+
- {p.title}
- {p.subtitle}
+ {p.title}
+ {p.subtitle}
-
+
{plans.map((plan, i) => (
{plan.popular && (
-
+
{p.popular}
)}
- {plan.name}
+ {plan.name}
- {plan.price}
- {plan.period && {plan.period}}
+ {plan.price}
+ {plan.period && {plan.period}}
{plan.features.map((feature, j) => (
- -
-
-
+
))}
@@ -81,17 +84,17 @@ export default function PricingSection() {
{plan.disabled ? (
) : plan.href.startsWith('/') ? (
{plan.cta}
@@ -99,7 +102,7 @@ export default function PricingSection() {
) : (
{plan.cta}
diff --git a/src/components/layout/AppNavbar.tsx b/src/components/layout/AppNavbar.tsx
index 156a0de..626c8f1 100644
--- a/src/components/layout/AppNavbar.tsx
+++ b/src/components/layout/AppNavbar.tsx
@@ -33,48 +33,49 @@ export default function AppNavbar() {
}, []);
return (
-
+
{/* Left: Logo + Home link */}
-
-
- 
- TexPixel
+
+
+
+ TexPixel
+
-
+
+ {/* Left: Text — takes 7 cols for asymmetry */}
+
+ {/* Badge */}
+
- {/* Right: Demo card */}
-
+
+ {language === 'zh' ? '免费使用 · 无需注册' : 'Free to use · No sign-up required'}
+
+
+ {t.marketing.hero.title}
-+ +
{t.marketing.hero.subtitle}
+
{t.marketing.hero.cta}
+
+ {/* Social proof hint */}
+
+
+ {['bg-coral-300', 'bg-sage-300', 'bg-amber-300', 'bg-violet-300'].map((bg, i) => (
+
+ ))}
+
+ {language === 'zh' ? '已有 1,000+ 学生在使用' : 'Used by 1,000+ students'}
+
+ {/* Right: Interactive demo card — 5 cols */}
+
-
-
-
-
- {/* Background decoration */}
-
-
);
}
+
diff --git a/src/components/home/HowItWorksSection.tsx b/src/components/home/HowItWorksSection.tsx
index b0247a5..28df9e3 100644
--- a/src/components/home/HowItWorksSection.tsx
+++ b/src/components/home/HowItWorksSection.tsx
@@ -2,6 +2,11 @@ import { Upload, Cpu, Download } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
const icons = [Upload, Cpu, Download];
+const stepColors = [
+ { num: 'text-coral-500', ring: 'ring-coral-100', bg: 'bg-coral-50' },
+ { num: 'text-sage-600', ring: 'ring-sage-100', bg: 'bg-sage-50' },
+ { num: 'text-amber-600', ring: 'ring-amber-100', bg: 'bg-amber-50' },
+];
export default function HowItWorksSection() {
const { t } = useLanguage();
@@ -14,23 +19,33 @@ export default function HowItWorksSection() {
];
return (
-
-
+ {/* Mock window chrome */}
+
- {/* Mock result preview */}
-
+
+
+
+ texpixel.com/app
- - {t.sidebar.uploadInstruction} -
-
-
-
- LaTeX Output
+
+
+ {/* Upload zone */}
+
-
+
+
+ {/* Mock result */}
+
+
+
+ + {t.sidebar.uploadInstruction} +
+
+
+
+ LaTeX Output
+
+
+ {'\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'}
+
+
- {'\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'}
-
+
+
-
- {h.title}
+{h.title}
+
+ {/* Connecting line (desktop only) */}
+
+
{steps.map((step, i) => {
const Icon = icons[i];
+ const color = stepColors[i];
return (
-
-
-
-
+ {/* Step number badge */}
+
);
})}
diff --git a/src/components/home/PricingSection.tsx b/src/components/home/PricingSection.tsx
index 2bf92dd..1820240 100644
--- a/src/components/home/PricingSection.tsx
+++ b/src/components/home/PricingSection.tsx
@@ -16,6 +16,7 @@ export default function PricingSection() {
href: '/app',
disabled: false,
popular: false,
+ accent: 'sage',
},
{
name: p.pro,
@@ -26,6 +27,7 @@ export default function PricingSection() {
href: '#',
disabled: true,
popular: true,
+ accent: 'coral',
},
{
name: p.enterprise,
@@ -36,43 +38,44 @@ export default function PricingSection() {
href: '#contact',
disabled: false,
popular: false,
+ accent: 'ink',
},
];
return (
-
+
-
+
+
+ {String(i + 1).padStart(2, '0')}
+
0{i + 1}
- {step.title}
-{step.description}
+ +{step.title}
+{step.description}
+
+
-
- {p.title}
-{p.subtitle}
+{p.title}
+{p.subtitle}
+
{plans.map((plan, i) => (
{plan.popular && (
-
+
{p.popular}
)}
- {plan.name}
+{plan.name}
- {plan.price}
- {plan.period && {plan.period}}
+ {plan.price}
+ {plan.period && {plan.period}}
-
{plan.features.map((feature, j) => (
-
-
-
+ -
+
{feature}
))}
@@ -81,17 +84,17 @@ export default function PricingSection() {
{plan.disabled ? (
) : plan.href.startsWith('/') ? (
{plan.cta}
@@ -99,7 +102,7 @@ export default function PricingSection() {
) : (
{plan.cta}
diff --git a/src/components/layout/AppNavbar.tsx b/src/components/layout/AppNavbar.tsx
index 156a0de..626c8f1 100644
--- a/src/components/layout/AppNavbar.tsx
+++ b/src/components/layout/AppNavbar.tsx
@@ -33,48 +33,49 @@ export default function AppNavbar() {
}, []);
return (
-
+
{/* Left: Logo + Home link */}
-
-
-
- TexPixel
+
- TexPixel
+
+
+
+ TexPixel
+
-
{/* Right: Actions */}
-
+ TexPixel
+
-
+
{/* Language Switcher */}
{showLangMenu && (
-
+