Skip to content

Redesign root index.html into a single-file Tailwind landing page for ShellScope#1

Merged
shiks2 merged 2 commits intomainfrom
copilot/update-index-html-landing-page
Feb 24, 2026
Merged

Redesign root index.html into a single-file Tailwind landing page for ShellScope#1
shiks2 merged 2 commits intomainfrom
copilot/update-index-html-landing-page

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 24, 2026

Replaced the root index.html with a dark-mode-first, single-file Tailwind landing page aligned to the requested Vercel/Linear-style aesthetic and strict UI checklist. The page now incorporates the full README product narrative and required sections for positioning, onboarding, and roadmap.

  • Hero + navigation

    • Added a floating glassmorphism navbar (fixed top-4 left-4 right-4 z-50) with in-page anchors and GitHub link.
    • Implemented full-viewport hero (min-h-screen) with exact required headline/subheadline and GitHub CTA including SVG icon.
  • Product narrative sections

    • Added detailed About section with WMI-based transient-process capture explanation and dashboard highlights.
    • Added Features grid (4 cards) covering transient capture, argument logging, local-first storage, and low resource usage.
    • Added Tech Stack badges row for Python, Flutter, SQLite, and Windows using SVG icons.
    • Added Installation, Usage Guide, and Roadmap sections with the exact requested prerequisites/commands and roadmap items.
    • Added footer with MIT license and GitHub link.
  • UI system + checklist compliance

    • Migrated from custom CSS to Tailwind CDN with class-based dark mode (darkMode: 'class').
    • Applied dark-first palette and light-mode variants, glassmorphism containers, semantic HTML structure, responsive grid breakpoints, and accessibility attributes (aria-hidden="true" on icons).
    • Enforced interaction rules across clickable elements/cards: cursor-pointer, transition-colors duration-200, hover color/opacity changes only (no layout/scale shifts).
<html lang="en" class="dark">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' };
  </script>
</head>
<section id="hero" class="flex min-h-screen items-center pt-24">
  <h1>ShellScope: The Local Flight Recorder for Windows.</h1>
  <a href="https://github.com/shiks2/shellscope"
     class="inline-flex cursor-pointer items-center gap-2 transition-colors duration-200">
    <!-- GitHub SVG -->
    View on GitHub
  </a>
</section>

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: shiks2 <115677500+shiks2@users.noreply.github.com>
Copilot AI changed the title [WIP] Update index.html to sleek landing page for ShellScope Redesign root index.html into a single-file Tailwind landing page for ShellScope Feb 24, 2026
Copilot AI requested a review from shiks2 February 24, 2026 05:39
@shiks2 shiks2 marked this pull request as ready for review February 24, 2026 05:39
Copilot AI review requested due to automatic review settings February 24, 2026 05:39
@shiks2 shiks2 merged commit 589d51c into main Feb 24, 2026
1 check passed
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR replaces the repository root index.html with a single-file Tailwind (CDN) landing page for ShellScope, adding a dark-mode-first, sectioned product narrative intended for a Vercel/Linear-style marketing page.

Changes:

  • Replaced custom CSS layout with a Tailwind CDN-based layout and dark-mode styling.
  • Added a fixed glassmorphism navbar and hero section with GitHub CTA.
  • Added About, Features, Tech Stack, Installation/Usage, Roadmap, and Footer sections.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread index.html
Comment on lines +8 to +13
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
};
</script>
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Tailwind CDN script is loaded without a pinned version or SRI, which is a supply-chain risk and can also cause unexpected styling changes when the CDN updates. Consider shipping a built Tailwind CSS file (preferred) or at least pinning the CDN URL/version and adding integrity/crossorigin (and a CSP-friendly approach if you use CSP).

Copilot uses AI. Check for mistakes.
Comment thread index.html
Comment on lines +2 to +12
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShellScope</title>
<style>
:root {
--bg-color: #050505;
--text-color: #E8E3C7;
--accent-color: #F5F5DC;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Courier New', Courier, monospace;
line-height: 1.6;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}

a {
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
}

/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
}

/* Navbar */
nav {
padding: 2rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-weight: bold;
font-size: 1.25rem;
letter-spacing: -1px;
}

