Tailwind

package.json

@@ -17,7 +17,10 @@
     "next": "^15.1.3"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
-    "eslint-config-next": "15.0.3"
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/components/Card.js

@@ -1,9 +0,0 @@
-import styles from "./Card.module.css";
-
-export default function Card({ children }) {
-  return (
-    <div className={styles.card}>
-      {children}
-    </div>
-  );
-}

src/app/components/Card.module.css

@@ -1,10 +0,0 @@
-.card {
-    max-width: 20em;
-    padding: 1em;
-    text-align: center; 
-}
-
-.card svg {
-    width: 5em;
-    margin-bottom: 1em;
-}

src/app/components/Cards.js

@@ -1,9 +0,0 @@
-import styles from "./Cards.module.css";
-
-export default function Cards({ children }) {
-  return (
-    <div className={styles.cards}>
-        {children}
-    </div>
-  );
-}

src/app/components/Cards.module.css

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

src/app/components/Footer.js

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

src/app/components/Footer.module.css

@@ -1,27 +0,0 @@
-.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

@@ -18,9 +18,9 @@ export default function HeaderSm({ text }) {
           }}
         />
         <div className={styles.textbox}>
-          <div className="container">
+          <div className="container mx-auto">
             <div className={styles.textboxInner}>
-              <h1 className={styles.h1}>{text}</h1>
+              <h1 className="text-4xl font-bold">{text}</h1>
             </div>
           </div>
         </div>

src/app/components/HeaderSm.module.css

@@ -14,9 +14,4 @@
   width: 100%;
   top: 50%;
   transform: translate(0%, -50%);
-}
+}
-
-.textboxInner h1 {
-  font-size: 2.5em;
-  margin-bottom: 0;
-}

src/app/components/Navbar.js

