[LANDING] Adjustment of various minor details to improve overall aesthetics (#122)

* style: enhance demo iframe and button appearance with shadow and hover effects

* feat: enhance GridCards component with gradient text and new privacy-focused tagline

* style: adjust padding in SciFiGridCard title for improved layout

* style: refine layout and typography in Description component for better readability

* style: update typography in GridCards and Testimonials components for improved clarity and consistency

* style: update typography in FAQ component for improved readability

* style: adjust padding in Wordmark component for improved layout

* style: adjust padding and layout in HomePage and Description components for improved visual consistency

* feat: enhance LogoCarousel with reduced motion support and improved layout in TrustedBy component

* fix: logos

---------

Co-authored-by: Hyteq <[email protected]>

Author: blaisewf

apps/docs/app/(home)/contributors/appreciation-flip-cards.tsx

@@ -145,7 +145,11 @@ function FlipCard() {
 										>
 											<Image
 												alt={`${sponsor.name} logo`}
-												className="max-h-full max-w-full object-contain dark:brightness-0 dark:invert"
+												className={`max-h-full max-w-full object-contain transition-transform duration-300 group-hover:scale-105 ${
+													sponsor.name === 'Upstash'
+														? 'dark:brightness-0 dark:invert'
+														: 'brightness-0 dark:brightness-100'
+												}`}
 												height={48}
 												src={sponsor.logo}
 												width={80}

apps/docs/app/(home)/page.tsx

@@ -77,7 +77,7 @@ export default function HomePage() {
 				>
 					<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
 						{/* Description Section */}
-						<Section className="pt-16 lg:pt-20" customPaddings id="description">
+						<Section className="pt-8 lg:pt-12" customPaddings id="description">
 							<Description />
 						</Section>
 

apps/docs/components/landing/card.tsx

@@ -62,7 +62,7 @@ export const SciFiGridCard = ({
 						/>
 					</div>
 
-					<h3 className="px-2 pb-6 text-center font-medium text-2xl text-foreground transition-colors duration-300 group-hover:text-foreground/90 sm:pb-8 sm:text-3xl lg:pb-10">
+					<h3 className="px-2 pb-2 text-center font-medium text-2xl text-foreground transition-colors duration-300 group-hover:text-foreground/90 sm:pb-2 sm:text-3xl">
 						{title}
 					</h3>
 

apps/docs/components/landing/demo.tsx

@@ -72,7 +72,7 @@ export default function DemoContainer() {
 
 				<iframe
 					allowFullScreen
-					className="h-[500px] w-full rounded border-0 bg-gradient-to-b from-transparent to-background grayscale sm:h-[600px] lg:h-[700px]"
+					className="h-[500px] w-full rounded border-0 bg-gradient-to-b from-transparent to-background grayscale shadow-2xl sm:h-[600px] lg:h-[700px]"
 					loading="lazy"
 					ref={iframeRef}
 					src="https://app.databuddy.cc/demo/OXmNQsViBT-FOS_wZCTHc"
@@ -86,7 +86,7 @@ export default function DemoContainer() {
 					onClick={handleFullscreen}
 					type="button"
 				>
-					<div className="flex items-center gap-2 rounded border border-border bg-card/90 px-4 py-2 font-medium text-sm shadow-lg backdrop-blur-sm transition-colors hover:bg-card">
+					<div className="flex cursor-pointer items-center gap-2 rounded border border-border bg-card/90 px-4 py-2 font-medium text-sm shadow-lg backdrop-blur-sm transition-colors hover:bg-background/10 transition-all duration-300">
 						<ArrowsOutSimpleIcon
 							className="h-4 w-4 text-foreground"
 							weight="fill"

apps/docs/components/landing/description.tsx

@@ -116,19 +116,19 @@ export const Description = () => {
 			</div>
 
 			{/* Desktop Layout */}
-			<div className="hidden w-full items-center justify-center lg:flex">
-				<div className="flex w-full max-w-7xl items-center justify-center px-8">
+			<div className="hidden w-full justify-center lg:flex">
+				<div className="flex w-full max-w-7xl items-stretch justify-center px-8">
 					{/* Left Column - Titles */}
-					<div className="flex-1 pr-12">
-						<h2 className="mb-8 font-medium text-2xl leading-tight xl:mb-12 xl:text-3xl">
+					<div className="flex flex-col justify-center flex-1 pr-12 py-12 xl:py-16">
+						<h2 className="mb-4 font-medium text-2xl leading-tight xl:mb-6 xl:text-3xl">
 							Most Analytics Tools are
 						</h2>
 
-						<div className="space-y-3 xl:space-y-4">
+						<div className="space-y-2 xl:space-y-3">
 							{data.map((item, index) => (
 								<motion.div
 									animate={item.isActive ? 'active' : 'inactive'}
-									className="cursor-pointer font-medium text-lg transition-colors duration-200 hover:opacity-80 xl:text-xl"
+									className="cursor-pointer font-normal text-lg transition-colors duration-200 hover:opacity-80 xl:text-xl"
 									key={`title-${item.title}`}
 									onClick={() => setCurrentIndex(index)}
 									variants={titleVariants}
@@ -140,11 +140,11 @@ export const Description = () => {
 					</div>
 
 					{/* Divider */}
-					<div className="h-60 w-px flex-shrink-0 bg-border" />
+					<div className="w-px flex-shrink-0 bg-border self-stretch -mt-8 lg:-mt-12" />
 
 					{/* Right Column - Content */}
-					<div className="flex-1 pl-12">
-						<div className="flex min-h-[140px] items-center xl:min-h-[180px]">
+					<div className="flex flex-col justify-center flex-1 pl-12 py-12 xl:py-16">
+						<div className="flex items-center">
 							<AnimatePresence mode="popLayout">
 								<motion.div
 									animate="center"

apps/docs/components/landing/faq.tsx

@@ -48,7 +48,7 @@ export default function FAQ() {
 								key={faq.question}
 								value={faq.question}
 							>
-								<AccordionTrigger className="px-8 py-4 text-left font-medium text-base hover:no-underline sm:py-6 sm:text-lg lg:text-xl">
+								<AccordionTrigger className="px-8 py-4 text-left font-normal text-base hover:no-underline sm:py-6 sm:text-lg lg:text-xl">
 									{faq.question}
 								</AccordionTrigger>
 								<AccordionContent className="px-8 pb-4 text-muted-foreground text-sm leading-relaxed sm:pb-6 sm:text-base">

apps/docs/components/landing/grid-cards.tsx

@@ -60,8 +60,11 @@ export const GridCards = () => {
 			<div className="mb-12 text-center lg:mb-16 lg:text-left">
 				<h2 className="mx-auto max-w-4xl font-semibold text-3xl leading-tight sm:text-4xl lg:mx-0 lg:text-5xl">
 					<span className="text-muted-foreground">Everything you need to </span>
-					<span className="text-foreground">understand your users</span>
+					<span className="bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">understand your users</span>
 				</h2>
+				<p className="max-w-2xl mt-3 text-muted-foreground text-sm sm:px-0 sm:text-base lg:text-lg">
+					Privacy-first, lightweight, real-time insights to grow with confidence. 
+				</p>
 			</div>
 
 			{/* Grid Section */}

apps/docs/components/landing/logo-carousel.tsx

@@ -25,7 +25,7 @@ function LogoColumn({
 	currentTime,
 	isLast,
 }: LogoColumnProps) {
-	const CYCLE_DURATION = 2000;
+	const CYCLE_DURATION = 3600;
 	const columnDelay = columnIndex * 200;
 	const adjustedTime =
 		(currentTime + columnDelay) % (CYCLE_DURATION * logos.length);
@@ -52,7 +52,7 @@ function LogoColumn({
 	return (
 		<motion.div
 			animate={{ opacity: 1, y: 0 }}
-			className={`relative h-14 w-24 overflow-hidden ${isLast ? '' : 'border-border/20 border-r'} sm:h-16 sm:w-32 md:h-20 md:w-48 lg:h-24 lg:w-64`}
+			className={`relative h-14 w-28 overflow-hidden rounded bg-background/40 ${isLast ? '' : 'border-border/20 border-r'} sm:h-16 sm:w-36 md:h-20 md:w-52 lg:h-24 lg:w-64`}
 			initial={{ opacity: 0, y: 20 }}
 			transition={{
 				delay: columnIndex * 0.1,
@@ -66,36 +66,37 @@ function LogoColumn({
 						y: '0%',
 						opacity: 1,
 						transition: {
-							duration: 0.6,
+							duration: 0.5,
 							ease: [0.25, 0.46, 0.45, 0.94],
 						},
 					}}
-					className="absolute inset-0 flex items-center justify-center gap-2"
+					className="absolute inset-0 flex items-center justify-center gap-2 px-2"
 					exit={{
-						y: '-20%',
+						y: '-15%',
 						filter: 'blur(3px)',
 						opacity: 0,
-						transition: { duration: 0.3, ease: [0.23, 1, 0.32, 1] },
+						transition: { duration: 0.25, ease: [0.23, 1, 0.32, 1] },
 					}}
 					initial={{ y: '10%', opacity: 0 }}
 					key={`${currentLogo.id}-${currentIndex}`}
 				>
-					{/* {showFavicon ? (
-						<Image
-							alt={`${currentLogo.name} favicon`}
-							className="h-6 w-6"
-							height={24}
-							loading="eager"
-							onError={() => setImgError(true)}
-							priority
-							sizes="24px"
-							src={faviconSrc}
-							width={24}
-						/>
-					) : null} */}
-					<span className="truncate px-1 font-bold text-xs sm:text-sm md:text-base lg:text-lg">
-						{currentLogo.name}
-					</span>
+					{currentLogo.src ? (
+						<a
+							aria-label={`Visit ${currentLogo.name}`}
+							className="inline-flex max-w-full items-center justify-center px-1 text-foreground/80 transition-colors hover:text-foreground"
+							href={currentLogo.src}
+							target="_blank"
+							rel="noopener"
+						>
+							<span className="truncate font-bold text-xs tracking-wide sm:text-sm md:text-base lg:text-lg">
+								{currentLogo.name}
+							</span>
+						</a>
+					) : (
+						<span className="truncate px-1 font-bold text-xs tracking-wide sm:text-sm md:text-base lg:text-lg">
+							{currentLogo.name}
+						</span>
+					)}
 				</motion.div>
 			</AnimatePresence>
 		</motion.div>
@@ -110,6 +111,8 @@ interface LogoCarouselProps {
 export function LogoCarousel({ columns = 3, logos }: LogoCarouselProps) {
 	const [logoColumns, setLogoColumns] = useState<Logo[][]>([]);
 	const [time, setTime] = useState(0);
+	const [isPaused, setIsPaused] = useState(false);
+	const [reducedMotion, setReducedMotion] = useState(false);
 
 	const distributeLogos = useCallback(
 		(logoList: Logo[]) => {
@@ -137,18 +140,37 @@ export function LogoCarousel({ columns = 3, logos }: LogoCarouselProps) {
 	}, [logos, distributeLogos]);
 
 	useEffect(() => {
+		try {
+			const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+			setReducedMotion(media.matches);
+			const listener = () => setReducedMotion(media.matches);
+			media.addEventListener?.('change', listener);
+			return () => media.removeEventListener?.('change', listener);
+		} catch {}
+	}, []);
+
+	useEffect(() => {
+		if (reducedMotion) return;
+		if (isPaused) return;
 		const interval = setInterval(() => {
 			setTime((prev) => prev + 100);
 		}, 100);
 		return () => clearInterval(interval);
-	}, []);
+	}, [isPaused, reducedMotion]);
 
 	return (
-		<div className="flex justify-center gap-0 sm:gap-1 md:gap-2 lg:gap-4">
+		<div
+			className="relative mx-auto flex justify-center gap-0 sm:gap-1 md:gap-2 lg:gap-4"
+			onMouseEnter={() => setIsPaused(true)}
+			onMouseLeave={() => setIsPaused(false)}
+		>
+			{/* gradient edges */}
+			<div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent sm:w-12" />
+			<div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent sm:w-12" />
 			{logoColumns.map((columnLogos, index) => (
 				<LogoColumn
 					columnIndex={index}
-					currentTime={time}
+					currentTime={reducedMotion ? 0 : time}
 					isLast={index === logoColumns.length - 1}
 					key={`${index}-${columnLogos.map((logo) => logo.id).join('-')}`}
 					logos={columnLogos}

apps/docs/components/landing/testimonials.tsx

@@ -240,7 +240,7 @@ export default function Testimonials(): ReactElement {
 				</h2>
 				<p className="mx-auto max-w-2xl px-2 text-muted-foreground text-sm sm:px-0 sm:text-base lg:text-lg">
 					Join thousands of developers who trust Databuddy for their analytics
-					needs
+					needs.
 				</p>
 			</div>
 

apps/docs/components/landing/trusted-by.tsx

@@ -110,10 +110,10 @@ import { LogoCarousel } from './logo-carousel';
 export const TrustedBy = () => {
 	return (
 		<div className="space-y-6 sm:space-y-8">
-			<h2 className="mx-auto max-w-xs text-center font-medium text-foreground text-lg leading-tight sm:max-w-sm sm:text-xl md:text-2xl">
-				Trusted by developers around the world
+			<h2 className="mx-auto max-w-md text-center font-medium text-foreground text-lg leading-tight tracking-tight sm:text-xl md:text-2xl">
+				Trusted by teams and developers worldwide
 			</h2>
-			<LogoCarousel columns={3} logos={logos} />
+			<LogoCarousel columns={4} logos={logos} />
 		</div>
 	);
 };