.nav-links {
display: flex;
gap: 2rem;
}

.nav-links a:hover {
color: var(--accent-color);
opacity: 0.8;
text-decoration: underline;
}

/* Hero */
.hero {
padding: 6rem 0;
border-bottom: 1px solid rgba(232, 227, 199, 0.1);
}

h1 {
font-size: 3.5rem;
line-height: 1.1;
margin-bottom: 1.5rem;
font-weight: normal;
}

.hero p {
font-size: 1.25rem;
margin-bottom: 3rem;
opacity: 0.8;
max-width: 700px;
}

.cta-buttons {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}

.btn {
padding: 1rem 2rem;
font-weight: bold;
border: 1px solid var(--accent-color);
cursor: pointer;
display: inline-block;
}

.btn-primary {
background-color: var(--accent-color);
color: #000;
}

.btn-primary:hover {
background-color: #000;
color: var(--accent-color);
}

.btn-secondary {
background-color: transparent;
color: var(--accent-color);
}

.btn-secondary:hover {
background-color: var(--accent-color);
color: #000;
}

/* Features */
.features {
padding: 4rem 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.feature-item h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
font-weight: bold;
border-bottom: 1px solid var(--accent-color);
display: inline-block;
padding-bottom: 0.25rem;
}

/* Tech Stack */
.tech-stack {
padding: 4rem 0;
text-align: center;
opacity: 0.7;
border-top: 1px solid rgba(232, 227, 199, 0.1);
}

/* Footer */
footer {
padding: 2rem 0;
text-align: center;
font-size: 0.875rem;
opacity: 0.5;
margin-top: auto;
border-top: 1px solid rgba(232, 227, 199, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}

.features {
grid-template-columns: 1fr;
}

.nav-links {
display: none;
}
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ShellScope | Local Flight Recorder for Windows Terminal Activity</title>
<meta name="description" content="ShellScope captures transient Windows processes and terminal activity under 100ms using WMI with local SQLite logging and zero cloud dependencies." />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
};
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<html class="dark"> forces dark mode permanently, making the light-mode classes effectively unreachable and the darkMode: 'class' config largely redundant. If the intent is “dark by default but switchable”, add a theme toggle (or respect prefers-color-scheme) that adds/removes the dark class instead of hard-coding it.

Copilot uses AI. Check for mistakes.
Comment thread index.html
Comment on lines +16 to +55
<nav class="fixed top-4 left-4 right-4 z-50 mx-auto max-w-7xl px-4">
<div class="rounded-2xl border border-gray-200/60 bg-white/80 px-4 py-3 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80">
<div class="flex items-center justify-between gap-4">
<a href="#hero" class="cursor-pointer text-sm font-semibold tracking-wide text-slate-900 transition-colors duration-200 hover:text-slate-600 dark:text-slate-100 dark:hover:text-slate-300">ShellScope</a>
<div class="flex items-center gap-4 text-sm">
<a href="#about" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">About</a>
<a href="#features" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">Features</a>
<a href="#installation" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">Install</a>
<a href="https://github.com/shiks2/shellscope" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">GitHub</a>
</div>
</div>
</div>
</nav>

