Rework landing page

docusaurus.config.js

@@ -36,6 +36,29 @@ const config = {
       attributes: {},
       innerHTML: plausibleInitScript,
     },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com',
+        crossorigin: 'anonymous',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: 'anonymous',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600&display=swap',
+      },
+    },
   ],
   presets: [
     [
@@ -86,8 +109,9 @@ const config = {
             position: 'left',
             label: 'Documentation',
           },
-          {to: 'https://leanpub.com/graphql-java/', label: 'Book', position: 'left'},
+          {href: 'https://leanpub.com/graphql-java/', label: 'Book', position: 'left'},
           {to: '/tutorials/getting-started-with-spring-boot', label: 'Tutorial', position: 'left'},
+          {href: 'https://feddi.dev', label: 'Federation', position: 'left', className: 'navbar-federation-link'},
           {to: '/blog', label: 'Blog', position: 'left'},
           {to: '/security', label: 'Security', position: 'left'},
           {to: '/about', label: 'About', position: 'left'},

src/components/ExtIcon.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+
+const baseStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  marginLeft: '3px',
+  position: 'relative',
+};
+
+export default function ExtIcon({ style }) {
+  return (
+    <span style={style ? { ...baseStyle, ...style } : baseStyle}>
+      <IconExternalLink />
+    </span>
+  );
+}

src/css/custom.css

@@ -26,3 +26,33 @@
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.navbar-federation-link {
+  color: #E91E8C !important;
+  font-weight: 500 !important;
+  background: rgba(233, 30, 140, 0.07) !important;
+  border-radius: 6px;
+  padding: 4px 10px !important;
+}
+
+.navbar-federation-link:hover {
+  background: rgba(233, 30, 140, 0.13) !important;
+}
+
+.navbar__link svg {
+  position: relative;
+  top: 1px;
+}
+
+/* Version badge pill */
+.navbar__items--right .dropdown > .navbar__link {
+  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
+  background: #f4f4f4;
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 0.8rem;
+}
+
+html[data-theme='dark'] .navbar__items--right .dropdown > .navbar__link {
+  background: rgba(255, 255, 255, 0.08);
+}

src/pages/index.js

@@ -1,36 +1,94 @@
 import React from 'react';
-import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import ExtIcon from '../components/ExtIcon';
 import styles from './index.module.css';
 
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+const EXT_LINK = { target: '_blank', rel: 'noopener noreferrer' };
+
+function Hero() {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-              className="button button--secondary button--lg"
-              to="https://leanpub.com/graphql-java/">
-            Buy the GraphQL Java book now
-          </Link>
-        </div>
+    <section className={styles.hero}>
+      <h1 className={styles.heroTitle}>GraphQL Java</h1>
+      <p className={styles.heroSubtitle}>The Java implementation of GraphQL</p>
+      <div className={styles.trustBar}>
+        <span>Spring GraphQL</span>
+        <span className={styles.dot}>·</span>
+        <span>Netflix DGS</span>
+        <span className={styles.dot}>·</span>
+        <span>Atlassian</span>
+        <span className={styles.dot}>·</span>
+        <span>1M+ downloads/month</span>
+      </div>
+      <div className={styles.ctaRow}>
+        <Link className={styles.ctaPrimary} to="/documentation/getting-started">
+          Get started →
+        </Link>
+        <a className={styles.ctaSecondary} href="https://feddi.dev" {...EXT_LINK}>
+          JVM-native GraphQL federation <ExtIcon />
+        </a>
+      </div>
+    </section>
+  );
+}
+
+function Card({ title, description, to, href, external }) {
+  const content = (
+    <>
+      <div className={styles.cardTitle}>
+        {title}{external && <ExtIcon />}
       </div>
-    </header>
+      <div className={styles.cardDesc}>{description}</div>
+    </>
+  );
+  if (to) {
+    return <Link className={styles.card} to={to}>{content}</Link>;
+  }
+  return (
+    <a className={styles.card} href={href} {...(external ? EXT_LINK : {})}>
+      {content}
+    </a>
   );
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
   return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="GraphQL Java home page">
-      <HomepageHeader />
+    <Layout title="GraphQL Java" description="The Java implementation of GraphQL">
+      <Hero />
+      <main className={styles.content}>
+        <section className={styles.section}>
+          <div className={styles.sectionLabel}>Documentation</div>
+          <div className={styles.cardGrid}>
+            <Card title="Documentation" description="Full reference for GraphQL Java" to="/documentation/getting-started" />
+            <Card title="3 min tutorial" description="Get a GraphQL server running fast" to="/tutorials/getting-started-with-spring-boot" />
+            <Card title="GraphQL with Java and Spring" description="Book from the maintainers" href="https://leanpub.com/graphql-java/" external />
+            <Card title="JavaDoc" description="Full API reference" href="https://javadoc.io/doc/com.graphql-java/graphql-java/" external />
+          </div>
+        </section>
+
+        <section className={styles.section}>
+          <div className={styles.sectionLabel}>Federation</div>
+          <div className={styles.federationCard}>
+            <div className={styles.federationText}>
+              <div className={styles.federationTitle}>JVM-native GraphQL federation</div>
+              <div className={styles.federationBody}>
+                Andreas Marek, creator of GraphQL Java, is building feddi — a JVM-native federation gateway for any team running GraphQL on the JVM.
+              </div>
+            </div>
+            <a className={styles.federationBtn} href="https://feddi.dev" {...EXT_LINK}>
+              feddi.dev <ExtIcon />
+            </a>
+          </div>
+        </section>
+
+        <section className={styles.section}>
+          <div className={styles.sectionLabel}>Community</div>
+          <div className={styles.cardGrid}>
+            <Card title="GitHub Discussions" description="Ask questions, share ideas" href="https://github.com/graphql-java/graphql-java/discussions" external />
+            <Card title="Releases" description="Changelog and release notes" href="https://github.com/graphql-java/graphql-java/releases" external />
+          </div>
+        </section>
+      </main>
     </Layout>
   );
 }