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}