Landing & contact page done, services & prices missing

src/app/components/Card.js

@@ -1,30 +1,9 @@
 import styles from "./Card.module.css";
 
-export default function Card() {
+export default function Card({ children }) {
   return (
     <div className={styles.card}>
-      <div className={styles.imgcontainer}>
+      {children}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
-          />
-        </svg>
-      </div>
-      <div>
-        <h2>Title</h2>
-        <p>
-          Voluptatem culpa dolores eos. Aliquid omnis adipisci ex magnam quis
-          nemo.
-        </p>
-      </div>
     </div>
   );
 }

src/app/components/Card.module.css

@@ -4,10 +4,7 @@
     text-align: center; 
 }
 
-.imgcontainer {
+.card svg {
+    width: 5em;
     margin-bottom: 1em;
 }
-
-.imgcontainer svg {
-    width: 6em;
-}

src/app/components/Cards.module.css

@@ -1,5 +1,12 @@
 .cards {
     display: flex;
-    flex-direction: column;
+    flex-flow: column wrap;
     align-items: center;
+    justify-content: center;
+}
+
+@media (min-width: 680px) {
+    .cards {
+        flex-flow: row wrap;
+    }
 }

src/app/components/ChatwootWidget.js

@@ -0,0 +1,38 @@
+"use client"
+
+import React from "react";
+
+class ChatwootWidget extends React.Component {
+  componentDidMount() {
+    // Add Chatwoot Settings
+    window.chatwootSettings = {
+      hideMessageBubble: false,
+      position: "right", // This can be left or right
+      locale: "en", // Language to be set
+      type: "expanded_bubble", // [standard, expanded_bubble]
+    };
+
+    // Paste the script from inbox settings except the <script> tag
+    (function (d, t) {
+      var BASE_URL = "https://app.chatwoot.com";
+      var g = d.createElement(t),
+        s = d.getElementsByTagName(t)[0];
+      g.src = BASE_URL + "/packs/js/sdk.js";
+      g.defer = true;
+      g.async = true;
+      s.parentNode.insertBefore(g, s);
+      g.onload = function () {
+        window.chatwootSDK.run({
+          websiteToken: "JPsj6GEc1ZA3RtxN6GUChPKE",
+          baseUrl: BASE_URL,
+        });
+      };
+    })(document, "script");
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default ChatwootWidget;

src/app/components/Footer.js

@@ -0,0 +1,45 @@
+import styles from "./Footer.module.css";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.row}>
+        <h3>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            width="1em"
+          >
+            <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>
+          <a href="tel:+640211077483">
+            021 107 7483
+          </a>
+        </h3>
+        <h3>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            width="1em"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.404 14.596A6.5 6.5 0 1 1 16.5 10a1.25 1.25 0 0 1-2.5 0 4 4 0 1 0-.571 2.06A2.75 2.75 0 0 0 18 10a8 8 0 1 0-2.343 5.657.75.75 0 0 0-1.06-1.06 6.5 6.5 0 0 1-9.193 0ZM10 7.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <a href="mailto:[email protected]">
+            info@teatatucomputers.com
+          </a>
+        </h3>
+      </div>
+      <p>Copyright © Te Atatu Computer Repair, 2024</p>
+    </footer>
+  );
+}

src/app/components/Footer.module.css

