diff --git a/package-lock.json b/package-lock.json index d0958a9..1f92e3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "rheumaconnect-fe", "version": "0.1.0", "dependencies": { + "@fontsource/dm-sans": "^5.1.0", "next": "15.0.4", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -109,6 +110,12 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource/dm-sans": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.1.0.tgz", + "integrity": "sha512-YpGtZ8Rbh+/84rn7o/rzBBFnikoLjhjtzKYAMZhSRr7xWU0piZDBFhUdI14M4Ub8emh0TSG/gU2pJOMUe9TGYA==", + "license": "OFL-1.1" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", diff --git a/package.json b/package.json index 3d5bbfd..fc503d9 100644 --- a/package.json +++ b/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" } } diff --git a/public/doctor.png b/public/doctor.png new file mode 100644 index 0000000..75a5cdb Binary files /dev/null and b/public/doctor.png differ diff --git a/src/app/components/HeroSection.tsx b/src/app/components/HeroSection.tsx new file mode 100644 index 0000000..597d4f0 --- /dev/null +++ b/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 ( +
+
+
+

+ {translations[selectedLang].title} +

+

+ {translations[selectedLang].description} +

+ +
+
+ Doctor providing medical advice +
+
+
+ ); +}; + +export default HeroSection; diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx new file mode 100644 index 0000000..4d6280d --- /dev/null +++ b/src/app/components/Navbar.tsx @@ -0,0 +1,259 @@ +"use client"; + +import React, { useState, useEffect, useRef } from "react"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; + +const languages = [ + { label: "English", value: "en" }, + { label: "සිංහල", value: "si" }, + { label: "தமிழ்", value: "ta" }, +]; + +const Navbar = () => { + const [isOpen, setIsOpen] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [selectedLanguage, setSelectedLanguage] = useState("en"); + const pathname = usePathname(); + const dropdownRef = useRef(null); + + const toggleMenu = () => setIsOpen(!isOpen); + const closeMenu = () => setIsOpen(false); + + const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen); + const closeDropdown = () => setIsDropdownOpen(false); + + const handleLanguageSelect = (lang: string) => { + setSelectedLanguage(lang); + closeDropdown(); + }; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + closeDropdown(); + } + }; + + const handleEscape = (event: KeyboardEvent) => { + if (event.key === "Escape") { + closeDropdown(); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("keydown", handleEscape); + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + document.removeEventListener("keydown", handleEscape); + }; + }, []); + + return ( +
+
+ + RheumaConnect + + + + + +
+ + {isOpen && ( +
+
e.stopPropagation()} + > +
+ {[ + { href: "/", label: "Home" }, + { href: "/categories", label: "Categories" }, + { href: "/clinic", label: "Clinic" }, + { href: "/contact", label: "Contact" }, + ].map(({ href, label }) => ( + + {label} + + ))} + +
+
+ + {isDropdownOpen && ( +
+ {languages.map(({ label, value }) => ( + + ))} +
+ )} +
+
+
+
+
+ )} +
+ ); +}; + +export default Navbar; diff --git a/src/app/data/translations.json b/src/app/data/translations.json new file mode 100644 index 0000000..0f80680 --- /dev/null +++ b/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" + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a36cde0..dbc811a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,34 +1,28 @@ import type { Metadata } from "next"; -import localFont from "next/font/local"; import "./globals.css"; - -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 Navbar from "./components/Navbar"; +import "@fontsource/dm-sans"; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "RheumaConnect", + description: "Navbar Integration Example", }; export default function RootLayout({ children, -}: Readonly<{ +}: { children: React.ReactNode; -}>) { +}) { return ( - {children} + +
{children}
); diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..68a6565 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,9 @@ -import Image from "next/image"; +import HeroSection from "./components/HeroSection"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+
); }