feat: ✨ add authors

apps/cookbook/src/components/logos/angular.tsx

@@ -1,10 +1,10 @@
-export function Angular() {
+export function Angular({ width = 32 }: { width?: number }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 223 236"
-      width="32"
+      width={width}
     >
       <g clipPath="url(#a)">
         <path

apps/cookbook/src/components/logos/nx.tsx

@@ -1,12 +1,12 @@
-export function Nx() {
+export function Nx({ width = 32 }: { width?: number }) {
   return (
     <svg
       role="img"
       aria-label="Nx"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       fill="#012f55"
-      width="32"
+      width={width}
     >
       <title>Nx</title>
       <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z"></path>

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

@@ -83,3 +83,36 @@
   color: var(--marmicode-primary);
   margin: 0;
 }
+
+.section h2 {
+  color: var(--marmicode-primary);
+  text-align: center;
+  font-family: Roboto;
+  font-size: 2rem;
+  font-weight: 500;
+  letter-spacing: 10px;
+  margin: 2rem;
+}
+
+.authorsSection {
+  background-color: #f5edfd;
+}
+
+.authorsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 2rem;
+}
+
+.authorCard {
+  min-width: 250px;
+  max-width: 300px;
+  padding: 20px;
+}
+
+.authorSubtitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

apps/cookbook/src/pages/index.tsx

@@ -19,6 +19,7 @@ export default function Home(): JSX.Element {
       }
     >
       <HomepageHeader />
+      <Authors />
     </Layout>
   );
 }
@@ -87,3 +88,69 @@ function Buttons() {
     </div>
   );
 }
+
+function Authors() {
+  const author = {
+    name: 'Younes Jaaidi',
+    subtitles: [
+      <>
+        <span role="img" aria-label="Cook">
+          👨🏻‍🍳
+        </span>
+        <span>Software Cook</span>
+      </>,
+      <>
+        <Angular width={15} />{' '}
+        <Link href="https://g.dev/younes" target="about:blank">
+          Angular GDE
+        </Link>
+      </>,
+      <>
+        <Nx width={15} />{' '}
+        <Link
+          href="https://nx.dev/community#:~:text=Younes%20Jaaidi"
+          target="about:blank"
+        >
+          Nx Champion
+        </Link>
+      </>,
+      <>
+        <span role="img" aria-label="Sailboat">
+          ⛵️
+        </span>
+        <span>Mediocre Sailor</span>
+      </>,
+    ],
+  };
+
+  return (
+    <section className={clsx(styles.section, styles.authorsSection)}>
+      <h2>AUTHORS</h2>
+      <section className={styles.authorsContainer}>
+        <article className={clsx('card shadow--lt', styles.authorCard)}>
+          <div className="avatar avatar--vertical margin-bottom--sm">
+            <div className="avatar__photo avatar__photo--xl">
+              <img
+                src="/img/younes.jpg"
+                alt="Younes Jaaidi"
+                width="100"
+                height="100"
+              />
+            </div>
+            <div className="avatar__intro padding-top--sm">
+              <div className="avatar__name">{author.name}</div>
+              {author.subtitles.map((subtitle, index) => (
+                <small
+                  className={clsx('avatar__subtitle', styles.authorSubtitle)}
+                  key={index}
+                >
+                  {subtitle}
+                </small>
+              ))}
+            </div>
+          </div>
+        </article>
+      </section>
+    </section>
+  );
+}