improve landing

website/package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.9.2",
     "@docusaurus/types": "3.9.2",
+    "@fontsource/geist-sans": "^5.2.5",
     "@fontsource/inter": "^5.2.8"
   },
   "browserslist": {

website/src/components/home/CtaSection.js

@@ -1,30 +1,52 @@
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
-import Icon from '../ui/Icon';
 import styles from './ctaSection.module.css';
 
 export default function CtaSection() {
   return (
-    <section className={styles.ctaSection}>
-      <div className="container">
-        <div className={styles.ctaContent}>
-          <Heading as="h2" className={styles.ctaTitle}>
-            Ready to build with Compose?
-          </Heading>
-          <p className={styles.ctaDescription}>
-            Start creating modular, maintainable smart contracts with our comprehensive documentation.
-          </p>
-          <div className={styles.ctaButtons}>
-            <Link to="/docs" className={clsx(styles.ctaButton, styles.ctaPrimary)}>
-              <span>Get Started</span>
-              <Icon name="arrow-right" size={20} />
-            </Link>
-            {/*
-            <Link to="/docs/getting-started/quick-start" className={clsx(styles.ctaButton, styles.ctaSecondaryLight)}>
-              <span>View Quick Start</span>
-            </Link>
-            */}
+    <section className={styles.ctaSection} aria-labelledby="cta-heading">
+      <div className={clsx('container', styles.ctaContainer)}>
+        <div className={styles.ctaBanner}>
+          <div className={styles.ctaGlowTop} aria-hidden="true" />
+          <div className={styles.ctaGlowBottom} aria-hidden="true" />
+          <div className={styles.ctaArc} aria-hidden="true" />
+          <div className={styles.ctaHighlight} aria-hidden="true" />
+          <div className={styles.ctaNoise} aria-hidden="true" />
+
+          <div className={styles.ctaInner}>
+            <Heading as="h2" id="cta-heading" className={styles.ctaTitle}>
+              Ready to build with Compose?
+            </Heading>
+            <p className={styles.ctaDescription}>
+              Start building your next smart contract system.
+            </p>
+            <div className={styles.ctaActions}>
+              <Link to="/docs" className={clsx(styles.ctaButton, styles.ctaPrimaryLight)}>
+                <span>Get started</span>
+                <svg
+                  className={styles.ctaButtonIcon}
+                  width={20}
+                  height={20}
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                  focusable="false">
+                  <path
+                    d="M7.5 5L12.5 10L7.5 15"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </Link>
+              <Link
+                to="/docs/getting-started/installation"
+                className={clsx(styles.ctaButton, styles.ctaSecondaryOutline)}>
+                Installation
+              </Link>
+            </div>
           </div>
         </div>
       </div>

website/src/components/home/FeaturesSection.js

@@ -1,41 +1,40 @@
 import Heading from '@theme/Heading';
-import Icon from '../ui/Icon';
 import styles from './featuresSection.module.css';
 
 export default function FeaturesSection() {
   const features = [
     {
-      icon: 'read-first',
+      kicker: 'Design principle',
       title: 'Read First',
       description: 'Code written to be understood first, not just executed. Every facet is self-contained and readable top-to-bottom.',
       link: '/docs/design/written-to-be-read',
     },
     {
-      icon: 'diamond-native',
+      kicker: 'ERC-2535',
       title: 'Diamond-Native',
       description: 'Built specifically for ERC-2535 Diamonds. Deploy facets once, reuse them across multiple diamonds onchain.',
       link: '/docs/foundations/diamond-contracts',
     },
     {
-      icon: 'composition',
+      kicker: 'Architecture',
       title: 'Composition Over Inheritance',
       description: 'Combine deployed facets instead of inheriting contracts. Build systems from simple, reusable pieces.',
       link: '/docs/design/design-for-composition',
     },
     {
-      icon: 'simplicity',
+      kicker: 'SCOP',
       title: 'Intentional Simplicity',
       description: 'Smart Contract Oriented Programming (SCOP) - designed specifically for smart contracts, not general software.',
       link: '/docs/design',
     },
     {
-      icon: 'library',
+      kicker: 'Roadmap',
       title: 'On-chain Standard Library',
       description: '(In the future) Access verified, audited facets deployed on multiple blockchains.',
       link: '/docs/foundations/onchain-contract-library',
     },
     {
-      icon: 'community',
+      kicker: 'Ecosystem',
       title: 'Community-Driven',
       description: 'Built with love by the community. Join us in creating the standard library for ERC-2535 Diamonds.',
       link: '/docs/contribution/how-to-contribute',
@@ -68,13 +67,19 @@ export default function FeaturesSection() {
               key={feature.title}
               className={styles.featureCardLink}
             >
-              <div className={styles.featureCard}>
-                <div className={styles.featureIcon}>
-                  <Icon name={feature.icon} size={32} />
-                </div>
+              <article className={styles.featureCard}>
+                <header className={styles.featureMeta}>
+                  <span className={styles.featureKicker}>{feature.kicker}</span>
+                </header>
                 <h3 className={styles.featureTitle}>{feature.title}</h3>
                 <p className={styles.featureDescription}>{feature.description}</p>
-              </div>
+                <span className={styles.featureHint}>
+                  <span className={styles.featureHintLabel}>Open in docs</span>
+                  <span className={styles.featureHintArrow} aria-hidden="true">
+                    →
+                  </span>
+                </span>
+              </article>
             </a>
           ))}
         </div>

website/src/components/home/StatsSection.js

@@ -10,25 +10,27 @@ export default function StatsSection() {
   });
 
   const stats = [
-    { label: 'Open Source', value: 'MIT', icon: 'scroll' },
-    { label: 'Diamond Standard', value: 'ERC-2535', icon: 'diamond' },
-    { label: 'Contributors', value: contributorsValue, icon: 'community' },
-    { label: 'Built with Love', value: 'Community', icon: 'heart' },
+    {label: 'Open Source', value: 'MIT', icon: 'scroll'},
+    {label: 'Diamond Standard', value: 'ERC-2535', icon: 'diamond'},
+    {label: 'Contributors', value: contributorsValue, icon: 'community'},
+    {label: 'Built with Love', value: 'Community', icon: 'heart'},
   ];
 
   return (
-    <section className={styles.statsSection}>
+    <section className={styles.statsSection} aria-label="Project highlights">
       <div className="container">
-        <div className={styles.statsGrid}>
-          {stats.map((stat, idx) => (
-            <div key={idx} className={styles.statCard}>
-              <div className={styles.statIcon}>
-                <Icon name={stat.icon} size={32} />
-              </div>
-              <div className={styles.statValue}>{stat.value}</div>
-              <div className={styles.statLabel}>{stat.label}</div>
-            </div>
-          ))}
+        <div className={styles.statsRail}>
+          <ul className={styles.statsList}>
+            {stats.map((stat) => (
+              <li key={stat.label} className={styles.statItem}>
+                <span className={styles.statIcon} aria-hidden="true">
+                  <Icon name={stat.icon} size={26} />
+                </span>
+                <span className={styles.statValue}>{stat.value}</span>
+                <span className={styles.statLabel}>{stat.label}</span>
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
     </section>