<main>
<section id="hero" class="flex min-h-screen items-center pt-24">
<div class="mx-auto w-full max-w-7xl px-4">
<div class="rounded-3xl border border-gray-200/60 bg-white/80 p-8 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80 md:p-12">
<p class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">Developer Tool / System Observability</p>
<h1 class="text-4xl font-semibold leading-tight text-slate-900 dark:text-slate-100 md:text-6xl">ShellScope: The Local Flight Recorder for Windows.</h1>
<p class="mt-6 max-w-3xl text-base text-slate-700 dark:text-slate-300 md:text-xl">Capture transient processes and terminal activity under 100ms using WMI. Zero cloud dependencies. Logs command-line arguments to local SQLite DB.</p>
<div class="mt-8 flex flex-wrap items-center gap-4">
<a href="https://github.com/shiks2/shellscope" class="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-slate-300 bg-slate-900 px-5 py-3 font-medium text-white transition-colors duration-200 hover:bg-slate-700 dark:border-slate-600 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297a12 12 0 0 0-3.793 23.39c.6.111.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.729.083-.729 1.205.085 1.84 1.236 1.84 1.236 1.07 1.833 2.807 1.304 3.492.997.108-.775.418-1.305.76-1.605-2.665-.303-5.467-1.334-5.467-5.93 0-1.31.47-2.381 1.236-3.221-.124-.303-.536-1.524.118-3.176 0 0 1.008-.323 3.3 1.23a11.5 11.5 0 0 1 6.006 0c2.291-1.553 3.297-1.23 3.297-1.23.656 1.653.244 2.874.12 3.176.77.84 1.235 1.911 1.235 3.221 0 4.61-2.807 5.624-5.48 5.921.43.372.813 1.102.813 2.222v3.293c0 .32.19.694.8.576A12 12 0 0 0 12 .297"/></svg>
View on GitHub
</a>
</div>
</div>
</div>
</section>

