Address docs UX review fixes

favicon.svg

@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
   <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
-  <path d="M13 5a6 6 0 0 1 6 6v14a4 4 0 0 1-8 0V11a2 2 0 0 1 4 0v12" stroke="#f0f0f0" stroke-width="2.5" stroke-linecap="round"/>
+  <g transform="translate(4 4)">
+    <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" stroke="#f0f0f0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
 </svg>

src/components/LandingHero.tsx

@@ -50,8 +50,8 @@ export default function LandingHero(): React.JSX.Element {
             </div>
             <div className="hero-status-row">
               <span className="hero-status-dot" />
-              <span className="hero-status-label">PAP-1865</span>
-              <span className="hero-status-meta">owned</span>
+              <span className="hero-status-label">ACME-102</span>
+              <span className="hero-status-meta">Ship checkout</span>
             </div>
           </div>
         </div>

src/css/custom.css

@@ -473,7 +473,7 @@ code {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.25rem;
   padding: 0.38rem 0.95rem;
   border: 1px solid var(--pc-border);
   border-radius: var(--pc-radius-pill);
@@ -514,10 +514,14 @@ code {
 }
 
 .hero-title em {
-  color: var(--pc-text-secondary);
+  color: var(--pc-active-dark);
   font-style: italic;
 }
 
+html[data-theme='dark'] .hero-title em {
+  color: #86efac;
+}
+
 .hero-summary {
   max-width: 42rem;
   margin-top: 1.3rem;
@@ -594,7 +598,7 @@ html[data-theme='dark'] .hero-console {
 }
 
 .hero-console-muted {
-  color: rgba(255, 255, 255, 0.52);
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .hero-status-row {
@@ -636,7 +640,7 @@ html[data-theme='dark'] .hero-console {
 
 .hero-status-meta {
   min-width: 0;
-  color: rgba(255, 255, 255, 0.58);
+  color: rgba(255, 255, 255, 0.7);
   font-size: 0.78rem;
   overflow-wrap: anywhere;
 }
@@ -689,15 +693,19 @@ html[data-theme='dark'] .hero-console {
   display: inline-flex;
   margin-bottom: 0.85rem;
   padding: 0.28rem 0.72rem;
+  border: 1px solid var(--pc-border);
   border-radius: var(--pc-radius-pill);
-  background: var(--pc-mint);
-  color: var(--pc-active-dark);
+  background: var(--pc-bg-alt);
+  color: var(--pc-text-muted);
   font-size: 0.75rem;
   font-weight: 600;
+  letter-spacing: 0;
 }
 
 html[data-theme='dark'] .hero-panel span {
-  color: #86efac;
+  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .hero-panel strong {

src/theme/MDXComponents.module.css

@@ -1,10 +1,22 @@
 .cardGroup {
   display: grid;
   gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   margin: 1.5rem 0 2rem;
 }
 
+@media (max-width: 996px) {
+  .cardGroup {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .cardGroup {
+    grid-template-columns: 1fr;
+  }
+}
+
 .card {
   position: relative;
   display: flex;

static/favicon.svg

@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
   <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
-  <path d="M13 5a6 6 0 0 1 6 6v14a4 4 0 0 1-8 0V11a2 2 0 0 1 4 0v12" stroke="#f0f0f0" stroke-width="2.5" stroke-linecap="round"/>
+  <g transform="translate(4 4)">
+    <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" stroke="#f0f0f0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
 </svg>