i forgot

src/app/assets/close.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/components/Button.js

@@ -0,0 +1,7 @@
+import styles from "./Button.module.css";
+
+export default function Button({ children, onClick }) {
+    return (
+        <button className={styles.button} onClick={onClick}>{children}</button>
+    );
+}

src/app/components/Button.module.css

@@ -0,0 +1,20 @@
+.button {
+    background-color: white;
+    border: none;
+    color: black;
+    padding: 1em 2em;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    font-size: 1em;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.button svg {
+    width: 1em;
+    height: 1em;
+}

src/app/components/Navbar.js

@@ -1,10 +1,21 @@
+"use client"
+
+import { useState } from "react";
 import Image from "next/image";
-import Link from 'next/link'
+import Link from "next/link";
 import styles from "./Navbar.module.css";
 import logo from "../assets/logo.svg";
 import menu from "../assets/menu.svg";
+import close from "../assets/close.svg"
 
 export default function Navbar() {
+  const [isActive, setActive] = useState("false");
+
+  function handleToggle() {
+    setActive(!isActive);
+    console.log("asdhjiuashd")
+  }
+
   return (
     <nav className={`${styles.navbar} shadow`}>
       <div className={`${styles.container} container`}>
@@ -14,11 +25,11 @@ export default function Navbar() {
               <Image src={logo} width="32" height="32" alt="Logo" />
             </Link>
           </div>
-          <button className={styles.menuIcon} aria-label="Menu">
+          <button className={styles.menuIcon} aria-label="Menu" onClick={handleToggle}>
-            <Image src={menu} width="32" height="32" alt="Menu" />
+            <Image src={isActive ? menu : close} width="32" height="32" alt="Menu" />
           </button>
         </div>
-        <ul className={styles.links}>
+        <ul className={`${styles.links} ${isActive ? "" : styles.active }`}>
           <li>
             <Link href="/" className={styles.active}>
               Home
@@ -30,7 +41,7 @@ export default function Navbar() {
           <li>
             <a href="gallery.html">Gallery</a>
           </li>
-          <li>
+          <li className={styles.last}>
             <Link href="/contact">Contact Us</Link>
           </li>
         </ul>

src/app/components/Navbar.module.css

@@ -18,11 +18,8 @@
 /* Position nav items correctly */
 .navbar .container li {
   display: inline;
-}
+  padding-left: 0.5em;
-
+  padding-right: 0.5em;
-/* Padding betweeen nav items */
-.navbar .container li:not(:last-of-type) {
-  padding-right: 1rem;
 }
 
 /* Reset default styling on links */
@@ -31,11 +28,6 @@
   text-decoration: none;
 }
 
-.highlight {
-  color: white;
-  background-color: blue;
-}
-
 /* Underline links on hover */
 .navbar .container li a:hover {
   text-decoration: underline;
@@ -68,6 +60,7 @@
     z-index: -2;
 
     font-size: 1rem;
+    background-color: white;
 
     transition-property: top border-radius;
     transition-duration: 0.3s;
@@ -85,8 +78,8 @@
     margin-bottom: 0.5rem;
   }
 
-  .links.active {
+  .active {
-    top: 60px;
+    top: 65px;
     border-radius: 0 0 0.5em 0.5em;
   }
 
@@ -107,6 +100,11 @@
     flex-direction: row;
   }
 
+  .links li {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
   .menuIcon {
     display: none;
   }
@@ -116,8 +114,6 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
   }
 }
 

src/app/globals.css

@@ -19,10 +19,6 @@ html {
   --accent: #034ea2;
   --accent-secondary: #085fc3;
 
-  /* Spacing */
-  --section-spacing: 4rem;
-  --spacing: 3rem;
-
   /* Misc */
   --transition: 0.2s ease-in-out;
 }
@@ -260,7 +256,8 @@ textarea {
 */
 
 h1 {
-  margin-bottom: 1rem;
+  font-size: 2em;
+  margin-bottom: 1em;
 }
 
 h2 {
@@ -269,7 +266,7 @@ h2 {
 
 @media screen and (min-width: 480px) {
   h1 {
-    font-size: 2.5rem;
+    font-size: 2.5em;
   }
 }
 
@@ -348,8 +345,3 @@ a:hover,
     box-shadow var(--transition),
     -webkit-box-shadow var(--transition);
 }
-
-/* Section */
-section {
-  margin-bottom: var(--spacing);
-}

src/app/page.js

@@ -1,6 +1,9 @@
 import Image from "next/image";
 import styles from "./page.module.css";
 import bgimage from "./assets/header-bg.jpg";
+import Button from "./components/Button";
+import Card from "./components/Card";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -29,11 +32,32 @@ export default function Home() {
                     supportive community, and prompt assistance make working
                     with us a breeze.
                   </p>
+                  <Link href="/contact">
+                    <Button>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      Get in touch with us today
+                    </Button>
+                  </Link>
                 </div>
               </div>
             </div>
           </div>
         </section>
+
+        <section className="container">
+          <h1>Services we Offer</h1>
+          <Card />
+        </section>
       </main>
     </div>
   );

src/app/page.module.css

@@ -1,6 +1,7 @@
 .header {
   position: relative;
   height: 50em;
+  margin-bottom: 3.5em;
 }
 
 .header img {
@@ -24,6 +25,7 @@
   .header {
     height: 50em;
     clip-path: polygon(0 0, 100% 0, 100% 25em, 0 100%);
+    margin-bottom: none;
   }
 
   .textbox {