Handbook banner

app/page.tsx

@@ -1,3 +1,5 @@
+import { Auth0Banner } from "features/common/components/auth0-banner/auth0-banner.component";
+import { HandbookBanner } from "features/common/components/handbook-banner/handbook-banner.component";
 import { HeroJumbotronComponent } from "features/common/components/hero-jumbotron/hero-jumbotron.component";
 import { DebuggerSteps } from "features/debugger/components/steps/debugger-steps.component";
 
@@ -7,6 +9,8 @@ export default function Page() {
     <>
       <HeroJumbotronComponent />
       <DebuggerSteps />
+      <HandbookBanner />
+      <Auth0Banner />
     </>
   );
 }

src/features/common/components/auth0-banner/auth0-banner.component.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import { LinkButton } from "../button/button.component";
+import styles from "./auth0-banner.module.scss";
+
+export const Auth0Banner = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <div className={styles.content}>
+          <div className={styles.left_container}>
+            <p className={styles.title}>
+              The OIDC playground is brought to you by Auth0
+            </p>
+            <p className={styles.subtitle}>
+              A cloud service, APIs and tools that eliminate the friction of identity for your applications and APIs.
+            </p>
+            <div className={styles.button_container}>
+              <LinkButton
+                label="Try Auth0 for free"
+                href="https://auth0.com/signup/?utm_source=openidconnect.net&utm_medium=microsites&utm_campaign=devn_signup"
+                showIcon={false}
+              />
+            </div>
+          </div>
+          <div className={styles.right_container}>
+            <div className={styles.background_layout}></div>
+            <Image
+              src={"/images/auth0-banner.svg"}
+              width={365}
+              height={425}
+              alt="openid connect handbook"
+              className={styles.banner_image}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/common/components/auth0-banner/auth0-banner.module.scss

@@ -0,0 +1,90 @@
+@use "libs/theme/styles/variables" as *;
+@use "libs/theme/styles/mixins" as *;
+
+.container {
+  @include Container;
+  font-family: Aeonik;
+
+}
+
+.wrapper {
+  @include ExtendedGrid;
+}
+
+.content {
+  margin: 4rem 2rem 20px;
+  color: var(--color_fg_link);
+  justify-content: space-between;  
+  align-items: center;
+  border-radius: 24px;
+  border: 0.5px solid var(--color_border_light);
+  background: var(--color_bg_layer_alternate);
+
+  @media #{$breakpoint-dimension-sm} {
+    display: flex;
+    flex-direction: row;
+  }
+
+}
+
+.left_container {
+    padding: 5rem 2.5rem 5rem 2.5rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    @media #{$breakpoint-dimension-sm} {
+       align-items: flex-start;
+    }
+}
+
+.right_container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @media #{$breakpoint-dimension-md} {
+      padding: 40px 0px 0px;
+    }
+}
+
+.button_container {
+    width: 100%;
+    @media #{$breakpoint-dimension-md} {
+     width: auto;
+    }
+}
+
+.background_layout {
+    border-radius: 24px 0 0 0;
+    background: linear-gradient(163deg, #191919 -7.59%, #4016A0 33.77%, #3F59E4 64.58%, #4CB7A3 123.71%, #F6F1E7 165.82%);
+    width: 100%;
+    height: 428px;
+}
+
+.banner_image {
+    position: absolute;
+}
+
+.title {
+    font-size: 24px;
+    line-height: 114%; 
+    letter-spacing: -1.12px;
+    margin-bottom: 12px;
+    @media #{$breakpoint-dimension-md} {
+        font-size: 56px;
+    }
+}
+
+.subtitle {
+    overflow: hidden;
+    color: var(--color_fg_neutral);
+    text-overflow: ellipsis;
+    font-size: 18px;
+    line-height: 27px;
+    letter-spacing: -0.05px;
+    margin-bottom: 24px;
+}

src/features/common/components/button/button.component.tsx

@@ -8,6 +8,7 @@ type BaseButtonProps = {
 
 type CommonButtonProps = {
   variant?: "default" | "transparent";
+  showIcon?: boolean;
 } & BaseButtonProps;
 
 const ButtonBase = ({ label }: BaseButtonProps) => {
@@ -17,7 +18,6 @@ const ButtonBase = ({ label }: BaseButtonProps) => {
 type ButtonProps = {
   onClick?: () => void;
   isLoading?: boolean;
-  showIcon?: boolean;
 } & CommonButtonProps;
 
 export const Button = ({
@@ -62,6 +62,7 @@ type LinkButtonProps = {
 export const LinkButton = ({
   label,
   href,
+  showIcon = true,
   variant = "default",
 }: LinkButtonProps) => {
   return (
@@ -75,9 +76,11 @@ export const LinkButton = ({
       href={href}
     >
       <ButtonBase label={label} />
-      <div className={styles.button_arrow}>
-        <ArrowIcon />
-      </div>
+      {showIcon && (
+        <div className={styles.button_arrow}>
+          <ArrowIcon />
+        </div>
+      )}
     </a>
   );
 };

src/features/common/components/handbook-banner/handbook-banner.component.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import { LinkButton } from "../button/button.component";
+import styles from "./handbook-banner.module.scss";
+
+export const HandbookBanner = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <div className={styles.content}>
+          <div className={styles.left_container}>
+            <p className={styles.title}>Get the OpenID Handbook</p>
+            <p className={styles.subtitle}>
+              Download it now for free and get up-to-speed faster.
+            </p>
+            <div className={styles.button_container}>
+              <LinkButton
+                label="Download Ebook"
+                href="https://auth0.com/resources/ebooks/the-openid-connect-handbook?utm_source=openidconnect&utm_medium=gc_banner&utm_campaign=oidc_gc_banner_12_2019"
+              />
+            </div>
+          </div>
+          <div className={styles.right_container}>
+            <Image
+              src={"/images/book.png"}
+              width={250}
+              height={250}
+              alt="openid connect handbook"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/common/components/handbook-banner/handbook-banner.module.scss

@@ -0,0 +1,72 @@
+@use "libs/theme/styles/variables" as *;
+@use "libs/theme/styles/mixins" as *;
+
+.container {
+  @include Container;
+  font-family: Aeonik;
+
+}
+
+.wrapper {
+  @include ExtendedGrid;
+}
+
+.content {
+  margin: 4rem 2rem 20px;
+  color: var(--color_fg_link);
+  justify-content: space-between;  
+  align-items: center;
+  border-radius: 24px;
+  border: 0.5px solid var(--color_border_light);
+  background: var(--color_bg_layer_alternate);
+
+  @media #{$breakpoint-dimension-sm} {
+    display: flex;
+    flex-direction: row;
+  }
+
+}
+
+.left_container {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    @media #{$breakpoint-dimension-sm} {
+       align-items: flex-start;
+    }
+}
+
+.right_container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+    padding: 32px 72px 0px;
+    @media #{$breakpoint-dimension-md} {
+      padding: 60px 160px 0px;
+    }
+}
+
+.button_container {
+    width: 100%;
+    @media #{$breakpoint-dimension-md} {
+     width: auto;
+    }
+}
+
+.title {
+    font-size: 32px;
+    line-height: 40px;
+    letter-spacing: -0.5px;
+    margin-bottom: 12px;
+}
+
+.subtitle {
+    overflow: hidden;
+    color: var(--color_fg_neutral);
+    text-overflow: ellipsis;
+    font-size: 18px;
+    line-height: 27px;
+    letter-spacing: -0.05px;
+    margin-bottom: 24px;
+}