jeffemmett
/
cadcad-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: reposition hero banner image above text with hexagon shifted up 

Move background image from CSS background to full-bleed Image element,
remove CadCADLogo component, and anchor title text to lower third of hero.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-24 17:32:49 -08:00
parent 63cb277d61
commit f227eb38c8
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/globals.css
View File

@ -34,11 +34,8 @@ html {
scroll-behavior: smooth;
}
/* Header background - uses the original cadCAD background image */
/* Header background */
.header-background {
background-image: url('/images/cadcad-bg.png');
background-size: cover;
background-position: center;
background-color: #161645;
}

25
src/components/Hero.tsx
View File

@ -1,11 +1,23 @@
import CadCADLogo from "./CadCADLogo";
import Image from "next/image";
export default function Hero() {
return (
<section className="header-background relative flex min-h-screen items-center justify-center px-6 pt-20 text-center text-white">
<div className="container mx-auto flex flex-col items-center px-3 md:w-3/5">
<CadCADLogo className="mb-4 h-16 md:h-20" variant="color" />
<h1 className="my-4 text-5xl font-bold leading-tight">cadCAD</h1>
<section className="header-background relative min-h-screen pb-12 text-center text-white">
{/* Background image - full width, hexagon shifted upward */}
<div className="absolute inset-0 overflow-hidden">
<Image
src="/images/cadcad-bg.png"
alt=""
fill
className="object-cover object-[center_90%]"
priority
/>
</div>
{/* Text content anchored to lower third */}
<div className="relative flex min-h-screen flex-col justify-end px-6">
<div className="container mx-auto flex flex-col items-center px-3 md:w-3/5">
<h1 className="mt-19 mb-4 text-5xl font-bold leading-tight">cadCAD</h1>
<p className="mb-2 text-lg italic text-white/80">
Complex Adaptive Dynamics Computer-Aided Design
</p>
@ -32,10 +44,11 @@ export default function Hero() {
Join our community
</a>
</div>
</div>
</div>
{/* Scroll indicator */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 animate-bounce">
<svg
className="h-6 w-6 text-white"
fill="none"