From c0536df9e2be70eebe20b14caec1d82dc4cacc26 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Sat, 23 May 2026 22:22:27 +0100
Subject: [PATCH] feat: logo banner in navbar, 45px hero gap, navbar sized to
 logo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move cohorta-banner.png into navbar left slot (height 42px, w-auto)
- Navbar py-2/py-1.5 sized to logo — no left spacer needed
- PublicLayout main: pt-20 → pt-[58px] to match new navbar height
- Hero: mt/pt offsets updated to 58px; content starts 45px below navbar
- Hero: banner block removed (now lives in navbar)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/landing/Hero.tsx        | 20 ++------------------
 src/components/layout/Header.tsx       | 16 ++++++++++++----
 src/components/layout/PublicLayout.tsx |  2 +-
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 81cf5c07..1f223966 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -119,7 +119,7 @@ export default function Hero() {
   const shouldAnimate = !shouldReduce;
 
   return (
-    <section className="relative min-h-screen flex flex-col justify-start overflow-hidden -mt-20 pt-20">
+    <section className="relative min-h-screen flex flex-col justify-start overflow-hidden -mt-[58px] pt-[58px]">
       {/* Background glow */}
       <div
         className="glow-orb w-[600px] h-[400px] left-1/4 top-1/3 opacity-15"
@@ -134,23 +134,7 @@ export default function Hero() {
         }}
       />
 
-      <div className="relative max-w-7xl mx-auto px-6 w-full pt-3 pb-12 lg:pb-16">
-
-        {/* Banner — full hero width, 400px tall */}
-        <motion.div
-          initial={shouldAnimate ? { opacity: 0, y: 16 } : false}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }}
-          className="mb-6"
-        >
-          <img
-            src={`${import.meta.env.BASE_URL}cohorta-banner.png`}
-            alt="Cohorta — Synthetic Research. Real Insights."
-            className="w-full"
-            style={{ height: '400px', objectFit: 'contain', objectPosition: 'left center' }}
-            draggable={false}
-          />
-        </motion.div>
+      <div className="relative max-w-7xl mx-auto px-6 w-full pt-[45px] pb-12 lg:pb-16">
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
 
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index d61c92fe..4c4ef5b5 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -73,7 +73,7 @@ export default function Header() {
     <header
       className={cn(
         'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
-        scrolled ? 'py-3' : 'py-4'
+        scrolled ? 'py-2' : 'py-2'
       )}
     >
       {!shouldReduce && (
@@ -86,14 +86,22 @@ export default function Header() {
       <div className="max-w-7xl mx-auto px-5">
         <div
           className={cn(
-            'flex items-center justify-between px-4 py-2 rounded-2xl transition-all duration-300',
+            'flex items-center justify-between px-4 py-1.5 rounded-2xl transition-all duration-300',
             scrolled
               ? 'bg-[hsl(220_22%_10%/0.88)] backdrop-blur-xl border border-border/50 shadow-lg shadow-black/30'
               : 'bg-transparent'
           )}
         >
-          {/* Left spacer — same width as right auth buttons for centering */}
-          <div className="hidden md:flex items-center w-[160px]" />
+          {/* Left: Logo banner */}
+          <Link to="/" className="flex-shrink-0">
+            <img
+              src={`${import.meta.env.BASE_URL}cohorta-banner.png`}
+              alt="Cohorta"
+              style={{ height: '42px', objectFit: 'contain', objectPosition: 'left center' }}
+              className="w-auto"
+              draggable={false}
+            />
+          </Link>
 
           {/* Center: LimelightNav */}
           <div className="hidden md:flex items-center justify-center flex-1">
diff --git a/src/components/layout/PublicLayout.tsx b/src/components/layout/PublicLayout.tsx
index 1e02db30..c80df0f1 100644
--- a/src/components/layout/PublicLayout.tsx
+++ b/src/components/layout/PublicLayout.tsx
@@ -7,7 +7,7 @@ export default function PublicLayout() {
   return (
     <div className="min-h-screen flex flex-col bg-background">
       <Header />
-      <main className="flex-1 pt-20">
+      <main className="flex-1 pt-[58px]">
         <Outlet />
       </main>
       <Footer />