Switch to version 2: added src/pages/HomePage/sections/Reviews.tsx

src/pages/HomePage/sections/Reviews.tsx

@@ -0,0 +1,80 @@
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import RatingStars from "@/components/ui/RatingStars";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+export default function ReviewsSection() {
+  const testimonials = [
+    {
+      name: "Eleanor Vance",
+      role: "Food Critic",
+      quote: "An absolute masterpiece of culinary art. Every dish was a journey of flavors, and the ambiance is unmatched.",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=200&h=200"
+    },
+    {
+      name: "Marcus Thorne",
+      role: "Local Guide",
+      quote: "The attention to detail here is phenomenal. From the perfectly seared scallops to the curated wine list, it's a flawless experience.",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=200&h=200"
+    },
+    {
+      name: "Sophia Lin",
+      role: "Regular Guest",
+      quote: "We celebrate all our special occasions here. The staff makes you feel like royalty, and the tasting menu never disappoints.",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=200&h=200"
+    }
+  ];
+
+  return (
+    <section className="relative w-full py-24 bg-background" data-webild-section="reviews">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Guest Reviews" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="What Our Diners Say"
+            variant="fade-blur"
+            tag="h2"
+            className="text-4xl md:text-5xl font-serif font-bold text-foreground mb-6"
+            gradientText={false}
+          />
+          <ScrollReveal variant="fade" delay={0.1}>
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              Read about the experiences of our guests and discover why we are a top dining destination.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * (index + 1)}>
+              <div className="card p-8 h-full flex flex-col">
+                <RatingStars rating={testimonial.rating} className="mb-6" />
+                <p className="text-foreground text-lg mb-8 flex-grow italic">
+                  "{testimonial.quote}"
+                </p>
+                <div className="flex items-center gap-4 mt-auto">
+                  <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
+                    <ImageOrVideo
+                      imageSrc={testimonial.imageSrc}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  <div>
+                    <h4 className="text-foreground font-semibold">{testimonial.name}</h4>
+                    <p className="text-accent text-sm">{testimonial.role}</p>
+                  </div>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}