Skip to content

fix/ "Book a Session" CTA in TopMate Card #1835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sanjay-kv merged 2 commits into from
Jun 3, 2026
Merged

fix/ "Book a Session" CTA in TopMate Card #1835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f1e647
fix: adjuested book a session block
Sricharan106 Jun 2, 2026
6a86058
Merge branch 'recodehive:main' into fix/adjust-Book-a-session
Sricharan106 Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 50 additions & 50 deletions src/components/topmate/TopMateCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
const { isDark } = useSafeColorMode();

const borderClr = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.07)";
const mutedClr = isDark
? "rgba(148,163,184,0.55)"
: "rgba(100,116,139,0.65)";
const mutedClr = isDark ? "rgba(148,163,184,0.55)" : "rgba(100,116,139,0.65)";
const subtleClr = isDark
? "rgba(148,163,184,0.35)"
: "rgba(100,116,139,0.45)";
Expand All @@ -42,14 +40,15 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
"Resume & portfolio review",
"Career path guidance",
"Open-source strategy",
"Mock Interview Prep",
];

return (
<motion.div
initial={{ opacity: 0, y: 30, scale: 0.97 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }}
className="group relative w-full h-full overflow-hidden rounded-2xl flex flex-col transition-all duration-500 hover:scale-[1.008]"
className="group relative flex h-90 w-full flex-col overflow-hidden rounded-2xl transition-all duration-500 hover:scale-[1.008]"
style={{
background: isDark ? "#0a0a0a" : "#ffffff",
border: `1px solid ${borderClr}`,
Expand All @@ -60,7 +59,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
>
{/* Grid pattern overlay */}
<div
className="absolute inset-0 pointer-events-none"
className="pointer-events-none absolute inset-0"
style={{
backgroundImage:
"linear-gradient(to right, rgba(79,79,79,0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(79,79,79,0.10) 1px, transparent 1px)",
Expand All @@ -74,7 +73,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({

{/* Subtle corner glow */}
<div
className="absolute -top-20 -right-20 w-40 h-40 rounded-full pointer-events-none"
className="pointer-events-none absolute -top-20 -right-20 h-40 w-40 rounded-full"
style={{
background: isDark
? "radial-gradient(circle, rgba(99,102,241,0.06), transparent)"
Expand All @@ -83,11 +82,11 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
}}
/>

<div className="relative p-5 flex flex-col h-full">
<div className="relative flex h-full flex-col p-4">
{/* Header Badge row */}
<div className="mb-3 flex items-center justify-between flex-shrink-0">
<div className="mb-2 flex flex-shrink-0 items-center justify-between">
<div
className="flex items-center gap-2 rounded-full px-3 py-1.5"
className="flex items-center gap-2 rounded-full px-2.5 py-1"
style={{
background: isDark
? "rgba(99,102,241,0.08)"
Expand All @@ -98,7 +97,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
}}
>
<Calendar
size={13}
size={12}
style={{ color: isDark ? "#a5b4fc" : "#6366f1" }}
/>
<span
Expand Down Expand Up @@ -135,7 +134,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({

{/* Title */}
<h2
className="mb-1.5 text-base sm:text-lg font-bold leading-tight tracking-tight flex-shrink-0"
className="mb-1 flex-shrink-0 text-base leading-tight font-bold tracking-tight"
style={{
color: isDark ? "#f1f5f9" : "#0f172a",
fontFamily: "'Inter', -apple-system, sans-serif",
Expand All @@ -146,7 +145,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({

{/* Description */}
<p
className="mb-3 text-[12px] leading-relaxed flex-shrink-0"
className="mb-2 line-clamp-2 flex-shrink-0 text-[11px] leading-snug"
style={{
color: isDark ? "rgba(148,163,184,0.7)" : "rgba(100,116,139,0.8)",
fontFamily: "'Inter', -apple-system, sans-serif",
Expand All @@ -155,9 +154,9 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
{description}
</p>

{/* What you get — compact inline */}
<div className="flex-1 mb-3">
<div className="flex items-center gap-1.5 mb-2">
{/* What you get — 2x2 Grid Section */}
<div className="mb-2.5 min-h-0 flex-grow">
<div className="mb-1 flex items-center gap-1.5">
<Sparkles
size={11}
style={{ color: isDark ? "#a5b4fc" : "#6366f1" }}
Expand All @@ -169,11 +168,11 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
What you get
</span>
</div>
<ul className="space-y-1.5">
<ul className="grid grid-cols-2 gap-x-2 gap-y-1">
{features.map((f, i) => (
<li key={i} className="flex items-center gap-2">
<li key={i} className="flex min-w-0 items-center gap-1.5">
<CheckCircle2
size={13}
size={11}
className="flex-shrink-0"
style={{
color: isDark
Expand All @@ -182,7 +181,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
}}
/>
<span
className="text-[12px]"
className="truncate text-[10.5px]"
style={{
color: isDark
? "rgba(226,232,240,0.75)"
Expand All @@ -198,37 +197,37 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
</div>

<div
className="rounded-xl p-3 w-full flex-shrink-0"
className="mt-1 w-full flex-shrink-0 rounded-xl p-1"
style={{
background: isDark ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)",
border: `1px solid ${borderClr}`,
}}
>
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-3">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2">
<div className="relative flex-shrink-0">
<img
src={profileImage}
alt="Profile"
className="h-10 w-10 rounded-xl object-cover"
style={{ border: `2px solid ${borderClr}` }}
className="h-8 w-8 rounded-lg object-cover"
style={{ border: `1.5px solid ${borderClr}` }}
/>
<div
className="absolute -bottom-0.5 -right-0.5 rounded-full p-0.5"
className="absolute -right-0.5 -bottom-0.5 rounded-full p-0.5"
style={{ background: isDark ? "#0a0a0a" : "#ffffff" }}
>
<div
className="h-2 w-2 rounded-full"
className="h-1.5 w-1.5 rounded-full"
style={{
background: "#22c55e",
boxShadow: "0 0 6px rgba(34,197,94,0.4)",
boxShadow: "0 0 4px rgba(34,197,94,0.4)",
}}
/>
</div>
</div>
<div>
<div className="min-w-0">
<p
className="text-[10px] font-medium"
className="mb-0.5 text-[9px] leading-none font-medium"
style={{ color: subtleClr }}
>
Book at
Expand All @@ -237,28 +236,30 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
href={`https://topmate.io/${username}`}
target="_blank"
rel="noopener noreferrer"
className="group/link flex items-center gap-1 text-[13px] font-semibold transition-colors duration-200"
className="group/link flex items-center gap-0.5 text-[11px] leading-none font-semibold transition-colors duration-200"
style={{
color: isDark ? "#a5b4fc" : "#4338ca",
textDecoration: "none",
}}
>
<span>topmate.io/{username}</span>
<span className="max-w-[95px] truncate sm:max-w-[none]">
topmate.io/{username}
</span>
<ArrowUpRight
size={12}
className="transition-transform group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5"
size={10}
className="flex-shrink-0 transition-transform group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5"
/>
</a>
</div>
</div>

{/* Rating */}
<div className="flex flex-col items-end gap-0.5">
<div className="flex flex-shrink-0 flex-col items-end justify-center">
<div className="flex items-center gap-0.5">
{[...Array(5)].map((_, i) => (
<Star
key={i}
size={11}
size={9}
className="flex-shrink-0"
style={{
fill: isDark ? "rgba(251,191,36,0.85)" : "#f59e0b",
Expand All @@ -268,7 +269,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
))}
</div>
<span
className="text-[10px] font-medium"
className="mt-0.5 text-[9px] leading-none font-medium"
style={{ color: subtleClr }}
>
5.0 rating
Expand All @@ -278,16 +279,18 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
</div>

{/* Social proof line */}
<div
className="flex items-center justify-center gap-1.5 mt-2 mb-2 flex-shrink-0"
>
<div className="mt-1.5 mb-1.5 flex flex-shrink-0 items-center justify-center gap-1.5">
<Users
size={12}
style={{ color: isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.5)" }}
size={11}
style={{
color: isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.5)",
}}
/>
<span
className="text-[11px] font-medium"
style={{ color: isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.5)" }}
className="text-[10px] font-medium"
style={{
color: isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.5)",
}}
>
200+ sessions completed
</span>
Expand All @@ -300,7 +303,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
rel="noopener noreferrer"
whileHover={{ scale: 1.015 }}
whileTap={{ scale: 0.985 }}
className="flex w-full items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold tracking-wide transition-all duration-300 flex-shrink-0"
className="flex w-full flex-shrink-0 items-center justify-center gap-2 rounded-xl px-4 py-2 text-xs font-semibold tracking-wide transition-all duration-300"
style={{
background: "linear-gradient(135deg, #4338ca 0%, #6d28d9 100%)",
color: "rgba(255,255,255,0.95)",
Expand All @@ -312,16 +315,13 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
fontFamily: "'Inter', -apple-system, sans-serif",
}}
>
<Calendar size={15} style={{ color: "rgba(255,255,255,0.8)" }} />
<Calendar size={13} style={{ color: "rgba(255,255,255,0.8)" }} />
<span>Schedule Now</span>
<ArrowUpRight
size={15}
style={{ color: "rgba(255,255,255,0.65)" }}
/>
<ArrowUpRight size={13} style={{ color: "rgba(255,255,255,0.65)" }} />
</motion.a>
</div>
</motion.div>
);
};

export default TopMateCard;
export default TopMateCard;
12 changes: 6 additions & 6 deletions src/components/topmate/TopMateSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ const TopMateSection = ({ setShowTopmate }) => {
};

return (
<div className="relative h-full flex flex-col">
<div className="relative w-full h-full flex flex-col justify-between">
<div className="relative flex flex-col w-full h-90">
<div className="relative flex w-full flex-col justify-between">
{/* Section header — unified height & centered alignment */}
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="min-h-[150px] flex flex-col justify-center items-center text-center flex-shrink-0 mb-4 px-4"
className="mb-4 flex flex-shrink-0 flex-col items-center justify-center px-4 text-center"
>
<motion.div custom={0} variants={revealVariants} className="mb-2.5">
<span
Expand All @@ -60,7 +60,7 @@ const TopMateSection = ({ setShowTopmate }) => {
<motion.h2
custom={1}
variants={revealVariants}
className="mb-2 text-2xl sm:text-3xl font-extrabold leading-tight tracking-tighter"
className="mb-2 text-2xl leading-tight font-extrabold tracking-tighter sm:text-3xl"
style={{
color: isDark ? "#f1f5f9" : "#0f172a",
fontFamily: "'Outfit', 'Inter', -apple-system, sans-serif",
Expand All @@ -82,7 +82,7 @@ const TopMateSection = ({ setShowTopmate }) => {
<motion.p
custom={2}
variants={revealVariants}
className="text-xs sm:text-sm leading-relaxed mx-auto max-w-xs"
className="mx-auto max-w-xs text-xs leading-relaxed sm:text-sm"
style={{
color: isDark ? "#94a3b8" : "#64748b",
fontFamily: "'Inter', -apple-system, sans-serif",
Expand All @@ -102,7 +102,7 @@ const TopMateSection = ({ setShowTopmate }) => {
delay: 0.25,
ease: [0.215, 0.61, 0.355, 1],
}}
className="flex-1 flex"
className="flex flex-1 w-full"
>
<TopMateCard {...profileData} setShowTopmate={setShowTopmate} />
</motion.div>
Expand Down
18 changes: 11 additions & 7 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,18 @@ export default function Home(): ReactNode {
</div>

{/* Mentorship (left) + Testimonials (right) — side by side */}
<div className="m-4 grid grid-cols-1 gap-6 lg:grid-cols-4 items-stretch">
{showTopmate && (
<div className="lg:col-span-1">
<TopMateSection setShowTopmate={setShowTopmate} />
<div className="ml-4 w-full">
<div className="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-5">
{showTopmate && (
<div className="lg:col-span-2">
<TopMateSection setShowTopmate={setShowTopmate} />
</div>
)}
<div
className={`${showTopmate ? "lg:col-span-3" : "lg:col-span-4"} overflow-hidden`}
>
<TestimonialCarousel />
</div>
)}
<div className={`${showTopmate ? "lg:col-span-3" : "lg:col-span-4"} overflow-hidden`}>
<TestimonialCarousel />
</div>
</div>

Expand Down
Loading