[Docs] Create a GitHub Pages landing page

[chahe-dridi]

Create a simple website at YOUR_USERNAME.github.io/dev-setup using GitHub Pages.

Content needed:
- Hero section with `npx dev-setup` command
- Tool grid showing what can be installed
- OS support badges
- Animated terminal preview (optional)

You can use plain HTML/CSS or a static site generator like Astro or Jekyll.

To enable: Settings → Pages → Source: Deploy from branch → main → /docs

[chahe-dridi]

Hey @codecaptain22! 👋

Really appreciate you taking this on — a landing page was on the roadmap and this is a great start!

Before I can merge, the structure needs some improvements. Here's what I'd like you to fix:

---

1. Split the CSS into separate files

Instead of one style.css, split it like this:

docs/
├── index.html
├── css/
│ ├── base.css ← reset, variables, fonts, typography
│ ├── components.css ← navbar, buttons, cards, badges
│ └── sections.css ← hero, tools grid, footer, each section
└── js/
└── main.js ← all JavaScript logic

---

2. Don't hardcode the tools

Right now the tool grid is hardcoded:

Git

Node.js

Instead create a js/tools-data.js file that holds all the tool
data as a JavaScript array mirroring our tools.json, then render
the cards dynamically in main.js using JavaScript.

This way when someone adds a new tool to the CLI, they update
tools-data.js and the website updates automatically — no touching
the HTML.

---

3. Add all missing sections

The page needs these sections, not just tools and OS:

• Navbar (fixed, with links to each section)
• Hero (with the npx dev-setup command highlighted)
• Stats bar (40+ tools, 4 OS, 11 categories)
• OS support grid (Windows, macOS, Ubuntu, Kali, + planned ones)
• Tools grid (dynamic, filterable by category)
• How it works (step 1, 2, 3 with the terminal output)
• CLI flags table (--yes, --dry-run, --list, --category)
• Test suite section (list our 5 test files and what they cover)
• Contributing section (ways to contribute)
• Footer (links to GitHub, issues, contributing guide)

---

4. Use proper fonts

Arial is too generic. Use Google Fonts — something like JetBrains
Mono for code blocks and Space Grotesk or Syne for headings.
Add this in the :

---

5. Make it responsive

Add media queries for mobile — the grid should stack to 1 column
on screens under 768px, and the navbar should collapse to a
hamburger menu.

---

Take your time with this — it's a bigger update but will make
the landing page something we're proud to share when we post
the project on Reddit and Product Hunt.

Once it's done I'll merge and enable GitHub Pages immediately.
Let me know if you have any questions! 🙌

[chahe-dridi]

Hey @codecaptain22! 👋 A follow up — here's everything in one place so you have a 
complete picture of what the final version should look like before you push again.

---

**Final folder structure**

  docs/
  ├── index.html                 ← clean entry point, just slots + script imports
  ├── css/
  │   ├── base.css               ← reset, CSS variables, fonts, typography, animations
  │   ├── components.css         ← navbar, buttons, cards, badges, code blocks
  │   └── sections.css           ← hero, tools grid, how-it-works, footer, each section
  ├── js/
  │   ├── tools-data.js          ← all data mirroring tools.json (tools, OS, flags, tests)
  │   └── main.js                ← loads partials, renders all dynamic content
  └── partials/
      ├── navbar.html            ← fixed navbar with links to each section
      ├── hero.html              ← hero with npx dev-setup command + stats bar
      ├── os-support.html        ← OS grid (Windows, macOS, Ubuntu, Kali + planned)
      ├── tools.html             ← filterable tools grid (rendered from tools-data.js)
      ├── how-it-works.html      ← 3 steps + animated terminal demo
      ├── flags.html             ← CLI flags table (--yes, --dry-run, --list etc.)
      ├── tests.html             ← test suite section (5 test files + what they cover)
      ├── contributing.html      ← ways to contribute (6 cards)
      └── footer.html            ← links to GitHub, issues, contributing guide

---

**index.html should look like this — nothing else**

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="One command to set up your entire developer environment.">
    <title>dev-setup — Developer Environment Installer</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/sections.css">
  </head>
  <body>
    <div id="navbar-slot"></div>
    <main>
      <div id="hero-slot"></div>
      <div id="os-slot"></div>
      <div id="tools-slot"></div>
      <div id="how-slot"></div>
      <div id="flags-slot"></div>
      <div id="tests-slot"></div>
      <div id="contributing-slot"></div>
    </main>
    <div id="footer-slot"></div>

    <script src="js/tools-data.js"></script>
    <script src="js/main.js"></script>
  </body>
  </html>

