Move overflow-hidden off section onto SVG wrapper
overflow-hidden on the section was clipping the section's own content. Wrapping just the SVG in an absolute overflow-hidden div contains the background text without affecting the hero content. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+4
-2
@@ -2,12 +2,13 @@ import Link from 'next/link'
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative isolate overflow-hidden mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
|
||||
<section className="relative isolate mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
|
||||
|
||||
{/* Background name — outline fills in on load */}
|
||||
<div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-0 -z-10 h-full w-full"
|
||||
className="h-full w-full"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<text
|
||||
@@ -24,6 +25,7 @@ export default function Hero() {
|
||||
Jonathan
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Eyebrow label */}
|
||||
<div className="mb-10 flex items-center gap-4">
|
||||
|
||||
Reference in New Issue
Block a user