Skip to content

Commit 2dab233

Browse files
blaisewfizadoesdev
andauthored
[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]>
1 parent bc55082 commit 2dab233

File tree

11 files changed

+75
-46
lines changed

11 files changed

+75
-46
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,11 @@ function FlipCard() {
145145
>
146146
<Image
147147
alt={`${sponsor.name} logo`}
148-
className="max-h-full max-w-full object-contain dark:brightness-0 dark:invert"
148+
className={`max-h-full max-w-full object-contain transition-transform duration-300 group-hover:scale-105 ${
149+
sponsor.name === 'Upstash'
150+
? 'dark:brightness-0 dark:invert'
151+
: 'brightness-0 dark:brightness-100'
152+
}`}
149153
height={48}
150154
src={sponsor.logo}
151155
width={80}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default function HomePage() {
7777
>
7878
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
7979
{/* Description Section */}
80-
<Section className="pt-16 lg:pt-20" customPaddings id="description">
80+
<Section className="pt-8 lg:pt-12" customPaddings id="description">
8181
<Description />
8282
</Section>
8383

apps/docs/components/landing/card.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const SciFiGridCard = ({
6262
/>
6363
</div>
6464

65-
<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">
65+
<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">
6666
{title}
6767
</h3>
6868

apps/docs/components/landing/demo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function DemoContainer() {
7272

7373
<iframe
7474
allowFullScreen
75-
className="h-[500px] w-full rounded border-0 bg-gradient-to-b from-transparent to-background grayscale sm:h-[600px] lg:h-[700px]"
75+
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]"
7676
loading="lazy"
7777
ref={iframeRef}
7878
src="https://app.databuddy.cc/demo/OXmNQsViBT-FOS_wZCTHc"
@@ -86,7 +86,7 @@ export default function DemoContainer() {
8686
onClick={handleFullscreen}
8787
type="button"
8888
>
89-
<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">
89+
<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">
9090
<ArrowsOutSimpleIcon
9191
className="h-4 w-4 text-foreground"
9292
weight="fill"

apps/docs/components/landing/description.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -116,19 +116,19 @@ export const Description = () => {
116116
</div>
117117

118118
{/* Desktop Layout */}
119-
<div className="hidden w-full items-center justify-center lg:flex">
120-
<div className="flex w-full max-w-7xl items-center justify-center px-8">
119+
<div className="hidden w-full justify-center lg:flex">
120+
<div className="flex w-full max-w-7xl items-stretch justify-center px-8">
121121
{/* Left Column - Titles */}
122-
<div className="flex-1 pr-12">
123-
<h2 className="mb-8 font-medium text-2xl leading-tight xl:mb-12 xl:text-3xl">
122+
<div className="flex flex-col justify-center flex-1 pr-12 py-12 xl:py-16">
123+
<h2 className="mb-4 font-medium text-2xl leading-tight xl:mb-6 xl:text-3xl">
124124
Most Analytics Tools are
125125
</h2>
126126

127-
<div className="space-y-3 xl:space-y-4">
127+
<div className="space-y-2 xl:space-y-3">
128128
{data.map((item, index) => (
129129
<motion.div
130130
animate={item.isActive ? 'active' : 'inactive'}
131-
className="cursor-pointer font-medium text-lg transition-colors duration-200 hover:opacity-80 xl:text-xl"
131+
className="cursor-pointer font-normal text-lg transition-colors duration-200 hover:opacity-80 xl:text-xl"
132132
key={`title-${item.title}`}
133133
onClick={() => setCurrentIndex(index)}
134134
variants={titleVariants}
@@ -140,11 +140,11 @@ export const Description = () => {
140140
</div>
141141

142142
{/* Divider */}
143-
<div className="h-60 w-px flex-shrink-0 bg-border" />
143+
<div className="w-px flex-shrink-0 bg-border self-stretch -mt-8 lg:-mt-12" />
144144

145145
{/* Right Column - Content */}
146-
<div className="flex-1 pl-12">
147-
<div className="flex min-h-[140px] items-center xl:min-h-[180px]">
146+
<div className="flex flex-col justify-center flex-1 pl-12 py-12 xl:py-16">
147+
<div className="flex items-center">
148148
<AnimatePresence mode="popLayout">
149149
<motion.div
150150
animate="center"

apps/docs/components/landing/faq.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function FAQ() {
4848
key={faq.question}
4949
value={faq.question}
5050
>
51-
<AccordionTrigger className="px-8 py-4 text-left font-medium text-base hover:no-underline sm:py-6 sm:text-lg lg:text-xl">
51+
<AccordionTrigger className="px-8 py-4 text-left font-normal text-base hover:no-underline sm:py-6 sm:text-lg lg:text-xl">
5252
{faq.question}
5353
</AccordionTrigger>
5454
<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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,11 @@ export const GridCards = () => {
6060
<div className="mb-12 text-center lg:mb-16 lg:text-left">
6161
<h2 className="mx-auto max-w-4xl font-semibold text-3xl leading-tight sm:text-4xl lg:mx-0 lg:text-5xl">
6262
<span className="text-muted-foreground">Everything you need to </span>
63-
<span className="text-foreground">understand your users</span>
63+
<span className="bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">understand your users</span>
6464
</h2>
65+
<p className="max-w-2xl mt-3 text-muted-foreground text-sm sm:px-0 sm:text-base lg:text-lg">
66+
Privacy-first, lightweight, real-time insights to grow with confidence.
67+
</p>
6568
</div>
6669

6770
{/* Grid Section */}

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

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function LogoColumn({
2525
currentTime,
2626
isLast,
2727
}: LogoColumnProps) {
28-
const CYCLE_DURATION = 2000;
28+
const CYCLE_DURATION = 3600;
2929
const columnDelay = columnIndex * 200;
3030
const adjustedTime =
3131
(currentTime + columnDelay) % (CYCLE_DURATION * logos.length);
@@ -52,7 +52,7 @@ function LogoColumn({
5252
return (
5353
<motion.div
5454
animate={{ opacity: 1, y: 0 }}
55-
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`}
55+
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`}
5656
initial={{ opacity: 0, y: 20 }}
5757
transition={{
5858
delay: columnIndex * 0.1,
@@ -66,36 +66,37 @@ function LogoColumn({
6666
y: '0%',
6767
opacity: 1,
6868
transition: {
69-
duration: 0.6,
69+
duration: 0.5,
7070
ease: [0.25, 0.46, 0.45, 0.94],
7171
},
7272
}}
73-
className="absolute inset-0 flex items-center justify-center gap-2"
73+
className="absolute inset-0 flex items-center justify-center gap-2 px-2"
7474
exit={{
75-
y: '-20%',
75+
y: '-15%',
7676
filter: 'blur(3px)',
7777
opacity: 0,
78-
transition: { duration: 0.3, ease: [0.23, 1, 0.32, 1] },
78+
transition: { duration: 0.25, ease: [0.23, 1, 0.32, 1] },
7979
}}
8080
initial={{ y: '10%', opacity: 0 }}
8181
key={`${currentLogo.id}-${currentIndex}`}
8282
>
83-
{/* {showFavicon ? (
84-
<Image
85-
alt={`${currentLogo.name} favicon`}
86-
className="h-6 w-6"
87-
height={24}
88-
loading="eager"
89-
onError={() => setImgError(true)}
90-
priority
91-
sizes="24px"
92-
src={faviconSrc}
93-
width={24}
94-
/>
95-
) : null} */}
96-
<span className="truncate px-1 font-bold text-xs sm:text-sm md:text-base lg:text-lg">
97-
{currentLogo.name}
98-
</span>
83+
{currentLogo.src ? (
84+
<a
85+
aria-label={`Visit ${currentLogo.name}`}
86+
className="inline-flex max-w-full items-center justify-center px-1 text-foreground/80 transition-colors hover:text-foreground"
87+
href={currentLogo.src}
88+
target="_blank"
89+
rel="noopener"
90+
>
91+
<span className="truncate font-bold text-xs tracking-wide sm:text-sm md:text-base lg:text-lg">
92+
{currentLogo.name}
93+
</span>
94+
</a>
95+
) : (
96+
<span className="truncate px-1 font-bold text-xs tracking-wide sm:text-sm md:text-base lg:text-lg">
97+
{currentLogo.name}
98+
</span>
99+
)}
99100
</motion.div>
100101
</AnimatePresence>
101102
</motion.div>
@@ -110,6 +111,8 @@ interface LogoCarouselProps {
110111
export function LogoCarousel({ columns = 3, logos }: LogoCarouselProps) {
111112
const [logoColumns, setLogoColumns] = useState<Logo[][]>([]);
112113
const [time, setTime] = useState(0);
114+
const [isPaused, setIsPaused] = useState(false);
115+
const [reducedMotion, setReducedMotion] = useState(false);
113116

114117
const distributeLogos = useCallback(
115118
(logoList: Logo[]) => {
@@ -137,18 +140,37 @@ export function LogoCarousel({ columns = 3, logos }: LogoCarouselProps) {
137140
}, [logos, distributeLogos]);
138141

139142
useEffect(() => {
143+
try {
144+
const media = window.matchMedia('(prefers-reduced-motion: reduce)');
145+
setReducedMotion(media.matches);
146+
const listener = () => setReducedMotion(media.matches);
147+
media.addEventListener?.('change', listener);
148+
return () => media.removeEventListener?.('change', listener);
149+
} catch {}
150+
}, []);
151+
152+
useEffect(() => {
153+
if (reducedMotion) return;
154+
if (isPaused) return;
140155
const interval = setInterval(() => {
141156
setTime((prev) => prev + 100);
142157
}, 100);
143158
return () => clearInterval(interval);
144-
}, []);
159+
}, [isPaused, reducedMotion]);
145160

146161
return (
147-
<div className="flex justify-center gap-0 sm:gap-1 md:gap-2 lg:gap-4">
162+
<div
163+
className="relative mx-auto flex justify-center gap-0 sm:gap-1 md:gap-2 lg:gap-4"
164+
onMouseEnter={() => setIsPaused(true)}
165+
onMouseLeave={() => setIsPaused(false)}
166+
>
167+
{/* gradient edges */}
168+
<div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent sm:w-12" />
169+
<div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent sm:w-12" />
148170
{logoColumns.map((columnLogos, index) => (
149171
<LogoColumn
150172
columnIndex={index}
151-
currentTime={time}
173+
currentTime={reducedMotion ? 0 : time}
152174
isLast={index === logoColumns.length - 1}
153175
key={`${index}-${columnLogos.map((logo) => logo.id).join('-')}`}
154176
logos={columnLogos}

apps/docs/components/landing/testimonials.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export default function Testimonials(): ReactElement {
240240
</h2>
241241
<p className="mx-auto max-w-2xl px-2 text-muted-foreground text-sm sm:px-0 sm:text-base lg:text-lg">
242242
Join thousands of developers who trust Databuddy for their analytics
243-
needs
243+
needs.
244244
</p>
245245
</div>
246246

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,10 @@ import { LogoCarousel } from './logo-carousel';
110110
export const TrustedBy = () => {
111111
return (
112112
<div className="space-y-6 sm:space-y-8">
113-
<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">
114-
Trusted by developers around the world
113+
<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">
114+
Trusted by teams and developers worldwide
115115
</h2>
116-
<LogoCarousel columns={3} logos={logos} />
116+
<LogoCarousel columns={4} logos={logos} />
117117
</div>
118118
);
119119
};

0 commit comments

Comments
 (0)