Fix font

Author: nyandika

src/components/HeroHeader/DesktopHero.tsx

@@ -3,21 +3,24 @@ import LinkButton from '../LinkButton/LinkButton';
 export default function HeroHeader() {
   return (
     <div
-      className="relative bg-cover  bg-center bg-no-repeat"
+      className="relative bg-cover bg-center bg-no-repeat"
       style={{
         backgroundImage: `url('/images/hero-image.jpg')`,
         backgroundColor: '#160c0c',
       }}
     >
-      <div className="w-full flex py-20 flex-col items-center justify-center z-10 bg-black bg-opacity-80">
+      {/* Translucent overlay to darken image while keeping it visible */}
+      <div className="absolute inset-0 bg-black/80" />
+
+      <div className="w-full flex py-20 flex-col items-center justify-center relative z-10">
         <h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-24">
           React Developer Community Kenya
         </h1>
         <p className="font-montserrat text-white w-[570px] mx-auto text-center mt-5 mb-[45px]">
           We are a tech community in Kenya focused on the React JS library and
           its ecosystem.
         </p>
-        <div className="flex  items-center justify-center  relative">
+        <div className="flex items-center justify-center relative">
           <LinkButton
             className="flex justify-center items-center bg-[#EC0505] hover:bg-[#e12e2e] transition-all duration:200 hover:scale-105 w-[307px] h-[61px] rounded-md text-white! font-montserrat font-bold"
             href="https://bit.ly/joinreactdevske"

src/components/HeroHeader/MobileHero.tsx

@@ -3,13 +3,15 @@ import LinkButton from '../LinkButton/LinkButton';
 export default function MobileHero() {
   return (
     <div
-      className="flex items-center justify-center bg-black bg-cover bg-center text-white mt-0"
+      className="relative flex items-center justify-center bg-cover bg-center text-white mt-0"
       style={{
         backgroundImage: `url('/images/hero-image.jpg')`,
       }}
     >
-      <div className="bg-black pt-[20vh] h-full justify-end items-center pb-[5vh] flex-col bg-opacity-50 p-6 rounded-md flex   bg-cover bg-center text-white mt-0">
-        {' '}
+      {/* overlay for legibility using Tailwind */}
+      <div className="absolute inset-0 bg-black/50" />
+
+      <div className="relative z-10 pt-[20vh] h-full justify-end items-center pb-[5vh] flex-col p-6 rounded-md flex text-white mt-0">
         {/* Adds opacity to make text more legible */}
         <h1 className="font-robotoMono font-medium text-2xl text-center mb-2 text-white">
           React Developer Community Kenya

src/styles/globals.css

@@ -1,5 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');
 @import 'tailwindcss';
 
+@theme {
+  --font-montserrat: 'Montserrat', sans-serif;
+  --font-roboto-mono: 'Roboto Mono', monospace;
+  --font-dm-sans: 'DM Sans', sans-serif;
+}
+
 html,
 body {
   padding: 0;

tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
       },
       fontFamily: {
         montserrat: ['Montserrat', 'sans-serif'],
-        robotoMono: ['Robot Mono', 'monospace'],
+        robotoMono: ['Roboto Mono', 'monospace'],
         dmSans: ['DM Sans', 'sans-serif'],
       },
     },