feat: add homepage project support links

test/browser/website.spec.ts

@@ -1,6 +1,50 @@
 import AxeBuilder from '@axe-core/playwright'
 import { expect, test } from '@playwright/test'
 
+test('homepage support links follow the demo and remain usable at mobile sizes', async ({
+  page,
+}, testInfo) => {
+  await page.goto('/')
+  const support = page.getByRole('region', { name: 'Useful in your project?' })
+  await expect(support).toBeVisible()
+  await expect(
+    support.getByRole('heading', { level: 2, name: 'Useful in your project?' }),
+  ).toBeVisible()
+  expect(
+    await support.evaluate((element) =>
+      element.previousElementSibling?.matches('.hero'),
+    ),
+  ).toBe(true)
+  const links = [
+    [
+      'Star on GitHub',
+      'https://github.com/NIPE-Solutions/react-anchored-layer',
+    ],
+    ['Explore NIPE Open Source', 'https://opensource.nipesolutions.com'],
+  ] as const
+  for (const width of [1440, 320]) {
+    await page.setViewportSize({ width, height: 900 })
+    await support.screenshot({
+      path: testInfo.outputPath(`support-${width.toString()}.png`),
+    })
+    for (const [name, href] of links) {
+      const link = support.getByRole('link', { name, exact: true })
+      await expect(link).toHaveAttribute('href', href)
+      await link.focus()
+      await expect(link).toBeFocused()
+      await expect(link).toHaveCSS('outline-style', 'solid')
+      const bounds = await link.boundingBox()
+      expect(bounds?.height).toBeGreaterThanOrEqual(44)
+      expect(bounds?.width).toBeGreaterThanOrEqual(44)
+      expect(bounds?.x).toBeGreaterThanOrEqual(0)
+      expect((bounds?.x ?? 0) + (bounds?.width ?? 0)).toBeLessThanOrEqual(width)
+    }
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBe(width)
+  }
+})
+
 test('documents the package and runs the address demo', async ({ page }) => {
   await page.goto('/')
   await expect(page.getByRole('heading', { level: 1 })).toContainText(

website/src/App.tsx

@@ -70,6 +70,27 @@ export function App() {
           </div>
           <AddressDemo />
         </section>
+        <section
+          className="project-support"
+          aria-labelledby="project-support-title"
+        >
+          <h2 id="project-support-title">Useful in your project?</h2>
+          <p>
+            If Anchored Layer helps your project, a GitHub star is a simple way
+            to support the work and help others find it.
+          </p>
+          <div className="project-support-actions">
+            <a
+              className="project-support-primary"
+              href="https://github.com/NIPE-Solutions/react-anchored-layer"
+            >
+              Star on GitHub
+            </a>
+            <a href="https://opensource.nipesolutions.com">
+              Explore NIPE Open Source
+            </a>
+          </div>
+        </section>
         <div className="docs-layout">
           <aside className="docs-rail">
             <nav aria-label="Documentation">

website/src/site.css

@@ -124,6 +124,47 @@ a {
 .hero > * {
   min-width: 0;
 }
+.project-support {
+  width: min(100% - 32px, 1320px);
+  margin-inline: auto;
+  padding: 32px 0;
+  border-block: 1px solid var(--rule);
+}
+.project-support h2 {
+  margin: 0 0 12px;
+  font-size: clamp(24px, 3vw, 36px);
+  letter-spacing: -0.035em;
+}
+.project-support p {
+  max-width: 65ch;
+  color: var(--muted);
+}
+.project-support-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.project-support-actions a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 10px 16px;
+  border: 1px solid var(--signal-deep);
+  border-radius: 5px;
+  color: var(--signal-deep);
+  font-weight: 680;
+  text-decoration: none;
+}
+.project-support-actions a:hover {
+  background: var(--surface);
+}
+.project-support-actions .project-support-primary {
+  background: var(--signal-deep);
+  color: var(--surface);
+}
+.project-support-actions .project-support-primary:hover {
+  background: var(--signal);
+}
 .status-line {
   margin: 0 0 18px;
   color: var(--signal-deep);