Beauty Products

---

**Prompt to recreate the "Best Sellers" section:**

> Build a "Best Sellers" product carousel section in React + Tailwind CSS with the following exact specifications:
>
> **Layout & Background:**
> - Full-width section with background color `#F9F4F0`, text color black.
> - `min-h-screen`, using flexbox column layout with `justify-center` to vertically center all content.
> - Horizontal padding: `px-4` on mobile, `sm:px-6`, `lg:px-10`. Vertical padding: `py-12`, `sm:py-16`.
>
> **Tab Header:**
> - Two tab buttons side by side in a flex row with `gap-4` (mobile) / `gap-6` (sm+).
> - Bottom margin: `mb-8` (mobile), `sm:mb-12`.
> - Each tab button contains a flex row with `gap-3` (mobile) / `gap-4` (sm+).
> - The active tab shows a filled circle indicator: `w-5 h-5` (mobile) / `sm:w-6 sm:h-6`, `rounded-full`, `bg-[#1a1a1a]`. This circle animates in with a custom `scale-in` keyframe animation: `from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 }` using `cubic-bezier(0.34, 1.56, 0.64, 1)` over `0.3s`. The circle only renders when that tab is active (conditional rendering, not visibility toggle).
> - Tab text is `text-2xl` (mobile), `sm:text-4xl`, `md:text-5xl`, `font-medium`. Active tab text: `text-[#1a1a1a]`. Inactive tab text: `text-gray-400` with `group-hover:text-gray-600`. Color transition: `duration-300`.
> - Tab labels (lowercase): "best sellers" and "sets". Default active tab: "best sellers".
> - The entire tab header block uses an IntersectionObserver-based reveal animation (threshold `0.1`): transitions from `opacity-0 translate-y-6` to `opacity-100 translate-y-0` over `duration-800 ease-out`.
>
> **Product Carousel:**
> - Horizontal scrollable flex container with `overflow-x-auto`. Hidden scrollbar using both `.scrollbar-hide::-webkit-scrollbar { display: none }` CSS class and inline styles `scrollbarWidth: 'none', msOverflowStyle: 'none'`.
> - Cursor: `cursor-grab`, `active:cursor-grabbing`.
> - Vertical mouse wheel events are intercepted and converted to horizontal scroll (`e.preventDefault()` + `el.scrollLeft += e.deltaY`), added with `{ passive: false }`.
> - Each product card is `flex-shrink-0` with widths: `w-[260px]` mobile, `sm:w-[280px]`, `md:w-[300px]`, `lg:w-[calc(25%-1px)]`.
> - Cards have `border border-gray-200` with `-ml-[1px]` to collapse borders (first card: `first:ml-0`).
> - Card padding: `pt-4 pb-6`.
> - Each card has a staggered reveal animation tied to the same IntersectionObserver: `opacity-0 translate-y-8` to `opacity-100 translate-y-0`, `duration-500 ease-out`, with `transitionDelay` of `200 + (index * 80)ms`.
>
> **Card Internal Layout:**
> - **Category label area** (top): `px-4`, fixed `h-12`. Category text: `text-xs font-medium tracking-wider uppercase`. Optional subcategory below: `text-xs text-gray-500 uppercase mt-0.5`.
> - **Product image**: `mx-4`, `aspect-[3/4]`, `rounded-lg overflow-hidden`, background `bg-[#F9F4F0]`. Image fills with `object-cover`. Hover: `scale-105` over `duration-500`.
> - **Product info** (below image): `mt-4 text-center`. Name: `text-sm`, hover color transition to `text-[#1a1a1a]` over `duration-300`. Price row: flex centered with `gap-2 mt-1`. Current price: `text-sm`. Old price (if exists): `text-sm text-gray-400 line-through`.
>
> **7 Products with exact data:**
> 1. Category: "ILLUMINATE" | Name: "Illuminating cleansing gel" | Price: "36,00" | Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260518_193822_8c95f5ed-b142-454f-ab87-59ad1f09e758.png&w=1280&q=85`
> 2. Category: "UNIFY" | Subcategory: "TIGHTEN PORES" | Name: "Unifying serum spray" | Price: "34,00" | Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260518_194048_278bf3cc-7d1f-43c1-9dc7-73d8fcd9949c.png&w=1280&q=85`
> 3. Category: "NATURAL GLOW" | Name: "Super glow set" | Price: "92,00" | Old price: "99,00" | Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260518_194058_d89610de-05f8-45e4-8196-0680296c565a.png&w=1280&q=85`
> 4. Category: "PROTECT" | Subcategory: "ILLUMINATE" | Name: "Radiance day oil" | Price: "59,00" | Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260518_194112_1763cbb2-3171-4ad3-9f38-1b738b8f1bb6.png&w=1280&q=85`
> 5. Category: "HYDRATE" | Subcategory: "NOURISH" | Name: "Deep moisture cream" | Price: "48,00" | Image: same as product 1
> 6. Category: "RENEW" | Name: "Night repair elixir" | Price: "72,00" | Old price: "79,00" | Image: same as product 2
> 7. Category: "SMOOTH" | Subcategory: "REFINE" | Name: "Gentle exfoliating toner" | Price: "42,00" | Image: same as product 3
>
> **Scroll Progress Bar:**
> - Centered below carousel: `mt-8` (mobile), `sm:mt-10`, `mx-auto`, `max-w-[280px]`.
> - Track: `h-[2px]`, `bg-gray-300`, `rounded-full`, `relative overflow-hidden`.
> - Thumb: absolutely positioned, `h-full`, `bg-[#1a1a1a]`, `rounded-full`, fixed `width: 30%`. Position is driven by a `translateX` transform calculated as `scrollProgress * (100 / 0.3)%`, where `scrollProgress` = `scrollLeft / (scrollWidth - clientWidth)`. Transition: `duration-150 ease-out`.
>
> **Required CSS (in global stylesheet):**
> ```css
> .scrollbar-hide::-webkit-scrollbar { display: none; }
> @keyframes scale-in {
>   from { transform: scale(0); opacity: 0; }
>   to { transform: scale(1); opacity: 1; }
> }
> .animate-scale-in {
>   animation: scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
> }
> ```
>
> **IntersectionObserver hook (`useInView`):**
> - Accepts a `threshold` parameter (default `0.15`), uses a ref.
> - Observes the element; once `isIntersecting` is true, sets `isVisible = true` and unobserves.
> - Returns `{ ref, isVisible }`.
> - This section calls it with threshold `0.1`.

---