From 74609e0529073d568077fa5c5f39974b9472ec32 Mon Sep 17 00:00:00 2001
From: Eric Lammertsma <e.lammertsma@gmail.com>
Date: Mon, 23 Feb 2026 10:18:21 -0500
Subject: [PATCH] refactor: enhance hero section text and improve z-index
 management in UI components

---
 surfsense_web/components/homepage/hero-section.tsx   | 8 ++++----
 surfsense_web/components/ui/expanded-gif-overlay.tsx | 6 ++++--
 surfsense_web/components/ui/hero-carousel.tsx        | 8 ++++----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx
index 09d05f9ea..00226517c 100644
--- a/surfsense_web/components/homepage/hero-section.tsx
+++ b/surfsense_web/components/homepage/hero-section.tsx
@@ -97,17 +97,17 @@ export function HeroSection() {
 				)}
 			</h2>
 			{/* // TODO:aCTUAL DESCRITION */}
-			<p className="relative z-50 mx-auto mt-4 max-w-lg px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
+			<p className="relative z-50 mx-auto mt-4 max-w-xl px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
 				Connect any AI to your documents, Drive, Notion and more,
 			</p>
-			<p className="relative z-50 mx-auto mt-0 max-w-lg px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
-				then chat with it, invite your team, or generate podcasts and reports.
+			<p className="relative z-50 mx-auto mt-0 max-w-xl px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
+				then chat with it, generate podcasts and reports, or even invite your team.
 			</p>
 			<div className="mb-6 mt-6 flex w-full flex-col items-center justify-center gap-4 px-8 sm:flex-row md:mb-10">
 				<GetStartedButton />
 				{/* <ContactSalesButton /> */}
 			</div>
-			<div ref={containerRef} className="relative w-full">
+			<div ref={containerRef} className="relative w-full z-51">
 				<HeroCarousel />
 			</div>
 		</div>
diff --git a/surfsense_web/components/ui/expanded-gif-overlay.tsx b/surfsense_web/components/ui/expanded-gif-overlay.tsx
index 49b8190ff..1e4f622ba 100644
--- a/surfsense_web/components/ui/expanded-gif-overlay.tsx
+++ b/surfsense_web/components/ui/expanded-gif-overlay.tsx
@@ -2,6 +2,7 @@
 
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
 function ExpandedGifOverlay({
 	src,
@@ -20,7 +21,7 @@ function ExpandedGifOverlay({
 		return () => document.removeEventListener("keydown", handleKey);
 	}, [onClose]);
 
-	return (
+	return createPortal(
 		<motion.div
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
@@ -38,7 +39,8 @@ function ExpandedGifOverlay({
 				alt={alt}
 				className="max-h-[90vh] max-w-[90vw] cursor-pointer rounded-2xl shadow-2xl"
 			/>
-		</motion.div>
+		</motion.div>,
+		document.body,
 	);
 }
 
diff --git a/surfsense_web/components/ui/hero-carousel.tsx b/surfsense_web/components/ui/hero-carousel.tsx
index 4a7d800cf..c623aa525 100644
--- a/surfsense_web/components/ui/hero-carousel.tsx
+++ b/surfsense_web/components/ui/hero-carousel.tsx
@@ -260,7 +260,7 @@ function HeroCarousel() {
 				onTouchEnd={() => setIsPaused(false)}
 			>
 				<div
-					className="relative transition-[height] duration-700"
+					className="relative z-6 transition-[height] duration-700"
 					style={{ perspective: `${perspective}px`, height: cardHeight }}
 				>
 					{containerWidth > 0 &&
@@ -279,7 +279,7 @@ function HeroCarousel() {
 										transformOrigin: `${style.originX * 100}% 50%`,
 										cursor: i !== activeIndex ? "pointer" : undefined,
 									}}
-									onClick={i !== activeIndex ? () => goTo(i) : undefined}
+									onClick={i !== activeIndex && !isGifExpanded ? () => goTo(i) : undefined}
 									animate={{
 										x: style.x,
 										rotateY: style.rotateY,
@@ -310,12 +310,12 @@ function HeroCarousel() {
 				</div>
 			</div>
 
-			<div className="relative z-30 mt-6 flex justify-center gap-2">
+			<div className="relative z-5 mt-6 flex justify-center gap-2">
 				{carouselItems.map((_, i) => (
 					<button
 						key={`dot_${i}`}
 						type="button"
-						onClick={() => goTo(i)}
+						onClick={() => !isGifExpanded && goTo(i)}
 						className={`h-2 rounded-full transition-all duration-300 ${
 							i === activeIndex
 								? "w-6 bg-neutral-900 dark:bg-white"