feat: ✨ add tagline to landing

Author: yjaaidi

apps/cookbook/docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
   title: 'Marmicode Cookbook',
-  tagline: 'Opinionated cookbook to build apps that scale',
+  tagline: 'Ingredients & Recipes for Cooking Delicious Apps',
   favicon: 'img/favicon.png',
 
   url: process.env.DEPLOY_URL || 'https://cookbook.marmicode.io',

apps/cookbook/src/pages/index.module.css

@@ -5,7 +5,9 @@
 
 .heroBanner {
   background: #eed9ff;
-  padding: 3rem 0;
+  color: var(--marmicode-primary);
+  font-family: Roboto;
+  padding: 2rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -15,10 +17,7 @@
   object-fit: cover;
 }
 
-.heroSubtitle,
-.heroSubtitleSecondary {
-  color: var(--marmicode-primary);
-  font-family: Roboto;
+.heroSubtitle {
   font-size: 30px;
   letter-spacing: 10px;
   line-height: 45px;
@@ -28,6 +27,17 @@
 .heroSubtitleSecondary {
   font-size: 40px;
   letter-spacing: 6px;
+  line-height: 45px;
+}
+
+.heroTagline {
+  font-size: 20px;
+  letter-spacing: 2px;
+  line-height: 30px;
+  margin: auto;
+  max-width: 270px;
+  text-align: justify;
+  text-align-last: justify;
 }
 
 @media screen and (max-width: 996px) {
@@ -38,7 +48,8 @@
 
 .buttons {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  flex-direction: row;
   justify-content: center;
+  margin: 2rem 0;
 }

apps/cookbook/src/pages/index.tsx

@@ -1,8 +1,10 @@
+import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Layout from '@theme/Layout';
 
 import styles from './index.module.css';
+import clsx from 'clsx';
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
@@ -17,6 +19,7 @@ export default function Home(): JSX.Element {
 }
 
 function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={styles.heroBanner}>
       <div className="container">
@@ -26,8 +29,19 @@ function HomepageHeader() {
           src={useBaseUrl('/img/hero.png')}
           height="300"
         />
-        <p className={styles.heroSubtitle}>MARMICODE</p>
-        <p className={styles.heroSubtitleSecondary}>COOKBOOK</p>
+        <p className={clsx(styles.heroSubtitle)}>MARMICODE</p>
+        <p className={clsx(styles.heroSubtitle, styles.heroSubtitleSecondary)}>
+          COOKBOOK
+        </p>
+        <p className={styles.heroTagline}>{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link className="button button--lg" to="/angular/testing">
+            Angular Testing
+          </Link>
+          <Link className="button button--lg" to="/nx/intro">
+            Nx
+          </Link>
+        </div>
       </div>
     </header>
   );