[WIP] first pass at docs landing page redesign

docs/index.mdx

@@ -0,0 +1,10 @@
+---
+slug: /
+title: " "
+sidebar_class_name: hidden
+hide_table_of_contents: true
+---
+
+import Home from '@site/src/components/home';
+
+<Home />

sidebars.js

@@ -1,7 +1,6 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   docs: [
-    'introduction',
     {
       type: 'category',
       label: 'Getting Started',

src/components/RotatingWord.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './RotatingWord.module.css';
+
+const WORDS = [
+  'free and open map data.',
+  'modular, extensible schemas.',
+  'stable UUIDs for the world.',
+  'shared infrastructure.',
+  'cross-sector collaboration.',
+  'an invitation to build together.',
+];
+
+export default function RotatingWord() {
+  const [index, setIndex] = useState(0);
+  const pausedRef = useRef(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!pausedRef.current) {
+        setIndex(i => (i + 1) % WORDS.length);
+      }
+    }, 3200);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <div
+        className={styles.rotatingWrap}
+        onMouseEnter={() => { pausedRef.current = true; }}
+        onMouseLeave={() => { pausedRef.current = false; }}
+      >
+        {WORDS.map((word, i) => (
+          <span
+            key={word}
+            className={`${styles.rotatingWord} ${i === index ? styles.active : ''}`}
+          >
+            {word}
+          </span>
+        ))}
+      </div>
+      <div className={styles.rotateDots}>
+        {WORDS.map((_, i) => (
+          <div
+            key={i}
+            className={`${styles.rotateDot} ${i === index ? styles.activeDot : ''}`}
+            onClick={() => setIndex(i)}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

src/components/RotatingWord.module.css

@@ -0,0 +1,49 @@
+.rotatingWrap {
+  position: relative;
+  overflow: hidden;
+  height: clamp(5.5rem, 11vw, 9rem);
+  width: 100%;
+  margin-top: 0.15rem;
+}
+
+.rotatingWord {
+  font-family: Montserrat, var(--ifm-font-family-base);
+  font-size: clamp(2.2rem, 5vw, 3.75rem);
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  position: absolute;
+  white-space: normal;
+  width: 100%;
+  opacity: 0;
+  transform: translateY(110%);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+  color: var(--ifm-font-color-base);
+}
+
+.rotatingWord.active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.rotateDots {
+  display: flex;
+  gap: 6px;
+  margin-top: 1.25rem;
+}
+
+.rotateDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ifm-color-emphasis-300);
+  cursor: pointer;
+  transition: background 0.2s, transform 0.2s;
+  border: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.rotateDot.activeDot {
+  background: #4edad8;
+  border-color: #4edad8;
+  transform: scale(1.35);
+}

src/components/home.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import RotatingWord from '@site/src/components/RotatingWord';
+import styles from './home.module.css';
+
+const STATS = [
+  { number: '4B+',  label: 'map features globally' },
+  { number: '6',    label: 'unified data themes' },
+  { number: '50+',  label: 'member organizations' },
+  { number: 'Free', label: 'under open licenses' },
+];
+
+export default function Home() {
+  return (
+    <>
+      <section className={styles.hero}>
+        <div className={styles.headline}>
+          <div className={styles.headlineTop}>
+            <span className={styles.headlineStatic}>Overture</span>
+            <span className={styles.headlineIs}>is</span>
+          </div>
+          <RotatingWord />
+        </div>
+
+        <p className={styles.subtext}>
+          A platform for bringing together tech companies, mapping organizations,
+          government agencies, open data communities, and researchers to build
+          open, reliable, and interoperable map data infrastructure.
+        </p>
+
+        <div className={styles.ctaRow}>
+          <a
+            href="https://explore.overturemaps.org"
+            className={styles.btnPrimary}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Explore the data
+          </a>
+          <a href="/getting-data/index" className={styles.btnSecondary}>
+            Read the docs {'\u2192'}
+          </a>
+        </div>
+      </section>
+
+      <div className={styles.explorerSection}>
+        <div className={styles.explorerFrame}>
+          <iframe
+            src="https://explore.overturemaps.org"
+            title="Overture Maps Explorer"
+            loading="lazy"
+            allow="fullscreen"
+          />
+          <a
+            className={styles.explorerOpen}
+            href="https://explore.overturemaps.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Open full screen {'\u2197'}
+          </a>
+        </div>
+        <p className={styles.explorerCaption}>
+          Live Overture Maps data — explore buildings, roads, places &amp; more
+        </p>
+      </div>
+
+      <div className={styles.statsSection}>
+        <hr className={styles.statsDivider} />
+        <div className={styles.stats}>
+          {STATS.map(({ number, label }) => (
+            <div key={number} className={styles.statItem}>
+              <div className={styles.statNumber}>{number}</div>
+              <div className={styles.statLabel}>{label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}