From be81e53a9540f6aacd7bab2486145ca817d8041e Mon Sep 17 00:00:00 2001
From: Marc-Aurele Besner
 <82244926+marc-aurele-besner@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:07:13 -0500
Subject: [PATCH 1/3] add typography tailwind config

---
 explorer/tailwind.config.ts | 206 ++++++++++++++++++++++++++++++++++--
 1 file changed, 196 insertions(+), 10 deletions(-)

diff --git a/explorer/tailwind.config.ts b/explorer/tailwind.config.ts
index ce951594..03a754ff 100644
--- a/explorer/tailwind.config.ts
+++ b/explorer/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from 'tailwindcss'
-import defaultTheme from 'tailwindcss/defaultTheme'
+import plugin from 'tailwindcss/plugin'
 
 const config: Config = {
   content: [
@@ -19,7 +19,6 @@ const config: Config = {
         light: 'linear-gradient(180deg, #EBEFFC 0%, #3654A6 100%)',
       },
       colors: {
-        // Common Gradient
         // Gradients
         gradientFrom: '#032372',
         gradientVia: '#1949D2',
@@ -79,16 +78,116 @@ const config: Config = {
         footerLight: '#032372',
         footerDark: '#08183E',
       },
-    },
-    fontFamily: {
-      montserrat: ['Montserrat'],
-    },
-    theme: {
+
       fontFamily: {
-        sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
+        display: ['var(--font-roboto-serif)', 'serif'],
+        body: ['var(--font-libre-franklin)', 'sans-serif'],
       },
       fontSize: {
-        xs: ['13px', '16px'],
+        'display-lg': [
+          '4.75rem',
+          {
+            lineHeight: '100%',
+            letterSpacing: '-0.04em',
+            fontWeight: '300',
+          },
+        ],
+        'display-md': [
+          '3.75rem',
+          {
+            lineHeight: '100%',
+            letterSpacing: '-0.04em',
+            fontWeight: '300',
+          },
+        ],
+        'display-sm': [
+          '3rem',
+          {
+            lineHeight: '100%',
+            letterSpacing: '-0.04em',
+            fontWeight: '300',
+          },
+        ],
+        'title-1': [
+          '3.313rem',
+          {
+            lineHeight: '100%',
+            letterSpacing: '-0.02em',
+            fontWeight: '300',
+          },
+        ],
+        'title-2': [
+          '2.938rem',
+          {
+            lineHeight: '120%',
+            letterSpacing: '-0.02em',
+            fontWeight: '300',
+          },
+        ],
+        'title-3': [
+          '2.5rem',
+          {
+            lineHeight: '120%',
+            letterSpacing: '-0.02em',
+            fontWeight: '300',
+          },
+        ],
+        'body-lg': [
+          '2rem',
+          {
+            lineHeight: '150%',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        'body-md': [
+          '1.688rem',
+          {
+            lineHeight: '150%',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        'body-sm': [
+          '1.313rem',
+          {
+            lineHeight: '150%',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        'button-lg': [
+          '1.188rem',
+          {
+            lineHeight: '20px',
+            letterSpacing: '0',
+            fontWeight: '500',
+          },
+        ],
+        'button-md': [
+          '1rem',
+          {
+            lineHeight: '20px',
+            letterSpacing: '0',
+            fontWeight: '500',
+          },
+        ],
+        'pre-title': [
+          '1.188rem',
+          {
+            lineHeight: '150%',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        detail: [
+          '1.188rem',
+          {
+            lineHeight: '120%',
+            letterSpacing: '-0.02em',
+            fontWeight: '600',
+          },
+        ],
       },
       spacing: {
         13: '3.125rem',
@@ -100,7 +199,94 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('@headlessui/tailwindcss'), require('@tailwindcss/forms')],
+  plugins: [
+    require('@headlessui/tailwindcss'),
+    require('@tailwindcss/forms'),
+    plugin(function ({ addBase }) {
+      addBase({
+        'h1.display-large': {
+          fontFamily: 'var(--font-roboto-serif), serif',
+          fontSize: '4.75rem',
+          lineHeight: '100%',
+          letterSpacing: '-0.04em',
+          fontWeight: '300',
+        },
+        'h1.display-medium': {
+          fontFamily: 'var(--font-roboto-serif), serif',
+          fontSize: '3.75rem',
+          lineHeight: '100%',
+          letterSpacing: '-0.04em',
+          fontWeight: '300',
+        },
+        'h2.display-small': {
+          fontFamily: 'var(--font-roboto-serif), serif',
+          fontSize: '3rem',
+          lineHeight: '100%',
+          letterSpacing: '-0.04em',
+          fontWeight: '300',
+        },
+        h1: {
+          fontFamily: 'var(--font-roboto-serif), serif',
+          fontSize: '3.313rem',
+          lineHeight: '100%',
+          letterSpacing: '-0.02em',
+          fontWeight: '300',
+        },
+        h2: {
+          fontFamily: 'var(--font-roboto-serif), serif',
+          fontSize: '2.938rem',
+          lineHeight: '120%',
+          letterSpacing: '-0.02em',
+          fontWeight: '300',
+        },
+        h3: {
+          fontFamily: 'var(--font-roboto-serif), serif',
+          fontSize: '2.5rem',
+          lineHeight: '120%',
+          letterSpacing: '-0.02em',
+          fontWeight: '300',
+        },
+        p: {
+          fontFamily: 'var(--font-libre-franklin), sans-serif',
+          fontSize: '1.313rem',
+          lineHeight: '150%',
+          letterSpacing: '0.02em',
+          fontWeight: '400',
+        },
+        'p.body-large': {
+          fontSize: '2rem',
+        },
+        'p.body-medium': {
+          fontSize: '1.688rem',
+        },
+        button: {
+          fontFamily: 'var(--font-libre-franklin), sans-serif',
+          fontSize: '1rem',
+          lineHeight: '20px',
+          letterSpacing: '0',
+          fontWeight: '500',
+        },
+        'button.button-large': {
+          fontSize: '1.188rem',
+        },
+        '.pre-title': {
+          fontFamily: 'var(--font-libre-franklin), sans-serif',
+          fontSize: '1.188rem',
+          lineHeight: '150%',
+          letterSpacing: '0.02em',
+          fontWeight: '400',
+          textTransform: 'uppercase',
+        },
+        '.detail': {
+          fontFamily: 'var(--font-libre-franklin), sans-serif',
+          fontSize: '1.188rem',
+          lineHeight: '120%',
+          letterSpacing: '-0.02em',
+          fontWeight: '600',
+        },
+      })
+    }),
+  ],
 }
 
 export default config

From 01f47a6856c1d39e61ae52a8da9706de6cf8fab3 Mon Sep 17 00:00:00 2001
From: Marc-Aurele Besner
 <82244926+marc-aurele-besner@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:08:13 -0500
Subject: [PATCH 2/3] import font the next way

---
 explorer/src/app/[chain]/layout.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/explorer/src/app/[chain]/layout.tsx b/explorer/src/app/[chain]/layout.tsx
index dd44078a..167c6a13 100644
--- a/explorer/src/app/[chain]/layout.tsx
+++ b/explorer/src/app/[chain]/layout.tsx
@@ -2,12 +2,25 @@ import { GoogleAnalytics } from '@next/third-parties/google'
 import { indexers, networks } from 'constants/indexers'
 import { lang, metadata } from 'constants/metadata'
 import { Metadata, Viewport } from 'next'
+import { Libre_Franklin as LibreFranklin, Roboto_Serif as RobotoSerif } from 'next/font/google'
 import { headers } from 'next/headers'
 import { Provider } from 'providers'
 import { Toaster } from 'react-hot-toast'
 import type { ChainPageProps } from 'types/app'
 import '../../styles/index.css'
 
+const robotoSerif = RobotoSerif({
+  subsets: ['latin'],
+  weight: ['300'],
+  variable: '--font-roboto-serif',
+})
+
+const libreFranklin = LibreFranklin({
+  subsets: ['latin'],
+  weight: ['400', '500', '600'],
+  variable: '--font-libre-franklin',
+})
+
 export async function generateStaticParams() {
   return Array.from(networks).map((chain) => ({ chain }))
 }
@@ -16,7 +29,7 @@ export default async function RootLayout({
   children,
 }: ChainPageProps & { children: React.ReactNode }) {
   return (
-    <html lang={lang}>
+    <html lang={lang} className={`${robotoSerif.variable} ${libreFranklin.variable}`}>
       {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID && (
         <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
       )}

From 9cb95724a5c9715cc11ec604be16321a7adfed82 Mon Sep 17 00:00:00 2001
From: Marc-Aurele Besner
 <82244926+marc-aurele-besner@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:08:32 -0500
Subject: [PATCH 3/3] remove hardcoded font class

---
 explorer/src/components/Consensus/Home/HomeInfoCard.tsx | 4 +---
 explorer/src/components/Staking/RegisterOperators.tsx   | 2 +-
 explorer/src/components/common/DesktopTable.tsx         | 2 +-
 explorer/src/components/common/ListCard.tsx             | 4 ++--
 explorer/src/components/common/MobileCard.tsx           | 2 +-
 explorer/src/components/common/OutOfSyncBanner.tsx      | 2 +-
 explorer/src/components/layout/ConsensusHeader.tsx      | 2 +-
 explorer/src/components/layout/Container.tsx            | 2 +-
 explorer/src/components/layout/DomainHeader.tsx         | 2 +-
 explorer/src/components/layout/EmptyHeader.tsx          | 2 +-
 explorer/src/components/layout/FarmingHeader.tsx        | 2 +-
 explorer/src/components/layout/Footer.tsx               | 2 +-
 explorer/src/components/layout/Layout.tsx               | 4 ++--
 explorer/src/components/layout/LeaderboardHeader.tsx    | 2 +-
 explorer/src/components/layout/StakingHeader.tsx        | 2 +-
 explorer/src/components/layout/StorageHeader.tsx        | 2 +-
 16 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/explorer/src/components/Consensus/Home/HomeInfoCard.tsx b/explorer/src/components/Consensus/Home/HomeInfoCard.tsx
index 852de94c..797970bc 100644
--- a/explorer/src/components/Consensus/Home/HomeInfoCard.tsx
+++ b/explorer/src/components/Consensus/Home/HomeInfoCard.tsx
@@ -25,9 +25,7 @@ export const HomeInfoCard: FC<Props> = ({
     [value],
   )
   return (
-    <div
-      className={`h-[216px] w-1/5 min-w-[200px] grow font-['Montserrat'] md:min-w-[228px] ${additionalClass}`}
-    >
+    <div className={`h-[216px] w-1/5 min-w-[200px] grow md:min-w-[228px] ${additionalClass}`}>
       <div className={`flex h-full flex-col justify-center rounded-[20px] bg-white ${darkBgClass}`}>
         <div className='mb-6 flex w-full items-center justify-center align-middle'>{icon}</div>
         <div className='flex w-full flex-col  items-center justify-center align-middle'>
diff --git a/explorer/src/components/Staking/RegisterOperators.tsx b/explorer/src/components/Staking/RegisterOperators.tsx
index 2e16c51f..4e5cae92 100644
--- a/explorer/src/components/Staking/RegisterOperators.tsx
+++ b/explorer/src/components/Staking/RegisterOperators.tsx
@@ -151,7 +151,7 @@ export const RegisterOperators = () => {
   return (
     <div className='flex w-full flex-col align-middle'>
       <div className='mt-5 flex w-full flex-col pt-20 sm:mt-0'>
-        <div className="dark:bg-boxDark w-full rounded-[20px] bg-white font-['Montserrat'] dark:border-none">
+        <div className='dark:bg-boxDark w-full rounded-[20px] bg-white dark:border-none'>
           <div className='m-10'>
             <div className='flex items-center'>
               <WalletIcon width='44' height='48' />
diff --git a/explorer/src/components/common/DesktopTable.tsx b/explorer/src/components/common/DesktopTable.tsx
index 5f6be6bb..0ee7a35b 100644
--- a/explorer/src/components/common/DesktopTable.tsx
+++ b/explorer/src/components/common/DesktopTable.tsx
@@ -9,7 +9,7 @@ interface TableProps<T extends object> {
 
 export const DesktopTable = <T extends object>({ table, emptyMessage }: TableProps<T>) => (
   <div className='overflow-x-auto'>
-    <table className="dark:bg-boxDark w-full min-w-max table-auto rounded-[20px] bg-white font-['Montserrat'] dark:border-none">
+    <table className='dark:bg-boxDark w-full min-w-max table-auto rounded-[20px] bg-white dark:border-none'>
       <thead className='text-blueShade border-b border-gray-200 text-sm dark:text-white/75'>
         {table.getHeaderGroups().map((headerGroup) => (
           <tr key={headerGroup.id}>
diff --git a/explorer/src/components/common/ListCard.tsx b/explorer/src/components/common/ListCard.tsx
index 1a60a2d5..48582a98 100644
--- a/explorer/src/components/common/ListCard.tsx
+++ b/explorer/src/components/common/ListCard.tsx
@@ -12,7 +12,7 @@ export const ListCard = <T extends object>({ table, emptyMessage }: ListCardProp
         table.getRowModel().rows.map((row, index) => (
           <div
             key={`row-${index}`}
-            className="dark:bg-boxDark mb-4 w-full rounded-lg bg-white px-4 py-2 font-['Montserrat']"
+            className='dark:bg-boxDark mb-4 w-full rounded-lg bg-white px-4 py-2'
           >
             {row.getVisibleCells().map((cell, index) => {
               const header = table.getHeaderGroups()[0].headers[index]
@@ -32,7 +32,7 @@ export const ListCard = <T extends object>({ table, emptyMessage }: ListCardProp
           </div>
         ))
       ) : (
-        <div className="dark:bg-boxDark w-full rounded-lg bg-white px-4 py-4 font-['Montserrat']">
+        <div className='dark:bg-boxDark w-full rounded-lg bg-white px-4 py-4'>
           <div className='flex w-full justify-center'>
             <div className='text-blueShade text-sm dark:text-white/75'>
               {emptyMessage || 'No entries to show'}
diff --git a/explorer/src/components/common/MobileCard.tsx b/explorer/src/components/common/MobileCard.tsx
index cb202598..47816f09 100644
--- a/explorer/src/components/common/MobileCard.tsx
+++ b/explorer/src/components/common/MobileCard.tsx
@@ -14,7 +14,7 @@ type Row = {
 
 export const MobileCard: FC<Props> = ({ header, body, id, children }) => {
   return (
-    <div className="dark:bg-boxDark mb-6 w-full rounded-lg bg-white px-4 py-7 font-['Montserrat'] dark:to-gradientTo">
+    <div className='dark:bg-boxDark mb-6 w-full rounded-lg bg-white px-4 py-7 dark:to-gradientTo'>
       <div className='mb-2 flex items-center gap-2'>{header}</div>
       <div className='w-full divide-y divide-gray-200 dark:divide-white/20'>
         {body.map(({ name, value }, index) => (
diff --git a/explorer/src/components/common/OutOfSyncBanner.tsx b/explorer/src/components/common/OutOfSyncBanner.tsx
index 803a076c..b8d358b5 100644
--- a/explorer/src/components/common/OutOfSyncBanner.tsx
+++ b/explorer/src/components/common/OutOfSyncBanner.tsx
@@ -15,7 +15,7 @@ const POLL_INTERVAL = 12000
 const OutOfSyncBanner: FC = () => {
   const { network } = useIndexers()
   return (
-    <div className="container mx-auto mb-4 flex grow justify-center px-5 font-['Montserrat'] md:px-[25px] 2xl:px-0">
+    <div className='container mx-auto mb-4 flex grow justify-center px-5 md:px-[25px] 2xl:px-0'>
       <div className='sticky top-0 z-50 w-full'>
         <div className='dark:bg-boxDark w-full rounded-[20px] bg-[#DDEFF1] p-5 shadow dark:border-none'>
           <div className='flex flex-col gap-4'>
diff --git a/explorer/src/components/layout/ConsensusHeader.tsx b/explorer/src/components/layout/ConsensusHeader.tsx
index 97def115..aa61d8c7 100644
--- a/explorer/src/components/layout/ConsensusHeader.tsx
+++ b/explorer/src/components/layout/ConsensusHeader.tsx
@@ -23,7 +23,7 @@ export const ConsensusHeader: FC = () => {
   const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.consensus), [network])
 
   return (
-    <header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
+    <header className='body-font z-9 py-[30px] text-gray-600'>
       {isDesktop ? (
         <div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
           <Link
diff --git a/explorer/src/components/layout/Container.tsx b/explorer/src/components/layout/Container.tsx
index 65d100a6..554ce1b5 100644
--- a/explorer/src/components/layout/Container.tsx
+++ b/explorer/src/components/layout/Container.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 export const Container: FC<Props> = ({ children }) => {
   return (
-    <div className="container mx-auto mb-20 flex grow justify-center px-5 font-['Montserrat'] md:px-[25px] 2xl:px-0">
+    <div className='container mx-auto mb-20 flex grow justify-center px-5 md:px-[25px] 2xl:px-0'>
       {children}
     </div>
   )
diff --git a/explorer/src/components/layout/DomainHeader.tsx b/explorer/src/components/layout/DomainHeader.tsx
index 9141fb0e..b42b07bf 100644
--- a/explorer/src/components/layout/DomainHeader.tsx
+++ b/explorer/src/components/layout/DomainHeader.tsx
@@ -32,7 +32,7 @@ export const DomainHeader = () => {
   )
 
   return (
-    <header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
+    <header className='body-font z-9 py-[30px] text-gray-600'>
       {isDesktop ? (
         <div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
           <Link
diff --git a/explorer/src/components/layout/EmptyHeader.tsx b/explorer/src/components/layout/EmptyHeader.tsx
index 90a186ef..2e1eb17b 100644
--- a/explorer/src/components/layout/EmptyHeader.tsx
+++ b/explorer/src/components/layout/EmptyHeader.tsx
@@ -18,7 +18,7 @@ export const EmptyHeader = () => {
   const { network } = useIndexers()
 
   return (
-    <header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
+    <header className='body-font z-9 py-[30px] text-gray-600'>
       {isDesktop ? (
         <div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
           <Link
diff --git a/explorer/src/components/layout/FarmingHeader.tsx b/explorer/src/components/layout/FarmingHeader.tsx
index 8e2bf292..cb3bf66b 100644
--- a/explorer/src/components/layout/FarmingHeader.tsx
+++ b/explorer/src/components/layout/FarmingHeader.tsx
@@ -38,7 +38,7 @@ export const FarmingHeader = () => {
   )
 
   return (
-    <header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
+    <header className='body-font z-9 py-[30px] text-gray-600'>
       {isDesktop ? (
         <div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
           <Link
diff --git a/explorer/src/components/layout/Footer.tsx b/explorer/src/components/layout/Footer.tsx
index 04e9b3ad..83561efd 100644
--- a/explorer/src/components/layout/Footer.tsx
+++ b/explorer/src/components/layout/Footer.tsx
@@ -6,7 +6,7 @@ import { currentYear } from 'utils/time'
 
 const Footer: FC = () => {
   return (
-    <footer className="container mb-[50px] px-4 font-['Montserrat'] sm:mx-auto xl:px-0">
+    <footer className='container mb-[50px] px-4 sm:mx-auto xl:px-0'>
       <div className='body-font bg-footerLight dark:bg-footerDark rounded-xl p-10 text-white'>
         <div className='md:grid md:grid-cols-2'>
           <div className='mb-20 flex justify-center md:mb-0 md:justify-start'>
diff --git a/explorer/src/components/layout/Layout.tsx b/explorer/src/components/layout/Layout.tsx
index 3f5945ec..d1bec1af 100644
--- a/explorer/src/components/layout/Layout.tsx
+++ b/explorer/src/components/layout/Layout.tsx
@@ -26,8 +26,8 @@ export const MainLayout: FC<Props> = ({ children, subHeader }) => {
   }, [pathname])
 
   return (
-    <div className="from-backgroundLight to-backgroundDark dark:from-backgroundDarker dark:to-backgroundDarkest dark:bg-boxDark relative flex min-h-screen w-full flex-col bg-gradient-to-b font-['Montserrat']">
-      <div className="relative flex min-h-screen w-full flex-col font-['Montserrat']">
+    <div className='from-backgroundLight to-backgroundDark dark:from-backgroundDarker dark:to-backgroundDarkest dark:bg-boxDark relative flex min-h-screen w-full flex-col bg-gradient-to-b'>
+      <div className='relative flex min-h-screen w-full flex-col'>
         {outOfSync}
         <SectionHeader />
         {subHeader}
diff --git a/explorer/src/components/layout/LeaderboardHeader.tsx b/explorer/src/components/layout/LeaderboardHeader.tsx
index dc3993c6..09ace0c0 100644
--- a/explorer/src/components/layout/LeaderboardHeader.tsx
+++ b/explorer/src/components/layout/LeaderboardHeader.tsx
@@ -23,7 +23,7 @@ export const LeaderboardHeader: FC = () => {
   const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.leaderboard), [network])
 
   return (
-    <header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
+    <header className='body-font z-9 py-[30px] text-gray-600'>
       {isDesktop ? (
         <div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
           <Link
diff --git a/explorer/src/components/layout/StakingHeader.tsx b/explorer/src/components/layout/StakingHeader.tsx
index a14a0a73..94178aeb 100644
--- a/explorer/src/components/layout/StakingHeader.tsx
+++ b/explorer/src/components/layout/StakingHeader.tsx
@@ -23,7 +23,7 @@ export const StakingHeader = () => {
   const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.staking), [network])
 
   return (
-    <header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
+    <header className='body-font z-9 py-[30px] text-gray-600'>
       {isDesktop ? (
         <div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
           <Link
diff --git a/explorer/src/components/layout/StorageHeader.tsx b/explorer/src/components/layout/StorageHeader.tsx
index a4aafb99..077ec6a9 100644
--- a/explorer/src/components/layout/StorageHeader.tsx
+++ b/explorer/src/components/layout/StorageHeader.tsx
@@ -23,7 +23,7 @@ export const StorageHeader: FC = () => {
   const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.storage), [network])
 
   return (
-    <header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
+    <header className='body-font z-9 py-[30px] text-gray-600'>
       {isDesktop ? (
         <div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
           <Link