---

**main.js loads partials then renders dynamic content**

  async function loadPartial(id, file) {
    const res  = await fetch(`partials/${file}`);
    const html = await res.text();
    document.getElementById(id).innerHTML = html;
  }

  async function init() {
    await Promise.all([
      loadPartial('navbar-slot',       'navbar.html'),
      loadPartial('hero-slot',         'hero.html'),
      loadPartial('os-slot',           'os-support.html'),
      loadPartial('tools-slot',        'tools.html'),
      loadPartial('how-slot',          'how-it-works.html'),
      loadPartial('flags-slot',        'flags.html'),
      loadPartial('tests-slot',        'tests.html'),
      loadPartial('contributing-slot', 'contributing.html'),
      loadPartial('footer-slot',       'footer.html'),
    ]);

    renderTools();
    renderOS();
    renderFlags();
    renderTests();
    renderContributions();
    initNavbar();
    initFilters();
    initCopyButtons();
  }

  document.addEventListener('DOMContentLoaded', init);

---

**tools-data.js holds all data — nothing is hardcoded in HTML**

  window.DEV_SETUP = {
    version: 'v1.0.0',
    operatingSystems: [ ...array of OS objects... ],
    tools: [ ...array of tool objects matching tools.json... ],
    flags: [ ...array of CLI flag objects... ],
    tests: [ ...array of test file descriptions... ],
    contributions: [ ...array of ways to contribute... ],
    categories: { core: 'Core', runtime: 'Runtime', ... },
  };

All cards, grids, and tables get built in JavaScript from this 
data — zero hardcoded tool names or OS names in any HTML file.

---

**Sections that must exist**

Every one of these needs its own partial:

  navbar.html       Fixed top navbar with logo, nav links, GitHub button, mobile hamburger
  hero.html         Big headline, npx dev-setup command block, CTA buttons, stats row (40+ tools / 4 OS / 11 categories / 1 command)
  os-support.html   Grid of OS cards — supported ones in green, planned ones dimmed with "coming soon"
  tools.html        Category filter buttons + tool cards grid, rendered from tools-data.js
  how-it-works.html 3 step cards (detect OS → select tools → install) + terminal output demo
  flags.html        Table of all CLI flags with descriptions
  tests.html        Cards for each test file showing what it covers + npm test command block
  contributing.html 6 cards covering ways to contribute (new tool, new OS, fix bug, tests, docs, site)
  footer.html       Logo, nav columns, GitHub/issues/contributing links, version + license line

---

**CSS split rules**

  base.css          CSS custom properties (--green, --bg-primary etc.), reset, 
                    typography scale, Google Fonts import, keyframe animations, 
                    utility classes, scrollbar styling

  components.css    Every reusable piece: navbar styles, .btn-primary, .btn-secondary,
                    .tool-card, .os-card, .stat-card, .code-block, .copy-btn,
                    .category-tag, .filter-btn, .step-card

  sections.css      Layout and spacing for each full section — .hero, .os-section,
                    .tools-section, .how-section, .flags-section, .tests-section,
                    .contributing-section, .footer — plus all responsive breakpoints

---

**Fonts — no Arial**

  Headings:   Syne (bold, distinctive)
  Body:       Syne (regular weight works fine)
  Code:       JetBrains Mono (for the terminal demo and command blocks)

---

**Responsive requirements**

  Desktop  (1200px+)   full multi-column layouts
  Tablet   (768px)     2-column grids, navbar collapses to hamburger
  Mobile   (480px)     single column, hero stacks vertically, stats wrap to 2x2

---

**One important note about GitHub Pages**

For the fetch() calls in main.js to work when hosted on GitHub Pages,
make sure all paths are relative (partials/navbar.html not /partials/navbar.html).
Also add a note in the PR description confirming you tested it by 
opening index.html via a local server (not just double-clicking the file) 
because fetch() won't work with the file:// protocol.

You can test locally with:

  npx serve docs
  # then open http://localhost:3000

---

That's the full picture. Take your time — this is a meaningful 
contribution and worth doing properly. Drop a comment here if 
anything is unclear and I'll help you work through it! 🙌