Skip to content

Commit 23caedb

Browse files
izadoesdevizadoesdev
committed
fix: stuff
1 parent 1d2dbdc commit 23caedb

File tree

3 files changed

+35
-33
lines changed

3 files changed

+35
-33
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function LogoColumn({
5252
return (
5353
<motion.div
5454
animate={{ opacity: 1, y: 0 }}
55-
className={`relative h-16 w-40 overflow-hidden ${isLast ? '' : 'border-r'} sm:h-20 md:h-24 md:w-64 lg:w-72`}
55+
className={`relative h-14 w-24 overflow-hidden ${isLast ? '' : 'border-r border-border/20'} sm:h-16 sm:w-32 md:h-20 md:w-48 lg:h-24 lg:w-64`}
5656
initial={{ opacity: 0, y: 20 }}
5757
transition={{
5858
delay: columnIndex * 0.1,
@@ -93,7 +93,7 @@ function LogoColumn({
9393
width={24}
9494
/>
9595
) : null} */}
96-
<span className="truncate font-bold text-base sm:text-xl md:text-2xl">
96+
<span className="truncate px-1 font-bold text-xs sm:text-sm md:text-base lg:text-lg">
9797
{currentLogo.name}
9898
</span>
9999
</motion.div>
@@ -144,7 +144,7 @@ export function LogoCarousel({ columns = 3, logos }: LogoCarouselProps) {
144144
}, []);
145145

146146
return (
147-
<div className="flex justify-center gap-4">
147+
<div className="flex justify-center gap-0 sm:gap-1 md:gap-2 lg:gap-4">
148148
{logoColumns.map((columnLogos, index) => (
149149
<LogoColumn
150150
columnIndex={index}

‎apps/docs/components/landing/testimonials.tsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -121,18 +121,18 @@ function TestimonialCardContent({
121121
aria-hidden
122122
className="text-muted-foreground transition-colors duration-300 group-hover:text-foreground"
123123
>
124-
<XLogoIcon className="h-5 w-5" weight="duotone" />
124+
<XLogoIcon className="h-4 w-4 sm:h-5 sm:w-5" weight="duotone" />
125125
</span>
126126
) : null;
127127

128128
return (
129-
<div className="group relative flex h-[200px] w-[300px] shrink-0 flex-col justify-between rounded border border-border bg-card/70 shadow-inner backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:shadow-primary/10 sm:h-[220px] sm:w-[350px] lg:h-[240px] lg:w-[400px]">
130-
<p className="text-pretty px-4 pt-4 font-light text-foreground text-sm leading-relaxed tracking-tight sm:px-5 sm:pt-5 sm:text-base lg:px-6 lg:pt-6 lg:text-base">
129+
<div className="group relative flex h-[190px] w-[280px] shrink-0 flex-col justify-between rounded border border-border bg-card/70 shadow-inner backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:shadow-primary/10 sm:h-[210px] sm:w-[320px] md:h-[230px] md:w-[350px] lg:h-[250px] lg:w-[400px]">
130+
<p className="text-pretty px-3 pt-3 font-light text-foreground text-sm leading-relaxed tracking-tight sm:px-4 sm:pt-4 sm:text-base md:px-5 md:pt-5 md:text-lg lg:px-6 lg:pt-6">
131131
"{testimonial.description}"
132132
</p>
133-
<div className="flex h-[65px] w-full items-center gap-1 border-border border-t bg-card/20 sm:h-[70px] lg:h-[75px]">
134-
<div className="flex w-full items-center gap-3 px-4 py-3 sm:gap-4 sm:px-5 sm:py-4 lg:px-6">
135-
<Avatar className="h-9 w-9 border border-border sm:h-10 sm:w-10 lg:h-11 lg:w-11">
133+
<div className="flex h-[55px] w-full items-center gap-1 border-border border-t bg-card/20 sm:h-[60px] md:h-[65px] lg:h-[70px]">
134+
<div className="flex w-full items-center gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3 md:gap-4 md:px-5 md:py-4 lg:px-6">
135+
<Avatar className="h-8 w-8 border border-border sm:h-9 sm:w-9 md:h-10 md:w-10 lg:h-11 lg:w-11">
136136
<AvatarImage
137137
src={testimonial.avatar.length > 2 ? testimonial.avatar : ''}
138138
/>
@@ -141,18 +141,18 @@ function TestimonialCardContent({
141141
</AvatarFallback>
142142
</Avatar>
143143
<div className="flex flex-1 flex-col gap-0">
144-
<h5 className="font-medium text-foreground text-sm sm:text-base lg:text-base">
144+
<h5 className="font-medium text-foreground text-xs sm:text-sm md:text-base">
145145
{testimonial.name}
146146
</h5>
147-
<p className="mt-[-2px] truncate text-muted-foreground text-xs sm:text-sm lg:text-sm">
147+
<p className="mt-[-1px] truncate text-muted-foreground text-xs sm:text-sm">
148148
{testimonial.profession}
149149
</p>
150150
</div>
151151
</div>
152152
{socialIcon ? (
153153
<>
154154
<div className="h-full w-[1px] bg-border" />
155-
<div className="flex h-full w-[55px] items-center justify-center sm:w-[65px] lg:w-[75px]">
155+
<div className="flex h-full w-[45px] items-center justify-center sm:w-[55px] md:w-[65px] lg:w-[75px]">
156156
{socialIcon}
157157
</div>
158158
</>
@@ -210,15 +210,15 @@ function SlidingTestimonials({
210210
reverse?: boolean;
211211
}): ReactElement {
212212
return (
213-
<Marquee className="relative">
213+
<Marquee className="relative w-full [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]">
214214
<MarqueeFade side="left" />
215215
<MarqueeFade side="right" />
216216
<MarqueeContent
217217
direction={reverse ? 'right' : 'left'}
218218
gradient={false}
219219
pauseOnClick
220220
pauseOnHover
221-
speed={30}
221+
speed={50}
222222
>
223223
{rowTestimonials.map((t) => (
224224
<MarqueeItem key={`${t.name}-${t.profession}${reverse ? '-r' : ''}`}>
@@ -232,30 +232,32 @@ function SlidingTestimonials({
232232

233233
export default function Testimonials(): ReactElement {
234234
return (
235-
<div className="relative w-full">
235+
<div className="relative max-w-full">
236236
{/* Header Section */}
237-
<div className="mb-8 text-center lg:mb-12">
238-
<h2 className="mb-4 font-medium text-2xl leading-tight sm:text-3xl lg:text-4xl xl:text-5xl">
237+
<div className="mb-6 px-4 text-center sm:mb-8 sm:px-6 md:px-8 lg:mb-12">
238+
<h2 className="mb-3 font-medium text-lg leading-tight sm:mb-4 sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl">
239239
What developers are saying
240240
</h2>
241-
<p className="mx-auto max-w-2xl text-muted-foreground text-sm sm:text-base lg:text-lg">
241+
<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
243243
needs
244244
</p>
245245
</div>
246246

247247
{/* Testimonials Marquee */}
248-
<div className="flex flex-col gap-4 lg:gap-5">
249-
<SlidingTestimonials
250-
testimonials={testimonials.slice(
251-
0,
252-
Math.floor(testimonials.length / 2)
253-
)}
254-
/>
255-
<SlidingTestimonials
256-
reverse
257-
testimonials={testimonials.slice(Math.floor(testimonials.length / 2))}
258-
/>
248+
<div className="max-w-full overflow-x-hidden">
249+
<div className="flex flex-col gap-3 sm:gap-4 lg:gap-5">
250+
<SlidingTestimonials
251+
testimonials={testimonials.slice(
252+
0,
253+
Math.floor(testimonials.length / 2)
254+
)}
255+
/>
256+
<SlidingTestimonials
257+
reverse
258+
testimonials={testimonials.slice(Math.floor(testimonials.length / 2))}
259+
/>
260+
</div>
259261
</div>
260262
</div>
261263
);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,13 @@ import { LogoCarousel } from './logo-carousel';
103103

104104
export const TrustedBy = () => {
105105
return (
106-
<div className="relative flex h-full w-full flex-col items-center overflow-hidden pt-6 sm:pt-8">
107-
<div className="w-full space-y-8 text-center">
108-
<h2 className="mx-auto max-w-xs font-medium text-foreground text-xl leading-tight sm:text-2xl">
106+
<div className="relative flex h-full w-full flex-col items-center overflow-hidden px-4 pt-6 sm:px-6 sm:pt-8 md:px-8">
107+
<div className="w-full max-w-6xl space-y-6 text-center sm:space-y-8">
108+
<h2 className="mx-auto max-w-xs font-medium text-foreground text-lg leading-tight sm:max-w-sm sm:text-xl md:text-2xl">
109109
Trusted by developers around the world
110110
</h2>
111111
<div className="w-full">
112-
<LogoCarousel logos={logos} />
112+
<LogoCarousel logos={logos} columns={3} />
113113
</div>
114114
</div>
115115
</div>

0 commit comments

Comments
 (0)