diff --git a/public/images/figma/dyno-hero-ellipse.svg b/public/images/figma/dyno-hero-ellipse.svg new file mode 100644 index 0000000..4a20810 --- /dev/null +++ b/public/images/figma/dyno-hero-ellipse.svg @@ -0,0 +1,10 @@ + diff --git a/public/images/figma/dyno-hero-photo.png b/public/images/figma/dyno-hero-photo.png new file mode 100644 index 0000000..7b1279c Binary files /dev/null and b/public/images/figma/dyno-hero-photo.png differ diff --git a/src/components/sections/DinoPageContent.tsx b/src/components/sections/DinoPageContent.tsx index d23025b..3e5f23d 100644 --- a/src/components/sections/DinoPageContent.tsx +++ b/src/components/sections/DinoPageContent.tsx @@ -295,11 +295,19 @@ const DYNO_CSS = ` /* HERO */ .dino-page .hero{position:relative;overflow:hidden;padding-top:60px;} .dino-page .hero .wrap{position:relative;} -.dino-page .hero-dino{ - position:absolute;top:-20px;right:-40px;height:auto;width:min(760px,52vw);max-width:none; +/* Figma hero composition — ellipse (SVG) + dino photo (PNG transparent) */ +.dino-page .hero-ellipse{ + position:absolute;right:-18%;top:-5%; + width:72vw;max-width:1020px; z-index:0;pointer-events:none; - filter:contrast(1.08) saturate(1.12); - object-fit:contain;object-position:top right; + transform:rotate(14.64deg);transform-origin:center; +} +.dino-page .hero-dino{ + position:absolute;right:-3%;top:-12%; + height:145%;width:auto;max-width:none; + z-index:1;pointer-events:none; + transform:scaleX(-1); + filter:contrast(1.05) saturate(1.1); } .dino-page .hero-text{position:relative;z-index:2;max-width:608px;padding:60px 0 40px;} .dino-page .hero-text h1{ @@ -516,10 +524,12 @@ const DYNO_CSS = ` .dino-page .why-grid{grid-template-columns:1fr;} .dino-page .acc-side{max-width:704px;} .dino-page .hero-text h1{font-size:52px;} - .dino-page .hero-dino{width:min(580px,52vw);height:auto;right:-30px;top:10px;opacity:.8;} + .dino-page .hero-ellipse{width:65vw;right:-20%;} + .dino-page .hero-dino{height:125%;top:-8%;right:-2%;} } @media(max-width:820px){ - .dino-page .hero-dino{width:min(520px,80vw);height:auto;max-height:75vh;right:-20px;top:0;opacity:.8;} + .dino-page .hero-ellipse{width:75vw;right:-25%;opacity:.85;} + .dino-page .hero-dino{height:105%;top:0;right:-5%;opacity:.85;} .dino-page .hero-text{padding-top:40px;} .dino-page .hero-text h1{font-size:40px;} .dino-page .hero-text p{font-size:18px;} @@ -535,7 +545,8 @@ const DYNO_CSS = ` @media(max-width:560px){ .dino-page{--gutter:18px;} /* Hero dino: smaller, clipped by hero overflow:hidden */ - .dino-page .hero-dino{width:min(320px,70vw);height:auto;max-height:60vh;right:-10px;top:20px;opacity:.7;} + .dino-page .hero-ellipse{display:none;} + .dino-page .hero-dino{height:75%;top:5px;right:-5%;opacity:.7;transform:scaleX(-1);} /* Video card fits within gutter */ .dino-page .video-card{flex:0 0 calc(100vw - 36px);} .dino-page .hero-text h1{font-size:32px;} @@ -1004,9 +1015,16 @@ export function DinoPageContent({