|
| 1 | +"use client" |
| 2 | + |
| 3 | +import { Star } from "lucide-react" |
| 4 | +import { motion } from "motion/react" |
| 5 | + |
| 6 | +import { Marquee } from "@/components/ui/marquee" |
| 7 | +import { LANDING_DUMMY_REVIEWS } from "@/lib/landing-dummy-reviews" |
| 8 | +import { cn } from "@/lib/utils" |
| 9 | + |
| 10 | +function ReviewCard({ |
| 11 | + img, |
| 12 | + name, |
| 13 | + handle, |
| 14 | + subscriberLine, |
| 15 | + quote, |
| 16 | +}: { |
| 17 | + img: string |
| 18 | + name: string |
| 19 | + handle: string |
| 20 | + subscriberLine: string |
| 21 | + quote: string |
| 22 | +}) { |
| 23 | + return ( |
| 24 | + <figure |
| 25 | + className={cn( |
| 26 | + "relative h-full w-64 shrink-0 cursor-pointer overflow-hidden rounded-xl border p-4", |
| 27 | + "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]", |
| 28 | + "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]" |
| 29 | + )} |
| 30 | + > |
| 31 | + <div className="mb-2 flex gap-0.5" aria-hidden="true"> |
| 32 | + {Array.from({ length: 5 }).map((_, i) => ( |
| 33 | + <Star |
| 34 | + key={i} |
| 35 | + className="h-3.5 w-3.5 fill-amber-400 text-amber-400" |
| 36 | + strokeWidth={0} |
| 37 | + /> |
| 38 | + ))} |
| 39 | + </div> |
| 40 | + <div className="flex flex-row items-start gap-2"> |
| 41 | + <img className="rounded-full" width={32} height={32} alt="" src={img} /> |
| 42 | + <div className="min-w-0 flex-1"> |
| 43 | + <figcaption className="text-sm font-medium text-slate-900 dark:text-white"> |
| 44 | + {name} |
| 45 | + </figcaption> |
| 46 | + <p className="truncate text-xs font-medium text-slate-500 dark:text-white/40"> |
| 47 | + {handle} |
| 48 | + </p> |
| 49 | + <p className="mt-0.5 text-[11px] leading-snug text-slate-500 dark:text-slate-400"> |
| 50 | + {subscriberLine} |
| 51 | + </p> |
| 52 | + </div> |
| 53 | + </div> |
| 54 | + <blockquote className="mt-3 text-sm leading-relaxed text-slate-700 dark:text-slate-200"> |
| 55 | + {quote} |
| 56 | + </blockquote> |
| 57 | + </figure> |
| 58 | + ) |
| 59 | +} |
| 60 | + |
| 61 | +export default function ReviewsMarquee() { |
| 62 | + const mid = Math.ceil(LANDING_DUMMY_REVIEWS.length / 2) |
| 63 | + const firstRow = LANDING_DUMMY_REVIEWS.slice(0, mid) |
| 64 | + const secondRow = LANDING_DUMMY_REVIEWS.slice(mid) |
| 65 | + |
| 66 | + return ( |
| 67 | + <div className="w-full"> |
| 68 | + <motion.div |
| 69 | + className="container mx-auto mb-10 max-w-6xl px-4 text-center md:px-6" |
| 70 | + initial={{ opacity: 0, y: 16 }} |
| 71 | + whileInView={{ opacity: 1, y: 0 }} |
| 72 | + viewport={{ once: true }} |
| 73 | + transition={{ duration: 0.45 }} |
| 74 | + > |
| 75 | + <span className="inline-flex items-center gap-2 rounded-full bg-purple-100 px-4 py-1.5 text-sm font-medium text-purple-700 dark:bg-purple-950/60 dark:text-purple-300"> |
| 76 | + Social proof |
| 77 | + </span> |
| 78 | + <h2 className="mt-4 text-3xl font-bold text-slate-900 dark:text-slate-50 md:text-4xl"> |
| 79 | + Loved by creators |
| 80 | + </h2> |
| 81 | + </motion.div> |
| 82 | + |
| 83 | + <div className="relative flex w-full flex-col items-center justify-center overflow-hidden"> |
| 84 | + <Marquee pauseOnHover className="[--duration:20s]"> |
| 85 | + {firstRow.map((r) => ( |
| 86 | + <ReviewCard |
| 87 | + key={r.id} |
| 88 | + img={r.img} |
| 89 | + name={r.name} |
| 90 | + handle={r.handle} |
| 91 | + subscriberLine={r.subscriberLine} |
| 92 | + quote={r.quote} |
| 93 | + /> |
| 94 | + ))} |
| 95 | + </Marquee> |
| 96 | + <Marquee reverse pauseOnHover className="[--duration:20s]"> |
| 97 | + {secondRow.map((r) => ( |
| 98 | + <ReviewCard |
| 99 | + key={r.id} |
| 100 | + img={r.img} |
| 101 | + name={r.name} |
| 102 | + handle={r.handle} |
| 103 | + subscriberLine={r.subscriberLine} |
| 104 | + quote={r.quote} |
| 105 | + /> |
| 106 | + ))} |
| 107 | + </Marquee> |
| 108 | + <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-white to-transparent dark:from-slate-800" /> |
| 109 | + <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-white to-transparent dark:from-slate-800" /> |
| 110 | + </div> |
| 111 | + </div> |
| 112 | + ) |
| 113 | +} |
0 commit comments