update esthétique

2026-07-08 13:28:51 +02:00
parent e45e9f154e
commit cc4412d151
14 changed files with 663 additions and 7 deletions
@@ -0,0 +1,62 @@
+import type { GoogleReviewsSummary } from "@/lib/google-reviews";
+import { ReviewStars } from "./ReviewStars";
+import { ReviewsCarousel } from "./ReviewsCarousel";
+
+function formatRating(rating: number) {
+  return rating.toLocaleString("fr-FR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+}
+
+function formatReviewCount(count: number) {
+  return count.toLocaleString("fr-FR");
+}
+
+export function ReviewsSection({ data }: { data: GoogleReviewsSummary }) {
+  const { rating, reviewCount, googleMapsUri, reviews } = data;
+
+  return (
+    <section
+      id="avis"
+      className="scroll-mt-24 border-t border-chocolat/8 bg-cream px-4 py-20 sm:px-6"
+    >
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-12 text-center">
+          <h2 className="text-3xl font-bold text-chocolat sm:text-4xl">
+            Avis clients
+          </h2>
+          <p className="mx-auto mt-3 max-w-2xl text-muted">
+            Ce que disent nos clients sur Google.
+          </p>
+          {rating != null ? (
+            <div className="mt-5 flex flex-wrap items-center justify-center gap-3">
+              <span className="text-3xl font-bold text-chocolat">
+                {formatRating(rating)}
+              </span>
+              <ReviewStars rating={rating} />
+              {reviewCount != null ? (
+                <span className="text-sm text-muted">
+                  ({formatReviewCount(reviewCount)} avis)
+                </span>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+
+        <ReviewsCarousel reviews={reviews} />
+
+        <div className="mt-10 flex flex-col items-center gap-3 text-center">
+          <a
+            href={googleMapsUri}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 rounded-full bg-gaufre px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_24px_-8px_rgba(243,156,18,0.55)] transition hover:bg-gaufre/90"
+          >
+            Voir tous les avis sur Google
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}