Rework landing page

docusaurus.config.ts

@@ -39,8 +39,8 @@ const docsConfigBase = {
 } satisfies DocsPlugin.Options;
 
 const config: Config = {
-  title: 'THEOplayer Documentation',
-  tagline: 'Your one-stop shop for everything THEOplayer.',
+  title: 'THEOdocs',
+  tagline: 'Discover the latest developer documentation and samples for THEOplayer, Open Video UI and THEOlive.',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
@@ -219,9 +219,9 @@ const config: Config = {
         }
       : undefined,
     navbar: {
-      title: 'Docs',
+      title: null,
       logo: {
-        alt: 'THEO',
+        alt: 'THEOdocs',
         src: 'img/logo.svg',
         srcDark: 'img/logo_dark.svg',
       },
@@ -253,44 +253,8 @@ const config: Config = {
       ],
     },
     footer: {
-      style: 'dark',
-      links: [
-        {
-          title: 'Docs',
-          items: [
-            {
-              label: 'THEOplayer',
-              to: '/theoplayer/',
-            },
-            {
-              label: 'Open Video UI',
-              to: '/open-video-ui/',
-            },
-            {
-              label: 'THEOlive',
-              href: 'https://developers.theo.live/',
-            },
-          ],
-        },
-        {
-          title: 'More',
-          items: [
-            {
-              label: 'theoplayer.com',
-              href: 'https://www.theoplayer.com/',
-            },
-            {
-              label: 'GitHub',
-              href: 'https://github.com/THEOplayer',
-            },
-            {
-              label: 'LinkedIn',
-              href: 'https://www.linkedin.com/company/theoplayer/',
-            },
-          ],
-        },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} THEO Technologies`,
+      style: 'light',
+      copyright: `Copyright © ${new Date().getFullYear()} <a href="https://www.theoplayer.com/">THEO Technologies</a>`,
     },
     prism: {
       theme: prismThemes.oneLight,

src/components/HomepageFeatures/index.tsx

@@ -24,7 +24,12 @@ const FeatureList: FeatureItem[] = [
         }}
       />
     ),
-    description: <>Empowering the world's leading media and entertainment companies to deliver cutting-edge video, efficiently and on any device.</>,
+    description: (
+      <>
+        Deploy cutting-edge video playback experiences, efficiently and on any device, including on web, mobile, smart TVs, set-top-boxes and gaming
+        consoles.
+      </>
+    ),
     to: '/theoplayer',
   },
   {
@@ -39,10 +44,7 @@ const FeatureList: FeatureItem[] = [
       />
     ),
     description: (
-      <>
-        A comprehensive library of open-source UI components, making it easier to build and customize your video player UI to match your branding
-        style.
-      </>
+      <>Easily build and customize your video player UI to match your branding style through a comprehensive library of open-source UI components.</>
     ),
     to: '/open-video-ui',
   },
@@ -57,22 +59,31 @@ const FeatureList: FeatureItem[] = [
         }}
       />
     ),
-    description: <>High-quality real-time video at scale for providers of sports betting, iGaming and interactive entertainment.</>,
+    description: (
+      <>
+        Stream real-time to any audience size with the best quality of experience, whether it’s for sports betting, iGaming or interactive
+        entertainment.
+      </>
+    ),
     to: 'https://developers.theo.live/',
   },
 ];
 
 function Feature({ title, Image, description, to }: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className={clsx('text--center', styles.featureHeading)}>
-        <Image className={styles.featureImage} title={title} />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <p>{description}</p>
-        <Link className="button button--secondary button--lg" to={to}>
-          Get started
-        </Link>
+    <div className={clsx('col col--4 margin-vert--md')}>
+      <div className={clsx('card padding--lg margin-horiz--sm', styles.featureCard)}>
+        <div className={clsx('card__header text--center', styles.featureHeading)}>
+          <Image className={styles.featureImage} alt={title} />
+        </div>
+        <div className="card__body text--center">
+          <p>{description}</p>
+        </div>
+        <div className="card__footer text--center">
+          <Link className="button button--secondary button--lg" to={to}>
+            Get started
+          </Link>
+        </div>
       </div>
     </div>
   );

src/components/HomepageFeatures/styles.module.css

@@ -5,6 +5,12 @@
   width: 100%;
 }
 
+.featureCard {
+  height: 100%;
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
 .featureHeading {
   line-height: 0;
 }

src/css/custom.css

@@ -47,3 +47,7 @@
   --ifm-hero-background-color: #445f6e;
   --ifm-hero-text-color: var(--ifm-font-color-base);
 }
+
+.footer a {
+  --ifm-link-color: var(--ifm-footer-link-color);
+}

src/pages/index.module.css

@@ -15,6 +15,12 @@
   background-size: contain;
 }
 
+.heroSubtitle {
+  max-width: calc(min(30em, 100vw));
+  margin: 0 auto;
+  text-wrap: balance;
+}
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 1.5rem;

src/pages/index.tsx

@@ -14,7 +14,7 @@ function HomepageHeader() {
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className={clsx("hero__subtitle", styles.heroSubtitle)}>{siteConfig.tagline}</p>
       </div>
     </header>
   );