## Ancient2Future — Build Plan A premium, mysterious dark blog connecting ancient civilizations to future tech. Static content, no backend. ### Design system (src/styles.css) - **Palette (oklch)**: deep black background, deep midnight blue surfaces, rich gold primary, muted parchment foreground - background ~ oklch(0.13 0.02 260) — near-black with blue tint - surface/card ~ oklch(0.18 0.04 265) — deep indigo - primary (gold) ~ oklch(0.78 0.13 85) - foreground ~ oklch(0.92 0.02 80) — warm off-white - muted-foreground ~ oklch(0.65 0.03 80) - border ~ oklch(0.78 0.13 85 / 0.2) — subtle gold - **Gradients & shadows**: `--gradient-gold`, `--gradient-hero` (radial gold glow on black), `--shadow-gold` (soft amber glow) - **Fonts**: Cormorant Garamond (headings, serif) + Karla (body). Loaded via Google Fonts `` in `__root.tsx` head, mapped as Tailwind `font-serif` / `font-sans` via theme tokens. - **Motifs**: subtle SVG mandala/sacred-geometry as decorative section dividers and hero backdrop (inline SVG components, gold at low opacity). - Force dark theme (add `dark` class to ``); no light mode toggle. ### Routes (src/routes/) - `__root.tsx` — add Google Fonts link, sitewide meta, JSON-LD WebSite, render `

` + `` + ``. Keep existing 404/error boundaries. - `index.tsx` — Homepage - `blog.tsx` — Blog listing with category filter - `contact.tsx` — Contact form Each route defines its own `head()` (title, description, og:title, og:description, og:url, canonical on leaves). ### Shared components (src/components/) - `Header.tsx` — logo wordmark "Ancient2Future" in Cormorant + nav links (Home, Blog, Contact). Mobile hamburger via Sheet. - `Footer.tsx` — tagline, social icons (Twitter, Instagram, YouTube — lucide-react), copyright, quick links. - `MandalaDivider.tsx` — decorative gold SVG. - `BlogCard.tsx` — image, category badge, title (serif), excerpt, author + date row. - `SectionHeading.tsx` — small gold eyebrow + large serif heading. ### Homepage sections 1. **Hero** — full-viewport, radial gold glow + faint mandala SVG, H1 "Explore the Past. Discover the Future." (Cormorant, large), subhead "From Ancient Egypt to AI Technology — Everything in One Place", two CTAs ("Read the blog", "About us" anchor). 2. **Featured Posts** — 3-card grid of top placeholder posts. 3. **Categories** — 5 cards (Ancient Civilizations, Indian History, Mythology, Future Technology, AI & Innovation) with icons + brief descriptions, link to `/blog?category=...`. 4. **About** — short two-column intro about the blog's mission. 5. **Newsletter** — centered card, email input + Subscribe button, shows toast on submit (no backend). 6. Footer inherited from root. ### Blog page - Page H1 "The Journal", subtitle. - Category filter chips (All + 5 categories) — local `useState`, filters the array. - Responsive grid of all placeholder posts using `BlogCard`. - Long-form SEO content block at bottom (intro paragraph about the publication's editorial focus) to satisfy "long-form SEO content" requirement. ### Contact page - H1 "Get in Touch", subtitle. - Two-column: left = contact details (Location: Hyderabad, India; Email: contact@ancient2future.in; small map-style decorative SVG); right = form (Name, Email, Message) using shadcn Input/Textarea/Button + Sonner toast on submit. Client-side only. ### Placeholder data (src/data/posts.ts) ~6 posts (Indian author names — Arjun Varma, Kavya Iyer, Rahul Dev, Ananya Reddy, Vikram Sharma, Meera Nair): 1. Secrets of Ancient Egyptian Technology 2. How AI Will Shape India's Future 3. Mysteries of Indus Valley Civilization 4. Future of Space Travel from an Indian Perspective 5. Temples of South India: Engineering Marvels 6. Robotics and the Rebirth of Ancient Craftsmanship Each post: id, slug, title, excerpt, category, author, date, coverImage. No individual post detail pages (out of scope — listing only per your earlier "static placeholder posts" but with no detail routes specified; I'll keep cards non-clickable or link to a "coming soon" anchor — simplest is non-clickable cards to keep scope tight). ### Images Generate 6 cover images via `imagegen` (fast tier, 1024×640, .jpg) — moody, cinematic, gold-tinged scenes matching each post topic. Save under `src/assets/posts/` and import as ES6 modules. ### SEO - Per-route `head()` with unique title/description/og tags. - Canonical on each leaf (relative paths — no domain yet). - JSON-LD `WebSite` in `__root.tsx`; `Blog` schema on `/blog`. - Single H1 per page; semantic `

`, `

`, `