some finishing touches

src/app/components/Footer.js

@@ -2,7 +2,7 @@ export default function Footer() {
   return (
     <footer className="bg-slate-800 text-white py-8 text-center">
       <div className="flex flex-col items-center">
-        <h3 className="flex flex-row items-center justify-center space-x-2 hover:underline"> 
+        <h3 className="flex flex-row items-center justify-center mb-4 space-x-2 hover:underline text-lg font-bold"> 
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
@@ -19,7 +19,7 @@ export default function Footer() {
             021 107 7483
           </a>
         </h3>
-        <h3 className="flex flex-row items-center justify-center mb-4 space-x-2 hover:underline">
+        <h3 className="flex flex-row items-center justify-center mb-4 space-x-2 hover:underline text-lg font-bold">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"

src/app/components/Navbar.js

@@ -92,23 +92,23 @@ export default function Navbar() {
             </a>
             <ul className={styles.dropdownMenu}>
               <li>
-                <Link href="/services/computer-repair">Computer & Laptop Repairs</Link>
+                <Link href="/services/computer-repair" className={`link ${pathname === "/services/computer-repair" ? styles.active : ""}`}>Computer & Laptop Repairs</Link>
               </li>
               <li>
-                <Link href="/services/computer-upgrades">Computer Upgrades & Speedup</Link>
+                <Link href="/services/computer-upgrades" className={`link ${pathname === "/services/computer-upgrades" ? styles.active : ""}`}>Computer Upgrades & Speedup</Link>
               </li>
               <li>
-                <Link href="/services/it-support">IT Support</Link>
+                <Link href="/services/it-support" className={`link ${pathname === "/services/it-support" ? styles.active : ""}`}>IT Support</Link>
               </li>
               <li>
-                <Link href="/services/web-design">Web Design</Link>
+                <Link href="/services/web-design" className={`link ${pathname === "/services/web-design" ? styles.active : ""}`}>Web Design</Link>
               </li>
               <li>
-                <Link href="/services/virus-removal">Virus Removal</Link>
+                <Link href="/services/virus-removal" className={`link ${pathname === "/services/virus-removal" ? styles.active : ""}`}>Virus Removal</Link>
               </li>
             </ul>
           </li>
-          <li className={styles.highlight}>
+          <li className="bg-sky-900 text-white">
             <Link
               href="/contact"
               className={`link ${pathname === "/contact" ? styles.active : ""}`}

src/app/components/Navbar.module.css

@@ -98,7 +98,7 @@
   }
 
   .active {
-    top: 65px;
+    top: 4rem;
     border-radius: 0 0 0.5em 0.5em;
   }
 
@@ -144,6 +144,7 @@
     display: none;
     background-color: white;
     margin-top: 1rem;
+    border-radius: 0.25rem;
   }
 
   .dropdown:hover .dropdownMenu {

src/app/contact/page.js

@@ -6,13 +6,13 @@ export default function Home() {
     <div>
       <HeaderSm text="Contact" />
       <section className="container mx-auto">
-        <p>
+        <p className="mb-4">
           Contact us about anything related to our company or services.
           <br />
           We&apos;ll do our best to get back to you as soon as possible.
         </p>
         <div className={styles.contactDetails}>
-          <h3>
+          <h3 className="text-lg font-bold hover:underline">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
@@ -27,7 +27,7 @@ export default function Home() {
             </svg>
             <a href="tel:+640211077483">021 107 7483</a>
           </h3>
-          <h3>
+          <h3 className="text-lg font-bold hover:underline">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"

tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
   ],
   theme: {
     extend: {},
+    container: {
+      padding: '1rem',
+    },
   },
   plugins: [],
 }