fix: DinoHero — correct bg #F2F5E8, dark text, green pills, T-Rex right col only
This commit is contained in:
Vadym Samoilenko
parent
7a26ace8e4
commit
abdef5e0bb
1 changed files with 139 additions and 87 deletions
|
|
@ -1,10 +1,20 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
'use client'
|
||||
|
||||
import { BtnPrimary } from '@/components/ui/BtnPrimary'
|
||||
|
||||
// ─── Figma tokens ─────────────────────────────────────────────────────────────
|
||||
// hero-main: bg #F2F5E8, 1920×1187
|
||||
// left text block: x=358, w=608 → at 1920: occupies 358–966px (~50%)
|
||||
// hero-img frame: x=692 (relative), w=1228 (~63% of 1920 from center-right)
|
||||
// Ellipse 91: 2267×2267 amber #F0A050, behind T-Rex in right half
|
||||
// T-Rex: 1001×2152 (aspect ~0.465), right side, bleeds top, stays right of left-col
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
|
||||
const FONT_INTER = { fontFamily: 'Inter, sans-serif' }
|
||||
|
||||
const DEFAULT_FEATURES = ['Повнорозмірні анімовані динозавра', 'Реалістичні рухи та звуки']
|
||||
const DEFAULT_FEATURES = ['Повнорозмірні анімовані динозаври', 'Реалістичні рухи та звуки']
|
||||
|
||||
interface DinoHeroProps {
|
||||
title?: string
|
||||
|
|
@ -23,61 +33,135 @@ export function DinoHero({
|
|||
features = DEFAULT_FEATURES,
|
||||
heroImageUrl,
|
||||
}: DinoHeroProps) {
|
||||
return (
|
||||
<section className="relative overflow-hidden" style={{ background: '#1e1e1e' }}>
|
||||
{/* Left column */}
|
||||
<div className="mx-auto max-w-[1440px] px-6">
|
||||
<div className="min-h-[580px] pt-12 pb-16 lg:min-h-[780px] lg:pt-[80px] lg:pb-[60px]">
|
||||
<div className="relative z-10 flex flex-col gap-10 lg:w-[600px] lg:gap-[48px]">
|
||||
{/* Text */}
|
||||
<div className="flex flex-col gap-5 lg:gap-8">
|
||||
<h1
|
||||
className="text-[36px] leading-[1.1] font-bold text-white uppercase lg:text-[64px]"
|
||||
style={FONT_MONT}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p
|
||||
className="text-[16px] leading-[1.6] font-medium text-white/80 lg:text-[24px]"
|
||||
style={FONT_MONT}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
<BtnPrimary href="/kvytky?category=dyno" className="self-start">
|
||||
Купити квиток
|
||||
</BtnPrimary>
|
||||
</div>
|
||||
// Figma breakpoint for this layout: 1440px (--breakpoint-lg)
|
||||
// left column: 640px wide (≈44% of 1440)
|
||||
// right column: 1440-640 = 800px
|
||||
// T-Rex at 1440: height = 900px (section height ≈ 780px + bleed), width = 900 * 0.465 = ~418px
|
||||
// 418px < 800px → T-Rex fits fully within right column at any viewport ≥ 1440px ✓
|
||||
// For smaller desktops (1024–1440): scale proportionally
|
||||
|
||||
{/* Stat badge + feature list */}
|
||||
<div className="flex flex-col gap-4 lg:gap-[32px]">
|
||||
{/* "26 унікальних експонатів" pill */}
|
||||
return (
|
||||
<section className="relative overflow-hidden" style={{ background: '#F2F5E8' }}>
|
||||
{/* Outer container limits max-width to 1920px, content left-aligned */}
|
||||
<div className="relative mx-auto max-w-[1920px]">
|
||||
{/* ────────────────────────────────────────────────────────────────
|
||||
DESKTOP: absolute positioned right image area (left=640px)
|
||||
overflow:hidden clips ellipse; separate img tag bleeds via section overflow:hidden
|
||||
──────────────────────────────────────────────────────────────── */}
|
||||
|
||||
{/* AMBER ELLIPSE — clipped strictly to right of 640px */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 hidden overflow-hidden lg:block"
|
||||
style={{ left: '640px', right: 0, zIndex: 1 }}
|
||||
>
|
||||
<div
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
/* At 1440: right-col = 800px, ellipse should fill most of it.
|
||||
Figma 1920: right-col=1280, ellipse=2267 → ratio=1.77.
|
||||
Use 1.8× right-col width */
|
||||
width: 'calc((100vw - 640px) * 1.8)',
|
||||
aspectRatio: '1 / 1',
|
||||
background: '#F0A050',
|
||||
/* Anchor: right side, bottom */
|
||||
right: '-15%',
|
||||
bottom: '-40%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* T-REX IMAGE — sits in right column, max-width prevents left overflow
|
||||
Section overflow:hidden clips any top/bottom bleed */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute top-0 bottom-0 hidden lg:flex lg:items-end lg:justify-end"
|
||||
style={{
|
||||
left: '640px',
|
||||
right: 0,
|
||||
zIndex: 10,
|
||||
/* overflow:visible here so T-Rex can bleed TOP past section (section clips it) */
|
||||
overflow: 'visible',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
|
||||
alt="Тиранозавр Рекс у Динопарку"
|
||||
style={{
|
||||
/* T-Rex: full height, right-anchored, bleeds top via section overflow:hidden.
|
||||
At 1440: section h≈780px, height=115%≈897px, aspect=0.465 → width≈417px.
|
||||
Right-col = 800px, so T-Rex (417px) fits without touching left text area. */
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
/* T-Rex tall (1001×2152 aspect 0.465): at section 780px, height=100% → width=362px.
|
||||
Make taller so it fills right col and head bleeds past section top */
|
||||
height: '150%',
|
||||
width: 'auto',
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'right bottom',
|
||||
}}
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ────────────────────────────────────────────────────────────────
|
||||
TEXT CONTENT — always on top
|
||||
──────────────────────────────────────────────────────────────── */}
|
||||
<div className="relative" style={{ zIndex: 20 }}>
|
||||
{/* Left column: fixed 640px on desktop */}
|
||||
<div className="flex flex-col justify-start gap-6 px-6 py-10 lg:w-[640px] lg:gap-8 lg:px-[120px] lg:pt-[80px] lg:pb-[80px]">
|
||||
{/* Title — Montserrat 64px 700 uppercase #272727 */}
|
||||
<h1
|
||||
className="text-[36px] leading-[1.1] font-bold text-[#272727] uppercase lg:text-[64px]"
|
||||
style={FONT_MONT}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle — Montserrat 24px 500 #272727 */}
|
||||
<p
|
||||
className="text-[16px] leading-[1.6] font-medium text-[#272727] lg:text-[24px]"
|
||||
style={FONT_MONT}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{/* CTA button */}
|
||||
<BtnPrimary href="/kvytky?category=dyno" className="self-start">
|
||||
Купити квиток
|
||||
</BtnPrimary>
|
||||
|
||||
{/* info-tips ── */}
|
||||
<div className="flex flex-col gap-3 lg:gap-5">
|
||||
{/* stat: green circle "26" overlapping green pill */}
|
||||
<div className="relative flex items-center">
|
||||
<div
|
||||
className="relative z-10 flex flex-none items-center justify-center rounded-full text-white"
|
||||
style={{
|
||||
width: 'clamp(72px, 8.33vw, 120px)',
|
||||
height: 'clamp(72px, 8.33vw, 120px)',
|
||||
width: 'clamp(72px, 8.33vw, 160px)',
|
||||
height: 'clamp(72px, 8.33vw, 160px)',
|
||||
background: '#396817',
|
||||
border: 'clamp(8px, 1.04vw, 15px) solid rgba(253,242,232,0.15)',
|
||||
marginRight: 'clamp(-80px, -5.21vw, -30px)',
|
||||
flexShrink: 0,
|
||||
...FONT_INTER,
|
||||
fontWeight: 800,
|
||||
fontSize: 'clamp(28px, 5vw, 96px)',
|
||||
lineHeight: 1,
|
||||
fontSize: 'clamp(22px, 3.13vw, 45px)',
|
||||
}}
|
||||
>
|
||||
{stat}
|
||||
</div>
|
||||
<div
|
||||
className="flex-1 rounded-[16px] text-[15px] leading-[1.3] font-medium text-white lg:text-[20px]"
|
||||
className="flex flex-1 items-center rounded-[16px] text-white"
|
||||
style={{
|
||||
background: '#396817',
|
||||
marginLeft: 'clamp(-20px, -2vw, -36px)',
|
||||
paddingLeft: 'clamp(28px, 4vw, 56px)',
|
||||
paddingRight: '20px',
|
||||
height: 'clamp(56px, 5.9vw, 113px)',
|
||||
...FONT_INTER,
|
||||
fontWeight: 500,
|
||||
paddingTop: 'clamp(18px, 2.08vw, 30px)',
|
||||
paddingBottom: 'clamp(18px, 2.08vw, 30px)',
|
||||
paddingLeft: 'clamp(48px, 7.81vw, 112px)',
|
||||
paddingRight: '20px',
|
||||
fontSize: 'clamp(14px, 1.25vw, 24px)',
|
||||
}}
|
||||
>
|
||||
{statLabel}
|
||||
|
|
@ -87,12 +171,14 @@ export function DinoHero({
|
|||
{features.map((f, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-[16px] text-[15px] leading-[1.3] font-medium text-white lg:text-[20px]"
|
||||
className="flex items-center rounded-[16px] text-white"
|
||||
style={{
|
||||
background: '#396817',
|
||||
height: 'clamp(52px, 5.9vw, 113px)',
|
||||
padding: '0 clamp(20px, 2.08vw, 40px)',
|
||||
...FONT_INTER,
|
||||
fontWeight: 500,
|
||||
padding: 'clamp(18px, 2.08vw, 30px) clamp(24px, 2.08vw, 30px)',
|
||||
fontSize: 'clamp(14px, 1.25vw, 24px)',
|
||||
}}
|
||||
>
|
||||
{f}
|
||||
|
|
@ -101,54 +187,20 @@ export function DinoHero({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel — hero image on orange circle */}
|
||||
<div
|
||||
className="pointer-events-none absolute top-0 right-0 hidden h-full overflow-visible lg:flex lg:items-end"
|
||||
aria-hidden="true"
|
||||
style={{ width: '52vw' }}
|
||||
>
|
||||
{/* Orange-amber circle background */}
|
||||
<div
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
width: '115%',
|
||||
aspectRatio: '1',
|
||||
background: 'radial-gradient(circle at 38% 38%, #fdcf54 0%, #f28b4a 55%, #e06d2a 100%)',
|
||||
right: '-10%',
|
||||
bottom: '-10%',
|
||||
}}
|
||||
/>
|
||||
{/* Hero dino image */}
|
||||
<img
|
||||
src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
|
||||
alt="Динозавр динопарку"
|
||||
className="relative z-10 w-full"
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'bottom center',
|
||||
maxHeight: '110%',
|
||||
}}
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Mobile hero */}
|
||||
<div className="relative mx-auto max-w-[400px] px-6 pb-8 lg:hidden" aria-hidden="true">
|
||||
<div
|
||||
className="mx-auto flex aspect-square items-end justify-center overflow-hidden rounded-full"
|
||||
style={{
|
||||
background: 'radial-gradient(circle at 38% 38%, #fdcf54 0%, #f28b4a 55%, #e06d2a 100%)',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
|
||||
alt=""
|
||||
className="w-full object-contain object-bottom"
|
||||
style={{ maxHeight: '100%' }}
|
||||
loading="eager"
|
||||
/>
|
||||
{/* MOBILE: simple stacked image */}
|
||||
<div className="relative px-6 pb-8 lg:hidden" aria-hidden="true">
|
||||
<div
|
||||
className="mx-auto flex aspect-[3/2] max-w-sm items-end justify-center overflow-hidden rounded-3xl"
|
||||
style={{ background: '#F0A050' }}
|
||||
>
|
||||
<img
|
||||
src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
|
||||
alt=""
|
||||
className="h-full w-auto object-contain object-bottom"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue