Merge pull request #41 from sliitsesc/fix/40-importing-next-google-fo…

…nts-package fix: Using next google fonts package to import DM Sans font
sliitsesc · Jan 11, 2025 · 4bafb48 · 4bafb48
2 parents 54f938b + 6c5d8fb
commit 4bafb48
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 88 deletions.
diff --git a/src/app/components/AZCards.tsx b/src/app/components/AZCards.tsx
@@ -3,94 +3,86 @@
 import { AZCards as AZCardsType } from "@/app/types";
 
 type AZCardsProps = {
-    azCards: AZCardsType;
+  azCards: AZCardsType;
 };
 
 const AZCards = ({ azCards }: AZCardsProps) => {
-    const { health, medicine } = azCards;
+  const { health, medicine } = azCards;
 
-    return (
-        <div
-            className="w-full max-w-[1512px] h-auto px-[67px] py-[82px] flex flex-col md:flex-row md:justify-between gap-6 mx-auto"
-            style={{ background: "#FFFFFF" }}
-        >
-            {/* Health A to Z */}
-            <a
-                href="#"
-                className="flex flex-col justify-between w-full md:w-[calc(50%-36px)] lg:w-[678px] min-h-[287px] border-4 border-[#DBEBFB] rounded-lg bg-white p-8 hover:shadow-lg transition duration-300 relative"
+  return (
+    <div
+      className="w-full max-w-[1512px] h-auto px-[67px] py-[82px] flex flex-col md:flex-row md:justify-between gap-6 mx-auto"
+      style={{ background: "#FFFFFF" }}
+    >
+      {/* Health A to Z */}
+      <a
+        href="#"
+        className="flex flex-col justify-between w-full md:w-[calc(50%-36px)] lg:w-[678px] min-h-[287px] border-4 border-[#DBEBFB] rounded-lg bg-white p-8 hover:shadow-lg transition duration-300 relative"
+      >
+        <div className="flex flex-col items-start md:items-stretch gap-4">
+          <h2 className="text-[#484848] font-bold text-[24px] md:text-[28px] lg:text-[32px] leading-tight text-left">
+            {health.title}
+          </h2>
+          <p className="text-[#9E9E9E] font-medium text-[16px] md:text-[18px] lg:text-[20px] leading-relaxed text-left">
+            {health.description}
+          </p>
+        </div>
+        <div className="flex md:justify-end justify-center md:absolute md:bottom-6 md:right-6 mt-6 md:mt-0">
+          <div className="w-[60px] h-[60px] md:w-[74px] md:h-[74px] bg-[#2F7CC4] flex justify-center items-center rounded-[14px]">
+            <svg
+              width="32"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
-                <div className="flex flex-col items-start md:items-stretch gap-4">
-                    <h2
-                        className="text-[#484848] font-extrabold text-[24px] md:text-[28px] lg:text-[32px] leading-tight text-left"
-                    >
-                        {health.title}
-                    </h2>
-                    <p
-                        className="text-[#9E9E9E] font-medium text-[16px] md:text-[18px] lg:text-[20px] leading-relaxed text-left"
-                    >
-                        {health.description}
-                    </p>
-                </div>
-                <div className="flex md:justify-end justify-center md:absolute md:bottom-6 md:right-6 mt-6 md:mt-0">
-                    <div className="w-[60px] h-[60px] md:w-[74px] md:h-[74px] bg-[#2F7CC4] flex justify-center items-center rounded-[14px]">
-                        <svg
-                            width="32"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M5 12h13M12 5l7 7-7 7"
-                                stroke="white"
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                            />
-                        </svg>
-                    </div>
-                </div>
-            </a>
+              <path
+                d="M5 12h13M12 5l7 7-7 7"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </a>
 
-            {/* Medicine A to Z */}
-            <a
-                href="#"
-                className="flex flex-col justify-between w-full md:w-[calc(50%-36px)] lg:w-[678px] min-h-[287px] border-4 border-[#DBEBFB] rounded-lg bg-white p-8 hover:shadow-lg transition duration-300 relative"
+      {/* Medicine A to Z */}
+      <a
+        href="#"
+        className="flex flex-col justify-between w-full md:w-[calc(50%-36px)] lg:w-[678px] min-h-[287px] border-4 border-[#DBEBFB] rounded-lg bg-white p-8 hover:shadow-lg transition duration-300 relative"
+      >
+        <div className="flex flex-col items-start md:items-stretch gap-4">
+          <h2 className="text-[#484848] font-bold text-[24px] md:text-[28px] lg:text-[32px] leading-tight text-left">
+            {medicine.title}
+          </h2>
+          <p className="text-[#9E9E9E] font-medium text-[16px] md:text-[18px] lg:text-[20px] leading-relaxed text-left">
+            {medicine.description}
+          </p>
+        </div>
+        <div className="flex md:justify-end justify-center md:absolute md:bottom-6 md:right-6 mt-6 md:mt-0">
+          <div className="w-[60px] h-[60px] md:w-[74px] md:h-[74px] bg-[#2F7CC4] flex justify-center items-center rounded-[14px]">
+            <svg
+              width="32"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
-                <div className="flex flex-col items-start md:items-stretch gap-4">
-                    <h2
-                        className="text-[#484848] font-extrabold text-[24px] md:text-[28px] lg:text-[32px] leading-tight text-left"
-                    >
-                        {medicine.title}
-                    </h2>
-                    <p
-                        className="text-[#9E9E9E] font-medium text-[16px] md:text-[18px] lg:text-[20px] leading-relaxed text-left"
-                    >
-                        {medicine.description}
-                    </p>
-                </div>
-                <div className="flex md:justify-end justify-center md:absolute md:bottom-6 md:right-6 mt-6 md:mt-0">
-                    <div className="w-[60px] h-[60px] md:w-[74px] md:h-[74px] bg-[#2F7CC4] flex justify-center items-center rounded-[14px]">
-                        <svg
-                            width="32"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M5 12h13M12 5l7 7-7 7"
-                                stroke="white"
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                            />
-                        </svg>
-                    </div>
-                </div>
-            </a>
+              <path
+                d="M5 12h13M12 5l7 7-7 7"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
         </div>
-    );
+      </a>
+    </div>
+  );
 };
 
 export default AZCards;
