Align style with main site

src/app/(navbar)/(home)/component/BtnHeroSection.tsx

@@ -12,7 +12,7 @@ export default function BtnHeroSection({ text }: { text: string }) {
       className="hidden lg:block -48 border px-8 py-4 bg-[#1a1a1d] text-white rounded-full shadow-md hover:opacity-90 transition ease-linear duration-300 hover:bg-[#1a1a1d]/90"
       onClick={handleClickBtn}
     >
-      <div className=" font-semibold">{text} &darr;</div>
+      <div>{text} &darr;</div>
     </button>
   );
 }

src/app/(navbar)/(home)/component/HeroSection.tsx

@@ -5,9 +5,9 @@ export default function HeroSection() {
     <div className="justify-center grid grid-cols-1 md:grid-cols-8 items-center gap-8 sm:gap-16 md:gap-24 lg:gap-32 xl:gap-40 ">
       {/* lg:max-w-[30rem] xl:max-w-[36rem] */}
       <div className="flex flex-col text-center md:col-span-5 md:text-left animate-slideleft duration-200">
-        <h6 className="text-slate-900 text-5xl font-semibold font-rubik ">
+        <h1 className="text-slate-900 text-5xl font-semibold">
           {header["welcome-message"]}
-        </h6>
+        </h1>
         <p className="text-slate-600 text-base font-normal mx-4 md:mx-0 my-6 max-w-[45em]">
           {header["welcome-desc"]}
         </p>

src/app/component/navbar/Navbar.css

@@ -3,12 +3,13 @@
   font-weight: 700;
   font-size: 22px;
   text-decoration: none;
+  font-family: "HarmonyOS Sans Medium" !important;
 }
 
 .text-custom {
-  color: #636779;
+  color: #1a1a1d;
   font-weight: 500;
-  font-size: 16px;
+  font-size: 15px;
   text-decoration: none;
 }
 
@@ -128,8 +129,7 @@
   display: flex;
   padding: 16px 24px;
   align-items: center;
-  font-size: 22px;
-  color: #404454;
+  font-size: 20px;
   border-radius: 8px;
   font-weight: 600;
   transition: all ease 0.16s;

src/app/component/navbar/Navbar.tsx

@@ -53,17 +53,17 @@ const Navbar = () => {
 
   return (
     <>
-      <div className="bg-white sticky top-0 z-20  flex items-center lg:justify-start justify-between px-6 h-[4.5em]">
+      <div className="bg-white sticky top-0 z-20 flex items-center lg:justify-start justify-between px-6 h-[4.5em]">
         <div className="lg:mr-12">
           <Link
-            className="text-custom-black font-rubik !font-semibold"
+            className="text-custom-black"
             href="https://contribute.worldassociation.org"
           >
             WA Contributions
           </Link>
         </div>
         <div className="hidden lg:flex space-x-8 pr-2 items-center text-custom">
-          <ul className="flex gap-8 !font-inter  ">
+          <ul className="flex gap-8">
             {menu.map((item, index) => (
               <a href={item.link} key={index}>
                 <li className="NavMenu !font-medium transition ease-in-out duration-300">

src/app/globals.css

@@ -2,6 +2,48 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "HarmonyOS Sans Light";
+  font-style: normal;
+  font-weight: normal;
+  src: local("HarmonyOS Sans Light"),
+    url("../../public/fonts/HarmonyOS_Sans_Light.woff") format("woff");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans Regular";
+  font-style: normal;
+  font-weight: normal;
+  src: local("HarmonyOS Sans Regular"),
+    url("../../public/fonts/HarmonyOS_Sans_Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans Medium";
+  font-style: normal;
+  font-weight: normal;
+  src: local("HarmonyOS Sans Medium"),
+    url("../../public/fonts/HarmonyOS_Sans_Medium.woff") format("woff");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans Bold";
+  font-style: normal;
+  font-weight: normal;
+  src: local("HarmonyOS Sans Bold"),
+    url("../../public/fonts/HarmonyOS_Sans_Bold.woff") format("woff");
+}
+
+h1,
+h2,
+h3 {
+  font-family: "HarmonyOS Sans Medium", Inter !important;
+}
+
+* {
+  font-family: "HarmonyOS Sans Regular", Inter !important;
+}
+
 .render p a {
   color: #ff0420;
   text-decoration: none;
@@ -47,7 +89,7 @@
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(85 85 85 / var(--tw-text-opacity));
 }
 .render h1 {
   font-size: 1.875rem /* 30px */;

src/app/layout.tsx

@@ -1,21 +1,13 @@
-import './globals.css'
-import { Inter, Rubik } from 'next/font/google'
-import { RouteChangeListener } from './component/routeListener';
-import Head from 'next/head';
+import "./globals.css";
+import { Inter } from "next/font/google";
+import { RouteChangeListener } from "./component/routeListener";
 
 const interFont = Inter({
   subsets: ["latin"],
-  weight: ['200', '300', '400', '500', '600', '700'],
-  variable: '--font-inter',
+  weight: ["200", "300", "400", "500", "600", "700"],
+  variable: "--font-inter",
 });
 
-const rubikFont = Rubik({
-  subsets: ["latin"],
-  weight: ['300', '400', '500', '600', '700'],
-  variable: '--font-rubik',
-});
-
-
 // export const metadata: Metadata = {
 //   title: 'Buider Ideas',
 //   description: 'Explore ideas for your next project.',
@@ -24,17 +16,14 @@ const rubikFont = Rubik({
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-
-      <body className={`${interFont.variable} ${rubikFont.variable} `}>
-        <RouteChangeListener/>
-        <div className="font-inter  ">
-          {children}
-        </div>
+      <body className={`${interFont.variable}`}>
+        <RouteChangeListener />
+        <div className="font-inter">{children}</div>
       </body>
     </html>
-  )
+  );
 }