跳到主要内容
返回画廊
PAID · 已付费

Luxury Ecommerce Design

Ecommerceheropage_type: hero2026-05-13

Create a React + Tailwind CSS beauty/skincare brand landing page called "STRETCH" with 3 sections. Use Vite, React 18, TypeScript, Tailwind CSS, and lucide-react for icons. The system font stack is used (no custom fonts loaded). The page has smooth scroll-triggered fade-in animations using IntersectionObserver, button hover lift animations, and full responsive design with a mobile hamburger menu.

SECTION 1: HERO (Full viewport height, split 50/50 on desktop, stacked on mobile)

Announcement Bar (absolute positioned, top of page, z-30):

  • Background: #F9F4F0, text black
  • Centered text: "free shipping for orders over 50€"
  • ChevronLeft and ChevronRight icons (size 16) on each side
  • Padding: py-2.5 mobile, py-3 desktop

Navigation (absolute positioned below announcement bar at top-[38px] mobile / top-[42px] desktop, z-30):

  • Left: Logo text "STRETCH" — text-lg sm:text-xl font-bold tracking-[0.2em] uppercase
  • Center (hidden on mobile, visible md+): 4 links — "shop", "learn", "journal", "theme" — text-sm, with an underline animation on hover (a <span> inside that goes from w-0 to w-full on group-hover, h-[1px] bg-white transition-all duration-300)
  • Right:
    • French flag (3 colored divs: bg-blue-700, white, bg-red-600 in a w-6 h-4 container) + "eur €" text + ChevronDown — hidden on mobile
    • Vertical divider w-px h-5 bg-white/30 mx-2 — hidden on mobile
    • User icon (hidden below sm), Search icon, ShoppingBag icon (all size 20)
    • Menu/X hamburger toggle (visible below md)

Mobile Menu (fixed fullscreen overlay, z-40):

  • bg-black/95 backdrop-blur-sm
  • Centered vertically: same 4 nav links at text-3xl font-light
  • Transition: opacity + pointer-events toggle over duration-500

Hero Left Half (w-full lg:w-1/2, min-h-[60vh] lg:min-h-0):

  • Background: Full-bleed absolute image: 
    https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_101925_8e509c31-4e75-4ae1-b164-2605265b2d47.png&w=1280&q=85
  • Content (relative z-10, fade-in animation: translate-y-8 to translate-y-0, opacity-0 to opacity-100, duration-1000):
    • Heading: "ethical beauty," (line break) "sustainable impact." — text-4xl sm:text-5xl md:text-6xl lg:text-[clamp(3.5rem,5vw,6rem)] font-light leading-[1.05] mb-6
    • Under "impact." word: decorative SVG with 3 wavy gold lines (stroke="#C8A45C", strokeWidths 2, 1.5, 1) — absolutely positioned -bottom-1 left-0 w-full h-4
    • Paragraph: "Committed to sustainable beauty and minimize our impact on the planet." — text-sm md:text-base text-white/80 mb-10 max-w-md
    • Button: "about us" — px-10 py-4 bg-white text-black rounded-full text-sm with .btn-primary class

Hero Right Half (w-full lg:w-1/2, min-h-[40vh] lg:min-h-0):

  • Video slideshow (3 slides, auto-advances every 5000ms):
    • Video 1: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_112022_cddf2487-4ffe-45b6-ba4c-99ab79003cc5.mp4
    • Video 2: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_175400_b46d1cd2-2050-45e2-9d13-b9c0bacb16b3.mp4
    • Video 3: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_182440_671605c8-2ed8-4507-a4cb-a62a8f61316f.mp4
    • All videos: autoPlay loop muted playsInline, object-cover, absolute inset-0
    • Transition between slides: transition-opacity duration-700
  • Controls (absolute bottom-6 right-6 z-20):
    • 3 dot indicators: w-2 h-2 rounded-full, active = bg-white scale-125, inactive = bg-white/50
    • Pause/Play toggle button: w-8 h-8 rounded-full border border-white/50, Pause/Play icon size 14

