"use client"; import React from "react"; import { motion } from "framer-motion"; import { Star, Quote } from "lucide-react"; interface Review { title: string; quote: string; authorInitials: string; authorName: string; authorRole: string; } export default function Testimonial({ className }: { className?: string }) { const reviews: Review[] = [ { title: "72hr Pure Hydration Lock", quote: "Re-Creame has completely transformed my ritual. The cooling hydration genuinely lasts for days without any heaviness.", authorInitials: "SM", authorName: "Sarah Mitchell", authorRole: "Verified Hydration Trialist" }, { title: "Impeccable Moisture Barrier", quote: "My skin barrier feels incredibly resilient. The dry patches are gone, replaced by a radiant, dew-kissed complexion.", authorInitials: "MV", authorName: "Marcus Vance", authorRole: "Luxury Skincare Advocate" }, { title: "Dermatology Approved", quote: "The high-potency extraction is a masterpiece. An organic luxury formulation prioritizing clinical cellular rejuvenation.", authorInitials: "DR", authorName: "Dr. Elena Rostova", authorRole: "Cellular Dermatologist" }, { title: "True Botanical Luxury", quote: "It performs better than standard treatments. The cooling sensation is heavenly and the ethical ingredients are a major win.", authorInitials: "SB", authorName: "Sienna Brooks", authorRole: "Eco-Beauty Expert" } ]; const leftReviews = [ { review: reviews[0], initial: { opacity: 0, x: -40, y: -20 }, delay: 0 }, { review: reviews[1], initial: { opacity: 0, x: -40, y: 20 }, delay: 0.15 } ]; const rightReviews = [ { review: reviews[2], initial: { opacity: 0, x: 40, y: -20 }, delay: 0.15 }, { review: reviews[3], initial: { opacity: 0, x: 40, y: 20 }, delay: 0.25 } ]; const renderCard = (item: { review: Review; initial: { opacity: number; x: number; y: number }; delay: number }, key: number) => (

{Array.from({ length: 5 }).map((_, i) => ( ))}

{'"' + item.review.title + '"'}

{item.review.quote}

{item.review.authorInitials}

{item.review.authorName}

{item.review.authorRole}

); return ( <>

{/* Background Video with clear presentation - cropped 30px top and bottom */}

{/* Main Container */}

{/* Elegant Section Header */}

Verified Skin Rituals

Testimonials

{/* Responsive Grid Layout with a Spacious 50% Center Gap */}

{/* Left Column (Cards 1 & 2) - Occupies 3 out of 12 columns (25%) */}

{leftReviews.map((item, i) => renderCard(item, i))}

{/* Middle Spacer Gap Column (Empty Space) - Occupies 6 out of 12 columns (50% gap) */}

); }