Marco/my-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

left-align hero text, remove blur band, scale up bg image

Browse Source
This commit is contained in:
Marco
2026-06-30 11:39:38 +00:00
parent b77207a225
commit c4771ee1da
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+6 -9
View File
@@ -4,18 +4,15 @@ import { Navbar } from "./Navbar";
export function Hero() { export function Hero() {
return ( return (
<section className="relative h-screen overflow-hidden bg-[#c5c8c9]"> <section className="relative h-screen overflow-hidden bg-[#c5c8c9]">
{/* Background photo */} {/* Background photo — slightly scaled up */}
<Image <Image
src="/hero-bg.jpg" src="/hero-bg.jpg"
alt="Harvey Specter" alt="Harvey Specter"
fill fill
priority priority
className="object-cover object-[center_15%]" className="object-cover object-[center_15%] scale-110"
/> />
{/* Backdrop blur band — desktop only */}
<div className="absolute hidden md:block backdrop-blur-[10px] bg-[rgba(217,217,217,0.01)] inset-x-0 h-[349px] top-[498px]" />
{/* Content */} {/* Content */}
<div className="relative z-10 h-full flex flex-col px-4 md:px-8"> <div className="relative z-10 h-full flex flex-col px-4 md:px-8">
<Navbar /> <Navbar />
@@ -23,11 +20,11 @@ export function Hero() {
{/* Desktop: spacer pushes hero text down */} {/* Desktop: spacer pushes hero text down */}
<div className="hidden md:block md:h-[240px] shrink-0" /> <div className="hidden md:block md:h-[240px] shrink-0" />
{/* Hero content — fills remaining space on mobile, fixed layout on desktop */} {/* 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"> <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 */} {/* Name block — left-aligned on both mobile and desktop */}
<div className="flex flex-col items-center md:items-start w-full"> <div className="flex flex-col items-start w-full">
<div className="px-[18px] mb-[-15px]"> <div className="px-[18px] mb-[-15px]">
<span className="font-mono font-normal text-sm text-white mix-blend-overlay uppercase leading-[1.1]"> <span className="font-mono font-normal text-sm text-white mix-blend-overlay uppercase leading-[1.1]">
[ Hello I&apos;m ] [ Hello I&apos;m ]
@@ -35,7 +32,7 @@ export function Hero() {
</div> </div>
<h1 <h1
className=" className="
text-white font-medium mix-blend-overlay capitalize text-center w-full text-white font-medium mix-blend-overlay capitalize text-left w-full
text-[96px] leading-[0.8] tracking-[-6.72px] text-[96px] leading-[0.8] tracking-[-6.72px]
md:text-[198px] md:leading-[1.1] md:tracking-[-13.86px] md:text-[198px] md:leading-[1.1] md:tracking-[-13.86px]
" "