apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-25 19:15:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: enhance hero section text and improve z-index management in UI components

Browse source
This commit is contained in:
Eric Lammertsma 2026-02-23 10:18:21 -05:00
parent 837fa0627f
commit 74609e0529
3 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

8
surfsense_web/components/homepage/hero-section.tsx
View file

@ -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>

6
surfsense_web/components/ui/expanded-gif-overlay.tsx
View file

@ -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,
);
}

8
surfsense_web/components/ui/hero-carousel.tsx
View file

@ -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"