fix(header,sliders): solid green header + fix coverflow overflow clipping

- Header: remove liquid-glass transparency; solid #396817 background so header
  no longer bleeds orange from the hero background
- GallerySlider/DinoGallery/DyvoLisGallery: change overflow-hidden to
  overflowX:clip so side cards in 3D coverflow are visible

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-28 16:35:15 +01:00
parent 6863f5022d
commit 32e0f688d1
4 changed files with 8 additions and 25 deletions

View file

@ -39,23 +39,10 @@ export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClient
<div
className="relative mx-auto max-w-[1204px] rounded-b-[20px]"
style={{
// Liquid-glass: heavy blur + saturate + thin dark-green wash.
// Webkit prefix kept for Safari < 18.
backgroundColor: 'rgba(34, 62, 13, 0.42)',
backdropFilter: 'blur(22px) saturate(160%)',
WebkitBackdropFilter: 'blur(22px) saturate(160%)',
boxShadow: 'inset 0 1px 0 0 rgba(255,255,255,0.18), 0 1px 0 0 rgba(57,104,23,0.18)',
backgroundColor: '#396817',
boxShadow: '0 4px 20px rgba(0,0,0,0.18)',
}}
>
{/* Highlight sheen (top edge) — gives the glass-y look from Figma */}
<span
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 top-0 h-[34px]"
style={{
background: 'linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0))',
}}
/>
<div className="relative flex h-[60px] items-center justify-between px-[20px] lg:h-[120px] lg:px-[30px]">
{/* Logo */}
<Link href="/" aria-label="Шуміленд — на головну" className="shrink-0">
@ -152,11 +139,7 @@ export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClient
{menuOpen && (
<div
className="mx-auto mt-1 max-w-[1204px] rounded-[20px] px-6 py-5 lg:hidden"
style={{
backgroundColor: 'rgba(57,104,23,0.85)',
backdropFilter: 'blur(22px) saturate(160%)',
WebkitBackdropFilter: 'blur(22px) saturate(160%)',
}}
style={{ backgroundColor: '#2d5414' }}
>
<ul className="m-0 flex list-none flex-col gap-5 p-0">
{navLinks.map((link) => (

View file

@ -26,7 +26,7 @@ export function DinoGallery({ images }: DinoGalleryProps) {
}
return (
<section className="overflow-hidden py-14 lg:py-20" style={{ background: '#f1fbeb' }}>
<section className="py-14 lg:py-20" style={{ background: '#f1fbeb', overflowX: 'clip' }}>
<div
className="relative mx-auto h-[260px] max-w-[1204px] lg:h-[420px]"
style={{ perspective: '1100px' }}

View file

@ -55,8 +55,8 @@ export function DyvoLisGallery({
return (
<section
className="flex flex-col items-center overflow-hidden"
style={{ background: '#f1fbeb' }}
className="flex flex-col items-center"
style={{ background: '#f1fbeb', overflowX: 'clip' }}
>
{/* Quote banner */}
<div className="relative w-full py-10 lg:py-14" style={{ background: '#396817' }}>
@ -69,7 +69,7 @@ export function DyvoLisGallery({
</div>
{/* 3D Coverflow */}
<div className="relative w-full overflow-hidden py-14 lg:py-20">
<div className="relative w-full py-14 lg:py-20" style={{ overflowX: 'clip' }}>
<div
className="relative mx-auto h-[260px] max-w-[1204px] lg:h-[400px]"
style={{ perspective: '1100px' }}

View file

@ -47,7 +47,7 @@ export function GallerySlider({ images }: GallerySliderProps) {
return (
<>
{/* 3D Coverflow */}
<div className="overflow-hidden">
<div style={{ overflowX: 'clip', overflowY: 'visible' }}>
<div className="relative mx-auto h-[260px] lg:h-[420px]" style={{ perspective: '1100px' }}>
{images.map((img, i) => {
const d = getOffset(i)