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

66
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,24 +27,37 @@ 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%]">
<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>
<p className="rise rise-delay-2 mt-5 font-[family-name:var(--font-fraunces)] text-[clamp(1.65rem,3.2vw,2.35rem)] font-medium leading-snug tracking-[-0.02em] text-ink m-0">
Maturita? To dáte.
</p>
<p className="rise rise-delay-3 mt-4 text-base sm:text-lg text-ink-muted leading-relaxed max-w-md m-0">
Procvičování k maturitě v jednom okně — česky i anglicky, se
statistikami a automatickými aktualizacemi.
</p>
<div className="rise rise-delay-4 mt-8 flex flex-wrap gap-3">
<a href="#stahnout" className="btn-primary">
Stáhnout aplikaci
</a>
<a href="#predmety" className="btn-ghost">
Co umí
</a>
<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>
<p className="rise rise-delay-2 mt-5 font-[family-name:var(--font-fraunces)] text-[clamp(1.65rem,3.2vw,2.35rem)] font-medium leading-snug tracking-[-0.02em] text-ink m-0">
Maturita? To dáte.
</p>
<p className="rise rise-delay-3 mt-4 text-base sm:text-lg text-ink-muted leading-relaxed max-w-md m-0">
Procvičování k maturitě v jednom okně — česky i anglicky, se
statistikami a automatickými aktualizacemi.
</p>
<div className="rise rise-delay-4 mt-8 flex flex-wrap gap-3">
<a href="#stahnout" className="btn-primary">
Stáhnout aplikaci
</a>
<a href="#predmety" className="btn-ghost">
Co umí
</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>