From 668b8729a8e7d535eef19c75b700359a6f114557 Mon Sep 17 00:00:00 2001
From: Tim Howitz <Tim.Howitz@dyson.com>
Date: Tue, 29 Apr 2025 16:52:03 +0100
Subject: [PATCH] Did lots of cleaning and polishing

---
 src/app/contact-us/page.tsx      |  36 +++++-----
 src/app/shop/page.tsx            |  80 +++++++++++-----------
 src/app/the-team/page.module.css |  75 ---------------------
 src/app/the-team/page.tsx        | 104 +++++++++++++++++------------
 src/components/navbar.tsx        | 111 ++++++++++++++++---------------
 5 files changed, 178 insertions(+), 228 deletions(-)
 delete mode 100644 src/app/the-team/page.module.css

diff --git a/src/app/contact-us/page.tsx b/src/app/contact-us/page.tsx
index 048d9b1..4a5c07b 100644
--- a/src/app/contact-us/page.tsx
+++ b/src/app/contact-us/page.tsx
@@ -1,6 +1,6 @@
 "use client";
-import Image from "next/image";
-import React, { useState } from "react";
+import Image from 'next/image';
+import React, { useState } from 'react';
 
 const ContactUs = () => {
 	const [formData, setFormData] = useState({
@@ -9,11 +9,11 @@ const ContactUs = () => {
 		message: "",
 	});
 
-	const handleChange = (e) => {
+	const handleChange = (e: { target: { name: any; value: any } }) => {
 		setFormData({ ...formData, [e.target.name]: e.target.value });
 	};
 
-	const handleSubmit = (e) => {
+	const handleSubmit = (e: { preventDefault: () => void }) => {
 		e.preventDefault();
 		console.log("Form submitted with data:", formData);
 		alert("Thank you for reaching out! We will get back to you soon.");
@@ -21,16 +21,22 @@ const ContactUs = () => {
 	};
 
 	return (
-		<div className="h-screen relative text-white py-10 border border-black">
-			<Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg" />
+		<div className="h-full relative text-white border border-black overflow-hidden">
+			<Image
+				height={5000}
+				width={5000}
+				alt="Logo"
+				className="border border-neutral-300 absolute z-10 -top-20"
+				src="/tsunamiWaves.jpg"
+			/>
 
 			{/* Overlay for readability */}
-			<div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
+			<div className="absolute overflow-hidden w-full h-full bg-gradient-to-b from-black/70 via-black/40 to-transparent flex flex-col items-center z-20">
 				{/* Container */}
-				<div className="max-w-4xl mx-auto p-5">
+				<div className="max-w-4xl mx-auto p-5 mt-20">
 					{/* Header */}
 					<h1 className="text-4xl font-bold text-center text-white mb-6">Contact Us</h1>
-					<p className="text-lg text-center text-neutral-300 mb-6">
+					<p className="text-lg text-center text-neutral-200 mb-6">
 						Have questions or concerns about earthquake preparedness? Contact us using the form below or through the provided
 						contact details.
 					</p>
@@ -81,10 +87,11 @@ const ContactUs = () => {
 										id="message"
 										value={formData.message}
 										onChange={handleChange}
-										rows="5"
+										rows={5}
 										placeholder="Your Message"
 										className="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 										required
+										style={{ resize: "none" }}
 									/>
 								</div>
 
@@ -98,11 +105,13 @@ const ContactUs = () => {
 						</div>
 
 						{/* Contact Details Section */}
-						<div className="flex-1 bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
+						<div className="w-[45%] bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
 							<h2 className="text-xl font-bold text-neutral-800 mb-4">Get in Touch</h2>
 							<div className="mb-4">
 								<h3 className="text-neutral-700 font-medium">Email</h3>
-								<p className="text-neutral-600">getintouch@tremortracker.org.uk</p>
+								<a href="mailto:getintouch@tremortracker.com" style={{ color: "initial" }}>
+									getintouch@tremortracker.com
+								</a>
 							</div>
 							<div className="mb-4">
 								<h3 className="text-neutral-700 font-medium">Phone</h3>
@@ -130,9 +139,6 @@ const ContactUs = () => {
 									<span className="sr-only">LinkedIn</span>
 									<Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png" />
 								</a>
-              <h3 className="text-l font-bold text-gray-500 mb-2 mt-4">
-                @tremor.tracker
-              </h3>
 							</div>
 						</div>
 					</div>
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index ca2bd7b..29a28fa 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import Image from 'next/image';
 import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 
 import Artifact from '@appTypes/Artifact';
@@ -13,7 +14,7 @@ const artifacts: Artifact[] = [
 		name: "Golden Scarab",
 		description: "An ancient Egyptian artifact symbolizing rebirth.",
 		location: "Cairo, Egypt",
-		image: "/images/artifact1.jpg",
+		image: "/artifact1.jpg",
 		price: 150,
 	},
 	{
@@ -21,7 +22,7 @@ const artifacts: Artifact[] = [
 		name: "Aztec Sunstone",
 		description: "A replica of the Aztec calendar (inscriptions intact).",
 		location: "Peru",
-		image: "/images/artifact2.jpg",
+		image: "/artifact2.jpg",
 		price: 200,
 	},
 	{
@@ -29,7 +30,7 @@ const artifacts: Artifact[] = [
 		name: "Medieval Chalice",
 		description: "Used by royalty in medieval ceremonies.",
 		location: "Cambridge, England",
-		image: "/images/artifact3.jpg",
+		image: "/artifact3.jpg",
 		price: 120,
 	},
 	{
@@ -37,7 +38,7 @@ const artifacts: Artifact[] = [
 		name: "Roman Coin",
 		description: "An authentic Roman coin from the 2nd century CE.",
 		location: "Rome, Italy",
-		image: "/images/artifact4.jpg",
+		image: "/artifact4.jpg",
 		price: 80,
 	},
 	{
@@ -45,7 +46,7 @@ const artifacts: Artifact[] = [
 		name: "Samurai Mask",
 		description: "Replica of Japanese Samurai battle masks.",
 		location: "Tokyo, Japan",
-		image: "/images/artifact5.jpg",
+		image: "/artifact5.jpg",
 		price: 300,
 	},
 	{
@@ -53,7 +54,7 @@ const artifacts: Artifact[] = [
 		name: "Ancient Greek Vase",
 		description: "Depicts Greek mythology, found in the Acropolis.",
 		location: "Athens, Greece",
-		image: "/images/artifact6.jpg",
+		image: "/artifact6.jpg",
 		price: 250,
 	},
 	{
@@ -61,7 +62,7 @@ const artifacts: Artifact[] = [
 		name: "Incan Pendant",
 		description: "Represents the Sun God Inti.",
 		location: "India",
-		image: "/images/artifact7.jpg",
+		image: "/artifact7.jpg",
 		price: 175,
 	},
 	{
@@ -69,7 +70,7 @@ const artifacts: Artifact[] = [
 		name: "Persian Carpet Fragment",
 		description: "Ancient Persian artistry.",
 		location: "Petra, Jordan",
-		image: "/images/artifact8.jpg",
+		image: "/artifact8.jpg",
 		price: 400,
 	},
 	{
@@ -77,7 +78,7 @@ const artifacts: Artifact[] = [
 		name: "Stone Buddha",
 		description: "Authentic stone Buddha carving.",
 		location: "India",
-		image: "/images/artifact9.jpg",
+		image: "/artifact9.jpg",
 		price: 220,
 	},
 	{
@@ -85,7 +86,7 @@ const artifacts: Artifact[] = [
 		name: "Victorian Brooch",
 		description: "A beautiful Victorian-era brooch with a ruby centre.",
 		location: "Oxford, England",
-		image: "/images/artifact10.jpg",
+		image: "/artifact10.jpg",
 		price: 150,
 	},
 	{
@@ -93,7 +94,7 @@ const artifacts: Artifact[] = [
 		name: "Ancient Scroll",
 		description: "A mysterious scroll from ancient times.",
 		location: "Madrid, Spain",
-		image: "/images/artifact11.jpg",
+		image: "/artifact11.jpg",
 		price: 500,
 	},
 	{
@@ -101,7 +102,7 @@ const artifacts: Artifact[] = [
 		name: "Ming Dynasty Porcelain",
 		description: "Porcelain from China's Ming Dynasty.",
 		location: "Beijing, China",
-		image: "/images/artifact12.jpg",
+		image: "/artifact12.jpg",
 		price: 300,
 	},
 	{
@@ -109,7 +110,7 @@ const artifacts: Artifact[] = [
 		name: "African Tribal Mask",
 		description: "A unique tribal mask from Africa.",
 		location: "Nigeria",
-		image: "/images/artifact13.jpg",
+		image: "/artifact13.jpg",
 		price: 250,
 	},
 	{
@@ -117,7 +118,7 @@ const artifacts: Artifact[] = [
 		name: "Crystal Skull",
 		description: "A mystical pre-Columbian artifact.",
 		location: "Colombia",
-		image: "/images/artifact14.jpg",
+		image: "/artifact14.jpg",
 		price: 1000,
 	},
 	{
@@ -125,7 +126,7 @@ const artifacts: Artifact[] = [
 		name: "Medieval Armor Fragment",
 		description: "A fragment of medieval armor.",
 		location: "Normandy, France",
-		image: "/images/artifact15.jpg",
+		image: "/artifact15.jpg",
 		price: 400,
 	},
 ];
@@ -171,31 +172,29 @@ export default function Shop() {
 				className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
 				onClick={handleOverlayClick}
 			>
-				<div className="bg-white rounded-md shadow-lg max-w-lg w-full p-6">
-					<h3 className="text-xl font-bold mb-4">{artifact.name}</h3>
-					<img src={artifact.image} alt={artifact.name} className="w-full h-64 object-cover rounded-md mb-4" />
-					<p className="text-neutral-600 mb-2">{artifact.description}</p>
-					<p className="text-neutral-500 font-bold mb-4">Location: {artifact.location}</p>
-					<p className="text-red-600 font-bold">Price: ${artifact.price}</p>
-					<div className="flex justify-end gap-4 mt-6">
-						<button
-							onClick={() => alert("Reserved Successfully!")}
-							className="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-400"
-						>
-							Reserve
-						</button>
+				<div className="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6">
+					<h3 className="text-2xl font-bold mb-4">{artifact.name}</h3>
+					<Image
+						height={5000}
+						width={5000}
+						src={artifact.image}
+						alt={artifact.name}
+						className="w-full h-64 object-cover rounded-md"
+					></Image>
+					<p className="text-xl font-bold">
+						{currencyTickers[selectedCurrency]}
+						{convertPrice(artifact.price, selectedCurrency)}
+					</p>
+					<p className="text-neutral-600 mt-2">{artifact.description}</p>
+					<p className="text-neutral-500 font-bold mt-1">Location: {artifact.location}</p>
+
+					<div className="flex justify-end gap-4 mt-4 mr-2">
 						<button
 							onClick={() => alert("Purchased Successfully!")}
-							className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-500"
+							className="px-10 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
 						>
 							Buy
 						</button>
-						<button
-							onClick={() => setSelectedArtifact(null)}
-							className="px-4 py-2 bg-neutral-300 rounded-md hover:bg-neutral-400"
-						>
-							Close
-						</button>
 					</div>
 				</div>
 			</div>
@@ -211,10 +210,9 @@ export default function Shop() {
 			>
 				<img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
 				<div className="p-4">
-					<h3 className="text-lg font-bold">{artifact.name}</h3>
-					<p className="text-neutral-700 mb-2">{artifact.description}</p>
+					<h3 className="text-lg font-semibold">{artifact.name}</h3>
 					<p className="text-neutral-500 mb-2">{artifact.location}</p>
-					<p className="text-blue-600 font-bold text-md mt-4">
+					<p className="text-black font-bold text-md mt-2">
 						{currencyTickers[selectedCurrency]}
 						{convertPrice(artifact.price, selectedCurrency)}
 					</p>
@@ -234,6 +232,7 @@ export default function Shop() {
 					))}
 				</div>
 			</div>
+
 			{/* Sidebar */}
 			<div className="bg-white shadow-lg h-screen fixed right-0 overflow-y-auto">
 				<Sidebar
@@ -255,16 +254,17 @@ export default function Shop() {
 			</div>
 
 			{/* Pagination Footer */}
-			<footer className="bg-white border-t border-neutral-300 py-2 text-center flex justify-center items-center mr-[19rem]">
+			<footer className="mt-10 bg-white border-t border-neutral-300 py-3 text-center flex justify-center items-center mr-[19rem]">
 				<button
 					onClick={handlePreviousPage}
 					disabled={currentPage === 1}
-					className={`mx-2 px-4 py-1 bg-blue-700 text-white rounded-md font-bold shadow-md ${
+					className={`mx-2 px-4 py-1 bg-blue-500 text-white rounded-md font-bold shadow-md ${
 						currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
 					}`}
 				>
 					&larr; Previous
 				</button>
+				<p className="mx-3 text-lg font-bold">{currentPage}</p>
 				<button
 					onClick={handleNextPage}
 					disabled={indexOfLastArtifact >= artifacts.length}
diff --git a/src/app/the-team/page.module.css b/src/app/the-team/page.module.css
deleted file mode 100644
index 2831804..0000000
--- a/src/app/the-team/page.module.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* Container styling */
-.container {
-    font-family: Arial, sans-serif;
-    padding: 20px;
-    text-align: center;
-    color: #333;
-    background-color: #f9f9f9;
-}
-
-/* Header styling */
-.header {
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.subheader {
-    font-size: 1.2rem;
-    color: #555;
-    margin-bottom: 30px;
-}
-
-/* Team styling */
-.team {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center; /* Centers team member cards */
-}
-
-/* Individual team member card styling */
-.card {
-    display: flex;
-    align-items: center;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    width: 90%; /* Width relative to the viewport */
-    max-width: 800px; /* Prevent it from getting too large */
-    padding: 15px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-}
-
-/* Team member image styling */
-.image {
-    width: 110px; /* Both width and height are equal */
-    height: 110px;
-    border-radius: 50%; /* Makes the image circular */
-    object-fit: cover; /* Ensures the image fits perfectly without distortion */
-}
-
-/* Card text styling */
-.text {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.name {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: #111;
-    margin-bottom: 5px;
-}
-
-.title {
-    font-size: 1.2rem;
-    color: #555;
-    margin-bottom: 10px;
-}
-
-.description {
-    font-size: 1rem;
-    color: #777;
-}
\ No newline at end of file
diff --git a/src/app/the-team/page.tsx b/src/app/the-team/page.tsx
index 6f268b0..35471e6 100644
--- a/src/app/the-team/page.tsx
+++ b/src/app/the-team/page.tsx
@@ -1,50 +1,68 @@
 "use client"; // Required for components in Next.js (using client-side rendering)
-import styles from './page.module.css';
+import Image from 'next/image';
 
 const teamMembers = [
-    { name: "Tim Howitz", 
-        title: "Chief Crack Inspector", 
-        description: "Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.", 
-        image: "/Timthescientist.PNG" },
-    { name: "Emily Neighbour", 
-        title: "Chief Software Engineer", 
-        description: "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute", 
-        image: "/Emilythescientist.PNG" },
-    { name: "Izzy Patterson", 
-        title: "Chief Geologist", 
-        description: "Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them", 
-        image: "/Izzythescientist.PNG" },
-    { name: "Lukeshan Thananchayan", 
-        title: "Chief Duster", 
-        description: "Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel", 
-        image: "/Lukeshanthescientist.PNG" },
+	{
+		name: "Tim Howitz",
+		title: "Chief Crack Inspector",
+		description:
+			"Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.",
+		image: "/Timthescientist.PNG",
+	},
+	{
+		name: "Emily Neighbour",
+		title: "Chief Software Engineer",
+		description:
+			"Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute",
+		image: "/Emilythescientist.PNG",
+	},
+	{
+		name: "Izzy Patterson",
+		title: "Chief Geologist",
+		description:
+			"Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them",
+		image: "/Izzythescientist.PNG",
+	},
+	{
+		name: "Lukeshan Thananchayan",
+		title: "Chief Duster",
+		description:
+			"Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel",
+		image: "/Lukeshanthescientist.PNG",
+	},
 ];
 
 export default function Page() {
-    return (
-        <div className={styles.container}>
-            {/* Header */}
-            <h1 className={styles.header}>Meet The Team</h1>
-            <p className={styles.subheader}>
-                Our expert team is made up of scientists around the globe. Our heads of department are shown below.
-            </p>
+	return (
+		<div className="h-full text-center bg-gradient-to-b from-neutral-100 to-neutral-50 pt-10">
+			{/* Header */}
+			<h1 className="text-4xl font-bold mb-5">Meet The Team</h1>
+			<p className="text-lg text-neutral-600 mb-5">
+				Our expert team is made up of scientists around the globe. Our heads of department are shown below.
+			</p>
 
-            {/* Team Members Section */}
-            <div className={styles.team}>
-                {teamMembers.map((member, index) => (
-                    <div key={index} className={styles.card}>
-                        {/* Image */}
-                        <img src={member.image} alt={member.name} className={styles.image} />
-                        
-                        {/* Text Content */}
-                        <div className={styles.text}>
-                            <h2 className={styles.name}>{member.name}</h2>
-                            <p className={styles.title}>{member.title}</p>
-                            <p className={styles.description}>{member.description}</p>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-}
\ No newline at end of file
+			{/* Team Members Section */}
+			<div className="flex flex-col items-center gap-8">
+				{teamMembers.map((member, index) => (
+					<div key={index} className="flex bg-white align-middle rounded-2xl border border-neutral-300 w-1/2 shadow-sm">
+						{/* Image */}
+						<div className="flex items-center ml-4">
+							<div className="relative w-24 h-24">
+								<div className="absolute inset-0 rounded-full overflow-hidden">
+									<Image height={5000} width={5000} src={member.image} alt={member.name} className="h-full w-full object-cover" />
+								</div>
+							</div>
+						</div>
+
+						{/* Text Content */}
+						<div className="flex flex-col items-start pl-6 py-4">
+							<h2 className="text-2xl font-bold">{member.name}</h2>
+							<p className="text-md text-neutral-600 font-bold">{member.title}</p>
+							<p className="text-neutral-600 mt-2 text-left">{member.description}</p>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index c2ac4c8..340dbc1 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,59 +1,13 @@
 "use client";
-import Image from "next/image";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { Dispatch, SetStateAction, useMemo, useState } from "react";
-import { FaRegUserCircle } from "react-icons/fa";
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Dispatch, SetStateAction, useMemo, useState } from 'react';
+import { FaRegUserCircle } from 'react-icons/fa';
 
-import { Currency } from "@appTypes/StoreModel";
-import AuthModal from "@components/AuthModal";
-import { useStoreActions, useStoreState } from "@hooks/store";
-
-function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
-	const pathname = usePathname();
-	const isActive = dropdownItems
-		? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
-		: pathname === href;
-
-	return (
-		<button className="flex items-center justify-center px-2 py-4 relative group">
-			{dropdownItems ? (
-				<span
-					className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}
-				>
-					{name}
-				</span>
-			) : (
-				<Link
-					href={href}
-					className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}
-				>
-					{name}
-				</Link>
-			)}
-			{dropdownItems && (
-				<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
-					<ul>
-						{dropdownItems.map((item) => {
-							const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
-							const isDropdownActive = pathname === itemHref;
-							return (
-								<li key={item}>
-									<Link
-										href={itemHref}
-										className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}
-									>
-										{item}
-									</Link>
-								</li>
-							);
-						})}
-					</ul>
-				</div>
-			)}
-		</button>
-	);
-}
+import { Currency } from '@appTypes/StoreModel';
+import AuthModal from '@components/AuthModal';
+import { useStoreActions, useStoreState } from '@hooks/store';
 
 export default function Navbar({}: // currencySelector,
 {
@@ -74,6 +28,51 @@ export default function Navbar({}: // currencySelector,
 	const currencies = useStoreState((state) => state.currency.currencies);
 	const currencyTickers = useStoreState((state) => state.currency.tickers);
 
+	function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
+		const isActive = dropdownItems
+			? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
+			: pathname === href;
+
+		return (
+			<button className="flex items-center justify-center px-2 py-4 relative group">
+				{dropdownItems ? (
+					<span
+						className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}
+					>
+						{name}
+					</span>
+				) : (
+					<Link
+						href={href}
+						className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}
+					>
+						{name}
+					</Link>
+				)}
+				{dropdownItems && (
+					<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
+						<ul>
+							{dropdownItems.map((item) => {
+								const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
+								const isDropdownActive = pathname === itemHref;
+								return (
+									<li key={item}>
+										<Link
+											href={itemHref}
+											className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}
+										>
+											{item}
+										</Link>
+									</li>
+								);
+							})}
+						</ul>
+					</div>
+				)}
+			</button>
+		);
+	}
+
 	return (
 		<div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
 			<div className="my-1 flex aspect-square ml-3 mr-3">
@@ -99,7 +98,9 @@ export default function Navbar({}: // currencySelector,
 								let ticker = currencyTickers[item];
 								return (
 									<li key={item} onClick={() => setSelectedCurrency(item)}>
-										<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>{`${item} (${ticker})`}</div>
+										<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>
+											{item} ({ticker})
+										</div>
 									</li>
 								);
 							})}