285 lines
12 KiB
TypeScript
285 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect } from "react"
|
|
import Link from "next/link"
|
|
import { Breadcrumbs } from "@/components/breadcrumbs"
|
|
import {
|
|
PublicInset,
|
|
PublicPageHeader,
|
|
PublicSurface,
|
|
} from "@/components/public-surface"
|
|
|
|
const reviewThemes = [
|
|
{
|
|
title: "Always cold and stocked",
|
|
body: "Customers consistently mention that the machines stay full, drinks stay cold, and the day-to-day experience feels dependable instead of neglected.",
|
|
},
|
|
{
|
|
title: "Fast, friendly service",
|
|
body: "When something needs attention, businesses talk about quick follow-through, easy communication, and issues getting handled without a long delay.",
|
|
},
|
|
{
|
|
title: "Wide product variety",
|
|
body: "Reviews regularly call out strong drink selection, snack variety, and the ability to request items that fit the people using the location.",
|
|
},
|
|
{
|
|
title: "Fair pricing and reliability",
|
|
body: "People mention competitive pricing, clean machines, and a setup that feels professional instead of frustrating or outdated.",
|
|
},
|
|
]
|
|
|
|
const featuredQuotes = [
|
|
{
|
|
quote:
|
|
"He is arguably one of the best vendors in the industry. There probably isn't too many people I would trust more than him.",
|
|
author: "Martin Harrison",
|
|
},
|
|
{
|
|
quote: "He always has my favorite energy drink at a great price!",
|
|
author: "TOPX Kingsford",
|
|
},
|
|
{
|
|
quote:
|
|
"This vending machine is my favorite at my job! It always works and has the best stuff!!",
|
|
author: "DJ Montoya",
|
|
},
|
|
{
|
|
quote:
|
|
"Great to work with, looking forward to having him in more locations.",
|
|
author: "Jennifer Spencer",
|
|
},
|
|
]
|
|
|
|
export function ReviewsPage() {
|
|
useEffect(() => {
|
|
const existingScript = document.querySelector(
|
|
'script[data-rocky-reviews-widget="true"]'
|
|
)
|
|
if (existingScript) {
|
|
return
|
|
}
|
|
|
|
const script = document.createElement("script")
|
|
script.src = "https://reputationhub.site/reputation/assets/review-widget.js"
|
|
script.type = "text/javascript"
|
|
script.dataset.rockyReviewsWidget = "true"
|
|
document.body.appendChild(script)
|
|
|
|
return () => {
|
|
if (document.body.contains(script)) {
|
|
document.body.removeChild(script)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="public-page">
|
|
<Breadcrumbs
|
|
className="mb-6"
|
|
items={[
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Reviews", href: "/reviews" },
|
|
]}
|
|
/>
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="Customer Reviews"
|
|
title="What Utah businesses say about working with Rocky Mountain Vending."
|
|
description="See the real themes customers mention most often, browse featured comments, and then dig into the live Google review feed."
|
|
>
|
|
<PublicInset className="mx-auto inline-flex w-fit rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
|
|
Average rating: 4.9 out of 5, based on 50+ customer reviews.
|
|
</PublicInset>
|
|
</PublicPageHeader>
|
|
|
|
<section className="mt-12 grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
|
|
<PublicSurface>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
|
|
Why Businesses Trust Rocky
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
The same strengths keep showing up in the reviews.
|
|
</h2>
|
|
<p className="mt-4 text-base leading-relaxed text-muted-foreground">
|
|
We're honored to have earned strong feedback from Utah
|
|
businesses that rely on us for placement, restocking, repairs, and
|
|
day-to-day service. The reviews tend to point back to the same
|
|
things: stocked machines, responsive help, a better product mix,
|
|
and follow-through after install.
|
|
</p>
|
|
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
|
{reviewThemes.map((theme) => (
|
|
<PublicInset key={theme.title} className="h-full">
|
|
<h3 className="text-lg font-semibold text-foreground">
|
|
{theme.title}
|
|
</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
{theme.body}
|
|
</p>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
|
|
<PublicSurface className="flex flex-col justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
|
|
Featured Comments
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
A few of the comments that capture the pattern.
|
|
</h2>
|
|
</div>
|
|
<div className="mt-6 grid gap-4">
|
|
{featuredQuotes.map((item) => (
|
|
<PublicInset key={item.author} className="p-5">
|
|
<p className="text-sm leading-relaxed text-foreground">
|
|
“{item.quote}”
|
|
</p>
|
|
<p className="mt-3 text-sm font-semibold text-primary">
|
|
{item.author}
|
|
</p>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
</section>
|
|
|
|
<section className="mt-12">
|
|
<PublicSurface className="overflow-hidden p-5 md:p-7">
|
|
<div className="flex flex-col gap-4 border-b border-border/60 pb-6 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
|
|
All Google Reviews
|
|
</p>
|
|
<h2 className="mt-2 text-3xl font-semibold tracking-tight text-balance">
|
|
Browse the full review feed from Rocky Mountain Vending
|
|
customers.
|
|
</h2>
|
|
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted-foreground">
|
|
See the full stream of Google reviews from businesses that rely
|
|
on us for placement, restocking, repairs, and day-to-day
|
|
service.
|
|
</p>
|
|
</div>
|
|
<div className="w-fit rounded-full border border-border/60 bg-background px-3 py-1 text-sm text-muted-foreground">
|
|
Live review feed
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 rounded-[1.5rem] bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,249,240,0.92))] p-2 sm:p-3">
|
|
<iframe
|
|
className="lc_reviews_widget min-h-[620px] w-full rounded-[1.35rem] border border-border/60 bg-background md:min-h-[780px]"
|
|
src="https://reputationhub.site/reputation/widgets/review_widget/YAoWLgNSid8oG44j9BjG"
|
|
frameBorder="0"
|
|
scrolling="no"
|
|
title="Rocky Mountain Vending Google Reviews"
|
|
/>
|
|
</div>
|
|
</PublicSurface>
|
|
</section>
|
|
|
|
<section className="mt-12 grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
|
|
<PublicSurface>
|
|
<h2 className="text-3xl font-semibold tracking-tight text-balance">
|
|
What businesses usually want to verify before they choose a vendor
|
|
</h2>
|
|
<div className="mt-6 space-y-4">
|
|
{[
|
|
[
|
|
"Route consistency",
|
|
"Whether the company actually keeps machines stocked, clean, and working after the initial install.",
|
|
],
|
|
[
|
|
"Response time",
|
|
"How quickly service issues, refunds, or machine problems get attention when something goes wrong.",
|
|
],
|
|
[
|
|
"Product mix",
|
|
"Whether the machine selection matches the people using the location instead of forcing a one-size-fits-all lineup.",
|
|
],
|
|
[
|
|
"Communication",
|
|
"Whether the provider is easy to reach when you need placement, repairs, moving help, or a change in product mix.",
|
|
],
|
|
].map(([title, body]) => (
|
|
<PublicInset key={title}>
|
|
<h3 className="text-lg font-semibold text-foreground">
|
|
{title}
|
|
</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
{body}
|
|
</p>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
|
|
<PublicSurface className="flex flex-col justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
|
|
Why It Matters
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
Reviews are usually the last confidence check before someone reaches out.
|
|
</h2>
|
|
<p className="mt-3 text-base leading-relaxed text-muted-foreground">
|
|
Most businesses are trying to verify the same things: follow-through,
|
|
communication, and whether the machines stay stocked and working
|
|
after install. If that sounds like your checklist too, we can help
|
|
you sort through next steps quickly.
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 grid gap-4">
|
|
<PublicInset className="p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
|
|
Common Questions
|
|
</p>
|
|
<ul className="mt-3 space-y-3 text-sm leading-relaxed text-muted-foreground">
|
|
<li>Does this location qualify for free placement?</li>
|
|
<li>Can Rocky handle repairs and restocking without extra staff work on our side?</li>
|
|
<li>Should we ask about placement, machine sales, or direct service help?</li>
|
|
</ul>
|
|
</PublicInset>
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
|
|
<Link
|
|
href="/#request-machine"
|
|
className="rounded-[1.5rem] border border-border/55 bg-background/70 p-5 text-left transition hover:border-primary/30 hover:text-primary"
|
|
>
|
|
<h3 className="text-lg font-semibold text-foreground">
|
|
Free Placement
|
|
</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
See whether your business qualifies for vending machine
|
|
placement and ongoing service.
|
|
</p>
|
|
</Link>
|
|
<Link
|
|
href="/contact-us#contact-form"
|
|
className="rounded-[1.5rem] border border-border/55 bg-background/70 p-5 text-left transition hover:border-primary/30 hover:text-primary"
|
|
>
|
|
<h3 className="text-lg font-semibold text-foreground">
|
|
Service or Sales
|
|
</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
Reach out about repairs, moving, manuals, parts, or machine
|
|
sales.
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 rounded-[1.5rem] border border-primary/12 bg-[linear-gradient(180deg,rgba(41,160,71,0.06),rgba(255,255,255,0.7))] p-5">
|
|
<p className="text-sm font-semibold text-foreground">
|
|
Looking for a direct answer?
|
|
</p>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
Tell us about your location, traffic, and what kind of help you
|
|
need. We'll point you toward the right option instead of
|
|
making you guess between service pages.
|
|
</p>
|
|
</div>
|
|
</PublicSurface>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|