From af1d718a1896023a56ceb93e2a6f58dc8b67e833 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:50:28 +0100
Subject: [PATCH] fix: move logo to left panel, increase slide interval to 8s,
 keep mobile logo

---
 app/checkout/page.tsx                    |  4 ++--
 components/checkout/FeatureSlideshow.tsx | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 43bf9c3..20e88cf 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -180,8 +180,8 @@ function CheckoutContent() {
 
       {/* Right — Payment (scrollable) */}
       <div className="w-full lg:w-1/2 flex flex-col h-full overflow-y-auto">
-        {/* Header */}
-        <div className="px-6 py-5">
+        {/* Logo on mobile only (desktop logo is on the left panel) */}
+        <div className="px-6 py-5 lg:hidden">
           <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
             <Image
               src={pulseIcon}
diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index 63bd6e9..a9147d0 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -2,6 +2,8 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import Image from 'next/image'
+import Link from 'next/link'
+import pulseIcon from '@/public/pulse_icon_no_margins.png'
 import { AnimatePresence, motion } from 'framer-motion'
 import { PulseMockup } from '@/components/marketing/mockups/pulse-mockup'
 import { PagesCard, ReferrersCard, LocationsCard, TechnologyCard, PeakHoursCard } from '@/components/marketing/mockups/pulse-features-carousel'
@@ -36,7 +38,7 @@ export default function FeatureSlideshow() {
   }, [])
 
   useEffect(() => {
-    const timer = setInterval(advance, 5000)
+    const timer = setInterval(advance, 8000)
     return () => clearInterval(timer)
   }, [advance])
 
@@ -57,6 +59,21 @@ export default function FeatureSlideshow() {
       {/* Dark overlay */}
       <div className="absolute inset-0 bg-black/40" />
 
+      {/* Logo */}
+      <div className="absolute top-0 left-0 z-20 px-6 py-5">
+        <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
+          <Image
+            src={pulseIcon}
+            alt="Pulse"
+            width={36}
+            height={36}
+            unoptimized
+            className="object-contain w-8 h-8"
+          />
+          <span className="text-xl font-bold text-white tracking-tight">Pulse</span>
+        </Link>
+      </div>
+
       {/* Content */}
       <div className="relative z-10 flex h-full flex-col items-center justify-center px-10 xl:px-14 py-12 overflow-hidden">
         <AnimatePresence mode="wait">