Rocky_Mountain_Vending/artifacts/backups/formatting/components/reviews-section.tsx

57 lines
1.8 KiB
TypeScript

"use client"
import { useEffect } from "react"
import { Star } from "lucide-react"
import { ReviewSchema } from "@/components/review-schema"
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">
<div className="text-center mb-12">
<div className="inline-flex items-center justify-center gap-2 mb-4">
<Star className="h-6 w-6 text-secondary fill-secondary" />
<h2 className="text-3xl md:text-4xl font-bold">What Our Customers Say</h2>
</div>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Don't just take our word for itsee what Utah businesses have to say about our service
</p>
</div>
<div className="max-w-5xl mx-auto">
<iframe
className="lc_reviews_widget"
src="https://reputationhub.site/reputation/widgets/review_widget/YAoWLgNSid8oG44j9BjG"
frameBorder="0"
scrolling="no"
style={{ minWidth: "100%", width: "100%", minHeight: "400px" }}
title="Customer Reviews"
/>
</div>
</div>
</section>
</>
)
}