Marco
66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import Image from "next/image";
|
|
import { Navbar } from "./Navbar";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative h-screen overflow-hidden bg-[#c5c8c9]">
|
|
{/* Background photo — slightly scaled up */}
|
|
<Image
|
|
src="/hero-bg.jpg"
|
|
alt="Harvey Specter"
|
|
fill
|
|
priority
|
|
className="object-cover object-[center_15%] scale-110"
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 h-full flex flex-col px-4 md:px-8">
|
|
<Navbar />
|
|
|
|
{/* Desktop: spacer pushes hero text down */}
|
|
<div className="hidden md:block md:h-[240px] shrink-0" />
|
|
|
|
{/* Hero content */}
|
|
<div className="flex-1 md:flex-none flex flex-col justify-between md:justify-start md:gap-0 pb-6 md:pb-0">
|
|
|
|
{/* Name block — left-aligned on both mobile and desktop */}
|
|
<div className="flex flex-col items-start w-full">
|
|
<div className="px-[18px] mb-[-15px]">
|
|
<span className="font-mono font-normal text-sm text-white mix-blend-overlay uppercase leading-[1.1]">
|
|
[ Hello I'm ]
|
|
</span>
|
|
</div>
|
|
<h1
|
|
className="
|
|
text-white font-medium mix-blend-overlay capitalize text-left w-full
|
|
text-[96px] leading-[0.8] tracking-[-6.72px]
|
|
md:text-[198px] md:leading-[1.1] md:tracking-[-13.86px]
|
|
"
|
|
>
|
|
Harvey Specter
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Description + CTA */}
|
|
<div className="flex md:justify-end w-full md:mt-4">
|
|
<div className="flex flex-col gap-[17px] items-start w-[294px]">
|
|
<p className="font-bold italic text-[#1f1f1f] text-sm tracking-[-0.035em] uppercase leading-[1.1]">
|
|
H.Studio is a{" "}
|
|
<span className="font-normal">full-service</span>
|
|
{" "}creative studio creating beautiful digital experiences and
|
|
products. We are an{" "}
|
|
<span className="font-normal">award winning</span>
|
|
{" "}desing and art group specializing in branding, web design
|
|
and engineering.
|
|
</p>
|
|
<button className="bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl hover:bg-neutral-800 transition-colors">
|
|
Let's talk
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|