@@ -47,7 +47,7 @@ export default function Navbar() {
 
   return (
     <nav className={`${styles.navbar} shadow`}>
-      <div className={`${styles.container} container`} ref={wrapperRef}>
+      <div className={`${styles.container} container mx-auto`} ref={wrapperRef}>
         <div className={styles.header}>
           <div>
             <Link href="/" className={styles.logo}>

src/app/contact/page.js

@@ -5,7 +5,7 @@ export default function Home() {
   return (
     <div>
       <HeaderSm text="Contact" />
-      <section className="container">
+      <section className="container mx-auto">
         <p>
           Contact us about anything related to our company or services.
           <br />

src/app/globals.css

@@ -1,355 +1,3 @@
-/* Reset default margin/padding */
+@tailwind base;
-* {
+@tailwind components;
-  margin: 0;
+@tailwind utilities;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  /* Fonts */
-  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-
-  /* 
-  These are variables that can be used anywhere in the CSS
-  Example of usage: background-color: var(--bg-light);
-  In this example the background would be white as --bg-light is set to white here
-  */
-
-  /* Accent colour*/
-  --accent: #195190;
-  --accent-secondary: #14202e;
-
-  /* Misc */
-  --transition: 0.2s ease-in-out;
-}
-
-/*
- * Remove text-shadow in selection highlight:
- * https://twitter.com/miketaylr/status/12228805301
- *
- * Customize the background color to match your design.
- */
-
-::-moz-selection {
-  background: #b3d4fc;
-  text-shadow: none;
-}
-
-::selection {
-  background: #b3d4fc;
-  text-shadow: none;
-}
-
-/*
- * A better looking default horizontal rule
- */
-
-hr {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid #ccc;
-  margin: 1em 0;
-  padding: 0;
-}
-
-/*
- * Remove the gap between audio, canvas, iframes,
- * images, videos and the bottom of their containers:
- * https://github.com/h5bp/html5-boilerplate/issues/440
- */
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-  vertical-align: middle;
-}
-
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
-  resize: vertical;
-}
-
-/* ==========================================================================
-   Author's custom styles
-   ========================================================================== */
-
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-/*
- * Hide visually and from screen readers
- */
-
-.hidden,
-[hidden] {
-  display: none !important;
-}
-
-/*
- * Hide only visually, but have it available for screen readers:
- * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- *
- * 1. For long content, line feeds are not interpreted as spaces and small width
- *    causes content to wrap 1 word per line:
- *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- */
-
-.visually-hidden {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-  /* 1 */
-}
-
-/*
- * Extends the .visually-hidden class to allow the element
- * to be focusable when navigated to via the keyboard:
- * https://www.drupal.org/node/897638
- */
-
-.visually-hidden.focusable:active,
-.visually-hidden.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  white-space: inherit;
-  width: auto;
-}
-
-/*
- * Hide visually and from screen readers, but maintain layout
- */
-
-.invisible {
-  visibility: hidden;
-}
-
-/*
- * Clearfix: contain floats
- *
- * The use of `table` rather than `block` is only necessary if using
- * `::before` to contain the top-margins of child elements.
- */
-
-.clearfix::before,
-.clearfix::after {
-  content: "";
-  display: table;
-}
-
-.clearfix::after {
-  clear: both;
-}
-
-/* ==========================================================================
-   EXAMPLE Media Queries for Responsive Design.
-   These examples override the primary ('mobile first') styles.
-   Modify as content requires.
-   ========================================================================== */
-
-@media only screen and (min-width: 35em) {
-  /* Style adjustments for viewports that meet the condition */
-}
-
-@media print,
-  (-webkit-min-device-pixel-ratio: 1.25),
-  (min-resolution: 1.25dppx),
-  (min-resolution: 120dpi) {
-  /* Style adjustments for high resolution devices */
-}
-
-/* ==========================================================================
-   Print styles.
-   Inlined to avoid the additional HTTP request:
-   https://www.phpied.com/delay-loading-your-print-css/
-   ========================================================================== */
-
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: #fff !important;
-    color: #000 !important;
-    /* Black prints faster */
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-
-  a[href]::after {
-    content: " (" attr(href) ")";
-  }
-
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  /*
-   * Don't show links that are fragment identifiers,
-   * or use the `javascript:` pseudo protocol
-   */
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: "";
-  }
-
-  pre {
-    white-space: pre-wrap !important;
-  }
-
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-}
-
-/* 
-* Typography 
-*/
-
-h1,
-h2 {
-  font-weight: bold;
-}
-
-h1 {
-  font-size: 2em;
-  margin-bottom: 1em;
-}
-
-h2 {
-  margin-bottom: 0.5rem;
-}
-
-@media screen and (min-width: 480px) {
-  h1 {
-    font-size: 2.5em;
-  }
-}
-
-p {
-  margin-bottom: 1.5em;
-}
-
-/* Add margin to lists */
-.text ul {
-  margin-left: 1.5rem;
-}
-
-.animate-text {
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-}
-
-/* Links */
-a,
-[role="link"] {
-  color: var(--accent);
-
-  text-decoration: none;
-  -webkit-text-decoration: none;
-}
-
-/* Underline links when hovered */
-a:hover,
-[role="link"] {
-  text-decoration: underline;
-  -webkit-text-decoration: underline;
-}
-
-/*
-* Constrained container
-* This centeres elements horizontally and constrains the width so that elements are aligned (like a margin)
-*/
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1440px;
-  padding-left: 20px;
-  padding-right: 20px;
-  position: relative;
-}
-
-/* Desktop */
-@media (min-width: 920px) {
-  .container {
-    padding-left: 70px;
-    padding-right: 70px;
-  }
-}
-
-/* Centered container (centered verticially and horizontally on page) */
-.centeredContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-/*
-* Misc styling
-*/
-.rounded {
-  border-radius: 0.5rem;
-}
-
-.shadow {
-  box-shadow: 0px 0px 24px -12px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0px 0px 24px -12px rgba(0, 0, 0, 0.5);
-
-  transition:
-    box-shadow var(--transition),
-    -webkit-box-shadow var(--transition);
-}
-
-.mb {
-  margin-bottom: 10em;
-}

src/app/page.js

@@ -2,8 +2,6 @@ import Image from "next/image";
 import styles from "./page.module.css";
 import bgimage from "./assets/header-bg.jpg";
 import Button from "./components/Button";
