chore: update fonts (#47)

mocha-bot · Oct 15, 2024 · 3d1a179 · 3d1a179
1 parent e9cb6fe
commit 3d1a179
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 16 deletions.
diff --git a/src/modules/LandingPage/Hero.tsx b/src/modules/LandingPage/Hero.tsx
@@ -65,24 +65,23 @@ export function Hero() {
           color='white'
           fontSize={{ base: '5xl', lg: '6xl' }}
           lineHeight='none'>
-          Drink mocha with people accross the universe
+          Drink mocha with people across the universe
         </Text>
         <Text color='white' fontSize={20} lineHeight='none' fontWeight='light'>
           Mocha is a Discord bot for multi-chat cross-server, that allows you to
           send messages to multiple channels at once.{' '}
         </Text>
       </VStack>
       <HStack w='full' justifyContent={{ base: 'center', md: 'space-between' }}>
-        <HStack>
+        <HStack w='full'>
           {buttons.map((button) => (
             <Button
               as='a'
               key={button.label}
-              size='lg'
+              size={{ base: 'md', md: 'lg' }}
               color='white'
               rounded='full'
               backgroundColor={button.backgroundColor}
-              fontSize='sm'
               fontWeight={500}
               variant={button.variant}
               href={button.href}>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -4,6 +4,7 @@ import Head from 'next/head';
 import { GoogleAnalytics } from 'nextjs-google-analytics';
 
 import { AppProvider } from '@/AppProvider';
+import { fonts } from '@/theme/fonts';
 
 import '@/theme/global.css';
 
@@ -12,6 +13,13 @@ const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID || '';
 function App({ Component, pageProps }: AppProps) {
   return (
     <>
+      <style jsx global>
+        {`
+          :root {
+            --font-plus-jakarta-sans: ${fonts.plusJakartaSans.style.fontFamily};
+          }
+        `}
+      </style>
       <Head>
         <title>Mocha Bot</title>
       </Head>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -2,30 +2,21 @@ import { Head, Html, Main, NextScript } from 'next/document';
 
 function MyDocument() {
   return (
-    <Html>
+    <Html lang='en'>
       <Head>
         <link rel='preconnect' href='https://fonts.googleapis.com' />
         <link rel='preconnect' href='https://fonts.gstatic.com' />
-        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
-        <link
-          href='https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap'
-          rel='stylesheet'
-        />
         <meta property='og:title' content='Mocha Bot' key='meta-title' />
         <meta
           property='og:description'
-          content='Drink mocha with people across the universe.'
+          content='Mocha is a bot for multi-chat cross-server, This bot allows you to send messages to multiple channels at once. You can create a private or public channel and send messages to it. The bot also filters out messages from prohibits mentions.'
           key='meta-description'
         />
         <meta property='og:image' content='/assets/images/logo-mocha.png' />
         <meta property='og:locale' content='en_US' key='meta-locale' />
         <meta property='og:url' content='https://mocha-bot.xyz/' />
       </Head>
-      <body
-        style={{
-          fontFamily: 'Nunito Sans, sans-serif',
-          height: 'full',
-        }}>
+      <body>
         <Main />
         <NextScript />
       </body>

diff --git a/src/theme/fonts.ts b/src/theme/fonts.ts
@@ -0,0 +1,12 @@
+import { Plus_Jakarta_Sans } from 'next/font/google';
+
+export const plusJakartaSans = Plus_Jakarta_Sans({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-plus-jakarta-sans',
+  fallback: ['sans-serif'],
+});
+
+export const fonts = {
+  plusJakartaSans,
+};
diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -42,6 +42,10 @@ const theme = extendTheme({
     smaller: 0.75,
     small: 0.875,
   },
+  fonts: {
+    heading: 'var(--font-plus-jakarta-sans)',
+    body: 'var(--font-plus-jakarta-sans)',
+  },
 });
 
 export { theme };