SECTION 2: BEST SELLERS (Background #F9F4F0, text black)

  • Padding: py-12 sm:py-16 px-4 sm:px-6 lg:px-10
  • Fade-in animation on scroll (translate-y-6 to 0, opacity 0 to 1)

Tabs:

  • Two buttons: "best sellers" and "sets"
  • Text: text-2xl sm:text-4xl md:text-5xl font-medium
  • Active tab: text-[#1a1a1a] with a filled dot w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-[#1a1a1a] that has a scale-in CSS animation
  • Inactive tab: text-gray-400, hover → text-gray-600

Product Carousel (horizontal scroll, overflow-x-auto scrollbar-hide):

  • Vertical scroll (mouse wheel) is hijacked to scroll horizontally
  • Each product card: w-[260px] sm:w-[280px] md:w-[300px] lg:w-[calc(25%-1px)]
  • Cards have border border-gray-200 on all 4 sides, with -ml-[1px] first:ml-0 to collapse shared borders
  • Cards fade in staggered: each card has transitionDelay: ${200 + index * 80}ms
  • On hover: product image scales to 105% (transition-transform duration-500)

7 Products (in order):

  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

Card layout:

  • Top: category label (text-xs font-medium tracking-wider uppercase) + optional subcategory (text-xs text-gray-500 uppercase mt-0.5) in a px-4 h-12 container
  • Middle: image in mx-4 aspect-[3/4] rounded-lg overflow-hidden bg-[#F9F4F0], object-cover
  • Bottom: product name (text-sm, centered) + price row (with optional strikethrough old price in text-gray-400 line-through)

Scroll Progress Bar:

  • mt-8 sm:mt-10 mx-auto max-w-[280px]
  • Track: h-[2px] bg-gray-300 rounded-full
  • Thumb: width: 30%, bg-[#1a1a1a], position calculated as translateX(${scrollProgress * (100 / 0.3)}%)

SECTION 3: CATEGORIES (Background black, text white)

  • 3-column grid on desktop (grid-cols-1 md:grid-cols-3), no gaps, no dividers between columns
  • Fade-in animation on scroll (translate-y-12 to 0, opacity 0 to 1, duration-1000)

3 Category Cards (each):

  • Min height: min-h-[400px] sm:min-h-[500px] md:min-h-[750px]
  • Padding: p-6 sm:p-8 md:p-12
  • Full-bleed background video (absolute, object-cover)
  • On hover: video scales to 105% (transition-transform duration-700)
  • Dark overlay: bg-black/10 → hover bg-black/20 (transition-colors duration-500)
  • Vertical text (rotated): writingMode: 'vertical-lr', transform: 'rotate(180deg)' — text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-medium — moves up 2px on hover
  • Button at bottom: "shop [name]" — px-8 py-3 bg-white text-black rounded-full text-sm with .btn-primary

Category data:

  1. Name: "face" | Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203023_87a26602-2898-4acc-a396-c7a2b5ad84fd.mp4
  2. Name: "beauty tools" | Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203415_b86e3f19-2aec-46cd-9a86-b64c40118e38.mp4
  3. Name: "body" | Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203051_85fee398-ea01-4aa0-972b-137a74213be5.mp4

CSS (index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover::before {
  transform: translateX(100%);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@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);
}

ANIMATIONS SUMMARY:

  1. useInView hook — custom IntersectionObserver hook (threshold configurable, default 0.15). Once element enters viewport, sets isVisible = true permanently (unobserves after).
  2. Hero text — fades in + slides up 8px over 1000ms
  3. Best sellers tabs — fades in + slides up 6px over 800ms
  4. Product cards — staggered fade-in (each 80ms apart, starting at 200ms delay), slides up 8px over 500ms
  5. Categories section — fades in + slides up 12px over 1000ms
  6. Tab dot — scale-in keyframe with bounce easing cubic-bezier(0.34, 1.56, 0.64, 1) over 300ms
  7. Buttons (.btn-primary) — lift 2px + shadow on hover, light sweep effect via ::before pseudo-element
  8. Product images — scale to 105% on card hover over 500ms
  9. Category videos — scale to 105% on card hover over 700ms
  10. Nav links — underline grows from left (w-0 to w-full) over 300ms on hover

TECH STACK:

  • Vite + React 18 + TypeScript
  • Tailwind CSS 3.4
  • lucide-react for icons (ChevronLeft, ChevronRight, User, Search, ShoppingBag, ChevronDown, Pause, Play, Menu, X)
  • No other UI libraries
回到全部 177 条