Toolbox — Astro Tools Landing Site

A multi-page landing site built with Astro that showcases your collection of software tools, organised into categories.

Project structure

astro-tools-site/
├── public/
│   └── screenshots/        ← Drop tool screenshots here (1280×800 recommended)
├── src/
│   ├── data/
│   │   └── tools.ts        ← ⭐ THE MAIN CONFIG FILE — edit this first
│   ├── components/
│   │   ├── Nav.astro        — Sticky navigation with all categories
│   │   ├── Footer.astro     — Site-wide footer with tool directory
│   │   ├── CategoryCard.astro — Card used on the home page grid
│   │   └── ToolCard.astro   — Tool card used on category pages
│   ├── layouts/
│   │   └── Base.astro       — HTML shell, fonts, global CSS tokens
│   └── pages/
│       ├── index.astro      — Home page
│       ├── 404.astro        — Not found page
│       └── category/
│           └── [id].astro   — Dynamic category page (auto-generated per category)
├── astro.config.mjs
└── package.json

Quick start

npm install
npm run dev        # http://localhost:4321
npm run build      # production build → dist/
npm run preview    # preview the build

Adding / editing content

All content lives in src/data/tools.ts. You don't need to touch any page files to add categories or tools — just edit the data file.

Add a new category

{
  id: 'my-category',     // URL slug → /category/my-category
  name: 'My Category',
  icon: '🧩',
  accent: '#f59e0b',     // Hex colour used as the category accent
  description: 'Short description shown on the home page and category header.',
  tools: [
    // ...see below
  ],
}

Add a new tool

{
  id: 'my-tool',                          // used as the anchor #my-tool
  name: 'My Tool',
  tagline: 'One-line value proposition',
  description: 'Two–three sentence description shown on the tool card.',
  screenshot: '/screenshots/my-tool.png', // put the file in /public/screenshots/
  screenshotAlt: 'My Tool screenshot',
  url: 'https://my-tool.example.com',
  badge: 'New',                           // optional: "New", "Beta", "v2.0", etc.
}

Replace the logo

1. Open src/components/Nav.astro and replace the inline <svg> with your logo.
2. Do the same in src/pages/index.astro in the hero section.
3. Optionally replace the Toolbox text references with your company name.

Screenshots

• Place PNG/JPEG files in public/screenshots/
• Recommended: 1280 × 800 px (16:10 ratio)
• In ToolCard.astro, swap the placeholder <div> for a real <img> tag:

  <img src={tool.screenshot} alt={tool.screenshotAlt} loading="lazy" />

  (A comment in the file marks this spot.)

Changing colours / fonts

Global design tokens are in src/layouts/Base.astro inside :root { ... }.

Token	Default	Purpose
--bg	#0c0d10	Page background
--surface	#13151a	Card / nav background
--border	#1e2029	Borders
--text	#e8eaf0	Primary text
--muted	#6b7280	Secondary / placeholder text
--accent	#5b8eff	Global accent (hero CTA etc.)

Fonts are loaded from Google Fonts: Syne (display) + DM Sans (body). Change them in the <link> tag in Base.astro.

Deployment

The site builds to a static dist/ directory and can be hosted on any static hosting platform:

• Netlify: connect the repo, set build command to npm run build, publish dir to dist
• Vercel: same settings, zero-config Astro support
• GitHub Pages: add base to astro.config.mjs if serving from a sub-path

Update site in astro.config.mjs to your real domain before deploying.