update article component layout and add title and ebook-ad styles (#893)

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

* adjust article elements styles

* adjust sidenav styles

* address javier comments

Author: christiansamaniego-okta

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

@@ -7,26 +7,13 @@
 
 .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 {
   display: flex;
   flex-direction: column;
-
   grid-column: span 6;
-  max-width: 48.5rem;
+  max-width: 56rem;
   justify-self: center;
 
   @media #{$breakpoint-dimension-sm} {
@@ -47,7 +34,7 @@
     font-size: 2rem;
     line-height: 2.5rem;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
     letter-spacing: -0.05rem;
     margin-bottom: 1.5rem;
     font-family: var(--font-secondary), sans-serif;
@@ -68,13 +55,12 @@
 
   h3 {
     color: var(--color_fg_bold);
-
     font-size: 1.5rem;
     line-height: 2rem;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
     letter-spacing: -0.05rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
     font-family: var(--font-secondary), sans-serif;
 
     :global(html[lang="ja"]) & {
@@ -89,11 +75,11 @@
       "clig" off,
       "liga" off;
     font-size: 1rem;
-    line-height: 1.5em;
+    line-height: 1.45;
     font-style: normal;
     font-weight: 400;
     letter-spacing: -0.005rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 
     :global(html[lang="ja"]) & {
       @include LocaleLineHeight("ja", 1.5rem);
@@ -107,12 +93,10 @@
 
   ul,
   ol {
-    list-style-position: inside;
     margin-top: 0;
 
     ul,
     ol {
-      list-style-position: inside;
       margin-left: 1.5rem;
       padding-left: 0;
     }
@@ -121,11 +105,11 @@
   li {
     margin-bottom: 0.75rem;
     font-size: 1rem;
-    line-height: 2rem;
+    line-height: 1.45;
     color: var(--color_fg_default);
     letter-spacing: -0.01px;
-    text-indent: -1.5rem;
-    padding-left: 1.5rem;
+    margin-left: 1rem;
+    padding-left: 1rem;
 
     :global(html[lang="ja"]) & {
       @include LocaleLineHeight("ja", 2rem);
@@ -136,9 +120,9 @@
     &,
     &:hover,
     &:active {
-      color: var(--color_fg_link_primary);
       text-decoration: underline;
-      font-weight: 400;
+      font-weight: 500;
+      text-underline-offset: 0.25rem;
     }
   }
 
@@ -148,42 +132,70 @@
   }
 
   pre {
-    margin-bottom: 2rem;
-    background-color: var(--color_bg_code-editor);
+    margin-bottom: 1rem;
+    background-color: var(--color_bg_layer_alternate);
     color: var(--color_fg_default);
     font-size: 0.875rem;
     line-height: 1.375rem;
     font-style: normal;
     font-weight: 400;
     letter-spacing: 0.15px;
-    padding: 0.75rem;
+    padding: 0.25rem;
     border: 1px solid var(--color_border_bold);
-    border-radius: 0.25rem;
+    border-radius: 1rem;
 
     code {
-      color: var(--color_code_dark_blue2);
+      display: block;
+      width: 100%;
+      color: var(--color_code_gray);
       background-color: var(--color_bg_code-editor);
       font-weight: 500;
-    }
-
-    @media #{$breakpoint-dimension-sm} {
-      border-radius: 0.5rem;
-      padding: 1rem;
+      font-size: 0.875rem;
+      line-height: 1.35;
+      border-radius: 0.75rem;
+      padding: 0.75rem;
+      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);
     }
   }
 
   blockquote {
-    background-color: var(--color_bg_state_info_subtle);
-    padding: 1rem 1.5rem;
-    margin: 2rem 0 2rem 0;
-    border-radius: 0 0.5rem 0.5rem 0;
-    border-left: 4px solid var(--color_border_state_info);
+    background-color: var(--color_bg_layer);
+    font-size: 0.875rem;
+    padding: 1rem;
+    margin: 2rem 0;
+    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);
 
     & * {
-      color: var(--color_fg_on_state_info_subtle);
+      color: var(--color_fg_default);
       padding: 0;
       margin: 0;
     }
+
+    p {
+      display: flex;
+      flex-direction: row;
+      font-size: 0.875rem;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    ::before {
+      content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0.5C9.03757 0.5 11.5 2.96243 11.5 6C11.5 9.03757 9.03757 11.5 6 11.5C2.96243 11.5 0.5 9.03757 0.5 6C0.5 2.96243 2.96243 0.5 6 0.5ZM6 5.25C5.72386 5.25 5.5 5.47386 5.5 5.75V8.75H6.5V5.75C6.5 5.47386 6.27614 5.25 6 5.25ZM6 3.125C5.65482 3.125 5.375 3.40482 5.375 3.75C5.375 4.09518 5.65482 4.375 6 4.375C6.34518 4.375 6.625 4.09518 6.625 3.75C6.625 3.40482 6.34518 3.125 6 3.125Z' fill='%235C5650'/%3E%3C/svg%3E%0A");
+      display: block;
+      padding: 0.25rem 0.4rem 0.125rem;
+      border-radius: 9999px;
+      background-color: var(--color_bg_layer_alternate);
+    }
   }
 
   *:has(+ blockquote) {

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: 0.875rem;
+  color: var(--color_fg_default);
 
   & strong {
     font-weight: 500;

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

@@ -5,20 +5,30 @@ 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 { 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,24 @@
 @use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
 
 .container {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-
-    @media #{$breakpoint-dimension-sm} {
-        flex-direction: row;
-    }
+  @include InnerContentFlex;
+  justify-content: start;
+  margin-bottom: 5rem;
 }
+
+.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: 1.5rem 0rem;
 }
 
 .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}