Phase 2: homepage that converts
- Hero says what and where, with No fix no fee / $35 diagnosis, Call and Text CTAs, and the real Google rating - Common fixes grid with owner-confirmed labour prices, linking to service pages - How it works, About (first person), testimonials, areas served with map, a short business IT block, rewritten FAQ and a final CTA band - Sticky Call/Text bar on mobile (site-wide); Chatwoot bubble moved above it - Button renders a link when given href (no more button-inside-link) - Business facts (prices, rating, testimonials, contact links) in site.js Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
1 parent
c085e2b031
commit
7043b47de1
9 files changed
+413
-131
No files matched your search
@@ -1,7 +1,16 @@
|
|||||||
|
import Link from "next/link";
|
||||||
import styles from "./Button.module.css";
|
import styles from "./Button.module.css";
|
||||||
|
|
||||||
export default function Button({ children, onClick }) {
|
// Renders a link when given href (internal paths use next/link), otherwise a button.
|
||||||
|
export default function Button({ children, onClick, href, variant }) {
|
||||||
|
const className = `${styles.button} ${variant === "outline" ? styles.outline : ""}`;
|
||||||
|
if (href?.startsWith("/")) {
|
||||||
|
return <Link href={href} className={className}>{children}</Link>;
|
||||||
|
}
|
||||||
|
if (href) {
|
||||||
|
return <a href={href} className={className}>{children}</a>;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<button className={styles.button} onClick={onClick}>{children}</button>
|
<button className={className} onClick={onClick}>{children}</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -17,4 +17,10 @@
|
|||||||
.button svg {
|
.button svg {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: white;
|
||||||
|
box-shadow: inset 0 0 0 2px white;
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { MessageSquare, Phone } from "lucide-react";
|
||||||
|
import { links } from "@/lib/site";
|
||||||
|
|
||||||
|
// Sticky Call/Text bar on small screens. Layout adds bottom padding to match.
|
||||||
|
export default function MobileCallBar() {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-x-0 bottom-0 z-50 grid grid-cols-2 border-t bg-white md:hidden">
|
||||||
|
<a
|
||||||
|
href={links.tel}
|
||||||
|
className="flex items-center justify-center gap-2 bg-sky-800 py-3 font-bold text-white"
|
||||||
|
>
|
||||||
|
<Phone aria-hidden="true" className="size-4" />
|
||||||
|
Call
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href={links.sms}
|
||||||
|
className="flex items-center justify-center gap-2 py-3 font-bold text-sky-800"
|
||||||
|
>
|
||||||
|
<MessageSquare aria-hidden="true" className="size-4" />
|
||||||
|
Text
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+7
-1
@@ -149,4 +149,10 @@
|
|||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* Keep the Chatwoot bubble clear of the mobile Call/Text bar. */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.woot-widget-bubble.woot-elements--right {
|
||||||
|
bottom: 4.5rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
+5
-1
@@ -4,6 +4,7 @@ import Navbar from "./components/Navbar";
|
|||||||
import Footer from "./components/Footer";
|
import Footer from "./components/Footer";
|
||||||
import ChatwootWidget from "./components/ChatwootWidget";
|
import ChatwootWidget from "./components/ChatwootWidget";
|
||||||
import JsonLd from "./components/JsonLd";
|
import JsonLd from "./components/JsonLd";
|
||||||
|
import MobileCallBar from "./components/MobileCallBar";
|
||||||
import { SITE_URL, business, localBusinessSchema } from "@/lib/site";
|
import { SITE_URL, business, localBusinessSchema } from "@/lib/site";
|
||||||
|
|
||||||
const geistSans = localFont({
|
const geistSans = localFont({
|
||||||
@@ -26,12 +27,15 @@ export const metadata = {
|
|||||||
export default function RootLayout({ children }) {
|
export default function RootLayout({ children }) {
|
||||||
return (
|
return (
|
||||||
<html lang="en-NZ">
|
<html lang="en-NZ">
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
<body
|
||||||
|
className={`${geistSans.variable} ${geistMono.variable} pb-12 md:pb-0`}
|
||||||
|
>
|
||||||
<JsonLd data={localBusinessSchema()} />
|
<JsonLd data={localBusinessSchema()} />
|
||||||
<ChatwootWidget />
|
<ChatwootWidget />
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{children}
|
{children}
|
||||||
<Footer />
|
<Footer />
|
||||||
|
<MobileCallBar />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
+309
-106
@@ -1,12 +1,12 @@
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
import styles from "./page.module.css";
|
import styles from "./page.module.css";
|
||||||
import bgimage from "./assets/header-bg.jpg";
|
import bgimage from "./assets/header-bg.jpg";
|
||||||
import Button from "./components/Button";
|
import Button from "./components/Button";
|
||||||
import Link from "next/link";
|
|
||||||
import { GoogleMapsEmbed } from "@next/third-parties/google";
|
import { GoogleMapsEmbed } from "@next/third-parties/google";
|
||||||
import ContactForm from "./components/ContactForm";
|
import ContactForm from "./components/ContactForm";
|
||||||
import JsonLd from "./components/JsonLd";
|
import JsonLd from "./components/JsonLd";
|
||||||
import { pageMetadata, faqSchema } from "@/lib/site";
|
import { pageMetadata, faqSchema, business, links } from "@/lib/site";
|
||||||
import { homeFaqs } from "@/lib/faqs";
|
import { homeFaqs } from "@/lib/faqs";
|
||||||
import {
|
import {
|
||||||
Accordion,
|
Accordion,
|
||||||
@@ -14,6 +14,23 @@ import {
|
|||||||
AccordionItem,
|
AccordionItem,
|
||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
} from "@/components/ui/accordion";
|
} from "@/components/ui/accordion";
|
||||||
|
import {
|
||||||
|
ArrowRight,
|
||||||
|
Briefcase,
|
||||||
|
Cpu,
|
||||||
|
FolderInput,
|
||||||
|
HardDrive,
|
||||||
|
Laptop,
|
||||||
|
MapPin,
|
||||||
|
MessageCircle,
|
||||||
|
MessageSquare,
|
||||||
|
Monitor,
|
||||||
|
MonitorCog,
|
||||||
|
Phone,
|
||||||
|
Power,
|
||||||
|
ShieldAlert,
|
||||||
|
Star,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
export const metadata = pageMetadata({
|
export const metadata = pageMetadata({
|
||||||
title: "Computer & Laptop Repair Te Atatū | Te Atatu Computers",
|
title: "Computer & Laptop Repair Te Atatū | Te Atatu Computers",
|
||||||
@@ -22,6 +39,82 @@ export const metadata = pageMetadata({
|
|||||||
path: "/",
|
path: "/",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const commonFixes = [
|
||||||
|
{
|
||||||
|
icon: Laptop,
|
||||||
|
title: "Cracked laptop screen",
|
||||||
|
price: "from $35",
|
||||||
|
href: "/services/computer-repair",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Power,
|
||||||
|
title: "Won't turn on or won't boot",
|
||||||
|
price: "$35 diagnosis",
|
||||||
|
href: "/services/computer-repair",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: HardDrive,
|
||||||
|
title: "Slow computer? SSD upgrade",
|
||||||
|
price: "from $45 + the drive",
|
||||||
|
href: "/services/computer-upgrades",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShieldAlert,
|
||||||
|
title: "Viruses & scam pop-ups",
|
||||||
|
price: "from $35",
|
||||||
|
href: "/services/virus-removal",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: MonitorCog,
|
||||||
|
title: "Windows reinstall",
|
||||||
|
price: "from $45",
|
||||||
|
href: "/services/computer-upgrades",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: FolderInput,
|
||||||
|
title: "Move files to a new PC",
|
||||||
|
price: "from $45",
|
||||||
|
href: "/services/it-support",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Monitor,
|
||||||
|
title: "New computer setup",
|
||||||
|
price: "from $35",
|
||||||
|
href: "/services/it-support",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Cpu,
|
||||||
|
title: "Custom PC build",
|
||||||
|
price: "from $35",
|
||||||
|
href: "/contact",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
title: "Get in touch",
|
||||||
|
text: "Call, text, WhatsApp or send the form. Tell me what's going on and I'll let you know the next step.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Get it to me",
|
||||||
|
text: "Drop it off at Graham Avenue by appointment, or I can pick it up or come to you (travel fee depends on distance). Many software problems can be fixed remotely.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Fixed and back to you",
|
||||||
|
text: "$35 diagnosis, and I'll tell you the cost before I start. Most repairs are done within 24–48 hours, although this isn't guaranteed.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function SectionCta() {
|
||||||
|
return (
|
||||||
|
<p className="text-center mt-8">
|
||||||
|
<a href={links.tel} className="font-bold text-sky-800 hover:underline">
|
||||||
|
Call or text {business.phone}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
@@ -43,35 +136,39 @@ export default function Home() {
|
|||||||
<div className={styles.textbox}>
|
<div className={styles.textbox}>
|
||||||
<div className="container mx-auto">
|
<div className="container mx-auto">
|
||||||
<div className={styles.textboxInner}>
|
<div className={styles.textboxInner}>
|
||||||
<h1 className="mb-4 text-6xl font-bold">
|
<h1 className="mb-4 text-4xl md:text-6xl font-bold">
|
||||||
Delivering Exceptional Service.
|
Laptop & PC repairs in Te Atatū
|
||||||
</h1>
|
</h1>
|
||||||
<p className={styles.p}>
|
<p className={styles.p}>
|
||||||
<strong>
|
<strong>No fix, no fee.</strong>{" "}A $35 diagnosis, then I'll
|
||||||
Your Local Experts for PCs, Laptops, IT Support &
|
tell you what it costs before I start. Local, honest help
|
||||||
More.
|
for West Auckland.
|
||||||
</strong>
|
|
||||||
<br />
|
|
||||||
From hardware fixes to software solutions, we're here
|
|
||||||
to help. Friendly, affordable service right in your
|
|
||||||
neighborhood!
|
|
||||||
</p>
|
</p>
|
||||||
<Link href="/contact">
|
<div className="flex flex-col sm:flex-row gap-3 mb-6">
|
||||||
<Button>
|
<Button href={links.tel}>
|
||||||
<svg
|
<Phone aria-hidden="true" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
Call {business.phone}
|
||||||
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 a Quote Now
|
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
<Button href={links.sms} variant="outline">
|
||||||
|
<MessageSquare aria-hidden="true" />
|
||||||
|
Text me
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
|
||||||
|
<Star
|
||||||
|
aria-hidden="true"
|
||||||
|
className="size-4 fill-yellow-400 text-yellow-400"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href={business.googleBusinessProfileUrl}
|
||||||
|
className="underline hover:no-underline"
|
||||||
|
>
|
||||||
|
{business.rating.value} from {business.rating.count}{" "}
|
||||||
|
Google reviews
|
||||||
|
</a>
|
||||||
|
<span aria-hidden="true">·</span>
|
||||||
|
<span>Local to Te Atatū</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -79,100 +176,170 @@ export default function Home() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="container mx-auto mb-32">
|
<section className="container mx-auto mb-32">
|
||||||
<h2 className="text-center text-3xl font-bold mb-4">
|
<h2 className="text-center text-3xl font-bold mb-2">
|
||||||
Services we Offer
|
Common fixes & prices
|
||||||
</h2>
|
</h2>
|
||||||
<div className="text-center mb-4 flex flex-row flex-wrap justify-center">
|
<p className="text-center mb-8 text-slate-600">
|
||||||
<div className="max-w-xs p-4 text-center justify-center">
|
Labour prices. Parts are extra, and I'll always quote before
|
||||||
<svg
|
starting.
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</p>
|
||||||
fill="none"
|
<ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
viewBox="0 0 24 24"
|
{commonFixes.map(({ icon: Icon, title, price, href }) => (
|
||||||
strokeWidth={1.5}
|
<li key={title}>
|
||||||
stroke="currentColor"
|
<Link
|
||||||
width="6rem"
|
href={href}
|
||||||
className="mx-auto mb-4"
|
className="flex h-full items-center gap-4 rounded-lg border p-4 transition hover:border-sky-800 hover:shadow-sm"
|
||||||
>
|
>
|
||||||
<path
|
<Icon
|
||||||
strokeLinecap="round"
|
aria-hidden="true"
|
||||||
strokeLinejoin="round"
|
className="size-8 shrink-0 text-sky-800"
|
||||||
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"
|
strokeWidth={1.5}
|
||||||
/>
|
/>
|
||||||
</svg>
|
<span>
|
||||||
<h3 className="text-xl font-bold mb-2">
|
<span className="block font-bold">{title}</span>
|
||||||
Computer Repair/Upgrades
|
<span className="block text-sky-800">{price}</span>
|
||||||
</h3>
|
</span>
|
||||||
<p>
|
</Link>
|
||||||
We can fix anything from a broken screen to a software issue, or
|
</li>
|
||||||
upgrade your computer's parts and optimise Windows to get
|
))}
|
||||||
your PC running like new again.
|
</ul>
|
||||||
</p>
|
<SectionCta />
|
||||||
</div>
|
</section>
|
||||||
<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"
|
|
||||||
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>
|
|
||||||
|
|
||||||
<h3 className="text-xl font-bold mb-2">Desktop PC Building</h3>
|
<section className="bg-slate-100 py-16 mb-32">
|
||||||
<p>
|
<div className="container mx-auto">
|
||||||
We'll help you pick the parts and build a custom gaming or
|
<h2 className="text-center text-3xl font-bold mb-8">
|
||||||
workstation PC for you.
|
How it works
|
||||||
</p>
|
</h2>
|
||||||
</div>
|
<ol className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
<div className="max-w-xs p-4 text-center justify-center">
|
{steps.map(({ title, text }, i) => (
|
||||||
<svg
|
<li key={title} className="text-center max-w-sm mx-auto">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<span className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-sky-800 text-xl font-bold text-white">
|
||||||
fill="none"
|
{i + 1}
|
||||||
viewBox="0 0 24 24"
|
</span>
|
||||||
strokeWidth={1.5}
|
<h3 className="text-xl font-bold mb-2">{title}</h3>
|
||||||
stroke="currentColor"
|
<p>{text}</p>
|
||||||
width="6rem"
|
</li>
|
||||||
className="mx-auto mb-4"
|
))}
|
||||||
>
|
</ol>
|
||||||
<path
|
<SectionCta />
|
||||||
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>
|
|
||||||
|
|
||||||
<h3 className="text-xl font-bold mb-2">Remote Access Support</h3>
|
|
||||||
<p>
|
|
||||||
We can remotely connect to your computer and fix
|
|
||||||
software/operating system related issues from the comfort of
|
|
||||||
your own home.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="container mx-auto flex flex-col gap-8 lg:flex-row mb-32">
|
|
||||||
<ContactForm />
|
<section className="container mx-auto mb-32 max-w-3xl text-center">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">
|
||||||
|
Hi, I'm {business.ownerName}
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg mb-4">
|
||||||
|
I run Te Atatu Computers from Te Atatū Peninsula. When you call or
|
||||||
|
text, you're talking to the person who will actually fix your
|
||||||
|
computer. There's no call centre and no being passed around.
|
||||||
|
</p>
|
||||||
|
<p className="text-lg">
|
||||||
|
I'll explain what's wrong in plain language and tell you
|
||||||
|
what it will cost before I start. If I can't fix it, you
|
||||||
|
don't pay the diagnosis fee.
|
||||||
|
</p>
|
||||||
|
<SectionCta />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="container mx-auto mb-32">
|
||||||
|
<h2 className="text-center text-3xl font-bold mb-8">
|
||||||
|
What customers say
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||||
|
{business.testimonials.map(({ name, quote }) => (
|
||||||
|
<figure key={name} className="rounded-lg border p-6">
|
||||||
|
<blockquote className="mb-3">“{quote}”</blockquote>
|
||||||
|
<figcaption className="font-bold">{name}</figcaption>
|
||||||
|
</figure>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-center mt-8">
|
||||||
|
<a
|
||||||
|
href={business.googleBusinessProfileUrl}
|
||||||
|
className="inline-flex items-center gap-1 font-bold text-sky-800 hover:underline"
|
||||||
|
>
|
||||||
|
Read all reviews on Google
|
||||||
|
<ArrowRight aria-hidden="true" className="size-4" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="container mx-auto mb-32 flex flex-col gap-8 lg:flex-row">
|
||||||
|
<div className="w-full">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">Areas I serve</h2>
|
||||||
|
<p className="mb-4 flex items-start gap-2">
|
||||||
|
<MapPin aria-hidden="true" className="size-5 shrink-0 mt-0.5" />
|
||||||
|
<span>
|
||||||
|
Based at {business.address.street}, {business.address.suburb}.
|
||||||
|
Drop-offs by appointment.
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="mb-4">
|
||||||
|
Onsite visits, pickup and return, and remote support across:
|
||||||
|
</p>
|
||||||
|
<ul className="grid grid-cols-2 gap-2 mb-6 list-disc pl-6">
|
||||||
|
{business.serviceArea.map((area) => (
|
||||||
|
<li key={area}>{area}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Not on the list? Get in touch and I'll let you know if I can
|
||||||
|
help.
|
||||||
|
</p>
|
||||||
|
<p className="mt-4">
|
||||||
|
<a
|
||||||
|
href={links.tel}
|
||||||
|
className="font-bold text-sky-800 hover:underline"
|
||||||
|
>
|
||||||
|
Call or text {business.phone}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<GoogleMapsEmbed
|
<GoogleMapsEmbed
|
||||||
apiKey="AIzaSyDbgQY55TQY5CefsCUwKbc8RfoOUe8U5gY"
|
apiKey="AIzaSyDbgQY55TQY5CefsCUwKbc8RfoOUe8U5gY"
|
||||||
width="100%"
|
width="100%"
|
||||||
height="600px"
|
height="400px"
|
||||||
mode="place"
|
mode="place"
|
||||||
q="place_id:ChIJz0ZoDYhADW0R0TDgWoWMq0M"
|
q="place_id:ChIJz0ZoDYhADW0R0TDgWoWMq0M"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="container mx-auto mb-16 max-w-3xl mb-32 scroll-mt-20" id="faq">
|
|
||||||
|
<section className="container mx-auto mb-32">
|
||||||
|
<div className="rounded-lg border p-6 md:p-8 flex flex-col md:flex-row gap-6 md:items-center">
|
||||||
|
<Briefcase
|
||||||
|
aria-hidden="true"
|
||||||
|
className="size-12 shrink-0 text-sky-800"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-2xl font-bold mb-2">For local businesses</h2>
|
||||||
|
<p>
|
||||||
|
IT support for small businesses: Wi-Fi and networks, email,
|
||||||
|
backups, security and new PC setup. Onsite or remote, from
|
||||||
|
$35 an hour.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/services/it-support"
|
||||||
|
className="inline-flex items-center gap-1 font-bold text-sky-800 hover:underline"
|
||||||
|
>
|
||||||
|
Business IT support
|
||||||
|
<ArrowRight aria-hidden="true" className="size-4" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
className="container mx-auto max-w-3xl mb-32 scroll-mt-20"
|
||||||
|
id="faq"
|
||||||
|
>
|
||||||
<JsonLd data={faqSchema(homeFaqs)} />
|
<JsonLd data={faqSchema(homeFaqs)} />
|
||||||
<h2 className="text-center text-3xl font-bold mb-8">
|
<h2 className="text-center text-3xl font-bold mb-8">
|
||||||
Frequently Asked Questions
|
Frequently asked questions
|
||||||
</h2>
|
</h2>
|
||||||
<Accordion className="mb-8">
|
<Accordion className="mb-8">
|
||||||
{homeFaqs.map(({ question, answer, list }, i) => (
|
{homeFaqs.map(({ question, answer, list }, i) => (
|
||||||
@@ -191,6 +358,42 @@ export default function Home() {
|
|||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
))}
|
))}
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
<SectionCta />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="bg-sky-900 text-white py-16">
|
||||||
|
<div className="container mx-auto text-center">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">
|
||||||
|
Get your computer sorted
|
||||||
|
</h2>
|
||||||
|
<p className="mb-8">
|
||||||
|
Call or text now, or send the details and I'll get back to
|
||||||
|
you with a quote.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row flex-wrap justify-center gap-3">
|
||||||
|
<Button href={links.tel}>
|
||||||
|
<Phone aria-hidden="true" />
|
||||||
|
Call {business.phone}
|
||||||
|
</Button>
|
||||||
|
<Button href={links.sms} variant="outline">
|
||||||
|
<MessageSquare aria-hidden="true" />
|
||||||
|
Text me
|
||||||
|
</Button>
|
||||||
|
<Button href={links.whatsapp} variant="outline">
|
||||||
|
<MessageCircle aria-hidden="true" />
|
||||||
|
WhatsApp
|
||||||
|
</Button>
|
||||||
|
<Button href="#quote" variant="outline">
|
||||||
|
Get a quote
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section
|
||||||
|
id="quote"
|
||||||
|
className="container mx-auto max-w-2xl py-16 scroll-mt-20"
|
||||||
|
>
|
||||||
|
<ContactForm />
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 50em;
|
height: 32em;
|
||||||
margin-bottom: 3.5em;
|
margin-bottom: 3.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+24
-18
@@ -5,40 +5,46 @@ export const homeFaqs = [
|
|||||||
{
|
{
|
||||||
question: "What types of devices do you repair?",
|
question: "What types of devices do you repair?",
|
||||||
answer:
|
answer:
|
||||||
"We repair desktops, laptops, chromebooks and PCs. We also handle custom-built systems and some tablets, depending on the issue. We do not repair Apple devices.",
|
"I repair Windows laptops and desktop PCs, Chromebooks and custom-built PCs, plus some tablets depending on the problem. I don't repair Apple devices.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: "What kinds of issues can you fix?",
|
question: "What kinds of problems can you fix?",
|
||||||
answer:
|
answer: "Most things that go wrong with a PC or laptop, including:",
|
||||||
"We handle a wide range of problems, including (but not limited to):",
|
|
||||||
list: [
|
list: [
|
||||||
"Software issues (e.g. Windows errors, slow performance)",
|
"Cracked or broken laptop screens",
|
||||||
"Virus removal and protection",
|
"Computers that won't turn on or won't start Windows",
|
||||||
"Data recovery and backup solutions",
|
"Slow computers (SSD and RAM upgrades, Windows clean-ups)",
|
||||||
"Network setup and troubleshooting",
|
"Viruses, malware and scam pop-ups",
|
||||||
"Hardware upgrades (e.g. RAM, SSD, graphics card)",
|
"Windows errors, reinstalls and upgrades",
|
||||||
|
"Data recovery, backups and moving files to a new computer",
|
||||||
|
"Wi-Fi, network and printer problems",
|
||||||
|
"Software installation and setup",
|
||||||
"Custom PC builds",
|
"Custom PC builds",
|
||||||
"Remote support for software issues",
|
|
||||||
"General IT support and consulting",
|
|
||||||
"Printer setup and troubleshooting",
|
|
||||||
"Software installation and configuration",
|
|
||||||
"Operating system installation and upgrades",
|
|
||||||
"Data migration from old devices to new ones",
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
question: "How much does a repair cost?",
|
||||||
|
answer:
|
||||||
|
"A diagnosis is $35. If I can't fix it, you don't pay the $35. Once I know what's wrong, I'll tell you what the repair will cost before I start. Labour is $35 an hour, and parts are extra. If you decide not to go ahead with the repair, the $35 diagnosis fee still applies.",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
question: "Do I need an appointment, or can I just walk in?",
|
question: "Do I need an appointment, or can I just walk in?",
|
||||||
answer:
|
answer:
|
||||||
"Currently we are operating by appointment only. Please contact us to schedule a time that works for you. We can also arrange remote support for certain issues.",
|
"Drop-offs are by appointment at 34 Graham Avenue, Te Atatū Peninsula. I'm available Monday to Friday, 9am to 6pm, and weekends by appointment. Call or text 021 107 7483 to book a time.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Can you come to me, or pick up my computer?",
|
||||||
|
answer:
|
||||||
|
"Yes. I do onsite visits and pickup and return across West Auckland and the Auckland CBD. The travel fee depends on distance, so get in touch for a quote. Many software problems can also be fixed remotely, without you leaving home.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: "How long will the repair take?",
|
question: "How long will the repair take?",
|
||||||
answer:
|
answer:
|
||||||
"Most basic repairs are completed within 24–48 hours, although this isn't guaranteed. Some issues may take longer, depending on parts availability and complexity. We'll give you an estimated turnaround time when we diagnose the problem. Most parts take about a week to arrive.",
|
"Most repairs are done within 24–48 hours, although this isn't guaranteed. If a part needs ordering it usually takes about a week to arrive. I'll give you an estimated turnaround once I've diagnosed the problem.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: "What payment methods do you accept?",
|
question: "What payment methods do you accept?",
|
||||||
answer:
|
answer:
|
||||||
"We accept cash, NZ bank transfer and Bitcoin, plus contactless card payments: Visa, Mastercard, American Express, Apple Pay, Google Pay and Samsung Pay. We don't accept EFTPOS.",
|
"Cash, NZ bank transfer and Bitcoin, plus contactless card payments: Visa, Mastercard, American Express, Apple Pay, Google Pay and Samsung Pay. I don't accept EFTPOS.",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@@ -34,6 +34,23 @@ export const business = {
|
|||||||
"Apple Pay, Google Pay and Samsung Pay",
|
"Apple Pay, Google Pay and Samsung Pay",
|
||||||
"Bitcoin",
|
"Bitcoin",
|
||||||
],
|
],
|
||||||
|
prices: {
|
||||||
|
diagnostic: "$35",
|
||||||
|
hourly: "$35",
|
||||||
|
},
|
||||||
|
rating: { value: "4.8", count: 4 },
|
||||||
|
testimonials: [
|
||||||
|
{
|
||||||
|
name: "Irwin",
|
||||||
|
quote:
|
||||||
|
"John is a super star! He fixed my laptop for a reasonable price. I highly recommend him!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Marlies",
|
||||||
|
quote:
|
||||||
|
"Very happy with the service provided. Very prompt response to my online query and further questions. John knew what he was doing, was professional and helpful. Thank you!",
|
||||||
|
},
|
||||||
|
],
|
||||||
googleBusinessProfileUrl: "https://share.google/APzXLRzyrqAUldl4Y",
|
googleBusinessProfileUrl: "https://share.google/APzXLRzyrqAUldl4Y",
|
||||||
googleReviewUrl: "https://g.page/r/CYkJobPXq4IpEAE/review",
|
googleReviewUrl: "https://g.page/r/CYkJobPXq4IpEAE/review",
|
||||||
facebookUrl: "https://www.facebook.com/profile.php?id=61571509018351",
|
facebookUrl: "https://www.facebook.com/profile.php?id=61571509018351",
|
||||||
@@ -41,6 +58,13 @@ export const business = {
|
|||||||
|
|
||||||
export const BUSINESS_ID = `${SITE_URL}/#business`;
|
export const BUSINESS_ID = `${SITE_URL}/#business`;
|
||||||
|
|
||||||
|
export const links = {
|
||||||
|
tel: `tel:${business.phoneE164}`,
|
||||||
|
sms: `sms:${business.phoneE164}`,
|
||||||
|
whatsapp: `https://wa.me/${business.phoneE164.slice(1)}`,
|
||||||
|
email: `mailto:${business.email}`,
|
||||||
|
};
|
||||||
|
|
||||||
// Every public route. Used by the sitemap; add new pages here.
|
// Every public route. Used by the sitemap; add new pages here.
|
||||||
export const routes = [
|
export const routes = [
|
||||||
{ path: "/", priority: 1 },
|
{ path: "/", priority: 1 },
|
||||||
|
|||||||
Reference in new issue
Block a user