spb/phi-conseil

1import Image from "next/image";2import { home } from "@/lib/content";3import { Button } from "@/components/ui/Button";4import { GoldenSpiral } from "@/components/graphics/GoldenSpiral";5import { WaveDivider } from "@/components/graphics/WaveDivider";6import { DeskScene } from "@/components/graphics/Placeholders";78export function Hero() {9  const { hero } = home;10  return (11    <section aria-labelledby="hero-title" className="bg-ivory-100 relative isolate overflow-hidden">12      <div className="container-site relative grid items-center gap-10 pt-8 pb-24 md:pt-10 md:pb-32 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:gap-4 lg:pt-4 lg:pb-32">13        <div className="relative z-10 max-w-[36rem] lg:pt-6">14          <h1 id="hero-title" className="text-display">15            {hero.titleLines.map((line, i) => (16              <span key={i} className="block">17                {line}18              </span>19            ))}20          </h1>21          <p className="text-ink-700 mt-6 max-w-[30rem] text-[1.05rem]">{hero.subtitle}</p>22          <div className="mt-8">23            <Button href={hero.cta.href} size="lg">24              {hero.cta.label}25            </Button>26          </div>27        </div>2829        <div className="relative -mx-[var(--container-pad)] lg:mx-0 lg:-mr-[var(--container-pad)]">30          <div className="relative aspect-[16/10] w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_12%,black)] lg:aspect-[1.18]">31            {hero.image.src ? (32              <Image33                src={hero.image.src}34                alt={hero.image.alt}35                fill36                priority37                sizes="(min-width:1024px) 50vw, 100vw"38                className="object-cover"39              />40            ) : (41              <DeskScene className="absolute inset-0 h-full w-full" />42            )}43            <GoldenSpiral44              className="text-gold-500 pointer-events-none absolute -top-[6%] right-[2%] h-[112%] w-auto opacity-90 drop-shadow-[0_0_1px_rgba(255,255,255,0.6)]"45              strokeWidth={0.1}46              flipY47            />48          </div>49        </div>50      </div>5152      <WaveDivider className="absolute inset-x-0 bottom-0 h-20 w-full md:h-28 lg:h-36" />53    </section>54  );55}56