From 7043b47de129be864cb9e5685188d9177edce111 Mon Sep 17 00:00:00 2001 From: asowneryt Date: Wed, 30 Sep 2026 20:32:46 +1300 Subject: [PATCH] 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 --- src/app/components/Button.js | 15 +- src/app/components/Button.module.css | 8 +- src/app/components/MobileCallBar.js | 24 ++ src/app/globals.css | 8 +- src/app/layout.js | 6 +- src/app/page.js | 415 ++++++++++++++++++++------- src/app/page.module.css | 2 +- src/lib/faqs.js | 42 +-- src/lib/site.js | 24 ++ 9 files changed, 413 insertions(+), 131 deletions(-) create mode 100644 src/app/components/MobileCallBar.js diff --git a/src/app/components/Button.js b/src/app/components/Button.js index 1ab86c0..c011c16 100644 --- a/src/app/components/Button.js +++ b/src/app/components/Button.js @@ -1,7 +1,16 @@ +import Link from "next/link"; 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 {children}; + } + if (href) { + return {children}; + } return ( - + ); -} \ No newline at end of file +} diff --git a/src/app/components/Button.module.css b/src/app/components/Button.module.css index a4854b2..cda2502 100644 --- a/src/app/components/Button.module.css +++ b/src/app/components/Button.module.css @@ -17,4 +17,10 @@ .button svg { width: 1em; height: 1em; -} \ No newline at end of file +} + +.outline { + background-color: transparent; + color: white; + box-shadow: inset 0 0 0 2px white; +} diff --git a/src/app/components/MobileCallBar.js b/src/app/components/MobileCallBar.js new file mode 100644 index 0000000..0a9c659 --- /dev/null +++ b/src/app/components/MobileCallBar.js @@ -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 ( +
+ + + + +
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index bde90fe..4055cb7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -149,4 +149,10 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} +/* 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; + } +} diff --git a/src/app/layout.js b/src/app/layout.js index bdb15a7..74d7013 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -4,6 +4,7 @@ import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; import ChatwootWidget from "./components/ChatwootWidget"; import JsonLd from "./components/JsonLd"; +import MobileCallBar from "./components/MobileCallBar"; import { SITE_URL, business, localBusinessSchema } from "@/lib/site"; const geistSans = localFont({ @@ -26,12 +27,15 @@ export const metadata = { export default function RootLayout({ children }) { return ( - + {children}