dxc-technology
diff --git a/‎apps/website/pages/components/typography/code.tsx‎
Lines changed: 17 additions & 0 deletions b/‎apps/website/pages/components/typography/code.tsx‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎apps/website/pages/components/typography/index.tsx‎
Lines changed: 10 additions & 14 deletions b/‎apps/website/pages/components/typography/index.tsx‎
Lines changed: 10 additions & 14 deletions
diff --git a/‎apps/website/pages/components/typography/specifications.tsx‎
Lines changed: 0 additions & 21 deletions b/‎apps/website/pages/components/typography/specifications.tsx‎
Lines changed: 0 additions & 21 deletions
diff --git a/‎apps/website/pages/components/typography/usage.tsx‎
Lines changed: 0 additions & 21 deletions b/‎apps/website/pages/components/typography/usage.tsx‎
Lines changed: 0 additions & 21 deletions
diff --git a/‎apps/website/screens/components/typography/TypographyPageLayout.tsx‎
Lines changed: 8 additions & 5 deletions b/‎apps/website/screens/components/typography/TypographyPageLayout.tsx‎
Lines changed: 8 additions & 5 deletions
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import TypographyPageLayout from "screens/components/typography/TypographyPageLayout";
+import TypographyCodePage from "screens/components/typography/code/TypographyCodePage";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Typography — Halstack Design System</title>
+    </Head>
+    <TypographyCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <TypographyPageLayout>{page}</TypographyPageLayout>;
+
+export default Code;
@@ -1,21 +1,17 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import TypographyPageLayout from "screens/components/typography/TypographyPageLayout";
-import TypographyCodePage from "screens/components/typography/code/TypographyCodePage";
+import TypographyOverviewPage from "screens/components/typography/overview/TypographyOverviewPage";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Typography — Halstack Design System</title>
-      </Head>
-      <TypographyCodePage />
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Typography — Halstack Design System</title>
+    </Head>
+    <TypographyOverviewPage />
+  </>
+);
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <TypographyPageLayout>{page}</TypographyPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <TypographyPageLayout>{page}</TypographyPageLayout>;
 
 export default Index;
@@ -1,21 +1,24 @@
 import PageHeading from "@/common/PageHeading";
-import { DxcFlex, DxcAlert } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcAlert, DxcParagraph } from "@dxc-technology/halstack-react";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
 import { ReactNode } from "react";
 
 const TypographyPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/typography" },
-    { label: "Usage", path: "/components/typography/usage" },
-    { label: "Specifications", path: "/components/typography/specifications" },
+    { label: "Overview", path: "/components/typography" },
+    { label: "Code", path: "/components/typography/code" },
   ];
 
   return (
     <DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
       <PageHeading>
         <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
           <ComponentHeading name="Typography" />
+          <DxcParagraph>
+            Typography component is a primitive. This means that using this component, you can create any typography
+            variant that is included in the Halstack Design System.
+          </DxcParagraph>
           <DxcAlert
             title="Usage"
             semantic="warning"
@@ -24,7 +27,7 @@ const TypographyPageHeading = ({ children }: { children: ReactNode }) => {
             }}
             closable={false}
           />
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}