feat: navbar

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fontsource/dm-sans": "^5.1.0",
+    "next": "15.0.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.0.4"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.4",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.4"
+    "typescript": "^5"
   }
 }

src/app/components/HeroSection.tsx

@@ -0,0 +1,42 @@
+import translations from "../data/translations.json";
+
+type TranslationKeys = keyof typeof translations;
+
+type HeroSectionProps = {
+  selectedLang: TranslationKeys;
+};
+
+const HeroSection = ({ selectedLang }: HeroSectionProps) => {
+  return (
+    <section className="bg-gradient-to-b from-blue-50 to-white/80 py-16">
+      <div className="container mx-auto px-4 lg:px-16 flex flex-col-reverse lg:flex-row items-center gap-8">
+        <div className="text-center lg:text-left flex-1 lg:pr-8">
+          <h1
+            className="text-3xl lg:text-5xl font-bold mb-6 leading-snug"
+            style={{ color: "#484848" }}
+          >
+            {translations[selectedLang].title}
+          </h1>
+          <p className="text-lg mb-6" style={{ color: "#555555" }}>
+            {translations[selectedLang].description}
+          </p>
+          <button
+            className="text-white px-8 py-3 text-lg rounded-md shadow hover:brightness-110 transition"
+            style={{ backgroundColor: "#2F7CC4" }}
+          >
+            {translations[selectedLang].button}
+          </button>
+        </div>
+        <div className="flex-shrink-0 flex-1">
+          <img
+            src="/doctor.png"
+            alt="Doctor providing medical advice"
+            className="w-full lg:w-[550px] rounded-lg shadow-md"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

src/app/components/Navbar.tsx

@@ -56,11 +56,14 @@ const Navbar = () => {
   return (
     <header className="bg-white shadow sticky top-0 z-50">
       <div className="container mx-auto px-4 flex items-center justify-between py-4">
-        <Link href="/" className="text-2xl font-bold text-blue-600">
+        <Link
+          href="/"
+          className="text-2xl font-bold text-blue-600 flex-shrink-0"
+        >
           Rheuma<span className="text-gray-800">Connect</span>
         </Link>
 
-        <nav className="hidden md:flex items-center space-x-6">
+        <nav className="hidden md:flex items-center space-x-6 ml-6">
           {[
             { href: "/", label: "Home" },
             { href: "/categories", label: "Categories" },
@@ -77,23 +80,23 @@ const Navbar = () => {
               {label}
             </Link>
           ))}
-          <button className="px-6 py-2 bg-[#2F7CC4] text-white rounded-full hover:bg-[#276ca3] transition">
+
+          <button
+            className="bg-[#2F7CC4] text-white rounded-[10px] text-[14px] font-medium hover:bg-[#276ca3] transition flex items-center justify-center"
+            style={{ width: "98px", height: "38px", lineHeight: "18px" }}
+          >
             Explore
           </button>
 
           <div className="relative" ref={dropdownRef}>
             <button
               onClick={toggleDropdown}
-              className="px-4 py-2 border rounded text-gray-800 flex items-center space-x-2 hover:bg-gray-100 transition"
+              className="bg-white border border-gray-400 text-gray-800 rounded-[10px] text-[14px] font-medium flex items-center justify-center hover:bg-gray-100 transition"
+              style={{ width: "98px", height: "38px", lineHeight: "18px" }}
             >
-              <span>
-                {
-                  languages.find((lang) => lang.value === selectedLanguage)
-                    ?.label
-                }
-              </span>
+              <span>English</span>
               <svg
-                className={`w-4 h-4 transform ${
+                className={`w-4 h-4 text-black transform ${
                   isDropdownOpen ? "rotate-180" : "rotate-0"
                 }`}
                 fill="none"
@@ -109,8 +112,9 @@ const Navbar = () => {
                 />
               </svg>
             </button>
+
             {isDropdownOpen && (
-              <div className="absolute mt-2 w-40 bg-white border rounded shadow-lg">
+              <div className="absolute mt-2 w-40 bg-white border border-gray-200 rounded shadow-lg">
                 {languages.map(({ label, value }) => (
                   <button
                     key={value}
@@ -193,25 +197,27 @@ const Navbar = () => {
                   {label}
                 </Link>
               ))}
-              <button className="px-6 py-2 bg-[#2F7CC4] text-white rounded-full hover:bg-[#276ca3] transition">
+              <button
+                className="px-6 py-2 bg-[#2F7CC4] text-white rounded-full text-sm hover:bg-[#276ca3] transition"
+                style={{ width: "98px", height: "38px" }}
+              >
                 Explore
               </button>
-
               <div className="mt-4">
                 <div className="relative" ref={dropdownRef}>
                   <button
                     onClick={toggleDropdown}
-                    className="px-4 py-2 border rounded text-gray-800 flex items-center space-x-2 hover:bg-gray-100 transition w-full"
+                    className="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm flex items-center space-x-2 shadow-sm hover:bg-gray-100 transition w-full"
                   >
-                    <span>
+                    <span className="text-black">
                       {
                         languages.find(
                           (lang) => lang.value === selectedLanguage
                         )?.label
                       }
                     </span>
                     <svg
-                      className={`w-4 h-4 transform ${
+                      className={`w-4 h-4 text-black transform ${
                         isDropdownOpen ? "rotate-180" : "rotate-0"
                       }`}
                       fill="none"
@@ -228,7 +234,7 @@ const Navbar = () => {
                     </svg>
                   </button>
                   {isDropdownOpen && (
-                    <div className="absolute mt-2 w-full bg-white border rounded shadow-lg">
+                    <div className="absolute mt-2 w-full bg-white border border-gray-200 rounded shadow-lg">
                       {languages.map(({ label, value }) => (
                         <button
                           key={value}

src/app/data/translations.json

@@ -0,0 +1,7 @@
+{
+  "en": {
+    "title": "Expert backed, FREE medical advice for your Rheumatic Condition",
+    "description": "Everything about your pre-diagnosed rheumatic condition is just a button-click away with RheumaConnect.",
+    "button": "Get Started"
+  }
+}

src/app/layout.tsx

@@ -1,18 +1,7 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
 import Navbar from "./components/Navbar";
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+import "@fontsource/dm-sans";
 
 export const metadata: Metadata = {
   title: "RheumaConnect",
@@ -27,7 +16,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className="antialiased"
+        style={{
+          fontFamily: "'DM Sans', sans-serif",
+        }}
       >
         <Navbar />
         <main>{children}</main>

src/app/page.tsx

@@ -1,3 +1,9 @@
+import HeroSection from "./components/HeroSection";
+
 export default function Home() {
-  return <div></div>;
+  return (
+    <div>
+      <HeroSection selectedLang="en" />
+    </div>
+  );
 }