-import Cards from "./components/Cards";
-import Card from "./components/Card";
 import Link from "next/link";
 import { GoogleMapsEmbed } from "@next/third-parties/google";
 
@@ -26,9 +24,9 @@ export default function Home() {
               }}
             />
             <div className={styles.textbox}>
-              <div className="container">
+              <div className="container mx-auto">
                 <div className={styles.textboxInner}>
-                  <h1 className={styles.h1}>Delivering Exceptional Service.</h1>
+                  <h1 className="mb-4 text-6xl font-bold">Delivering Exceptional Service.</h1>
                   <p className={styles.p}>
                     <strong>
                       Fast, Reliable Computer Repairs in Te Atatu Peninsula
@@ -64,16 +62,18 @@ export default function Home() {
           </div>
         </section>
 
-        <section className="container mb">
+        <section className="container mx-auto mb-16">
-          <h1 className={styles.center}>Services we Offer</h1>
+          <h1 className="text-center text-3xl font-bold mb-4">Services we Offer</h1>
-          <Cards>
+          <div className="text-center mb-4 flex flex-row flex-wrap justify-center">
-            <Card>
+            <div className="max-w-xs p-4 text-center justify-center">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
+                width="6rem"
+                className="mx-auto mb-4"
               >
                 <path
                   strokeLinecap="round"
@@ -81,20 +81,22 @@ export default function Home() {
                   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>
+              <h2 className="text-xl font-bold mb-2">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>
+            </div>
-            <Card>
+            <div className="max-w-xs p-4 text-center justify-center">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
+                width="6rem"
+                className="mx-auto mb-4"
               >
                 <path
                   strokeLinecap="round"
@@ -103,19 +105,21 @@ export default function Home() {
                 />
               </svg>
 
-              <h2>Desktop PC Building</h2>
+              <h2 className="text-xl font-bold mb-2">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>
+            </div>
-            <Card>
+            <div className="max-w-xs p-4 text-center justify-center">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
+                width="6rem"
+                className="mx-auto mb-4"
               >
                 <path
                   strokeLinecap="round"
@@ -124,20 +128,22 @@ export default function Home() {
                 />
               </svg>
 
-              <h2>Remote Access Support</h2>
+              <h2 className="text-xl font-bold mb-2">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>
+            </div>
-            <Card>
+            <div className="max-w-xs p-4 text-center justify-center">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
+                width="6rem"
+                className="mx-auto mb-4"
               >
                 <path
                   strokeLinecap="round"
@@ -146,18 +152,15 @@ export default function Home() {
                 />
               </svg>
 
-              <h2>Web Development</h2>
+              <h2 className="text-xl font-bold mb-2">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>
+            </div>
-          </Cards>
+          </div>
-          <p className={styles.center}>
-            <Link href="/services">And more...</Link>
-          </p>
         </section>
-        <section className="container">
+        <section className="container mx-auto">
           <div className={styles.map}>
             <GoogleMapsEmbed
               apiKey="AIzaSyDbgQY55TQY5CefsCUwKbc8RfoOUe8U5gY"

src/app/page.module.css

@@ -16,11 +16,6 @@
   transform: translate(0%, -50%);
 }
 
-.h1 {
-  font-size: 3.5em;
-  margin-bottom: 0.5em;
-}
-
 .p {
   margin-bottom: 2em;
 }
@@ -42,10 +37,6 @@
   }
 }
 
-.center {
-  text-align: center;
-}
-
 .map {
   width: 100%;
   margin-bottom: 10em;

src/app/services/computer-repair/page.js

@@ -4,8 +4,8 @@ export default function Home() {
   return (
     <div style={{ marginBottom: "30em" }}>
       <HeaderSm text="Computer & Laptop Repairs" />
-      <section className="container mb">
+      <section className="container mx-auto mb">
-        <h1>Profesional Computer Repairs</h1>
+        <h1 className="text-2xl mb-4">Profesional Computer Repairs</h1>
         <p>
           Te Atatu Computers is your trusted destination for expert laptop repairs
           in Auckland. We specialize in providing top-quality repair services,

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+