diff --git a/src/app/components/MainCategorySection.jsx b/src/app/components/MainCategorySection.jsx
@@ -8,7 +8,7 @@ import categoriesData from "../data/MainCategorySection/categoriesData.json";
 const MainCategorySection = () => {
   return (
     <section className="bg-white py-16">
-      <h2 className="text-black font-extrabold text-4xl text-center">
+      <h2 className="text-black font-bold text-4xl text-center">
         Main Categories
       </h2>
       <p className="text-[#9E9E9E] text-center px-8 py-12 text-2xl">
@@ -29,7 +29,7 @@ const MainCategorySection = () => {
               />
             </div>
             <div className="max-w-[274px] mx-auto">
-              <h4 className="font-extrabold text-2xl text-[#484848] py-4">
+              <h4 className="font-semibold text-2xl text-[#484848] py-4">
                 {category.title}
               </h4>
               <p className="text-[#9E9E9E] py-4">{category.description}</p>

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+type Props = {};
+
+function page({}: Props) {
+  return <div>page</div>;
+}
+
+export default page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,13 @@ import type { Metadata } from "next";
 import "./globals.css";
 import Navbar from "./components/Navbar";
 import "@fontsource/dm-sans";
+import { DM_Sans } from "next/font/google";
+
+const dmSans = DM_Sans({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-dm-sans",
+});
 
 export const metadata: Metadata = {
   title: "RheumaConnect",
@@ -14,12 +21,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body
-        className="antialiased"
-        style={{
-          fontFamily: "'DM Sans', sans-serif",
-        }}>
+    <html lang="en" className={dmSans.variable}>
+      <body className="antialiased font-sans">
         <Navbar />
         <main>{children}</main>
       </body>