<section id="about" class="py-20">
<div class="mx-auto max-w-7xl px-4">
<div class="rounded-2xl border border-gray-200/60 bg-white/80 p-8 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80">
<h2 class="text-3xl font-semibold text-slate-900 dark:text-slate-100">About ShellScope</h2>
<p class="mt-4 text-slate-700 dark:text-slate-300">ShellScope uses Windows Management Instrumentation (WMI) to capture process creation events, including short-lived "flash" processes (&lt;100ms). Provides audit trail without external dependencies.</p>
<p class="mt-4 text-slate-700 dark:text-slate-300">A local flight recorder for Windows terminal activity and transient process logging. Highlights: Process List (Green: safe, Red: suspicious like -enc), Status (Running/Closed), Real-time dashboard.</p>
</div>
</div>
</section>
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With a fixed navbar, in-page anchor jumps (e.g. #about/#features/#installation) can land with the section header hidden underneath the nav. Add scroll-margin-top (e.g. Tailwind scroll-mt-24/scroll-mt-28) to the anchored sections (or use a global scroll-padding-top).

Copilot uses AI. Check for mistakes.
Comment thread index.html
Comment on lines +61 to +80
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>
<h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Transient Process Capture</h3>
<p class="mt-2 text-sm text-slate-700 dark:text-slate-300">Detects and logs processes with lifespans &lt;100ms.</p>
</article>
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16l4-2 4 2 4-2 4 2V8z"/><path d="M14 2v6h6"/></svg>
<h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Argument Logging</h3>
<p class="mt-2 text-sm text-slate-700 dark:text-slate-300">Captures full command-line args for detailed analysis.</p>
</article>
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/></svg>
<h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Local-First Architecture</h3>
<p class="mt-2 text-sm text-slate-700 dark:text-slate-300">All data is stored locally in SQLite with no cloud uploads.</p>
</article>
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
<h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Low Resource Usage</h3>
<p class="mt-2 text-sm text-slate-700 dark:text-slate-300">Efficient Python WMI backend combined with a performant Flutter UI.</p>
</article>
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These feature cards use cursor-pointer and hover styling but aren’t actually interactive elements (no link/button), which can confuse users and is not keyboard accessible. Either remove the pointer/hover affordances or make the cards real interactive elements (wrap in an , or add appropriate role/tabindex and key handling).

Copilot uses AI. Check for mistakes.
Comment thread index.html
Comment on lines +89 to +112
<div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<div class="flex items-center gap-3">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11.95.03c-1.97.01-3.84.16-5.47.47C1.7 1.35 0 2.72 0 4.65v14.7c0 1.93 1.7 3.3 6.48 4.15 3.28.59 7.77.59 11.04 0C22.3 22.65 24 21.28 24 19.35V4.65c0-1.93-1.7-3.3-6.48-4.15A33.7 33.7 0 0 0 11.95.03Zm-.2 2.07c1.17 0 2.13.96 2.13 2.14a2.14 2.14 0 0 1-2.13 2.14 2.14 2.14 0 0 1-2.13-2.14c0-1.18.96-2.14 2.13-2.14Zm-4.2 6.1h8.4a1.2 1.2 0 0 1 1.2 1.2v8.4a1.2 1.2 0 0 1-1.2 1.2h-8.4a1.2 1.2 0 0 1-1.2-1.2V9.4a1.2 1.2 0 0 1 1.2-1.2Z"/></svg>
<span class="text-sm font-medium text-slate-900 dark:text-slate-100">Python</span>
</div>
</section>

<section id="features" class="features">
<div class="feature-item">
<h3>Flash Capture</h3>
<p>Detects processes with lifespans under 100 milliseconds.</p>
</div>
<div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<div class="flex items-center gap-3">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.314 12.441-3.11 3.11-3.11-3.11 3.11-3.11 3.11 3.11ZM17.887 8.867l-1.555 1.554-3.11-3.11L14.777 5.76l3.11 3.108Zm0 7.146-3.11 3.109-1.555-1.555 3.11-3.11 1.555 1.556Zm-11.777 0 1.555 1.554 3.11-3.109-1.555-1.556-3.11 3.111Zm0-7.146 3.11-3.109 1.555 1.554-3.11 3.11-1.555-1.555Zm5.095 9.126 1.555 1.554 1.554-1.554-1.554-1.555-1.555 1.555Zm0-11.112 1.555 1.554 1.554-1.554-1.554-1.555-1.555 1.555Z"/></svg>
<span class="text-sm font-medium text-slate-900 dark:text-slate-100">Flutter</span>
</div>
<div class="feature-item">
<h3>Deep Visibility</h3>
<p>Logs parent PIDs and full command line arguments.</p>
</div>
<div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<div class="flex items-center gap-3">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C7 2 3 3.34 3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5c0-1.66-4-3-9-3Zm0 2c4.42 0 7 .99 7 1s-2.58 1-7 1-7-.99-7-1 2.58-1 7-1Zm0 16c-4.42 0-7-.99-7-1v-2c1.7.8 4.4 1 7 1s5.3-.2 7-1v2c0 .01-2.58 1-7 1Zm0-4c-4.42 0-7-.99-7-1v-2c1.7.8 4.4 1 7 1s5.3-.2 7-1v2c0 .01-2.58 1-7 1Zm0-4c-4.42 0-7-.99-7-1V9c1.7.8 4.4 1 7 1s5.3-.2 7-1v2c0 .01-2.58 1-7 1Z"/></svg>
<span class="text-sm font-medium text-slate-900 dark:text-slate-100">SQLite</span>
</div>
<div class="feature-item">
<h3>Offline First</h3>
<p>Zero cloud dependency. Data is stored in a local SQLite database.</p>
</div>
<div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<div class="flex items-center gap-3">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M0 1.418 9.833 0v9.552H0V1.418Zm11.02-1.595L24 0v9.46H11.02V-.177ZM0 10.448h9.833V24L0 22.583V10.448Zm11.02 0H24v13.73l-12.98-1.823V10.448Z"/></svg>
<span class="text-sm font-medium text-slate-900 dark:text-slate-100">Windows</span>
</div>
</section>

<section id="tech" class="tech-stack">
<p>Built with Flutter, Python WMI, and SQLite.</p>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2026 ShellScope. Released under MIT License.</p>
</div>
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tech stack items are styled as clickable (cursor-pointer + hover) but don’t perform any action and aren’t focusable, which is misleading and not keyboard accessible. Either remove interactive styling or convert them into links/buttons (and include visible focus styles).

Copilot uses AI. Check for mistakes.
Comment thread index.html
Comment on lines +149 to +157
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3>
<p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Netlink.</p>
</article>
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3>
<p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Endpoint Security/psutil.</p>
</article>
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Roadmap cards are presented with cursor-pointer and hover affordances but aren’t actual controls/links, which is misleading and not accessible via keyboard. Consider removing the interactive affordances or making each card a link/button with proper focus handling.

Suggested change
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3>
<p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Netlink.</p>
</article>
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3>
<p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Endpoint Security/psutil.</p>
</article>
<article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<article class="rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3>
<p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Netlink.</p>
</article>
<article class="rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3>
<p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Endpoint Security/psutil.</p>
</article>
<article class="rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500">

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants