feat: ✨ improve landing layout

Author: yjaaidi

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

@@ -3,6 +3,23 @@
  * and scoped locally.
  */
 
+.wrapper {
+  background-color: #eed9ff;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+@media screen and (max-width: 996px) {
+  .container {
+    flex-direction: column;
+  }
+}
+
 .heroBanner {
   background: #eed9ff;
   color: var(--marmicode-primary);
@@ -50,19 +67,19 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin: 2rem auto;
+  margin: 2rem 0;
   width: 250px;
 }
 
-.link {
+.button {
   display: flex;
   align-items: center;
   height: 50px;
   padding: 5px 30px;
   gap: 1rem;
 }
 
-.link p {
+.button p {
   color: var(--marmicode-primary);
   margin: 0;
 }

apps/cookbook/src/pages/index.tsx

@@ -12,6 +12,7 @@ export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
+      wrapperClassName={styles.wrapper}
       title={siteConfig.tagline}
       description={
         'Ingredients & Recipes for Cooking Delicious Apps with Angular & Nx'
@@ -23,32 +24,38 @@ export default function Home(): JSX.Element {
 }
 
 function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={styles.heroBanner}>
-      <div className="container">
-        <img
-          alt="Marmicode Pot"
-          className={styles.heroLogo}
-          src={useBaseUrl('/img/hero.png')}
-          height="300"
-        />
-        <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}>
-          <Links />
-        </div>
+      <div className={clsx('container', styles.container)}>
+        <Hero />
+        <Buttons />
       </div>
     </header>
   );
 }
 
-function Links() {
+function Hero() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <section>
+      <img
+        alt="Marmicode Pot"
+        className={styles.heroLogo}
+        src={useBaseUrl('/img/hero.png')}
+        height="300"
+      />
+      <p className={clsx(styles.heroSubtitle)}>MARMICODE</p>
+      <p className={clsx(styles.heroSubtitle, styles.heroSubtitleSecondary)}>
+        COOKBOOK
+      </p>
+      <p className={styles.heroTagline}>{siteConfig.tagline}</p>
+    </section>
+  );
+}
+
+function Buttons() {
   return (
-    <>
+    <div className={styles.buttons}>
       {[
         {
           href: '/angular/why-vitest',
@@ -70,13 +77,13 @@ function Links() {
         },
       ].map(({ href, content }) => (
         <Link
-          className={clsx('button button--secondary button--lg', styles.link)}
+          className={clsx('button button--secondary button--lg', styles.button)}
           key={href}
           to={href}
         >
           {content}
         </Link>
       ))}
-    </>
+    </div>
   );
 }