From 734647090cb6f8882756b7cb830f7e7a0d5864c5 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Thu, 24 Aug 2023 11:07:33 +0200
Subject: [PATCH] Landing page improvements

---
 packages/web/docs/src/components/hero.tsx     |  10 +-
 .../web/docs/src/components/highlights.tsx    |  20 +-
 .../web/docs/src/components/landing-page.tsx  | 496 ++++++++++--------
 packages/web/docs/src/components/stats.tsx    |   6 +-
 4 files changed, 299 insertions(+), 233 deletions(-)

diff --git a/packages/web/docs/src/components/hero.tsx b/packages/web/docs/src/components/hero.tsx
index 47cbb8e73..0092d5178 100644
--- a/packages/web/docs/src/components/hero.tsx
+++ b/packages/web/docs/src/components/hero.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 export function HeroTitle(props: { children: ReactNode }) {
   return (
-    <h1 className="mx-auto max-w-screen-lg bg-gradient-to-r from-yellow-500 via-orange-400 to-yellow-500 bg-clip-text text-center text-5xl font-semibold text-transparent dark:from-yellow-400 dark:to-orange-500 sm:text-5xl lg:text-6xl">
+    <h1 className="mx-auto max-w-screen-lg bg-gradient-to-r from-yellow-500 via-orange-400 to-yellow-500 bg-clip-text text-center text-5xl font-semibold text-transparent sm:text-5xl lg:text-6xl">
       {props.children}
     </h1>
   );
@@ -10,7 +10,7 @@ export function HeroTitle(props: { children: ReactNode }) {
 
 export function HeroSubtitle(props: { children: ReactNode }) {
   return (
-    <p className="mx-auto mt-6 max-w-screen-sm text-center text-lg text-gray-700 dark:text-gray-200 font-light">
+    <p className="mx-auto mt-6 max-w-screen-sm text-center text-lg text-gray-700 font-light">
       {props.children}
     </p>
   );
@@ -26,8 +26,10 @@ export function HeroLinks(props: { children: ReactNode }) {
 
 export function Hero(props: { children: ReactNode }) {
   return (
-    <div className="w-full relative">
-      <div className="my-6 py-20 px-2 sm:py-24 lg:py-32 relative">{props.children}</div>
+    <div className="w-full relative overflow-hidden bg-white">
+      <div className="my-6 py-20 px-2 sm:py-24 lg:py-32">
+        <div className="z-10 relative">{props.children}</div>
+      </div>
     </div>
   );
 }
diff --git a/packages/web/docs/src/components/highlights.tsx b/packages/web/docs/src/components/highlights.tsx
index 551ea647c..321d7b533 100644
--- a/packages/web/docs/src/components/highlights.tsx
+++ b/packages/web/docs/src/components/highlights.tsx
@@ -1,20 +1,12 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
-import clsx from 'clsx';
 import { BookIcon } from './book-icon';
 
-const classes = {
-  root: clsx('flex flex-1 flex-row gap-6 md:flex-col lg:flex-row'),
-  content: clsx('flex flex-col text-black dark:text-white'),
-  title: clsx('text-xl font-semibold'),
-  description: clsx('text-gray-600 dark:text-gray-400'),
-};
-
 export function HighlightTextLink(props: { href: string; children: ReactNode }) {
   return (
     <Link
       href={props.href}
-      className="underline underline-offset-2 transition text-yellow-500 hover:text-yellow-500/75 dark:text-yellow-600 dark:hover:text-yellow-500/100"
+      className="underline underline-offset-2 transition text-yellow-500 hover:text-yellow-500/75 "
     >
       {props.children}
     </Link>
@@ -32,11 +24,11 @@ export function Highlights(props: {
   return (
     <div className="container mx-auto box-border flex flex-col justify-between gap-12 md:flex-row px-6 py-12">
       {props.items.map(({ title, description, icon, documentationLink }, i) => (
-        <div className={classes.root} key={i}>
-          <div className="h-16 w-16 shrink-0 text-yellow-500">{icon}</div>
-          <div className={classes.content}>
-            <h3 className={classes.title}>{title}</h3>
-            <p className={classes.description}>{description}</p>
+        <div className="flex flex-1 flex-row gap-6 md:flex-col lg:flex-row" key={i}>
+          <div className="lg:h-16 lg:w-16 w-12 h-12 shrink-0 text-yellow-500">{icon}</div>
+          <div className="flex flex-col text-black gap-y-2">
+            <h3 className="lg:text-xl text-lg font-semibold">{title}</h3>
+            <p className="text-gray-600">{description}</p>
             <Link
               href={documentationLink}
               className="mt-4 group inline-flex font-semibold items-center transition hover:underline underline-offset-8 gap-x-2 text-yellow-500"
diff --git a/packages/web/docs/src/components/landing-page.tsx b/packages/web/docs/src/components/landing-page.tsx
index e77a934d9..48296e7b2 100644
--- a/packages/web/docs/src/components/landing-page.tsx
+++ b/packages/web/docs/src/components/landing-page.tsx
@@ -20,13 +20,12 @@ import registryVersionControlSystemImage from '../../public/features/registry/ve
 const classes = {
   link: cn(
     'inline-block rounded-lg bg-gray-100 px-6 py-3 font-medium text-gray-600 shadow-sm hover:bg-gray-200',
-    'dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
   ),
-  feature: cn('w-full', 'even:bg-gray-50 even:dark:bg-gray-900', 'odd:bg-white odd:dark:bg-black'),
+  feature: cn('w-full', 'even:bg-gray-50', 'odd:bg-white'),
   root: cn('flex flex-1 flex-row gap-6 md:flex-col lg:flex-row'),
-  content: cn('flex flex-col text-black dark:text-white'),
+  content: cn('flex flex-col text-black'),
   title: cn('text-xl font-semibold'),
-  description: cn('text-gray-600 dark:text-gray-400'),
+  description: cn('text-gray-600'),
 };
 
 const gradients: [string, string][] = [
@@ -103,16 +102,30 @@ function Highlight(
       {props.documentationLink ? null : (
         <div
           className={cn(
-            'absolute inset-0 rounded-lg',
-            'active' in props && props.active ? 'opacity-20' : 'opacity-0 hover:opacity-10',
+            'absolute inset-0 lg:border-l-4 lg:border-b-0 border-b-2',
+            'active' in props && props.active ? 'opacity-100' : 'opacity-0 hover:opacity-50',
           )}
           style={{
-            backgroundColor: props.startColor,
+            borderColor: props.startColor,
           }}
         />
       )}
-      <div className={classes.content}>
-        <h3 className={cn(classes.title, 'text-lg')}>{props.title}</h3>
+      <div
+        className={cn(
+          classes.content,
+          'lg:w-auto w-full',
+          'onClick' in props ? 'gap-y-2' : 'gap-y-4',
+        )}
+      >
+        <h3
+          className={cn(
+            classes.title,
+            'lg:text-lg text-base',
+            'onClick' in props ? 'text-center lg:text-left' : '',
+          )}
+        >
+          {props.title}
+        </h3>
         <p
           className={cn(
             classes.description,
@@ -161,92 +174,112 @@ function Feature(props: {
 
   return (
     <>
-      <div className={cn(classes.feature, 'relative overflow-hidden pb-28 pt-20 sm:py-32')}>
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
-          <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
-            <h2
-              className="text-4xl font-semibold leading-normal tracking-tight bg-clip-text text-transparent"
-              style={{ backgroundImage: `linear-gradient(-70deg, ${end}, ${start})` }}
-            >
-              {title}
-            </h2>
-            <div className="mt-6 text-lg tracking-tight text-gray-600 dark:text-gray-400">
-              {description}
+      <div className={cn(classes.feature, 'relative overflow-hidden')}>
+        <div>
+          <div
+            className="w-full absolute h-[1px] top-0 opacity-25"
+            style={{
+              backgroundImage: `linear-gradient(90deg, ${end}, ${start})`,
+            }}
+          />
+          <div
+            className="absolute opacity-[0.15] w-[60vw] h-[255px] -left-[200px] -top-[200px] blur-3xl"
+            style={{
+              backgroundImage: `linear-gradient(180deg, ${end}, ${start})`,
+            }}
+          />
+          <div
+            className="absolute opacity-[0.15] w-[60vw] h-[255px] -right-[200px] -top-[200px] blur-3xl"
+            style={{
+              backgroundImage: `linear-gradient(180deg, ${start}, ${end})`,
+            }}
+          />
+        </div>
+        <div className="pb-28 pt-20 sm:py-32">
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
+            <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
+              <h2
+                className="text-4xl font-semibold leading-normal tracking-tight bg-clip-text text-transparent"
+                style={{ backgroundImage: `linear-gradient(-70deg, ${end}, ${start})` }}
+              >
+                {title}
+              </h2>
+              <div className="mt-6 text-lg tracking-tight text-gray-600">{description}</div>
+              {documentationLink ? (
+                <div className="pt-12">
+                  <Link
+                    href={documentationLink}
+                    className="group inline-flex font-semibold items-center transition hover:underline underline-offset-8 gap-x-2"
+                    style={{
+                      color: start,
+                    }}
+                  >
+                    <div>
+                      <BookIcon size={16} />
+                    </div>
+                    <div>Learn more</div>
+                  </Link>
+                </div>
+              ) : null}
             </div>
-            {documentationLink ? (
-              <div className="pt-12">
-                <Link
-                  href={documentationLink}
-                  className="group inline-flex font-semibold items-center transition hover:underline underline-offset-8 gap-x-2"
-                  style={{
-                    color: start,
-                  }}
-                >
-                  <div>
-                    <BookIcon size={16} />
-                  </div>
-                  <div>Learn more</div>
-                </Link>
+            {imagelessHighlights ? (
+              <div className="flex flex-col lg:flex-row justify-center mt-16 pt-10 sm:gap-y-6 md:mt-20 lg:pt-0">
+                {imagelessHighlights.map((highlight, i) => (
+                  <Highlight {...highlight} endColor={end} startColor={start} key={i} />
+                ))}
               </div>
             ) : null}
-          </div>
-          {imagelessHighlights ? (
-            <div className="flex flex-col lg:flex-row justify-center mt-16 pt-10 sm:gap-y-6 md:mt-20 lg:pt-0">
-              {imagelessHighlights.map((highlight, i) => (
-                <Highlight {...highlight} endColor={end} startColor={start} key={i} />
-              ))}
-            </div>
-          ) : null}
-          {highlights ? (
-            <div className="mt-0 lg:mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0">
-              <div className="flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
-                <div>
-                  {highlights ? (
-                    <div className="flex lg:flex-col lg:gap-y-12 gap-x-0 flex-row">
-                      {highlights.map((highlight, i) => (
-                        <Highlight
-                          {...highlight}
-                          endColor={end}
-                          startColor={start}
-                          key={i}
-                          index={i}
-                          active={activeHighlight === i}
-                          onClick={setActiveHighlight}
-                        />
-                      ))}
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-              <div className="hidden lg:block" />
-              <div className="lg:col-span-6">
-                {highlights.map((highlight, i) => (
-                  <div key={i} className={cn(activeHighlight === i ? 'block' : 'hidden')}>
-                    <div className="relative sm:px-6 lg:hidden">
-                      <p className="relative mx-auto max-w-2xl text-base sm:text-center">
-                        {highlight.description}
-                      </p>
-                    </div>
-                    <div
-                      className="mt-10 w-[45rem] sm:w-auto lg:mt-0 lg:w-[67.8125rem] rounded-lg"
-                      style={{ backgroundImage: `linear-gradient(-70deg, ${end}, ${start})` }}
-                    >
-                      <div className="lg:p-12 p-4">
-                        <div className="rounded-xl overflow-hidden">
-                          <Image
-                            {...highlight.image}
-                            className="w-full"
-                            style={{ color: 'transparent' }}
-                            alt={title}
+            {highlights ? (
+              <div className="mt-0 lg:mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0">
+                <div className="w-full lg:w-auto flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
+                  <div className="w-full">
+                    {highlights ? (
+                      <div className="flex lg:flex-col lg:gap-y-12 gap-x-0 flex-row justify-evenly">
+                        {highlights.map((highlight, i) => (
+                          <Highlight
+                            {...highlight}
+                            endColor={end}
+                            startColor={start}
+                            key={i}
+                            index={i}
+                            active={activeHighlight === i}
+                            onClick={setActiveHighlight}
                           />
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+                <div className="hidden lg:block" />
+                <div className="lg:col-span-6">
+                  {highlights.map((highlight, i) => (
+                    <div key={i} className={cn(activeHighlight === i ? 'block' : 'hidden')}>
+                      <div className="relative sm:px-6 lg:hidden">
+                        <p className="relative mx-auto max-w-2xl text-base sm:text-center">
+                          {highlight.description}
+                        </p>
+                      </div>
+                      <div
+                        className="mt-10 w-[45rem] sm:w-auto lg:mt-0 lg:w-[67.8125rem] rounded-lg"
+                        style={{ backgroundImage: `linear-gradient(-70deg, ${end}, ${start})` }}
+                      >
+                        <div className="lg:p-12 p-4">
+                          <div className="rounded-xl overflow-hidden">
+                            <Image
+                              {...highlight.image}
+                              className="w-full"
+                              style={{ color: 'transparent' }}
+                              alt={title}
+                            />
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
-            </div>
-          ) : null}
+            ) : null}
+          </div>
         </div>
       </div>
     </>
@@ -270,7 +303,6 @@ export function IndexPage(): ReactElement {
                 className={cn(
                   'inline-block rounded-lg px-6 py-3 font-medium text-white shadow-sm',
                   'bg-yellow-500 hover:bg-yellow-500/75',
-                  'dark:bg-yellow-600 dark:hover:bg-yellow-500/100',
                 )}
               >
                 Start for free
@@ -287,7 +319,10 @@ export function IndexPage(): ReactElement {
             </>
           </HeroLinks>
         </Hero>
-        <div className="even:bg-gray-50 even:dark:bg-gray-900">
+        <div className="even:bg-gray-50 relative">
+          <div>
+            <div className="w-full absolute h-[1px] top-0 opacity-25 bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300" />
+          </div>
           <StatsList>
             <StatsItem label="Happy users" value={2.9} suffix="K" decimal />
             <StatsItem label="Registered Schemas" value={120} suffix="K" />
@@ -327,48 +362,55 @@ export function IndexPage(): ReactElement {
             ]}
             gradient={0}
           />
-          <div className={cn(classes.feature, 'py-24')}>
-            <h2 className="text-3xl font-semibold leading-normal tracking-tight text-center mb-12">
-              Perfect fit for your GraphQL Gateway
-            </h2>
-            <Highlights
-              items={[
-                {
-                  title: 'Manage your Gateway',
-                  description: (
-                    <>
-                      Connect to{' '}
-                      <HighlightTextLink href="/docs/get-started/apollo-federation">
-                        Apollo Federation
-                      </HighlightTextLink>
-                      ,{' '}
-                      <HighlightTextLink href="/docs/integrations/graphql-mesh">
-                        GraphQL Mesh
-                      </HighlightTextLink>
-                      ,{' '}
-                      <HighlightTextLink href="/docs/integrations/schema-stitching">
-                        Stitching
-                      </HighlightTextLink>{' '}
-                      and more.
-                    </>
-                  ),
-                  icon: <FiServer strokeWidth={1} className="h-full w-full" />,
-                  documentationLink: '/docs/get-started/apollo-federation',
-                },
-                {
-                  title: 'Global Edge Network',
-                  description: 'Access the registry from any place on earth within milliseconds.',
-                  icon: <FiGlobe strokeWidth={1} className="h-full w-full" />,
-                  documentationLink: '/docs/features/high-availability-cdn',
-                },
-                {
-                  title: 'Apollo GraphOS alternative',
-                  description: 'GraphQL Hive is a drop-in replacement for Apollo GraphOS Studio.',
-                  icon: <FiPackage strokeWidth={1} className="h-full w-full" />,
-                  documentationLink: '/docs/get-started/apollo-federation',
-                },
-              ]}
-            />
+          <div className={cn(classes.feature, 'relative overflow-hidden')}>
+            <div>
+              <div className="w-full absolute h-[1px] top-0 opacity-25 bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300" />
+              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] -left-[200px] -top-[200px] blur-3xl bg-gradient-to-b from-gray-50 to-gray-300" />
+              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] -right-[200px] -top-[200px] blur-3xl bg-gradient-to-b from-gray-300 to-gray-50" />
+            </div>
+            <div className="py-24">
+              <h2 className="text-3xl font-semibold leading-normal tracking-tight text-center mb-12 text-black">
+                Perfect fit for your GraphQL Gateway
+              </h2>
+              <Highlights
+                items={[
+                  {
+                    title: 'Manage your Gateway',
+                    description: (
+                      <>
+                        Connect to{' '}
+                        <HighlightTextLink href="/docs/get-started/apollo-federation">
+                          Apollo Federation
+                        </HighlightTextLink>
+                        ,{' '}
+                        <HighlightTextLink href="/docs/integrations/graphql-mesh">
+                          GraphQL Mesh
+                        </HighlightTextLink>
+                        ,{' '}
+                        <HighlightTextLink href="/docs/integrations/schema-stitching">
+                          Stitching
+                        </HighlightTextLink>{' '}
+                        and more.
+                      </>
+                    ),
+                    icon: <FiServer strokeWidth={1} className="h-full w-full" />,
+                    documentationLink: '/docs/get-started/apollo-federation',
+                  },
+                  {
+                    title: 'Global Edge Network',
+                    description: 'Access the registry from any place on earth within milliseconds.',
+                    icon: <FiGlobe strokeWidth={1} className="h-full w-full" />,
+                    documentationLink: '/docs/features/high-availability-cdn',
+                  },
+                  {
+                    title: 'Apollo GraphOS alternative',
+                    description: 'GraphQL Hive is a drop-in replacement for Apollo GraphOS Studio.',
+                    icon: <FiPackage strokeWidth={1} className="h-full w-full" />,
+                    documentationLink: '/docs/get-started/apollo-federation',
+                  },
+                ]}
+              />
+            </div>
           </div>
           <Feature
             title="GraphQL Observability"
@@ -425,93 +467,125 @@ export function IndexPage(): ReactElement {
             ]}
           />
           <div
-            className={cn('py-24')}
+            className="relative overflow-hidden"
             style={{
               backgroundImage: `linear-gradient(-70deg, ${gradients[4][1]}, ${gradients[4][0]})`,
             }}
           >
-            <div className="mx-auto max-w-lg text-center text-white">
-              <h2 className="text-3xl font-semibold leading-normal tracking-tight">
-                Get started today
-              </h2>
-              <p className="mt-4 text-lg tracking-tight">
-                Start with a free Hobby plan that fits perfectly most side projects or try our Pro
-                plan with 30 days trial period.
-              </p>
-              <a
-                href="https://app.graphql-hive.com"
-                className={cn(
-                  'text-sm rounded-md px-6 py-3 mt-12 font-medium text-black shadow-sm',
-                  'bg-white hover:bg-blue-50',
-                  'inline-flex flex-row items-center gap-2',
-                )}
-              >
-                <FiLogIn /> Enter Hive
-              </a>
+            <div>
+              <div className="w-full absolute h-[1px] top-0 opacity-25 bg-blue-900" />
+            </div>
+            <div className="py-24">
+              <div className="mx-auto max-w-lg text-center text-white">
+                <h2 className="text-3xl font-semibold leading-normal tracking-tight">
+                  Get started today
+                </h2>
+                <p className="mt-4 text-lg tracking-tight">
+                  Start with a free Hobby plan that fits perfectly most side projects or try our Pro
+                  plan with 30 days trial period.
+                </p>
+                <a
+                  href="https://app.graphql-hive.com"
+                  className={cn(
+                    'text-sm rounded-md px-6 py-3 mt-12 font-medium text-black shadow-sm',
+                    'bg-white hover:bg-blue-50',
+                    'inline-flex flex-row items-center gap-2',
+                  )}
+                >
+                  <FiLogIn /> Enter Hive
+                </a>
+              </div>
             </div>
           </div>
-          <div className={cn(classes.feature, 'py-24')}>
-            <h2 className="text-3xl font-semibold leading-normal tracking-tight text-center mb-12">
-              Fits your infrastructure
-            </h2>
-            <Highlights
-              items={[
-                {
-                  title: 'GitHub Integration',
-                  description: 'Our CLI integrates smoothly with GitHub Actions / repositories.',
-                  icon: <FiGithub strokeWidth={1} className="h-full w-full" />,
-                  documentationLink: '/docs/integrations/ci-cd#github-check-suites',
-                },
-                {
-                  title: 'Works with every CI/CD',
-                  description: 'Connect GraphQL Hive CLI to CI/CD of your choice.',
-                  icon: <FiTruck strokeWidth={1} className="h-full w-full" />,
-                  documentationLink: '/docs/integrations/ci-cd',
-                },
-                {
-                  title: 'On-premise or Cloud',
-                  description:
-                    'GraphQL Hive is MIT licensed, you can host it on your own infrastructure.',
-                  icon: <FiServer strokeWidth={1} className="h-full w-full" />,
-                  documentationLink: '/docs/self-hosting/get-started',
-                },
-              ]}
-            />
+          <div className={cn(classes.feature, 'relative overflow-hidden')}>
+            <div>
+              <div className="w-full absolute h-[1px] top-0 opacity-25 bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300" />
+              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] -left-[200px] -top-[200px] blur-3xl bg-gradient-to-b from-gray-600 to-gray-900" />
+              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] -right-[200px] -top-[200px] blur-3xl bg-gradient-to-b from-gray-900 to-gray-600" />
+            </div>
+            <div className="py-24">
+              <h2 className="text-3xl font-semibold leading-normal tracking-tight text-center mb-12 text-black">
+                Fits your infrastructure
+              </h2>
+              <Highlights
+                items={[
+                  {
+                    title: 'GitHub Integration',
+                    description: 'Our CLI integrates smoothly with GitHub Actions / repositories.',
+                    icon: <FiGithub strokeWidth={1} className="h-full w-full" />,
+                    documentationLink: '/docs/integrations/ci-cd#github-check-suites',
+                  },
+                  {
+                    title: 'Works with every CI/CD',
+                    description: 'Connect GraphQL Hive CLI to CI/CD of your choice.',
+                    icon: <FiTruck strokeWidth={1} className="h-full w-full" />,
+                    documentationLink: '/docs/integrations/ci-cd',
+                  },
+                  {
+                    title: 'On-premise or Cloud',
+                    description:
+                      'GraphQL Hive is MIT licensed, you can host it on your own infrastructure.',
+                    icon: <FiServer strokeWidth={1} className="h-full w-full" />,
+                    documentationLink: '/docs/self-hosting/get-started',
+                  },
+                ]}
+              />
+            </div>
           </div>
-          <div className={cn(classes.feature, 'py-24')}>
-            <div className="container mx-auto box-border flex flex-col gap-y-24 px-6">
-              <div className="text-center">
-                <h2
-                  className="mb-6 bg-clip-text text-5xl font-semibold leading-normal text-transparent dark:text-transparent"
-                  style={{
-                    backgroundImage: `linear-gradient(-70deg, ${gradients[3][1]}, ${gradients[3][0]})`,
-                  }}
-                >
-                  Open-Source
-                </h2>
-                <p className="text-lg leading-7 text-gray-600 dark:text-gray-400">
-                  Built entirely in public.
-                </p>
-              </div>
-              <div className="mx-auto box-border grid max-w-screen-lg grid-cols-2 gap-12 px-6">
-                {[
-                  {
-                    title: 'Public roadmap',
-                    description: 'Influence the future of GraphQL Hive.',
-                  },
-                  {
-                    title: 'Cloud and Self-Hosted',
-                    description: 'MIT licensed, host it on your own infrastructure.',
-                  },
-                  {
-                    title: 'Available for free',
-                    description: 'Free Hobby plan that fits perfectly for most side projects.',
-                  },
-                  {
-                    title: 'Community',
-                    description: 'Implement your own features with our help.',
-                  },
-                ].map(renderFeatures)}
+          <div className={cn(classes.feature, 'relative overflow-hidden')}>
+            <div>
+              <div
+                className="w-full absolute h-[1px] top-0 opacity-25"
+                style={{
+                  backgroundImage: `linear-gradient(90deg, ${gradients[3][1]}, ${gradients[3][0]})`,
+                }}
+              />
+              <div
+                className="absolute opacity-[0.15] w-[60vw] h-[255px] -left-[200px] -top-[200px] blur-3xl"
+                style={{
+                  backgroundImage: `linear-gradient(180deg, ${gradients[3][0]}, ${gradients[3][1]})`,
+                }}
+              />
+              <div
+                className="absolute opacity-[0.15] w-[60vw] h-[255px] -right-[200px] -top-[200px] blur-3xl"
+                style={{
+                  backgroundImage: `linear-gradient(180deg, ${gradients[3][1]}, ${gradients[3][0]})`,
+                }}
+              />
+            </div>
+            <div className="py-24">
+              <div className="container mx-auto box-border flex flex-col gap-y-24 px-6">
+                <div className="text-center">
+                  <h2
+                    className="mb-6 bg-clip-text text-5xl font-semibold leading-normal text-transparent"
+                    style={{
+                      backgroundImage: `linear-gradient(-70deg, ${gradients[3][1]}, ${gradients[3][0]})`,
+                    }}
+                  >
+                    Open-Source
+                  </h2>
+                  <p className="text-lg leading-7 text-gray-600">Built entirely in public.</p>
+                </div>
+                <div className="mx-auto box-border grid max-w-screen-lg grid-cols-2 gap-12 px-6">
+                  {[
+                    {
+                      title: 'Public roadmap',
+                      description: 'Influence the future of GraphQL Hive.',
+                    },
+                    {
+                      title: 'Cloud and Self-Hosted',
+                      description: 'MIT licensed, host it on your own infrastructure.',
+                    },
+                    {
+                      title: 'Available for free',
+                      description: 'Free Hobby plan that fits perfectly for most side projects.',
+                    },
+                    {
+                      title: 'Community',
+                      description: 'Implement your own features with our help.',
+                    },
+                  ].map(renderFeatures)}
+                </div>
               </div>
             </div>
           </div>
diff --git a/packages/web/docs/src/components/stats.tsx b/packages/web/docs/src/components/stats.tsx
index a2cded36b..78066b437 100644
--- a/packages/web/docs/src/components/stats.tsx
+++ b/packages/web/docs/src/components/stats.tsx
@@ -9,7 +9,7 @@ export function StatsItem(props: {
 }) {
   return (
     <div>
-      <div className="font-bold text-5xl text-center">
+      <div className="font-bold text-5xl text-center text-black">
         <CountUp
           start={0}
           end={props.value}
@@ -22,9 +22,7 @@ export function StatsItem(props: {
         />
         {props.suffix}+
       </div>
-      <div className="text-gray-600 dark:text-gray-400 uppercase font-semibold text-center">
-        {props.label}
-      </div>
+      <div className="text-gray-600 uppercase font-semibold text-center">{props.label}</div>
     </div>
   );
 }