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

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/Hero.tsx

@@ -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">
+    <header className="relative flex flex-col">
-      <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>
-
       <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>
   );
 }