@pradip1995/segment-beauty-reviews 0.1.1

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pradip1995/segment-beauty-reviews",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "beauty-reviews",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "beautyReviews",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,283 @@
+.beauty-reviews {
+  width: 100%;
+  background: linear-gradient(180deg, #faf7f5 0%, #ffffff 42%, #faf7f5 100%);
+  padding: 3.5rem 0 4rem;
+  overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+  .beauty-reviews {
+    padding: 4.5rem 0 5rem;
+  }
+}
+
+.beauty-reviews__inner {
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+@media (min-width: 640px) {
+  .beauty-reviews__inner {
+    padding: 0 1.5rem;
+  }
+}
+
+.beauty-reviews__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+  .beauty-reviews__header {
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 2rem;
+    margin-bottom: 2.25rem;
+  }
+}
+
+.beauty-reviews__header-copy {
+  max-width: 38rem;
+}
+
+.beauty-reviews__eyebrow {
+  margin: 0 0 0.75rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent);
+}
+
+.beauty-reviews__title {
+  margin: 0 0 0.875rem;
+  font-family: var(--font-heading);
+  font-size: clamp(1.875rem, 3.5vw, 2.875rem);
+  font-weight: 500;
+  line-height: 1.12;
+  letter-spacing: 0.02em;
+  color: var(--color-text-heading);
+}
+
+.beauty-reviews__description {
+  margin: 0;
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: var(--color-text-body);
+}
+
+.beauty-reviews__aggregate-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
+  padding: 1.125rem 1.25rem;
+  background: #ffffff;
+  border: 1px solid rgba(139, 58, 98, 0.14);
+  box-shadow: 0 12px 28px rgba(42, 16, 32, 0.06);
+}
+
+.beauty-reviews__score {
+  font-family: var(--font-heading);
+  font-size: 2.75rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-heading);
+}
+
+.beauty-reviews__aggregate-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.beauty-reviews__aggregate-label {
+  margin: 0;
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+}
+
+.beauty-reviews__stars {
+  display: flex;
+  gap: 0.15rem;
+  line-height: 1;
+}
+
+.beauty-reviews__stars--lg .beauty-reviews__star {
+  font-size: 1rem;
+}
+
+.beauty-reviews__star {
+  color: #e0d5da;
+  font-size: 0.8125rem;
+}
+
+.beauty-reviews__star--filled {
+  color: #c9a86c;
+}
+
+.beauty-reviews__carousel {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .beauty-reviews__carousel {
+    gap: 0.75rem;
+  }
+}
+
+.beauty-reviews__nav {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(139, 58, 98, 0.2);
+  background: #ffffff;
+  color: var(--color-text-heading);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
+}
+
+.beauty-reviews__nav:hover:not(:disabled) {
+  background: #000000;
+  border-color: #000000;
+  color: #ffffff;
+}
+
+.beauty-reviews__nav:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.beauty-reviews__track-wrap {
+  position: relative;
+  min-width: 0;
+  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
+}
+
+.beauty-reviews__track {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding: 0.25rem 0.5rem 1rem;
+}
+
+.beauty-reviews__track::-webkit-scrollbar {
+  display: none;
+}
+
+.beauty-reviews__card {
+  position: relative;
+  flex: 0 0 clamp(280px, 78vw, 340px);
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  min-height: 15.5rem;
+  padding: 1.625rem 1.5rem 1.375rem;
+  background: #ffffff;
+  border: 1px solid rgba(139, 58, 98, 0.12);
+  box-shadow: 0 14px 36px rgba(42, 16, 32, 0.07);
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+}
+
+.beauty-reviews__card:hover {
+  transform: translateY(-0.25rem);
+  border-color: rgba(139, 58, 98, 0.28);
+  box-shadow: 0 20px 44px rgba(42, 16, 32, 0.1);
+}
+
+.beauty-reviews__quote-mark {
+  position: absolute;
+  top: 0.75rem;
+  right: 1rem;
+  font-family: var(--font-heading);
+  font-size: 3rem;
+  line-height: 1;
+  color: rgba(139, 58, 98, 0.12);
+  pointer-events: none;
+}
+
+.beauty-reviews__product {
+  align-self: flex-start;
+  padding: 0.3rem 0.7rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent);
+  background: var(--color-brand-accent-muted);
+  border: 1px solid rgba(139, 58, 98, 0.12);
+}
+
+.beauty-reviews__quote {
+  margin: 0;
+  flex: 1;
+  font-family: var(--font-quote);
+  font-size: 1.125rem;
+  line-height: 1.55;
+  color: var(--color-text-heading);
+}
+
+.beauty-reviews__card-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(139, 58, 98, 0.1);
+}
+
+.beauty-reviews__meta {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+}
+
+.beauty-reviews__name {
+  font-weight: 600;
+  color: var(--color-text-heading);
+}
+
+.beauty-reviews__dot {
+  color: var(--color-brand-accent-border);
+}
+
+.beauty-reviews__verified {
+  color: var(--color-text-muted);
+}
+
+.beauty-reviews__scroll-hint {
+  margin: 0.75rem 0 0;
+  text-align: center;
+  font-size: 0.6875rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+@media (min-width: 768px) {
+  .beauty-reviews__scroll-hint {
+    text-align: right;
+    padding-right: 3.25rem;
+  }
+}

package/src/segment.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+import "./segment.css"
+import { useCallback, useEffect, useRef, useState } from "react"
+
+type ReviewItem = {
+  id: string
+  text: string
+  name: string
+  rating: number
+  product?: string
+}
+
+const DEFAULT_REVIEWS: ReviewItem[] = [
+  {
+    id: "1",
+    name: "Priya S.",
+    rating: 5,
+    product: "Matte Lipstick",
+    text: "The lipstick shade is gorgeous and stays all day without drying my lips.",
+  },
+  {
+    id: "2",
+    name: "Ananya K.",
+    rating: 5,
+    product: "Vitamin C Serum",
+    text: "My skin feels brighter after two weeks. Lightweight, absorbs fast, no sticky feel.",
+  },
+  {
+    id: "3",
+    name: "Meera R.",
+    rating: 5,
+    product: "Foundation",
+    text: "Fast delivery and authentic products. The foundation match was perfect on first try.",
+  },
+  {
+    id: "4",
+    name: "Sneha P.",
+    rating: 5,
+    product: "Kajal",
+    text: "Smudge-proof kajal that glides on smoothly. Already repurchased twice.",
+  },
+  {
+    id: "5",
+    name: "Divya M.",
+    rating: 5,
+    product: "Hydrating Moisturizer",
+    text: "Finally a moisturizer that works under makeup. Skin looks dewy, not greasy.",
+  },
+  {
+    id: "6",
+    name: "Kavya T.",
+    rating: 4,
+    product: "Eyeshadow Palette",
+    text: "Beautiful pigment and minimal fallout. The rose-gold shades are stunning for evenings.",
+  },
+]
+
+function Stars({ rating, large = false }: { rating: number; large?: boolean }) {
+  return (
+    <div
+      className={`beauty-reviews__stars${large ? " beauty-reviews__stars--lg" : ""}`}
+      aria-label={`${rating} out of 5 stars`}
+    >
+      {Array.from({ length: 5 }, (_, index) => (
+        <span
+          key={index}
+          className={
+            index < rating ? "beauty-reviews__star beauty-reviews__star--filled" : "beauty-reviews__star"
+          }
+        >
+          ★
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function ReviewCard({ review }: { review: ReviewItem }) {
+  return (
+    <article className="beauty-reviews__card">
+      <span className="beauty-reviews__quote-mark" aria-hidden="true">
+        &ldquo;
+      </span>
+      {review.product ? <span className="beauty-reviews__product">{review.product}</span> : null}
+      <p className="beauty-reviews__quote">{review.text}</p>
+      <div className="beauty-reviews__card-footer">
+        <Stars rating={review.rating} />
+        <p className="beauty-reviews__meta">
+          <span className="beauty-reviews__name">{review.name}</span>
+          <span className="beauty-reviews__dot" aria-hidden="true">
+            ·
+          </span>
+          <span className="beauty-reviews__verified">Verified buyer</span>
+        </p>
+      </div>
+    </article>
+  )
+}
+
+export default function BeautyReviews({
+  eyebrow = "Real reviews",
+  title = "Loved by beauty enthusiasts",
+  description = "Discover why thousands trust Lumière for authentic makeup, skincare, and everyday glow essentials.",
+  aggregateRating = "4.9",
+  aggregateLabel = "12,000+ happy customers",
+  reviews = DEFAULT_REVIEWS,
+}: {
+  eyebrow?: string
+  title?: string
+  description?: string
+  aggregateRating?: string
+  aggregateLabel?: string
+  reviews?: ReviewItem[]
+}) {
+  const items = reviews.filter((review) => review.text?.trim() && review.name?.trim())
+  const trackRef = useRef<HTMLDivElement>(null)
+  const [canScrollPrev, setCanScrollPrev] = useState(false)
+  const [canScrollNext, setCanScrollNext] = useState(true)
+
+  const updateScrollState = useCallback(() => {
+    const track = trackRef.current
+    if (!track) return
+    const maxScroll = track.scrollWidth - track.clientWidth
+    setCanScrollPrev(track.scrollLeft > 8)
+    setCanScrollNext(track.scrollLeft < maxScroll - 8)
+  }, [])
+
+  const scrollByCard = useCallback((direction: -1 | 1) => {
+    const track = trackRef.current
+    if (!track) return
+    const card = track.querySelector<HTMLElement>(".beauty-reviews__card")
+    const gap = 16
+    const amount = (card?.offsetWidth ?? 300) + gap
+    track.scrollBy({ left: direction * amount, behavior: "smooth" })
+  }, [])
+
+  useEffect(() => {
+    updateScrollState()
+    const track = trackRef.current
+    if (!track) return
+    const observer = new ResizeObserver(() => updateScrollState())
+    observer.observe(track)
+    return () => observer.disconnect()
+  }, [items.length, updateScrollState])
+
+  if (items.length === 0) return null
+
+  return (
+    <section className="beauty-reviews" aria-labelledby="beauty-reviews-title">
+      <div className="beauty-reviews__inner">
+        <header className="beauty-reviews__header">
+          <div className="beauty-reviews__header-copy">
+            {eyebrow ? <p className="beauty-reviews__eyebrow">{eyebrow}</p> : null}
+            <h2 id="beauty-reviews-title" className="beauty-reviews__title">
+              {title}
+            </h2>
+            {description ? <p className="beauty-reviews__description">{description}</p> : null}
+          </div>
+
+          <div className="beauty-reviews__aggregate-card">
+            <span className="beauty-reviews__score">{aggregateRating}</span>
+            <div className="beauty-reviews__aggregate-meta">
+              <Stars rating={5} large />
+              {aggregateLabel ? <p className="beauty-reviews__aggregate-label">{aggregateLabel}</p> : null}
+            </div>
+          </div>
+        </header>
+
+        <div className="beauty-reviews__carousel">
+          <button
+            type="button"
+            className="beauty-reviews__nav beauty-reviews__nav--prev"
+            onClick={() => scrollByCard(-1)}
+            disabled={!canScrollPrev}
+            aria-label="Previous reviews"
+          >
+            ‹
+          </button>
+
+          <div className="beauty-reviews__track-wrap">
+            <div
+              ref={trackRef}
+              className="beauty-reviews__track"
+              onScroll={updateScrollState}
+              tabIndex={0}
+              role="region"
+              aria-label="Customer reviews"
+            >
+              {items.map((review) => (
+                <ReviewCard key={review.id} review={review} />
+              ))}
+            </div>
+          </div>
+
+          <button
+            type="button"
+            className="beauty-reviews__nav beauty-reviews__nav--next"
+            onClick={() => scrollByCard(1)}
+            disabled={!canScrollNext}
+            aria-label="Next reviews"
+          >
+            ›
+          </button>
+        </div>
+
+        <p className="beauty-reviews__scroll-hint">Swipe or use arrows to explore more reviews</p>
+      </div>
+    </section>
+  )
+}