@@ -0,0 +1,27 @@
+.footer {
+  color: white;
+  text-align: center;
+  padding-top: 3em;
+  padding-bottom: 3em;
+  background-color: var(--accent-secondary);
+}
+
+.footer h3 {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer h3 a {
+  color: white;
+}
+
+.row {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2em;
+  margin-bottom: 2em;
+}

src/app/components/HeaderSm.js

@@ -0,0 +1,30 @@
+import styles from "./HeaderSm.module.css";
+import Image from "next/image";
+import bgimage from "../assets/header-bg.jpg";
+
+export default function HeaderSm({ text }) {
+  return (
+    <section>
+      <div className={styles.header}>
+        <Image
+          src={bgimage}
+          alt="Header Background"
+          placeholder="blur"
+          quality={100}
+          fill
+          sizes="100vw"
+          style={{
+            objectFit: "cover",
+          }}
+        />
+        <div className={styles.textbox}>
+          <div className="container">
+            <div className={styles.textboxInner}>
+              <h1 className={styles.h1}>{text}</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/app/components/HeaderSm.module.css

@@ -0,0 +1,22 @@
+.header {
+  position: relative;
+  height: 10em;
+  margin-bottom: 3.5em;
+}
+
+.header img {
+  filter: brightness(50%);
+}
+
+.textbox {
+  color: white;
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  transform: translate(0%, -50%);
+}
+
+.textboxInner h1 {
+  font-size: 2.5em;
+  margin-bottom: 0;
+}

src/app/components/Navbar.js

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useState } from "react";
 import Image from "next/image";
@@ -6,14 +6,16 @@ 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"
+import close from "../assets/close.svg";
+import { usePathname } from "next/navigation";
 
 export default function Navbar() {
+  const pathname = usePathname();
   const [isActive, setActive] = useState("false");
 
   function handleToggle() {
     setActive(!isActive);
-    console.log("asdhjiuashd")
+    console.log("asdhjiuashd");
   }
 
   return (
@@ -21,28 +23,69 @@ export default function Navbar() {
       <div className={`${styles.container} container`}>
         <div className={styles.header}>
           <div>
-            <Link href="/">
+            <Link href="/" className={styles.logo}>
               <Image src={logo} width="32" height="32" alt="Logo" />
+              <p>Te Atatu Computers</p>
             </Link>
           </div>
-          <button className={styles.menuIcon} aria-label="Menu" onClick={handleToggle}>
+          <button
-            <Image src={isActive ? menu : close} width="32" height="32" alt="Menu" />
+            className={styles.menuIcon}
+            aria-label="Menu"
+            onClick={handleToggle}
+          >
+            <Image
+              src={isActive ? menu : close}
+              width="32"
+              height="32"
+              alt="Menu"
+            />
           </button>
         </div>
-        <ul className={`${styles.links} ${isActive ? "" : styles.active }`}>
+        <ul className={`${styles.links} ${isActive ? "" : styles.active}`}>
           <li>
-            <Link href="/" className={styles.active}>
+            <Link
+              href="/"
+              className={`link ${pathname === "/" ? styles.active : ""}`}
+            >
               Home
             </Link>
           </li>
           <li>
-            <Link href="winners.html">Winners Podium</Link>
+            <Link
+              href="/services"
+              className={`link ${
+                pathname === "/services" ? styles.active : ""
+              }`}
+            >
+              Services
+            </Link>
           </li>
           <li>
-            <a href="gallery.html">Gallery</a>
+            <Link
+              href="/pricing"
+              className={`link ${pathname === "/pricing" ? styles.active : ""}`}
+            >
+              Pricing
+            </Link>
           </li>
-          <li className={styles.last}>
+          <li>
-            <Link href="/contact">Contact Us</Link>
+            <Link
+              href="/contact"
+              className={`link ${pathname === "/contact" ? styles.active : ""}`}
+            >
+              <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>
+              Contact Us
+            </Link>
           </li>
         </ul>
       </div>

src/app/components/Navbar.module.css

@@ -17,9 +17,8 @@
 
 /* Position nav items correctly */
 .navbar .container li {
-  display: inline;
+  padding-left: 0.75em;
-  padding-left: 0.5em;
+  padding-right: 0.75em;
-  padding-right: 0.5em;
 }
 
 /* Reset default styling on links */
@@ -38,6 +37,23 @@
   font-weight: bold;
 }
 
+.navbar .container li a svg {
+  width: 1em;
+  height: 1em;
+}
+
+.navbar .container li a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+}
+
+.navbar .container li:last-child {
+  color: white;
+  background-color: var(--accent);
+}
+
 .menuIcon {
   font-size: 1.5rem;
   cursor: pointer;
@@ -61,10 +77,11 @@
 
     font-size: 1rem;
     background-color: white;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
 
     transition-property: top border-radius;
     transition-duration: 0.3s;
-
   }
 
   .links {
@@ -76,6 +93,7 @@
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     margin-bottom: 0.5rem;
+    border-radius: 0.5em;
   }
 
   .active {
@@ -122,3 +140,16 @@
   flex-direction: row;
   justify-content: space-between;
 }
+
+.logo {
+  display: flex;
+  gap: 1em;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.logo p {
+  color: black;
+  margin-bottom: 0;
+  font-family: var(--font-geist-mono);
+}

src/app/contact/page.js

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import styles from "./page.module.css";
+import Link from "next/link";
+import HeaderSm from "../components/HeaderSm";
+
+export default function Home() {
+  return (
+    <div>
+      <HeaderSm text="Contact" />
+      <section className="container">
+        <form action="https://form.taxi/s/es9ddva1" method="POST" className={styles.form}>
+          <label htmlFor="Name">Name*</label>
+          <input type="text" name="Name" required />
+
+          <label htmlFor="Phone">Phone Number </label>
+          <input type="tel" name="Phone" />
+
+          <label htmlFor="Email">Email*</label>
+          <input type="email" name="Email" required />
+
+          <label htmlFor="firstname">Message*</label>
+          <textarea name="Message"></textarea>
+
+          <p className={styles.sm}>* required</p>
+
+          <input type="submit" value="Submit" required />
+        </form>
+      </section>
+    </div>
+  );
+}

src/app/contact/page.module.css

@@ -0,0 +1,36 @@
+.form {
+    margin-bottom: 35em;
+}
+
+.form input[type="text"],
+.form input[type="email"],
+.form input[type="tel"],
+.form select,
+.form textarea {
+  width: 100%; /* Full width */
+  padding: 1em;
+  border: 1px solid #ccc; /* Border */
+  border-radius: 0.5em; /* Rounded corners */
+  box-sizing: border-box; /* Make sure that padding and width stays in place */
+  margin-top: 6px;
+  margin-bottom: 16px;
+  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
+}
+
+/* Style the submit button */
+.form input[type="submit"] {
+  background-color: var(--accent);
+  color: white;
+  padding: 1em 1.75em;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.form input[type="submit"]:hover {
+  background-color: var(--accent-secondary);
+}
+
+.sm {
+    font-size: 0.75em;
+    font-style: italic;
+}

src/app/globals.css

@@ -16,8 +16,8 @@ html {
   */
 
   /* Accent colour*/
-  --accent: #034ea2;
+  --accent: #195190;
-  --accent-secondary: #085fc3;
+  --accent-secondary: #14202e;
 
   /* Misc */
   --transition: 0.2s ease-in-out;
@@ -255,6 +255,12 @@ textarea {
 * Typography 
 */
 
+h1,
+h2 {
+  font-family: var(--font-geist-mono);
+  font-weight: bold;
+}
+
 h1 {
   font-size: 2em;
   margin-bottom: 1em;
@@ -345,3 +351,7 @@ a:hover,
     box-shadow var(--transition),
     -webkit-box-shadow var(--transition);
 }
+
+.mb {
+  margin-bottom: 10em;
+}

src/app/layout.js

@@ -1,6 +1,9 @@
 import localFont from "next/font/local";
 import "./globals.css";
 import Navbar from "./components/Navbar"
+import Footer from "./components/Footer"
+import Script from 'next/script'
+import ChatwootWidget from "./components/ChatwootWidget"
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -22,8 +25,10 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <ChatwootWidget />
         <Navbar />
         {children}
+        <Footer />
       </body>
     </html>
   );

src/app/page.js

@@ -26,12 +26,13 @@ export default function Home() {
             <div className={styles.textbox}>
               <div className="container">
                 <div className={styles.textboxInner}>
-                  <h1>Delivering Exceptional Service.</h1>
+                  <h1 className={styles.h1}>Delivering Exceptional Service.</h1>
-                  <p>
+                  <p className={styles.p}>
-                    Our mission is to provide top-notch repair services and an
+                    <strong>Fast, Reliable Computer Repairs in Te Atatu Peninsula</strong><br/>
-                    outstanding customer experience. Comprehensive guides, a
+                    <strong>Your Local Experts for PCs, Laptops & More</strong> <br />
-                    supportive community, and prompt assistance make working
+                    From hardware fixes to software solutions, we&apos;re here to get
-                    with us a breeze.
+                    your devices back in top shape. Friendly, affordable service
+                    right in your neighborhood!
                   </p>
                   <Link href="/contact">
                     <Button>
@@ -46,7 +47,7 @@ export default function Home() {
                           clipRule="evenodd"
                         />
                       </svg>
-                      Get in touch with us today
+                      Get a Quote Now
                     </Button>
                   </Link>
                 </div>
@@ -55,14 +56,96 @@ export default function Home() {
           </div>
         </section>
 
-        <section className="container">
+        <section className="container mb">
-          <h1 className={styles.h1}>Services we Offer</h1>
+          <h1 className={styles.center}>Services we Offer</h1>
           <Cards>
-            <Card />
+            <Card>
-            <Card />
+              <svg
-            <Card />
+                xmlns="http://www.w3.org/2000/svg"
-            <Card />
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"
+                />
+              </svg>
+              <h2>Computer Repair/Upgrades</h2>
+              <p>
+                We can fix anything from a broken screen to a software issue, or upgrade your computer&apos;s parts and optimise Windows to get your PC running like new again.
+              </p>
+            </Card>
+            <Card>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
+                />
+              </svg>
+
+              <h2>Desktop PC Building</h2>
+              <p>
+                We&apos;ll help you pick the parts and build a custom gaming or
+                workstation PC for you.
+              </p>
+            </Card>
+            <Card>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"
+                />
+              </svg>
+
+              <h2>Remote Access Support</h2>
+              <p>
+                We can remotely connect to your computer and fix
+                software/operating system related issues from the comfort of
+                your own home.
+              </p>
+            </Card>
+            <Card>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
+                />
+              </svg>
+
+              <h2>Web Development</h2>
+              <p>
+                We can develop a fast, modern and secure website for your
+                business using Wordpress or custom React/NextJS code.
+              </p>
+            </Card>
           </Cards>
+          <p className={styles.center}>
+            <Link href="/services">And more...</Link>
+          </p>
         </section>
       </main>
     </div>

src/app/page.module.css

@@ -16,11 +16,15 @@
   transform: translate(0%, -50%);
 }
 
-.textbox h1 {
+.h1 {
   font-size: 3.5em;
   margin-bottom: 0.5em;
 }
 
+.p {
+  margin-bottom: 2em;
+}
+
 @media (min-width: 920px) {
   .header {
     height: 50em;
@@ -37,6 +41,6 @@
   }
 }
 
-.h1 {
+.center {
   text-align: center;
 }