Add ContactForm component and utility functions; update Navbar styles
This commit is contained in:
ASOwnerYT
+179
-4
@@ -4,6 +4,13 @@ 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 (
|
||||
@@ -61,7 +68,7 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="container mx-auto mb-16">
|
||||
<section className="container mx-auto mb-32">
|
||||
<h1 className="text-center text-3xl font-bold mb-4">
|
||||
Services we Offer
|
||||
</h1>
|
||||
@@ -163,17 +170,185 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container mx-auto">
|
||||
<div className={styles.map}>
|
||||
<section className="container mx-auto flex flex-col gap-8 lg:flex-row mb-32">
|
||||
<ContactForm />
|
||||
<div className="w-full">
|
||||
<GoogleMapsEmbed
|
||||
apiKey="AIzaSyDbgQY55TQY5CefsCUwKbc8RfoOUe8U5gY"
|
||||
height="500px"
|
||||
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user