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> </h2>
{/* // TODO:aCTUAL DESCRITION */} {/* // 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, Connect any AI to your documents, Drive, Notion and more,
</p> </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"> <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, invite your team, or generate podcasts and reports. then chat with it, generate podcasts and reports, or even invite your team.
</p> </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"> <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 /> <GetStartedButton />
{/* <ContactSalesButton /> */} {/* <ContactSalesButton /> */}
</div> </div>
<div ref={containerRef} className="relative w-full"> <div ref={containerRef} className="relative w-full z-51">
<HeroCarousel /> <HeroCarousel />
</div> </div>
</div> </div>

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

@ -2,6 +2,7 @@
import { AnimatePresence, motion } from "motion/react"; import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { createPortal } from "react-dom";
function ExpandedGifOverlay({ function ExpandedGifOverlay({
src, src,
@ -20,7 +21,7 @@ function ExpandedGifOverlay({
return () => document.removeEventListener("keydown", handleKey); return () => document.removeEventListener("keydown", handleKey);
}, [onClose]); }, [onClose]);
return ( return createPortal(
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
@ -38,7 +39,8 @@ function ExpandedGifOverlay({
alt={alt} alt={alt}
className="max-h-[90vh] max-w-[90vw] cursor-pointer rounded-2xl shadow-2xl" 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)} onTouchEnd={() => setIsPaused(false)}
> >
<div <div
className="relative transition-[height] duration-700" className="relative z-6 transition-[height] duration-700"
style={{ perspective: `${perspective}px`, height: cardHeight }} style={{ perspective: `${perspective}px`, height: cardHeight }}
> >
{containerWidth > 0 && {containerWidth > 0 &&
@ -279,7 +279,7 @@ function HeroCarousel() {
transformOrigin: `${style.originX * 100}% 50%`, transformOrigin: `${style.originX * 100}% 50%`,
cursor: i !== activeIndex ? "pointer" : undefined, cursor: i !== activeIndex ? "pointer" : undefined,
}} }}
onClick={i !== activeIndex ? () => goTo(i) : undefined} onClick={i !== activeIndex && !isGifExpanded ? () => goTo(i) : undefined}
animate={{ animate={{
x: style.x, x: style.x,
rotateY: style.rotateY, rotateY: style.rotateY,
@ -310,12 +310,12 @@ function HeroCarousel() {
</div> </div>
</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) => ( {carouselItems.map((_, i) => (
<button <button
key={`dot_${i}`} key={`dot_${i}`}
type="button" type="button"
onClick={() => goTo(i)} onClick={() => !isGifExpanded && goTo(i)}
className={`h-2 rounded-full transition-all duration-300 ${ className={`h-2 rounded-full transition-all duration-300 ${
i === activeIndex i === activeIndex
? "w-6 bg-neutral-900 dark:bg-white" ? "w-6 bg-neutral-900 dark:bg-white"