skopcaak/graduately-web
1
0
Fork 0
mirror of https://github.com/pepaskopec-blip/graduately-web.git synced 2026-10-27 07:04:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Show the hero screenshot in a framed card instead of a faded overlay.

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pepaskopec-blip 2026-09-25 10:53:16 +02:00
commit ca7e4bc2f4
1 changed files with 32 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/Hero.tsx
View file

@ -4,22 +4,7 @@ const GITHUB = "https://github.com/pepaskopec-blip/Graduately";
export function Hero() {
return (
<header className="relative min-h-[100svh] flex flex-col overflow-hidden">
<div className="absolute inset-y-0 right-0 w-full lg:w-[56%] pointer-events-none">
<Image
src="/screenshots/welcome.png"
alt="Úvodní obrazovka aplikace Graduately"
fill
priority
className="object-cover object-[center_top] float-soft"
sizes="(max-width: 1024px) 100vw, 56vw"
/>
<div
className="absolute inset-0 bg-gradient-to-b from-[#c8e4e0]/75 via-[#c8e4e0]/25 to-[#c8e4e0]/80 lg:bg-gradient-to-r lg:from-[#b8ddd8] lg:via-[#b8ddd8]/55 lg:to-transparent"
aria-hidden
/>
</div>
<header className="relative flex flex-col">
<nav className="relative z-10 rise flex items-center justify-between px-5 sm:px-8 lg:px-12 pt-6 pb-4">
<a
href="#top"
@ -42,7 +27,8 @@ export function Hero() {
</div>
</nav>
<div className="relative z-10 flex-1 flex flex-col justify-center px-5 sm:px-8 lg:px-12 pb-16 pt-8 max-w-xl lg:max-w-[44%]">
<div className="relative z-10 grid flex-1 items-center gap-10 px-5 pb-16 pt-8 sm:px-8 lg:min-h-[calc(100svh-5.5rem)] lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:gap-14 lg:px-12 lg:pb-20">
<div className="max-w-xl">
<h1 className="rise rise-delay-1 font-[family-name:var(--font-fraunces)] text-[clamp(2.8rem,7vw,4.75rem)] font-semibold leading-[0.95] tracking-[-0.035em] text-ink m-0">
Graduately
</h1>
@ -62,6 +48,18 @@ export function Hero() {
</a>
</div>
</div>
<div className="rise rise-delay-2 relative aspect-[3/2] overflow-hidden rounded-[28px] glass">
<Image
src="/screenshots/welcome.png"
alt="Úvodní obrazovka aplikace Graduately"
fill
priority
className="object-cover"
sizes="(max-width: 1024px) 100vw, 52vw"
/>
</div>
</div>
</header>
);
}