update article component layout and add title and ebook-ad styles

Author: christiansamaniego-okta

src/features/common/components/article/article.module.scss

@@ -7,18 +7,6 @@
 
 .content {
   @include InnerContentGrid;
-
-  padding: 3rem 0 3rem 0;
-  gap: 2rem;
-
-  @media #{$breakpoint-dimension-sm} {
-    padding: 3rem 0 4rem 0;
-  }
-
-  @media #{$breakpoint-dimension-md} {
-    gap: 3rem;
-    padding: 4rem 0 4rem 0;
-  }
 }
 
 .article {

src/features/introduction/components/ebook-ad/ebook-ad.component.tsx

@@ -8,7 +8,7 @@ type EbookAdComponentProps = {
 
 export const EbookAdComponent: React.FC<EbookAdComponentProps> = ({ copy }) => {
   return (
-    <BoxComponent contentClassName={styles.content}>
+    <BoxComponent contentClassName={styles.content} containerClassName={styles.container}>
       <p className={styles.copy}>{copy}</p>
     </BoxComponent>
   );

src/features/introduction/components/ebook-ad/ebook-ad.module.scss

@@ -1,23 +1,29 @@
 @use "@/libs/theme/styles/variables" as *;
 @use "@/libs/theme/styles/mixins" as *;
 
+.container {
+  margin-bottom: 1.5rem;
+}
+
 .content {
   @include InnerContentFlex;
   position: relative;
   max-width: $article-max-width;
-
-  background: linear-gradient(290deg, #f4d -18.75%, #3f59e4 98.79%);
-
-  border-radius: 0.5rem;
   padding: 1rem;
-  margin: 1rem auto 2rem auto;
-  color: $Neutral0;
-  font-size: 1rem;
-  line-height: 1.25rem;
+  border-radius: 1rem;
+  border: 1px solid var(--color_border_default);
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.12),
+    0 2px 2px -1px rgba(0, 0, 0, 0.04),
+    0 4px 4px -2px rgba(0, 0, 0, 0.04),
+    0 6px 6px -3px rgba(0, 0, 0, 0.04);
 }
 
 .copy {
   font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 1rem;
+  color: var(--color_fg_default);
 
   & strong {
     font-weight: 500;

src/features/introduction/components/introduction-article/introduction-article.component.tsx

@@ -5,20 +5,32 @@ import { getIntroductionContent } from "@/features/localization/services/ui-lang
 import { ArticleComponent } from "@/features/common/components/article/article.component";
 import styles from "./introduction-article.module.scss";
 import { SidebarNavComponent } from "../sidebar-nav/sidebar-nav.component";
+import { EbookAdComponent } from "../ebook-ad/ebook-ad.component";
+import { getComponentDictionary } from "@/features/localization/services/component-dictionary.service";
+import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model";
+import clsx from "clsx";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
+import { IntroductionHeroComponent } from "../introduction-hero/introduction-hero.component";
 
 interface IntroductionArticleComponentProps {
   languageCode: string;
+  introductionDictionary: IntroductionDictionaryModel;
 }
 
 export const IntroductionArticleComponent: React.FC<
   IntroductionArticleComponentProps
-> = ({ languageCode }) => {
+> = ({ languageCode, introductionDictionary }) => {
   const Introduction = getIntroductionContent({ languageCode });
+  const componentDictionary = getComponentDictionary(languageCode);
 
   return (
     <div className={styles.container}>
-      <SidebarNavComponent languageCode={languageCode} />
-      <ArticleComponent>{Introduction}</ArticleComponent>
+      <SidebarNavComponent introductionDictionary={introductionDictionary} />
+      <div className={styles.content}>
+        <IntroductionHeroComponent languageCode={languageCode} dictionary={introductionDictionary.hero} />
+        <EbookAdComponent copy={componentDictionary.ebookAd} />
+        <ArticleComponent>{Introduction}</ArticleComponent>
+      </div>
     </div>
   );
 };

src/features/introduction/components/introduction-article/introduction-article.module.scss

@@ -1,11 +1,21 @@
 @use "@/libs/theme/styles/variables" as *;
 
 .container {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-
-    @media #{$breakpoint-dimension-sm} {
-        flex-direction: row;
-    }
+  display: flex;
 }
+
+.title {
+  color: var(--color_fg_bold);
+  font-size: 2rem;
+  line-height: 2.5rem;
+  font-weight: 400;
+  letter-spacing: -0.96px;
+
+  @media #{$breakpoint-dimension-xs} {
+    font-size: 2.5rem;
+  }
+
+  @media #{$breakpoint-dimension-sm} {
+    font-size: 3rem;
+  }
+}

src/features/introduction/components/introduction-hero/introduction-hero.module.scss

@@ -3,32 +3,23 @@
 
 .container {
   @include Container;
-
-  background: var(--color_bg_page);
-  border-bottom: 1px solid var(--color_border_bold);
+  margin-bottom: 1.5rem;
 }
 
 .content {
   @include InnerContentFlex;
-  flex-direction: column;
-  align-items: center;
-
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-
-  @media #{$breakpoint-dimension-xs} {
-    padding-top: 4.5rem;
-    padding-bottom: 4.5rem;
-  }
 }
 
 .title {
+  width: 100%;
   color: var(--color_fg_bold);
-  text-align: center;
+  text-align: left;
   font-size: 2rem;
-  line-height: 2.5rem;
-  font-weight: 400;
-  letter-spacing: -0.96px;
+  line-height: 1.15;
+  font-weight: 500;
+  letter-spacing: -.96px;
+  max-width: 42rem;
+  text-wrap-style: balance;
 
   @media #{$breakpoint-dimension-xs} {
     font-size: 2.5rem;

src/features/introduction/components/introduction-page/introduction-page.component.tsx

@@ -4,10 +4,7 @@ import { generateArticleStructuredData } from "@/features/seo/services/structure
 import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component";
 import { getIntroductionDictionary } from "@/features/localization/services/language-dictionary.service";
 import { IntroductionArticleComponent } from "@/features/introduction/components/introduction-article/introduction-article.component";
-import { IntroductionHeroComponent } from "@/features/introduction/components/introduction-hero/introduction-hero.component";
-import { EbookAdComponent } from "@/features/introduction/components/ebook-ad/ebook-ad.component";
 import { getAuth0Dictionary } from "@/features/localization/services/ui-language-dictionary.service";
-import { getComponentDictionary } from "@/features/localization/services/component-dictionary.service";
 
 interface IntroductionPageComponentProps {
   languageCode: string;
@@ -18,7 +15,6 @@ export const IntroductionPageComponent: React.FC<
 > = ({ languageCode }) => {
   const introductionDictionary = getIntroductionDictionary(languageCode);
   const auth0Dictionary = getAuth0Dictionary(languageCode);
-  const componentDictionary = getComponentDictionary(languageCode);
 
   return (
     <>
@@ -121,12 +117,10 @@ export const IntroductionPageComponent: React.FC<
           }),
         ]}
       />
-      <IntroductionHeroComponent
+      <IntroductionArticleComponent
+        introductionDictionary={introductionDictionary}
         languageCode={languageCode}
-        dictionary={introductionDictionary.hero}
       />
-      <EbookAdComponent copy={componentDictionary.ebookAd} />
-      <IntroductionArticleComponent languageCode={languageCode} />
       <Auth0CtaComponent
         languageCode={languageCode}
         dictionary={auth0Dictionary.banner}

src/features/introduction/components/sidebar-nav/sidebar-nav.component.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { getIntroductionDictionary } from "@/features/localization/services/language-dictionary.service";
 import styles from "./sidebar-nav.module.scss";
 import clsx from "clsx";
+import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model";
 
 interface SidebarNavComponentProps {
-  languageCode: string;
+  introductionDictionary: IntroductionDictionaryModel;
 }
 
 const scrollToElementWithOffset = (id: string, offset = 0) => {
@@ -18,9 +18,8 @@ const scrollToElementWithOffset = (id: string, offset = 0) => {
 };
 
 export const SidebarNavComponent: React.FC<SidebarNavComponentProps> = ({
-  languageCode,
+  introductionDictionary,
 }) => {
-  const introductionDictionary = getIntroductionDictionary(languageCode);
   const headings = introductionDictionary.content.headings;
   const [activeId, setActiveId] = useState<string | null>(null);
 

src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss

@@ -1,33 +1,33 @@
 @use "@/libs/theme/styles/variables" as *;
 
 .container {
-    display:none;
-    @media #{$breakpoint-dimension-sm} {
-        display: inline-block;
-        height: 100vh;
-        position: sticky;
-        color: var(--color_fg_link);
-        flex-shrink: 0;
-        top: 0;
-        padding: 160px 30px 0px;
-        margin-bottom: 100px;
-        border-right: 1px solid var(--color_border_bold);
-        max-width: 250px;
-        overflow-y: auto;
-    }
+  display: none;
+  @media #{$breakpoint-dimension-sm} {
+    display: inline-block;
+    height: 100vh;
+    position: sticky;
+    color: var(--color_fg_link);
+    flex-shrink: 0;
+    top: 0;
+    padding: 160px 30px 0px;
+    margin-bottom: 100px;
+    border-right: 1px solid var(--color_border_bold);
+    max-width: 250px;
+    overflow-y: auto;
+  }
 }
 
 .title {
- margin-bottom: 36px; 
- padding-right: 8px;
- cursor: pointer; 
+  margin-bottom: 36px;
+  padding-right: 8px;
+  cursor: pointer;
 }
 
 .title__active {
-   color: var(--color_fg_selected);
-   border-bottom: 1px solid var(--color_border_selected);
+  color: var(--color_fg_selected);
+  border-bottom: 1px solid var(--color_border_selected);
 }
 
 .list {
-    list-style-type: none;
+  list-style-type: none;
 }

src/libs/theme/styles/_variables.scss

@@ -148,8 +148,8 @@ $gradient-app-card---resting: linear-gradient(
   #3f59e4 67.69%
 );
 
-$ribbon-height: 1rem;
-$ribbon-height-mobile: 0rem;
+$ribbon-height: 2rem;
+$ribbon-height-mobile: 2rem;
 $navbar-height: 5rem;
 $navbar-height-mobile: 3rem;
 $main-nav-height: calc($ribbon-height + $navbar-height);