asowneryt/computer-repair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Landing & contact page done, services & prices missing

Browse Source
This commit is contained in:
ASOwnerYT
2024-12-04 17:56:32 +13:00
parent 022f5123cf
commit a7552a9323
16 changed files with 450 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Card.js
+2 -23
View File
@@ -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}>
<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>
{children}
</div>
);
}
src/app/components/Card.module.css
+2 -5
View File
@@ -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
+8 -1
View File
@@ -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
+38
View File
@@ -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
+45
View File
@@ -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
+27
View File
@@ -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
+30
View File
@@ -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
+22
View File
@@ -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
+55 -12
View File
@@ -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}>
<Image src={isActive ? menu : close} width="32" height="32" alt="Menu" />
<button
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}>
<Link href="/contact">Contact Us</Link>
<li>
<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
+35 -4
View File
@@ -17,9 +17,8 @@
/* Position nav items correctly */
.navbar .container li {
display: inline;
padding-left: 0.5em;
padding-right: 0.5em;
padding-left: 0.75em;
padding-right: 0.75em;
}
/* 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
+31
View File
@@ -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
+36
View File
@@ -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
+12 -2
View File
@@ -16,8 +16,8 @@ html {
*/
/* Accent colour*/
--accent: #034ea2;
--accent-secondary: #085fc3;
--accent: #195190;
--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
+5
View File
@@ -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
+96 -13
View File
@@ -26,12 +26,13 @@ export default function Home() {
<div className={styles.textbox}>
<div className="container">
<div className={styles.textboxInner}>
<h1>Delivering Exceptional Service.</h1>
<p>
Our mission is to provide top-notch repair services and an
outstanding customer experience. Comprehensive guides, a
supportive community, and prompt assistance make working
with us a breeze.
<h1 className={styles.h1}>Delivering Exceptional Service.</h1>
<p className={styles.p}>
<strong>Fast, Reliable Computer Repairs in Te Atatu Peninsula</strong><br/>
<strong>Your Local Experts for PCs, Laptops & More</strong> <br />
From hardware fixes to software solutions, we&apos;re here to get
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">
<h1 className={styles.h1}>Services we Offer</h1>
<section className="container mb">
<h1 className={styles.center}>Services we Offer</h1>
<Cards>
<Card />
<Card />
<Card />
<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="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
+6 -2
View File
@@ -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;
}