A marketing landing page built with Astro React, and (maybe) Ant Design. Ant Design usage will be reconsidered in future.
- Install dependencies:
npm install- Start the development server:
npm run dev- Build for production:
npm run build- Preview production build:
npm run previewsrc/
├── pages/
│ └── index.astro # Page composition (assembles sections)
│
├── layouts/ # Global document/layout layer
│ └── BaseLayout.astro # SEO, meta, structured data, <html> shell
│
├── components/
│ ├── primitives/ # Atomic UI building blocks (pure UI)
│ │ ├── Button/
│ │ ├── Container/
│ │ ├── Section/
│ │ ├── Heading/
│ │ └── Icon/
│ │
│ ├── blocks/ # Reusable structured UI blocks
│ │ ├── FAQ/
│ │ │ ├── FAQ.astro
│ │ │ └── FAQ.module.css
│ │ │
│ │ ├── CTA/
│ │ │ ├── CTA.astro
│ │ │ └── CTA.module.css
│ │ │
│ │ ├── FeatureGrid/
│ │ │
│ │ ├── ProblemTable/
│ │ │ ├── ProblemTable.jsx # React island (if needed)
│ │ │ └── ProblemTable.module.css
│ │ │
│ │ └── MiniDemo/
│ │ ├── MiniDemo.jsx # React island
│ │ └── MiniDemo.module.css
│ │
│ ├── sections/ # Reusable marketing compositions
│ │ ├── Hero/
│ │ ├── Problem/
│ │ ├── Methodology/
│ │ ├── Industries/
│ │ └── Pilot/
│ │
│ └── products/ # Product-specific components
│ └── vedana/
│ ├── ScrollFrames/
│ ├── HeroDynamic/
│ └── GraphFlow/
│
├── content/ # Product-specific content (data only)
│ ├── vedana/
│ │ ├── faq.ts
│ │ ├── hero.ts
│ │ ├── industries.ts
│ │ └── seo/
│ │ └── seo.ts
│ │
│ └── epoch/
│
├── lib/ # Pure logic (no UI)
│ └── seo/
│ ├── types.ts
│ └── extend.ts
│
├── styles/
│ ├── tokens.css # Design tokens (CSS variables)
│ ├── base.css # Global reset + utilities
│ └── themes/
│ ├── vedana.css
│ ├── epoch.css
│ └── neutral.css
- primitives → Lego bricks
- common → reusable blocks
- sections → marketing compositions, built with reusable blocks and primitives
- layout → skeleton
- content → personality
- styles → skin
If something feels misplaced, it probably is.
The page uses Astro's islands architecture:
- Static sections (
Hero,Problem,Methodology,CTA,Footer) are rendered to plain HTML at build time — no JavaScript shipped to the browser. - React islands (
Nav,MiniDemo,FAQ,ProblemTable,CTAButtons,PhotoCircle) are hydrated client-side usingclient:loadorclient:visible.
Styling uses Ant Design's CSS reset plus scoped <style> blocks in Astro components and CSS Modules in React islands. No Tailwind.
Deployed to GitHub Pages via the workflow in .github/workflows/deploy.yml. Runs automatically on push to master.