refactor: redesign home page

Author: smncd

src/pages/index.module.css

@@ -1,32 +1,53 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
+.hero {
   position: relative;
+  padding: 4rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 1rem;
+  flex-grow: 1;
   overflow: hidden;
-
+  text-align: center;
   color: white;
   background-color: var(--w-brand-500);
+  
+  @media screen and (max-width: 996px) {
+    padding: 2rem;
+  }
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
+.heroTitle {
+  font-size: 4rem;
+  line-height: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media screen and (max-width: 996px) {
+    font-size: 3rem;
   }
 }
 
-.heroBannerTitle {
+.heroTitleLogo {
+  @media screen and (max-width: 540px) {
+    display: none;
+  }
+}
+
+.heroTitleBrand {
+  font-size: 2.5rem;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   gap: 1rem;
+
+  @media screen and (max-width: 996px) {
+    font-size: 2rem;
+  }
 }
 
-.buttons {
+.heroButtons {
   display: flex;
   align-items: center;
   justify-content: center;

src/pages/index.tsx

@@ -1,5 +1,4 @@
 import type {ReactNode} from 'react';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
@@ -10,27 +9,28 @@ import styles from './index.module.css';
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className={clsx('hero__title', styles.heroBannerTitle)}>
-          <svg width={50} height={50} viewBox='0 0 50 50'>
+    <header className={styles.hero}>
+      <Heading as="h1" className={styles.heroTitle}>
+        <span className={styles.heroTitleBrand}>
+          <svg className={styles.heroTitleLogo} width={50} height={50} viewBox='0 0 50 50'>
             <image href='img/logo.svg' width={50} height={50} />
           </svg>
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/sirosid">
-            SIROS ID
-          </Link>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/wwwallet">
-            wwWallet
-          </Link>
-        </div>
+          SIROS Foundation
+        </span>
+        <span>Developer Docs</span>
+      </Heading>
+      {siteConfig.tagline && <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>}
+      <div className={styles.heroButtons}>
+        <Link
+          className="button button--secondary button--lg"
+          to="/docs/sirosid">
+          SIROS ID
+        </Link>
+        <Link
+          className="button button--secondary button--lg"
+          to="/docs/wwwallet">
+          wwWallet
+        </Link>
       </div>
     </header>
   );