62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect } from "react"
|
|
import { Star } from "lucide-react"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { ReviewSchema } from "@/components/review-schema"
|
|
import { PublicPageHeader, PublicSurface } from "@/components/public-surface"
|
|
|
|
export function ReviewsSection() {
|
|
useEffect(() => {
|
|
// Load the review widget script
|
|
const script = document.createElement("script")
|
|
script.src = "https://reputationhub.site/reputation/assets/review-widget.js"
|
|
script.type = "text/javascript"
|
|
document.body.appendChild(script)
|
|
|
|
return () => {
|
|
document.body.removeChild(script)
|
|
}
|
|
}, [])
|
|
|
|
// Review data based on website content (4.9 average, 50+ reviews)
|
|
const aggregateRating = {
|
|
ratingValue: 4.9,
|
|
reviewCount: 50,
|
|
bestRating: 5,
|
|
worstRating: 1,
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ReviewSchema aggregateRating={aggregateRating} />
|
|
<section className="py-16 md:py-24 bg-card/30">
|
|
<div className="container mx-auto px-4">
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="Google Reviews"
|
|
title="What Our Customers Say"
|
|
description="See what Utah businesses have to say about Rocky Mountain Vending and the service they count on every day."
|
|
>
|
|
<div className="mt-4 flex justify-center">
|
|
<Badge variant="secondary" className="rounded-full px-4 py-1.5 text-sm">
|
|
<Star className="mr-2 h-4 w-4 fill-current text-primary" />
|
|
{aggregateRating.ratingValue} / {aggregateRating.bestRating} ({aggregateRating.reviewCount}+ Reviews)
|
|
</Badge>
|
|
</div>
|
|
</PublicPageHeader>
|
|
|
|
<PublicSurface className="mx-auto mt-10 max-w-5xl overflow-hidden p-5 md:p-7">
|
|
<iframe
|
|
className="lc_reviews_widget min-h-[400px] w-full rounded-[1.5rem] border border-border/60 bg-background"
|
|
src="https://reputationhub.site/reputation/widgets/review_widget/YAoWLgNSid8oG44j9BjG"
|
|
frameBorder="0"
|
|
scrolling="no"
|
|
title="Customer Reviews"
|
|
/>
|
|
</PublicSurface>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|