From e251a50e8909f9e2958360cecb1c6db938098f61 Mon Sep 17 00:00:00 2001 From: vishalpatil-45 Date: Fri, 22 May 2026 20:06:32 +0530 Subject: [PATCH 1/2] fix(ui): improve testimonial and mentorship section consistency --- .../testimonials/TestimonialCard.tsx | 217 ++++++---- .../testimonials/TestimonialCarousel.tsx | 406 +++++++++++------- src/components/topmate/TopMateCard.tsx | 309 ++++++++++--- src/components/topmate/TopMateSection.tsx | 113 +++-- src/pages/index.tsx | 5 +- 5 files changed, 707 insertions(+), 343 deletions(-) diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx index 730e6fdc..a7d4838d 100644 --- a/src/components/testimonials/TestimonialCard.tsx +++ b/src/components/testimonials/TestimonialCard.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from "react"; import { motion } from "framer-motion"; +import { Quote } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"; import { useSafeColorMode } from "../../utils/useSafeColorMode"; @@ -23,107 +24,145 @@ const TestimonialCard: React.FC = ({ gradient, borderColor, }) => { - const { colorMode, isDark } = useSafeColorMode(); + const { isDark } = useSafeColorMode(); - const getBackgroundStyle = () => { - let colorStop = ""; - if (gradient === "bg-pink-100") { - colorStop = "rgba(244, 194, 214, 0.35)"; // Pink - } else if (gradient === "bg-purple-100") { - colorStop = "rgba(191, 190, 255, 0.35)"; // Blue/Lavender - } else { - colorStop = "rgba(165, 243, 252, 0.35)"; // Cyan - } + // Map gradient prop to card visual variant + const isAccent = gradient === "bg-purple-100"; + const isFeatured = gradient === "bg-pink-100"; - return { - background: ` - radial-gradient( - ellipse 600px 500px at 10% 85%, - ${colorStop} 0%, - rgba(255, 255, 255, 0) 70% - ), - linear-gradient( - 135deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(255, 255, 255, 0.9) 100% - ) - `, - backdropFilter: "blur(4px)", - WebkitBackdropFilter: "blur(4px)", - border: "1px solid rgba(200, 200, 220, 0.4)", - }; + const getRole = () => { + if (username === "VivienChen") return "Founder @ Toastie (BC Y24)"; + if (username === "DanielHan") return "Founder @ Unsloth AI (YC W24, BC Y24)"; + if (username === "EthanTrang") return "AI Engineer @ Relevance AI"; + return null; }; - const [mounted, setMounted] = useState(false); - useEffect(() => setMounted(true), []); + const role = getRole(); + + // Card colors by variant + const cardBg = isAccent + ? "linear-gradient(135deg, #4338ca 0%, #6d28d9 100%)" + : isDark + ? "#0a0a0a" + : "#ffffff"; + + const isInverted = isAccent || isDark; + const textClr = isInverted ? "rgba(255,255,255,0.85)" : "rgba(17,24,39,0.78)"; + const nameClr = isInverted ? "#f1f5f9" : "#0f172a"; + const mutedClr = isAccent + ? "rgba(255,255,255,0.50)" + : isDark + ? "rgba(148,163,184,0.55)" + : "rgba(100,116,139,0.65)"; + const borderClr = isAccent + ? "rgba(255,255,255,0.10)" + : isDark + ? "rgba(255,255,255,0.06)" + : "rgba(0,0,0,0.07)"; + const quoteClr = isAccent + ? "rgba(255,255,255,0.12)" + : isDark + ? "rgba(99,102,241,0.12)" + : "rgba(99,102,241,0.08)"; return ( - {/* Subtle glossy overlay */} -
- - {/* Soft shadow */} -
+ {/* Grid pattern overlay for featured cards */} + {isFeatured && ( +
+ )} -
- {/* Testimonial Quote - Top Section */} -
-

- "{content.replace(/#\w+/g, '').trim()}" -

-
- - {/* Avatar and Info - Bottom Section */} -
-
- {/* Large Avatar with White Background */} - - - - {name.charAt(0)} - - + {/* Quote icon top-right */} +
+ +
-
-

- {name} -

- {username !== "AryanGupta" && username !== "DonaldAnyamba" && ( -

- {username === "VivienChen" ? "Founder @ Toastie (BC Y24)" : - username === "DanielHan" ? "Founder @ Unsloth AI (YC W24, BC Y24)" : - "AI Engineer @ Relevance AI"} -

- )} + {/* Quote content */} +

+ “{content.replace(/#\w+/g, "").trim()}” +

-
- {date} -
-
-
+ {/* Author row */} +
+
+

+ {name} +

+ {role && ( +

+ {role} +

+ )} + + {date} +
+ + + + {name.charAt(0)} + +
); diff --git a/src/components/testimonials/TestimonialCarousel.tsx b/src/components/testimonials/TestimonialCarousel.tsx index d11b46ca..b798a566 100644 --- a/src/components/testimonials/TestimonialCarousel.tsx +++ b/src/components/testimonials/TestimonialCarousel.tsx @@ -1,190 +1,284 @@ -import React, { useState, useEffect } from "react"; -import { - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, - type CarouselApi, -} from "../ui/carousel"; -import TestimonialCard from "./TestimonialCard"; -import Autoplay from "embla-carousel-autoplay"; -import { motion } from "framer-motion"; +import React from "react"; +import { motion, Variants } from "framer-motion"; import { useSafeColorMode } from "../../utils/useSafeColorMode"; -const baseTestimonials = [ +// --- Types --- +interface Testimonial { + text: string; + image: string; + name: string; + role: string; +} + +// --- Data --- +const testimonials: Testimonial[] = [ { + text: "The Recode Hive team are amazing to work with, very responsive. I'm a newbie to AI and they stepped us through the process", + image: "/icons/ethan.png", name: "Ethan Trang", - username: "EthanTrang", - content: - "The Recode Hive team are amazing to work with, very responsive. I'm a newbie to AI and they stepped us through the process", - date: "May 18, 2024", - avatar: "/icons/ethan.png", - gradient: "bg-pink-100", - borderColor: "border-pink-200", + role: "AI Engineer @ Relevance AI", }, { + text: "The tech talent in Recode Hive is unparalleled. We worked with consultants who work in companies like Palantir, OpenAI, Relevance AI and more", + image: "/icons/vivien.png", name: "Vivien Chen", - username: "VivienChen", - content: - "The tech talent in Recode Hive is unparalleled. We worked with consultants who work in companies like Palantir, OpenAI, Relevance AI and more", - date: "April 21, 2023", - avatar: "/icons/vivien.png", - gradient: "bg-purple-100", - borderColor: "border-purple-200", + role: "Founder @ Toastie (BC Y24)", }, { + text: "We were able to get our project scoped, matched and kicked off in one day. Our invoicing is now 10x faster, thanks to Recode Hive's automation.", + image: "/icons/daniel.png", name: "Daniel Han", - username: "DanielHan", - content: - "We were able to get our project scoped, matched and kicked off in one day.Our invoicing is now 10x faster, thanks to Recode Hive's automation.", - date: "Oct 18, 2024", - avatar: "/icons/daniel.png", - gradient: "bg-cyan-100", - borderColor: "border-cyan-200", + role: "Founder @ Unsloth AI (YC W24)", }, { + text: "You're constantly inspiring me to get applying for jobs and help me to improve my resume for 90+ ATS score and improve my LinkedIn profile.", + image: "/icons/aryan.png", name: "Aryan Gupta", - username: "AryanGupta", - content: - "you're constantly inspiring me to get applying for jobs and help me to improve my resume for 90+ ats score and improve my LinkedIn profile. you provided me detailed document analysis of my resume and video for me", - date: "Sept 17, 2024", - avatar: "/icons/aryan.png", - gradient: "bg-pink-100", - borderColor: "border-pink-200", + role: "Community Member", }, { + text: "Pointing out that my contributions all points back to my personal projects is an eye opener, especially now that I want to start building towards open source.", + image: "/icons/donald.png", name: "Donald Anyamba", - username: "DonaldAnyamba", - content: - "Pointing out that my contributions all points back to my personal projects is an eye opener, especially now that I want to start building towards open source.", - date: "May 4, 2026", - avatar: "/icons/donald.png", - gradient: "bg-purple-100", - borderColor: "border-purple-200", + role: "Community Member", }, ]; -const testimonials = [...baseTestimonials, ...baseTestimonials]; - -export function TestimonialCarousel() { - const [api, setApi] = useState(); - const [current, setCurrent] = useState(0); - const [count, setCount] = useState(0); - const { colorMode } = useSafeColorMode(); - const [mounted, setMounted] = useState(false); - - useEffect(() => setMounted(true), []); +// Distribute testimonials across 3 columns dynamically to avoid hardcoded indices +const col1 = testimonials.filter((_, i) => i % 3 === 0); +const col2 = testimonials.filter((_, i) => i % 3 === 1); +const col3 = testimonials.filter((_, i) => i % 3 === 2); - useEffect(() => { - if (!api) { - return; - } - - setCount(api.scrollSnapList().length); - setCurrent(api.selectedScrollSnap() + 1); - - api.on("select", () => { - setCurrent(api.selectedScrollSnap() + 1); - }); - }, [api]); +// --- Vertical scrolling column --- +function TestimonialsColumn({ + testimonialsList, + className, + duration = 15, + isDark, +}: { + testimonialsList: Testimonial[]; + className?: string; + duration?: number; + isDark: boolean; +}) { + const cardHeight = 160; + const gap = 16; + const itemHeight = cardHeight + gap; + const cycleHeight = testimonialsList.length * itemHeight; + const offset = itemHeight / 2; return ( -
- {/* Dotted Grid Background Pattern */} -
+ + > + {[...new Array(2).fill(0)].map((_, index) => ( + + {testimonialsList.map(({ text, image, name, role }, i) => ( + +
+

+ {text} +

+
+ {`Avatar +
+ + {name} + + + {role} + +
+
+
+ + ))} + + ))} + +
+ ); +} - {/* Animated Gradient Orbs */} -
-
-
-
-
+const revealVariants: Variants = { + hidden: { opacity: 0, y: 16, filter: "blur(6px)" }, + visible: (i: number) => ({ + opacity: 1, + y: 0, + filter: "blur(0px)", + transition: { + delay: i * 0.12, + duration: 0.5, + ease: [0.215, 0.61, 0.355, 1], + }, + }), +}; -
- -

- Builders ❤️ Recode Hive -

-

- Our builders go on to do incredible things from working at OpenAI to becoming AI engineers and founders. -

- +// --- Main component --- +export function TestimonialCarousel() { + const { isDark } = useSafeColorMode(); - + {/* Premium symmetric header — unified height & centered alignment */} + + + + ✦ Testimonials + + + - - - {testimonials.map((testimonial, index) => ( - - - - ))} - - - {/* Navigation */} -
- - - {/* Dots Indicator */} -
- {Array.from({ length: count }).map((_, index) => ( -
+ Recode Hive + + + + Our builders go on to do incredible things from OpenAI to becoming AI engineers and founders. + + - -
- - + {/* 3-column vertical scroll — premium alignment */} +
+ + +
-
+ ); } \ No newline at end of file diff --git a/src/components/topmate/TopMateCard.tsx b/src/components/topmate/TopMateCard.tsx index bf7b5326..05b50822 100644 --- a/src/components/topmate/TopMateCard.tsx +++ b/src/components/topmate/TopMateCard.tsx @@ -1,6 +1,14 @@ import React from "react"; import { motion } from "framer-motion"; -import { ArrowUpRight, Clock, Calendar, Star } from "lucide-react"; +import { + ArrowUpRight, + Clock, + Calendar, + Star, + Sparkles, + Users, + CheckCircle2, +} from "lucide-react"; import { useSafeColorMode } from "../../utils/useSafeColorMode"; interface TopMateCardProps { @@ -20,127 +28,296 @@ const TopMateCard: React.FC = ({ username, setShowTopmate, }) => { - const { colorMode, isDark } = useSafeColorMode(); + 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 subtleClr = isDark + ? "rgba(148,163,184,0.35)" + : "rgba(100,116,139,0.45)"; + + const features = [ + "Resume & portfolio review", + "Career path guidance", + "Open-source strategy", + ]; return ( - {/* Gradient Background (hidden in dark mode) */} - {!isDark && ( - <> -
- {/* Floating Elements */} -
-
- - )} + {/* Grid pattern overlay */} +
+ + {/* Subtle corner glow */} +
-
- {/* Header Badge */} -
-
- - - 1:1 MENTORSHIP +
+ {/* Header Badge row */} +
+
+ + + 1:1 Session + + + + {duration} -
- - {duration} -
{/* Title */} -

+

{title}

{/* Description */} -

+

{description}

- {/* Profile Section */} -
-
-
-
+ {/* What you get — compact inline */} +
+
+ + + What you get + +
+
    + {features.map((f, i) => ( +
  • + + + {f} + +
    • + ))} +
+
+ +
+
+
+
Profile -
-
+
+
-

- Book your session at +

+ Book at

topmate.io/{username} - +
{/* Rating */} -
-
+
+
{[...Array(5)].map((_, i) => ( - + ))}
- + 5.0 rating
+ {/* Social proof line */} +
+ + + 200+ sessions completed + +
+ {/* CTA Button */} - - - Schedule Now - - + + Schedule Now +
diff --git a/src/components/topmate/TopMateSection.tsx b/src/components/topmate/TopMateSection.tsx index 003040b4..b860a6dd 100644 --- a/src/components/topmate/TopMateSection.tsx +++ b/src/components/topmate/TopMateSection.tsx @@ -3,8 +3,22 @@ import TopMateCard from "./TopMateCard"; import { useSafeColorMode } from "../../utils/useSafeColorMode"; import { motion } from "framer-motion"; +const revealVariants = { + hidden: { opacity: 0, y: 16, filter: "blur(6px)" }, + visible: (i: number) => ({ + opacity: 1, + y: 0, + filter: "blur(0px)", + transition: { + delay: i * 0.12, + duration: 0.5, + ease: [0.215, 0.61, 0.355, 1], + }, + }), +} as any; + const TopMateSection = ({ setShowTopmate }) => { - const { colorMode } = useSafeColorMode(); + const { isDark } = useSafeColorMode(); const profileData = { title: "1:1 Mentorship Call", @@ -15,40 +29,79 @@ const TopMateSection = ({ setShowTopmate }) => { }; return ( -
-
- +
+ {/* Section header — unified height & centered alignment */} + -
- - ✨ Personal Mentorship + + + ✦ Mentorship -
-

- Book a Session -

-

- Get personalized guidance and feedback through one-on-one sessions with industry experts -

+ + + + Book a{" "} + + Session + + + + + Get personalized guidance through one-on-one sessions with experts + + {/* Card — fills remaining height */} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e3368cbf..1c3fbc85 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -87,13 +87,14 @@ export default function Home(): ReactNode {
-
+ {/* Mentorship (left) + Testimonials (right) — side by side */} +
{showTopmate && (
)} -
+
From e6773301d831107b542bc838f66731457919c960 Mon Sep 17 00:00:00 2001 From: vishalpatil-45 Date: Fri, 22 May 2026 22:19:26 +0530 Subject: [PATCH 2/2] fix: address copilot review feedback --- src/components/testimonials/TestimonialCard.tsx | 2 -- src/components/topmate/TopMateSection.tsx | 5 +++-- src/database/blogs/index.tsx | 6 ++++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx index a7d4838d..12345024 100644 --- a/src/components/testimonials/TestimonialCard.tsx +++ b/src/components/testimonials/TestimonialCard.tsx @@ -12,7 +12,6 @@ interface TestimonialCardProps { date: string; avatar: string; gradient?: string; - borderColor?: string; } const TestimonialCard: React.FC = ({ @@ -22,7 +21,6 @@ const TestimonialCard: React.FC = ({ date, avatar, gradient, - borderColor, }) => { const { isDark } = useSafeColorMode(); diff --git a/src/components/topmate/TopMateSection.tsx b/src/components/topmate/TopMateSection.tsx index b860a6dd..901136b7 100644 --- a/src/components/topmate/TopMateSection.tsx +++ b/src/components/topmate/TopMateSection.tsx @@ -2,8 +2,9 @@ import React from "react"; import TopMateCard from "./TopMateCard"; import { useSafeColorMode } from "../../utils/useSafeColorMode"; import { motion } from "framer-motion"; +import type { Variants } from "framer-motion"; -const revealVariants = { +const revealVariants: Variants = { hidden: { opacity: 0, y: 16, filter: "blur(6px)" }, visible: (i: number) => ({ opacity: 1, @@ -15,7 +16,7 @@ const revealVariants = { ease: [0.215, 0.61, 0.355, 1], }, }), -} as any; +}; const TopMateSection = ({ setShowTopmate }) => { const { isDark } = useSafeColorMode(); diff --git a/src/database/blogs/index.tsx b/src/database/blogs/index.tsx index fd1d4a50..b5b2c5ff 100644 --- a/src/database/blogs/index.tsx +++ b/src/database/blogs/index.tsx @@ -221,7 +221,8 @@ const blogs: Blog[] = [ authors: ["Aditya-Singh-Rathore"], category: "data engineering", tags: ["Purview", "Data Catalog", "Onboarding", "Data Management", "Data Engineering"], - + }, + { id: 19, title: "Why Data Engineers Make Better Business Analysts Than MBAs Do", image: "/img/blogs/ba_de_cover_image.png", @@ -231,7 +232,8 @@ const blogs: Blog[] = [ authors: ["Aditya-Singh-Rathore"], category: "data engineering", tags: ["Data Engineers", "Business Analysts", "MBAs", "Data Understanding", "Business Decisions"], - + }, + { id: 20, title: "Google Changed Workspace Icon after 6 years", image: "/img/blogs/cover-google-icon.jpg",