Use Space Grotesk Font

Author: max-programming

src/app/(public)/_components/hero.tsx

@@ -27,7 +27,7 @@ export function Hero() {
       <div className="w-0 hero-overlay bg-opacity-60"></div>
       <div className="text-center hero-content">
         <div className="max-w-md">
-          <h1 className="mb-5 text-5xl font-bold uppercase text-2023-manga-3">
+          <h1 className="mb-5 text-5xl font-medium uppercase text-2023-manga-3">
             Search your language
           </h1>
           <form
@@ -51,7 +51,7 @@ export function Hero() {
               </button>
             </div>
           </form>
-          <p className="mb-5 font-semibold uppercase text-2023-manga-3">
+          <p className="mb-5 font-medium uppercase text-2023-manga-3">
             Or select the programming language you would like to find
             repositories for.
           </p>

src/app/(public)/contributors/_components/contributor-card.tsx

@@ -51,7 +51,7 @@ export function ContributorCard({ contributor }: ContributorCardProps) {
         </figure>
       </div>
       <div className="w-full gap-3 text-center card-body">
-        <h2 className="text-2xl font-bold text-center text-2023-bavarian-blue-1">
+        <h2 className="text-2xl font-medium text-center text-2023-bavarian-blue-1">
           {contributor.name}
         </h2>
         <a

src/app/(public)/contributors/page.tsx

@@ -18,7 +18,7 @@ export default async function ContributorsPage() {
     <div>
       <Header />
       <div className="container mx-auto mb-5">
-        <h1 className="my-5 text-5xl font-bold text-center text-neutral-100">
+        <h1 className="my-5 text-5xl font-medium text-center text-neutral-100">
           Contributors ✨
         </h1>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">

src/app/(public)/repos/[language]/_components/repo-card.tsx

@@ -76,7 +76,7 @@ export function RepoCard({ repo }: RepoCardProps) {
           >
             <GoStar className="text-2xl text-yellow-200" />
             <div className="flex flex-col">
-              <div className="text-lg xl:text-2xl font-semibold mb-0.5">
+              <div className="text-lg xl:text-2xl font-medium mb-0.5">
                 {repo.stargazers_count}
               </div>
               <div className="text-xs text-neutral-300 lg:text-sm">Stars</div>
@@ -95,7 +95,7 @@ export function RepoCard({ repo }: RepoCardProps) {
           >
             <GoRepoForked className="text-2xl text-yellow-200" />
             <div className="flex flex-col">
-              <div className="text-lg xl:text-2xl font-semibold mb-0.5">
+              <div className="text-lg xl:text-2xl font-medium mb-0.5">
                 {repo.forks}
               </div>
               <div className="text-xs text-neutral-300 lg:text-sm">Forks</div>
@@ -114,7 +114,7 @@ export function RepoCard({ repo }: RepoCardProps) {
           >
             <GoIssueOpened className="text-2xl text-yellow-200" />
             <div className="flex flex-col">
-              <div className="text-lg xl:text-2xl font-semibold mb-0.5">
+              <div className="text-lg xl:text-2xl font-medium mb-0.5">
                 {repo.open_issues_count}
               </div>
               <div className="text-xs text-neutral-300 lg:text-sm">Issues</div>

src/app/(public)/repos/[language]/page.tsx

@@ -32,7 +32,7 @@ export default async function ReposPage({
         <div className="min-h-screen pt-5">
           <div className="text-center">
             <div className="w-5/6 max-w-md mx-auto">
-              <h1 className="mb-5 text-5xl font-bold uppercase text-neutral-100">
+              <h1 className="mb-5 text-5xl font-medium uppercase text-neutral-100">
                 {repos.total_count} repositories for{' '}
                 <span className="font-mono text-2023-bavarian-gold-2">
                   {searchParams.q

src/app/layout.tsx

@@ -1,22 +1,22 @@
 import '@/styles/globals.css';
 import type { Metadata, Viewport } from 'next';
-import { Poppins } from 'next/font/google';
+import { Space_Grotesk } from 'next/font/google';
 import { Toaster } from 'react-hot-toast';
 import { SessionProvider } from 'next-auth/react';
 import { Footer } from '@/components/footer';
 import { ReportModal } from '@/components/report-modal';
 
-const poppins = Poppins({
+const spaceGrotesk = Space_Grotesk({
   subsets: ['latin'],
-  weight: '500',
+  weight: ['400', '500'],
   display: 'swap',
-  variable: '--font-poppins'
+  variable: '--font-space-grotesk'
 });
 
 export default function RootLayout({ children }: React.PropsWithChildren) {
   return (
-    <html className={poppins.variable}>
-      <body className="font-sans">
+    <html className={spaceGrotesk.variable}>
+      <body className="font-sans font-normal">
         {children}
         <Footer />
         <SessionProvider>

src/components/report-modal.tsx

@@ -59,7 +59,7 @@ export function ReportModal() {
   return (
     <dialog id="modal" className="modal modal-bottom sm:modal-middle">
       <div className="w-full max-w-2xl modal-box md:w-11/12">
-        <h3 className="block mb-2 text-2xl font-bold text-center text-2023-manga-2">
+        <h3 className="block mb-2 text-2xl font-medium text-center text-2023-manga-2">
           Report This Repository
         </h3>
         {session.data ? (

tailwind.config.ts

@@ -9,7 +9,7 @@ const config = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['var(--font-poppins)', 'ui-sans-serif', 'system-ui']
+        sans: ['var(--font-space-grotesk)', 'ui-sans-serif', 'system-ui']
       },
       backgroundImage: {
         'gradient-radial':