Skip to content

Commit 305ff48

Browse files
Condition00Condition00
committed
fix: enhanced topmate section and fixed the inconsistencies issue#704
1 parent d3f2e08 commit 305ff48

File tree

4 files changed

+99
-116
lines changed

4 files changed

+99
-116
lines changed

‎src/components/testimonials/TestimonialCard.tsx‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,69 +36,76 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
3636

3737
return (
3838
<motion.div
39-
initial={{ opacity: 0 }}
40-
animate={{ opacity: 1 }}
41-
exit={{ opacity: 0 }}
42-
className={`rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 h-[250px] flex flex-col justify-between ${
39+
initial={{ opacity: 0, y: 20 }}
40+
animate={{ opacity: 1, y: 0 }}
41+
exit={{ opacity: 0, y: -20 }}
42+
transition={{ duration: 0.5 }}
43+
className={`relative rounded-2xl sm:rounded-3xl p-6 sm:p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 h-full min-h-[380px] flex flex-col ${
4344
isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-gray-900"
4445
}`}
4546
>
4647
{/* Header with Avatar and Name */}
47-
<div className="flex items-center gap-4">
48-
<Avatar className="w-24 h-24 rounded-full">
48+
<div className="flex items-center gap-3 sm:gap-4 mb-4 sm:mb-6">
49+
<Avatar className="w-16 h-16 sm:w-20 sm:h-20 rounded-full flex-shrink-0 border-2 border-purple-200">
4950
<AvatarImage src={avatar} className="object-contain" />
50-
<AvatarFallback>CN</AvatarFallback>
51+
<AvatarFallback className={isDark ? "bg-gray-700" : "bg-gray-200"}>CN</AvatarFallback>
5152
</Avatar>
52-
<div>
53-
<h3 className={`font-semibold text-lg ${isDark ? "text-white" : "text-gray-900"}`}>
53+
<div className="min-w-0">
54+
<h3 className={`font-bold text-base sm:text-lg leading-tight truncate ${isDark ? "text-white" : "text-gray-900"}`}>
5455
{name}
5556
</h3>
56-
<p className={`text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}>
57+
<p className={`text-xs sm:text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}>
5758
@{username}
5859
</p>
5960
</div>
6061
</div>
6162

6263
{/* Content */}
63-
<p className={`line-clamp-3 my-4 flex-grow ${isDark ? "text-gray-300" : "text-gray-700"}`}>
64+
<p className={`line-clamp-4 text-sm sm:text-base leading-relaxed mb-4 sm:mb-6 flex-grow ${
65+
isDark ? "text-gray-300" : "text-gray-600"
66+
}`}>
6467
{content}
6568
</p>
6669

6770
{/* Footer with Hashtags and Date */}
6871
<div
69-
className={`flex flex-col gap-2 text-sm pt-2 border-t ${
70-
isDark ? "border-gray-700" : "border-gray-100"
72+
className={`flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm pt-3 sm:pt-4 border-t ${
73+
isDark ? "border-gray-700" : "border-gray-200"
7174
}`}
7275
>
7376
{/* Hashtags */}
7477
<div className="flex gap-2 flex-wrap">
7578
{content.match(/#\w+/g)?.map((hashtag, index) => (
7679
<span
7780
key={index}
78-
className="text-blue-500 hover:text-blue-600 cursor-pointer"
81+
className={`font-medium transition-colors ${
82+
isDark
83+
? "text-purple-400 hover:text-purple-300"
84+
: "text-purple-600 hover:text-purple-700"
85+
}`}
7986
>
8087
{hashtag}
8188
</span>
8289
))}
8390
</div>
8491

8592
{/* Link and Date Row */}
86-
<div className="flex items-center justify-between">
87-
<a
88-
href={link}
89-
target="_blank"
93+
<div className="flex items-center justify-between gap-2 flex-wrap">
94+
<a
95+
href={link}
96+
target="_blank"
9097
rel="noopener noreferrer"
91-
className={`hover:underline cursor-pointer ${
92-
isDark ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-700"
98+
className={`font-medium hover:underline cursor-pointer transition-colors truncate ${
99+
isDark ? "text-purple-400 hover:text-purple-300" : "text-purple-600 hover:text-purple-700"
93100
}`}
94101
>
95102
{formatLinkDisplay(link)}
96103
</a>
97-
<span className={isDark ? "text-gray-500" : "text-gray-400"}>{date}</span>
104+
<span className={`text-xs sm:text-sm shrink-0 ${isDark ? "text-gray-500" : "text-gray-400"}`}>{date}</span>
98105
</div>
99106
</div>
100107
</motion.div>
101108
);
102109
};
103110

104-
export default TestimonialCard;
111+
export default TestimonialCard;

‎src/components/testimonials/TestimonialCarousel.tsx‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ export function TestimonialCarousel() {
5858
}, [api]);
5959

6060
return (
61-
<div className="w-full">
62-
<div className="text-center mb-10">
63-
<h2 className="text-3xl font-bold mb-2">Loved by Many Users</h2>
64-
<div className="w-32 h-1 bg-blue-500 mx-auto rounded-full"></div>
61+
<div className="w-full px-4 py-8 sm:px-6 lg:px-8">
62+
<div className="max-w-3xl mx-auto text-center mb-12">
63+
<h2 className="text-3xl sm:text-5xl md:text-5xl font-bold mb-4">Loved by Many Users</h2>
64+
<div className="w-24 sm:w-32 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full"></div>
6565
</div>
6666

6767
<Carousel
6868
setApi={setApi}
69-
className="w-full"
69+
className="w-full max-w-7xl mx-auto"
7070
opts={{
7171
align: "start",
7272
loop: true,
@@ -77,30 +77,35 @@ export function TestimonialCarousel() {
7777
}),
7878
]}
7979
>
80-
<CarouselContent className="-ml-2 md:-ml-4 my-16">
80+
<CarouselContent className="-ml-2 md:-ml-4 my-6 sm:my-12">
8181
{testimonials.map((testimonial, index) => (
82-
<CarouselItem key={index} className="pl-2 md:pl-4 md:basis-1/2 h-full">
83-
<TestimonialCard {...testimonial} />
82+
<CarouselItem key={index} className="pl-2 md:pl-4 md:basis-1/2">
83+
<div className="h-full">
84+
<TestimonialCard {...testimonial} />
85+
</div>
8486
</CarouselItem>
8587
))}
8688
</CarouselContent>
8789

88-
<div className="flex items-center justify-center gap-2 mt-8">
89-
<CarouselPrevious className="static translate-y-0" />
90-
<div className="flex gap-2">
90+
<div className="flex items-center justify-center gap-4 mt-8">
91+
<CarouselPrevious className="static translate-y-0 cursor-pointer" />
92+
<div className="flex gap-2 items-center">
9193
{Array.from({ length: count }).map((_, index) => (
92-
<Button
94+
<button
9395
key={index}
94-
variant={current === index + 1 ? "default" : "outline"}
95-
size="icon"
96-
className="h-2 w-2 p-0 rounded-full"
9796
onClick={() => api?.scrollTo(index)}
97+
className={`rounded-full transition-all duration-300 cursor-pointer hover:scale-110 ${
98+
current === index + 1
99+
? "w-3 h-3 bg-gradient-to-r from-purple-500 to-pink-500"
100+
: "w-2 h-2 bg-gray-400 hover:bg-gray-600"
101+
}`}
102+
aria-label={`Go to slide ${index + 1}`}
98103
/>
99104
))}
100105
</div>
101-
<CarouselNext className="static translate-y-0" />
106+
<CarouselNext className="static translate-y-0 cursor-pointer" />
102107
</div>
103108
</Carousel>
104109
</div>
105110
);
106-
}
111+
}

‎src/components/topmate/TopMateCard.tsx‎

Lines changed: 42 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -28,122 +28,93 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
2828
initial={{ opacity: 0, y: 20 }}
2929
animate={{ opacity: 1, y: 0 }}
3030
transition={{ duration: 0.5 }}
31-
className={`relative w-full max-w-md mx-auto rounded-3xl shadow-2xl overflow-hidden hover:shadow-3xl transition-all duration-300 transform hover:-translate-y-1 ${
31+
className={`group relative w-full mx-auto rounded-2xl sm:rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 min-h-[365px] flex flex-col overflow-hidden ${
3232
isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
3333
}`}
3434
>
35-
{/* Decorative Arrows */}
36-
<div className="absolute -top-4 -left-4 flex gap-2">
37-
{[...Array(3)].map((_, i) => (
38-
<motion.div
39-
key={i}
40-
initial={{ opacity: 0, x: -10 }}
41-
animate={{ opacity: 1, x: 0 }}
42-
transition={{ delay: i * 0.1 }}
43-
className="text-purple-500"
44-
>
45-
<ArrowUpRight size={24} className="transform rotate-45" />
46-
</motion.div>
47-
))}
48-
</div>
35+
{/* Gradient Overlay - Shows on Hover */}
36+
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/0 via-pink-500/0 to-purple-500/0 group-hover:from-purple-500/10 group-hover:via-pink-500/10 group-hover:to-purple-500/10 transition-all duration-500 pointer-events-none hover:cursor-pointer" />
4937

5038
{/* Card Content */}
51-
<div className="p-6">
52-
{/* Header */}
53-
<div className="flex items-center justify-between mb-4">
54-
<div className="flex items-center gap-2">
55-
<span
56-
className={`text-sm font-medium ${
57-
isDark ? "text-gray-300" : "text-gray-600"
58-
}`}
59-
>
60-
1:1 CALL
61-
</span>
39+
<div className="p-6 sm:p-8 flex flex-col h-full">
40+
{/* Header - Badge and Close Button */}
41+
<div className="flex items-center justify-between mb-4 sm:mb-6">
42+
<div className="flex items-center gap-2 sm:gap-3">
6243
<div
63-
className={`flex items-center gap-1 ${
64-
isDark ? "text-gray-400" : "text-gray-500"
44+
className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${
45+
isDark ? "bg-purple-500/10" : "bg-purple-50"
6546
}`}
6647
>
67-
<Clock size={16} />
68-
<span className="text-sm">{duration}</span>
48+
<Clock size={14} className="sm:w-4 sm:h-4" />
49+
<span className={`text-xs sm:text-sm font-medium ${
50+
isDark ? "text-purple-300" : "text-purple-700"
51+
}`}>
52+
{duration}
53+
</span>
6954
</div>
7055
</div>
7156
<button
72-
className={`text-xl font-semibold ${
57+
className={`p-1 rounded-full transition-all hover:rotate-90 ${
7358
isDark
74-
? "text-gray-500 hover:text-gray-300"
75-
: "text-gray-400 hover:text-gray-600"
59+
? "text-gray-400 hover:text-white hover:bg-gray-800"
60+
: "text-gray-500 hover:text-gray-900 hover:bg-gray-100"
7661
}`}
7762
onClick={() => setShowTopmate(false)}
63+
aria-label="Close"
7864
>
79-
<span className="sr-only">Close</span>×
65+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
66+
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
67+
</svg>
8068
</button>
8169
</div>
8270

8371
{/* Title */}
8472
<h2
85-
className={`text-2xl font-bold mb-4 ${
73+
className={`text-xl sm:text-2xl font-bold mb-3 leading-tight ${
8674
isDark ? "text-white" : "text-gray-900"
8775
}`}
8876
>
8977
{title}
9078
</h2>
9179

9280
{/* Description */}
93-
<p className={`${isDark ? "text-gray-300" : "text-gray-600"} mb-6`}>
81+
<p className={`text-sm sm:text-base leading-relaxed flex-grow ${
82+
isDark ? "text-gray-300" : "text-gray-600"
83+
}`}>
9484
{description}
9585
</p>
9686

9787
{/* Profile Section */}
98-
<div className="flex items-center justify-between flex-wrap md:flex-nowrap gap-y-3">
99-
<div className="flex items-center gap-3 min-w-0">
88+
<div className={`mt-6 pt-4 sm:pt-5 border-t ${
89+
isDark ? "border-gray-700" : "border-gray-200"
90+
}`}>
91+
<div className="flex items-center gap-3 sm:gap-4">
10092
<img
10193
src={profileImage}
10294
alt="Profile"
103-
className="w-12 h-12 rounded-full object-cover border-2 border-purple-200"
95+
className="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover ring-2 ring-purple-500/20 flex-shrink-0"
10496
/>
105-
<div className="flex flex-col">
106-
<span
107-
className={`text-sm ${
108-
isDark ? "text-gray-300" : "text-gray-600"
109-
}`}
110-
>
111-
Book a slot at
112-
</span>
97+
<div className="flex-1 min-w-0">
98+
<p className={`text-xs mb-1 ${
99+
isDark ? "text-gray-500" : "text-gray-400"
100+
}`}>
101+
Book your session
102+
</p>
113103
<a
114104
href={`https://topmate.io/${username}`}
115105
target="_blank"
116106
rel="noopener noreferrer"
117-
className="text-purple-500 font-semibold hover:text-purple-600 transition-colors flex items-center gap-1 truncate"
107+
className={`group inline-flex items-center gap-1.5 font-semibold hover:gap-2 transition-all ${
108+
isDark ? "text-purple-400 hover:text-purple-300" : "text-purple-600 hover:text-purple-700"
109+
}`}
118110
>
119-
<span className="truncate">topmate.io/{username}</span>
120-
<ArrowUpRight size={16} />
111+
<span className="text-sm sm:text-base">topmate.io/{username}</span>
112+
<ArrowUpRight size={16} className="group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
121113
</a>
122114
</div>
123115
</div>
124-
<div className="flex items-center gap-2 shrink-0">
125-
{/* Show only the circular icon part of the Topmate logo */}
126-
<div className="h-4 w-4 overflow-hidden flex-shrink-0 rounded-sm">
127-
<img
128-
src="/icons/topmate.png"
129-
alt="Topmate icon"
130-
className="h-4 w-auto object-cover object-left opacity-90"
131-
/>
132-
</div>
133-
{/* Theme-aware text to ensure readability on dark backgrounds */}
134-
<span
135-
className={`text-sm font-semibold shrink-0 ${
136-
isDark ? "text-gray-200" : "text-gray-700"
137-
}`}
138-
>
139-
topmate
140-
</span>
141-
</div>
142116
</div>
143117
</div>
144-
145-
{/* Gradient Border Effect */}
146-
<div className="absolute inset-0 border-2 border-transparent rounded-3xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 -z-10" />
147118
</motion.div>
148119
);
149120
};

‎src/components/topmate/TopMateSection.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,26 @@ const TopMateSection = ({ setShowTopmate }) => {
1414
};
1515

1616
return (
17-
<div className="px-4">
18-
<div className="mx-auto">
19-
<div className="mx-auto text-center mb-16">
17+
<div className="px-4 py-8 sm:px-6 lg:px-8">
18+
<div className="max-w-7xl mx-auto">
19+
<div className="max-w-3xl mx-auto text-center mb-12">
2020
<h1
21-
className={`text-4xl font-bold mb-4 ${
21+
className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-4 ${
2222
colorMode === "dark" ? "text-white" : "text-gray-900"
2323
}`}
2424
>
2525
Book a Session
2626
</h1>
2727
<p
28-
className={`text-lg ${
28+
className={`text-base sm:text-lg md:text-xl ${
2929
colorMode === "dark" ? "text-gray-300" : "text-gray-600"
3030
}`}
3131
>
3232
Get personalized guidance and feedback through one-on-one sessions
3333
</p>
3434
</div>
3535

36-
<div>
36+
<div className="max-w-2xl mx-auto">
3737
<TopMateCard {...profileData} setShowTopmate={setShowTopmate} />
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)