356 lines
16 KiB
JavaScript
356 lines
16 KiB
JavaScript
import Image from "next/image";
|
||
import styles from "./page.module.css";
|
||
import bgimage from "./assets/header-bg.jpg";
|
||
import Button from "./components/Button";
|
||
import Link from "next/link";
|
||
import { GoogleMapsEmbed } from "@next/third-parties/google";
|
||
import ContactForm from "./components/ContactForm";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "@/components/ui/accordion";
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div className={styles.page}>
|
||
<main className={styles.main}>
|
||
<section>
|
||
<div className={styles.header}>
|
||
<Image
|
||
src={bgimage}
|
||
alt="Header Background"
|
||
placeholder="blur"
|
||
quality={100}
|
||
fill
|
||
priority
|
||
sizes="100vw"
|
||
style={{
|
||
objectFit: "cover",
|
||
}}
|
||
/>
|
||
<div className={styles.textbox}>
|
||
<div className="container mx-auto">
|
||
<div className={styles.textboxInner}>
|
||
<h1 className="mb-4 text-6xl font-bold">
|
||
Delivering Exceptional Service.
|
||
</h1>
|
||
<p className={styles.p}>
|
||
<strong>
|
||
Your Local Experts for PCs, Laptops, Web Design, IT
|
||
Support & More.
|
||
</strong>
|
||
<br />
|
||
From hardware fixes to software solutions, we're here
|
||
to help. Friendly, affordable service right in your
|
||
neighborhood!
|
||
</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 a Quote Now
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="container mx-auto mb-32">
|
||
<h1 className="text-center text-3xl font-bold mb-4">
|
||
Services we Offer
|
||
</h1>
|
||
<div className="text-center mb-4 flex flex-row flex-wrap justify-center">
|
||
<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="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 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's parts and optimise Windows to get
|
||
your PC running like new again.
|
||
</p>
|
||
</div>
|
||
<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>
|
||
|
||
<h2 className="text-xl font-bold mb-2">Desktop PC Building</h2>
|
||
<p>
|
||
We'll help you pick the parts and build a custom gaming or
|
||
workstation PC for you.
|
||
</p>
|
||
</div>
|
||
<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="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 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>
|
||
</div>
|
||
<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="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 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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="container mx-auto flex flex-col gap-8 lg:flex-row mb-32">
|
||
<ContactForm />
|
||
<div className="w-full">
|
||
<GoogleMapsEmbed
|
||
apiKey="AIzaSyDbgQY55TQY5CefsCUwKbc8RfoOUe8U5gY"
|
||
width="100%"
|
||
height="600px"
|
||
mode="place"
|
||
q="place_id:ChIJz0ZoDYhADW0R0TDgWoWMq0M"
|
||
/>
|
||
</div>
|
||
</section>
|
||
<section className="container mx-auto mb-16 max-w-3xl mb-32" id="faq">
|
||
<h1 className="text-center text-3xl font-bold mb-8">
|
||
Frequently Asked Questions
|
||
</h1>
|
||
<h3 className="text-lg font-bold text-slate-900">
|
||
Computer Repair and IT Support
|
||
</h3>
|
||
<Accordion className="mb-8">
|
||
<AccordionItem value="item-1">
|
||
<AccordionTrigger>
|
||
What types of devices do you repair?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
We repair desktops, laptops, chromebooks and PCs. We also handle
|
||
custom-built systems and some tablets, depending on the issue.
|
||
Currently we do not repair Apple devices.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-2">
|
||
<AccordionTrigger>
|
||
What kinds of issues can you fix?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
We handle a wide range of problems, including (but not limited
|
||
to):
|
||
<ul className="list-disc pl-6 my-2">
|
||
<li>
|
||
Software issues (e.g. Windows errors, slow performance)
|
||
</li>
|
||
<li>Virus removal and protection</li>
|
||
<li>Data recovery and backup solutions</li>
|
||
<li>Network setup and troubleshooting</li>
|
||
<li>Hardware upgrades (e.g. RAM, SSD, graphics card)</li>
|
||
<li>Custom PC builds</li>
|
||
<li>Web development and design</li>
|
||
<li>Remote support for software issues</li>
|
||
<li>General IT support and consulting</li>
|
||
<li>Printer setup and troubleshooting</li>
|
||
<li>Software installation and configuration</li>
|
||
<li>Operating system installation and upgrades</li>
|
||
<li>Data migration from old devices to new ones</li>
|
||
</ul>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-3">
|
||
<AccordionTrigger>
|
||
Do I need an appointment, or can I just walk in?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
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.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-4">
|
||
<AccordionTrigger>
|
||
How long will the repair take?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
Most basic repairs are completed within 24-48 hours. 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.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
|
||
<h3 className="text-lg font-bold text-slate-900">
|
||
Web Design and Development
|
||
</h3>
|
||
<Accordion>
|
||
<AccordionItem value="item-1">
|
||
<AccordionTrigger>
|
||
What platforms do you build websites with?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
We specialize in modern web development using WordPress for
|
||
content-driven sites and React/Next.js for high-performance,
|
||
custom web applications. We also offer support for almost any
|
||
website builder, whether it's Wix, Oddo, Squarespace, or
|
||
anything else. Whether you need a blog, business site,
|
||
portfolio, or a fully custom web app—we've got you covered.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
|
||
<AccordionItem value="item-2">
|
||
<AccordionTrigger>
|
||
How do I choose between WordPress and React/Next.js?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
It depends on your needs:
|
||
<ul className="list-disc pl-6 my-2">
|
||
<li>
|
||
<strong>WordPress</strong> is best for content-heavy
|
||
websites like blogs, portfolios, and marketing sites.
|
||
</li>
|
||
<li>
|
||
<strong>React/Next.js</strong> is ideal for fast, scalable,
|
||
custom web applications or interactive user interfaces.
|
||
</li>
|
||
</ul>
|
||
We’ll help you decide what works best based on your goals and
|
||
budget.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-3">
|
||
<AccordionTrigger>
|
||
Do you design the website too, or just build it?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
We do both! We offer full-service web design and development.
|
||
This includes UX/UI design, branding, responsive layouts, and
|
||
mobile-first design—all tailored to your needs.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-4">
|
||
<AccordionTrigger>
|
||
Can you redesign or improve my existing site?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
Absolutely. We can modernize your design, improve performance,
|
||
migrate platforms, or fully rebuild your site with a better
|
||
structure and codebase.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-5">
|
||
<AccordionTrigger>
|
||
Do you offer SEO and performance optimization?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
Yes! All our builds include basic SEO best practices and speed
|
||
optimization. We also offer advanced technical SEO, Core Web
|
||
Vitals tuning, and image/code optimization.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-6">
|
||
<AccordionTrigger>
|
||
Do you provide ongoing maintenance and support?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
Yes, we offer monthly maintenance plans for updates, backups,
|
||
security checks, and minor edits. We can also provide on-demand
|
||
support when needed.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-7">
|
||
<AccordionTrigger>
|
||
Will my site work on mobile devices?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
Definitely. Every site we build is fully responsive and tested
|
||
on a variety of devices to ensure it looks great and works well
|
||
on phones, tablets, and desktops.
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
<AccordionItem value="item-8">
|
||
<AccordionTrigger>
|
||
What do you need from me to get started?
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
We’ll need some info about your goals, brand, content (text,
|
||
images, logo), and examples of sites you like. Don’t worry—we’ll
|
||
guide you through the process!
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|