improve landing page

[aojea]

No description provided.

[gemini-code-assist]

Code Review

This pull request introduces a new custom, dark-themed landing page for the Sovereign Agent Mesh (SAM) project, replacing the previous default cover block. It adds a new layout template, updates the homepage content metadata, and introduces modern SCSS styles with animations and glowing effects. The feedback suggests utilizing Hugo's template variables (.Title and .Description) to prevent content duplication, ordering CSS vendor prefixes correctly for mask-image, and adding :focus-visible styles to improve keyboard accessibility.

[gemini-code-assist]

To avoid duplication and ensure that any updates to the page metadata in site/content/_index.md are automatically reflected on the landing page, use Hugo's .Title and .Description variables instead of hardcoding the values.

Suggested change

	<h1 class="landing-title">SAM</h1>
	<p class="landing-subtitle">Sovereign Agent Mesh</p>
	<p class="landing-description">
	A zero-config, zero-trust decentralized P2P network built specifically for autonomous AI agents.
	</p>
	<h1 class="landing-title">{{ .Title }}</h1>
	<p class="landing-subtitle">Sovereign Agent Mesh</p>
	<p class="landing-description">
	{{ .Description }}
	</p>

[gemini-code-assist]

According to CSS best practices, vendor-prefixed properties (like -webkit-mask-image) should precede the standard, unprefixed property (mask-image). This ensures that the standard implementation takes precedence when supported by the browser.

Suggested change

	mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
	mask-image: radial-gradient(circle at center, black 30%, transparent 80%);

[gemini-code-assist]

For keyboard accessibility (a11y), it is important to provide a clear visual focus indicator when users navigate using the Tab key. Adding :focus-visible styles ensures that keyboard users can easily identify which button is currently focused.

    text-decoration: none !important;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;

    &:focus-visible {
      outline: 2px solid #00f0ff;
      outline-offset: 2px;
    }