feat(web): GitHub star CTAs, v2 tag, and full-reference link

sites/web/src/components/Footer.astro

@@ -31,6 +31,12 @@ const year = new Date().getFullYear()
         href="/concepts"
         class="transition-colors hover:text-[var(--color-fg)]">Concepts</a
       >
+      <a
+        href="https://github.com/desko27/react-call#readme"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="transition-colors hover:text-[var(--color-fg)]">Full reference</a
+      >
       <a
         href="https://www.npmjs.com/package/react-call"
         target="_blank"

sites/web/src/components/Header.astro

@@ -4,11 +4,6 @@ import { ThemeToggle } from './ThemeToggle'
 const navItems = [
   { href: '/examples', label: 'Examples' },
   { href: '/concepts', label: 'Concepts' },
-  {
-    href: 'https://github.com/desko27/react-call',
-    label: 'GitHub',
-    external: true,
-  },
 ]
 ---
 
@@ -35,26 +30,65 @@ const navItems = [
         class="text-[var(--color-accent)]"
         aria-hidden="true">●</span
       >
-      react-call
+      <span class="flex items-start gap-1">
+        react-call
+        <span
+          class="text-xs font-normal leading-none text-[var(--color-fg-subtle)]"
+          >v2</span
+        >
+      </span>
     </a>
 
     <nav class="flex items-center gap-3 sm:gap-6">
       {
         navItems.map((item) => (
           <a
             href={item.href}
-            class:list={[
-              'text-sm text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]',
-              item.external && 'hidden min-[400px]:inline',
-            ]}
-            {...(item.external
-              ? { target: '_blank', rel: 'noopener noreferrer' }
-              : {})}
+            class="text-sm text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
           >
             {item.label}
           </a>
         ))
       }
+      <a
+        href="https://github.com/desko27/react-call#readme"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="
+          hidden whitespace-nowrap text-sm text-[var(--color-fg-muted)]
+          transition-colors hover:text-[var(--color-fg)]
+          md:inline
+        "
+      >
+        Full reference ↗
+      </a>
+      <a
+        href="https://github.com/desko27/react-call"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Star react-call on GitHub"
+        class="
+          hidden items-center gap-1.5 rounded-md
+          border border-[var(--color-border-strong)]
+          px-3 py-1.5
+          text-sm text-[var(--color-fg-muted)]
+          transition-colors
+          hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-fg)]
+          min-[400px]:inline-flex
+        "
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          aria-hidden="true"
+          class="h-3.5 w-3.5 text-[var(--color-accent)]"
+        >
+          <path
+            d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+          ></path>
+        </svg>
+        Star
+      </a>
       <ThemeToggle client:load />
     </nav>
   </div>

sites/web/src/components/landing/Hero.tsx

@@ -71,7 +71,7 @@ export const Hero = () => {
               <span>The browser</span>
             </div>
             <pre className="mt-4 overflow-x-auto font-mono text-sm leading-relaxed text-[var(--color-fg-muted)]">
-              {`const yes = `}
+              {`const ok = `}
               <span className="text-[var(--color-fg)]">
                 {`window.confirm('Continue?')`}
               </span>
@@ -107,7 +107,7 @@ export const Hero = () => {
               <span>Your component</span>
             </div>
             <pre className="mt-4 overflow-x-auto font-mono text-sm leading-relaxed text-[var(--color-fg-muted)]">
-              {`const yes = `}
+              {`const ok = `}
               <span className="text-[var(--color-fg)]">
                 {`await Confirm.call(props)`}
               </span>

sites/web/src/pages/index.astro

@@ -43,9 +43,20 @@ const exampleCount = getAllExamples().length
           href="https://github.com/desko27/react-call"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
+          aria-label="Star react-call on GitHub"
+          class="inline-flex items-center gap-2 rounded-md border border-[var(--color-border-strong)] bg-[var(--color-bg)] px-4 py-2 font-medium text-[var(--color-fg)] transition-colors hover:bg-[var(--color-bg-muted)]"
         >
-          GitHub →
+          <svg
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+            class="h-4 w-4 text-[var(--color-accent)]"
+          >
+            <path
+              d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+            ></path>
+          </svg>
+          Star on GitHub
         </a>
       </div>
     </div>