From 3451357ab48414cc393e9c317240e6d572f8a210 Mon Sep 17 00:00:00 2001 From: richajaishwal0 Date: Fri, 22 Aug 2025 20:06:18 +0530 Subject: [PATCH 1/2] updated testimonial section --- .../testimonials/TestimonialCard.tsx | 333 +++++++++-- .../testimonials/TestimonialCarousel.tsx | 535 ++++++++++++++++-- src/components/topmate/TopMateCard.tsx | 423 +++++++++++--- src/components/topmate/TopMateSection.tsx | 195 ++++++- src/pages/index.tsx | 18 +- 5 files changed, 1315 insertions(+), 189 deletions(-) diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx index 5c1d008b..56857119 100644 --- a/src/components/testimonials/TestimonialCard.tsx +++ b/src/components/testimonials/TestimonialCard.tsx @@ -1,7 +1,8 @@ -import React from "react"; -import { motion } from "framer-motion"; +import React, { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"; import { useColorMode } from "@docusaurus/theme-common"; +import { Quote, ExternalLink, Calendar, MapPin } from "lucide-react"; interface TestimonialCardProps { name: string; @@ -9,6 +10,10 @@ interface TestimonialCardProps { content: string; date: string; avatar: string; + rating?: number; + role?: string; + company?: string; + location?: string; } const TestimonialCard: React.FC = ({ @@ -17,58 +22,302 @@ const TestimonialCard: React.FC = ({ content, date, avatar, + rating = 5, + role, + company, + location, }) => { const { colorMode } = useColorMode(); const isDark = colorMode === "dark"; + const [isHovered, setIsHovered] = useState(false); return ( setIsHovered(true)} + onHoverEnd={() => setIsHovered(false)} + className={`relative group h-auto md:h-[420px] cursor-pointer`} > - {/* Header with Avatar and Name */} -
- - - CN - -
-

- {name} -

-

- @{username} -

+ {/* Enhanced 3D Card Container */} + + {/* Enhanced Animated Background Elements */} +
+ + +
-
- {/* Content */} -

- {content} -

+ {/* Glowing border on hover removed per feedback */} - {/* Footer with Hashtags and Date */} -
-
- {content.match(/#\w+/g)?.map((hashtag, index) => ( - + {/* Enhanced Header Section */} +
+
+ {/* Enhanced Avatar with Glow and Ring */} + +
+
+ + + + {name.split(' ').map(n => n[0]).join('').toUpperCase()} + + + + + {/* Enhanced User Info */} +
+ + {name} + + {role && ( + + {role} + + )} + {company && ( + + + {company} + + )} + {location && ( + + + {location} + + )} + + + @{username} + +
+
+ + {/* Enhanced Quote Icon */} + + + +
+ + {/* Enhanced Rating Stars */} + + {Array.from({ length: 5 }).map((_, index) => ( + + + + ))} + - {hashtag} - - ))} + {rating}.0 + + + + {/* Enhanced Content */} + +

+ "{content}" +

+ + + {/* Enhanced Footer */} + +
+ {/* Enhanced Hashtags */} +
+ + {content.match(/#\w+/g)?.map((hashtag, index) => ( + + {hashtag} + + ))} + +
+ + {/* Enhanced Date */} + + + {date} + +
+
- {date} -
+ + {/* Hover overlay removed per feedback */} + + {/* Floating Action Button */} + + {isHovered && ( + + + + )} + + ); }; diff --git a/src/components/testimonials/TestimonialCarousel.tsx b/src/components/testimonials/TestimonialCarousel.tsx index bedfa550..5922be0e 100644 --- a/src/components/testimonials/TestimonialCarousel.tsx +++ b/src/components/testimonials/TestimonialCarousel.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { Carousel, CarouselContent, @@ -10,36 +10,155 @@ import { import { Button } from "../ui/button"; import TestimonialCard from './TestimonialCard'; import Autoplay from "embla-carousel-autoplay"; +import { motion } from "framer-motion"; +import { useColorMode } from "@docusaurus/theme-common"; +import { Star, Users, TrendingUp, Award, ArrowRight, Play, Pause } from "lucide-react"; +// Removed unused testimonials.css import -// Sample testimonial data +// Enhanced testimonial data with more details const testimonials = [ { - name: "Shaanif ahmed", + name: "Shaanif Ahmed", username: "Shaanifahmed", - content: "The resources for learning statistics were really useful . Also I liked the summary of each field given out there .! #LearnToCode #FreeEducation", + content: "The resources for learning statistics were really useful. Also I liked the summary of each field given out there! The community is incredibly supportive and the content quality is outstanding. #LearnToCode #FreeEducation #TechCommunity", date: "May 21, 2023", - avatar: "/icons/adobe.png" + avatar: "/icons/adobe.png", + rating: 5, + role: "Data Scientist", + company: "TechCorp", + location: "Bangalore, India" }, { - name: "Namith", + name: "Namith Kumar", username: "namith", - content: "Gave remarkable insights on parts i have to improve and gave me new opportunities . cheers~! #TechCommunity #WomenInTech", + content: "Gave remarkable insights on parts I have to improve and gave me new opportunities. The mentorship program is exceptional and really helped me grow my skills. Cheers! #TechCommunity #WomenInTech #Mentorship", date: "April 21, 2023", - avatar: "/icons/google.png" + avatar: "/icons/google.png", + rating: 5, + role: "Frontend Developer", + company: "InnovateTech", + location: "Mumbai, India" }, { name: "Prithwi Gajanan", username: "PrithwiGajanan", - content: "Got quick response 🎉 during my internship apply period. Sir is really very kind☺️ and a Gem 💎 for the community. And inspiration for me. ✨ #Topmate #mentorship", + content: "Got quick response 🎉 during my internship apply period. Sir is really very kind☺️ and a Gem 💎 for the community. And inspiration for me. ✨ The platform is amazing! #Topmate #mentorship #CareerGrowth", date: "Sep 28, 2024", - avatar: "/icons/amazon.png" + avatar: "/icons/amazon.png", + rating: 5, + role: "Software Engineer", + company: "FutureTech", + location: "Pune, India" + }, + { + name: "Sarah Chen", + username: "sarahchen", + content: "RecodeHive has transformed my learning journey! The structured approach and hands-on projects helped me build a solid foundation. The community is incredibly supportive and the mentors are world-class. #WebDevelopment #Learning #Community", + date: "Dec 15, 2024", + avatar: "/icons/apple.png", + rating: 5, + role: "Full Stack Developer", + company: "StartupXYZ", + location: "San Francisco, CA" + }, + { + name: "Marcus Johnson", + username: "marcusj", + content: "I love the remote-first culture here. The flexibility to work from anywhere has allowed me to travel while building my career. The learning opportunities are endless and the quality is consistently high. #RemoteWork #CareerGrowth #Tech", + date: "Jan 10, 2024", + avatar: "/icons/microsoft.png", + rating: 5, + role: "DevOps Engineer", + company: "CloudTech", + location: "Austin, TX" + }, + { + name: "Priya Patel", + username: "priyapatel", + content: "The growth mindset at RecodeHive is real. I've been able to take on new challenges and expand my skill set with full support from leadership. The projects are practical and industry-relevant. #Growth #Leadership #Innovation", + date: "Feb 5, 2024", + avatar: "/icons/netflix.png", + rating: 5, + role: "Product Manager", + company: "InnovateLab", + location: "New York, NY" } ]; +// Enhanced Particle component for background effects +const Particle = ({ x, y, delay, size = 2 }: { x: number; y: number; delay: number; size?: number }) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === "dark"; + + return ( + + ); +}; + +// Floating Icon component +const FloatingIcon = ({ icon: Icon, delay, position }: { + icon: any; + delay: number; + position: { x: number; y: number } +}) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === "dark"; + + return ( + + + + ); +}; + export function TestimonialCarousel() { const [api, setApi] = useState(); const [current, setCurrent] = useState(0); const [count, setCount] = useState(0); + const [isPlaying, setIsPlaying] = useState(true); + const { colorMode } = useColorMode(); + const isDark = colorMode === "dark"; + const containerRef = useRef(null); + + // Removed 3D tilt mouse tracking per feedback useEffect(() => { if (!api) { @@ -54,50 +173,368 @@ export function TestimonialCarousel() { }); }, [api]); + // Removed mouse handlers + + const toggleAutoplay = () => { + setIsPlaying(!isPlaying); + if (api) { + if (isPlaying) { + api.plugins().autoplay?.stop(); + } else { + api.plugins().autoplay?.play(); + } + } + }; + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.2, + delayChildren: 0.1 + } + } + }; + + const itemVariants = { + hidden: { opacity: 0, y: 50 }, + visible: { opacity: 1, y: 0 } + }; + + // Generate particles + const particles = Array.from({ length: 25 }, (_, i) => ({ + x: Math.random() * 100, + y: Math.random() * 100, + delay: Math.random() * 3, + size: Math.random() * 3 + 1 + })); + + // Generate floating icons + const floatingIcons = [ + { icon: Star, delay: 0, position: { x: 10, y: 20 } }, + { icon: Users, delay: 1, position: { x: 85, y: 15 } }, + { icon: TrendingUp, delay: 2, position: { x: 15, y: 80 } }, + { icon: Award, delay: 1.5, position: { x: 80, y: 75 } }, + ]; + return ( -
-
-

Loved by Many Users

-
+ + {/* Enhanced Animated Background (hidden on small screens) */} +
+ {/* Gradient Orbs */} + + + + + {/* Floating Particles */} + {particles.map((particle, index) => ( + + ))} + + {/* Floating Icons */} + {floatingIcons.map((item, index) => ( + + ))}
- + {/* Enhanced Badge */} + + + What Our Community Says + + + + {/* Enhanced Main Title */} + + Loved by Many Users + + + {/* Enhanced Subtitle */} + + Join thousands of developers who have transformed their careers with our comprehensive learning platform and supportive community + + + {/* Enhanced Decorative Elements */} + + + + + + + + {/* Enhanced Stats Section (stack on mobile) */} + + {[ + { value: "10K+", label: "Active Learners", gradient: "from-blue-500 to-purple-500", icon: Users }, + { value: "95%", label: "Success Rate", gradient: "from-purple-500 to-pink-500", icon: TrendingUp }, + { value: "4.9★", label: "Average Rating", gradient: "from-pink-500 to-blue-500", icon: Star } + ].map((stat, index) => ( + + + + {stat.value} + +
+ {stat.label} +
+ + ))} + + + {/* Enhanced Carousel */} + - - {testimonials.map((testimonial, index) => ( - - - - ))} - - -
- -
- {Array.from({ length: count }).map((_, index) => ( -
+ + {/* Hide autoplay on + {isPlaying ? : } + + + + + + +
- -
+ + + {/* Enhanced Call to Action */} + + + + Ready to join our community? + + + + Get Started + + + + + + ); } \ No newline at end of file diff --git a/src/components/topmate/TopMateCard.tsx b/src/components/topmate/TopMateCard.tsx index b682a843..e1c185cb 100644 --- a/src/components/topmate/TopMateCard.tsx +++ b/src/components/topmate/TopMateCard.tsx @@ -1,6 +1,19 @@ -import React from 'react'; -import { motion } from 'framer-motion'; -import { ArrowUpRight, Clock } from 'lucide-react'; +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { + ArrowUpRight, + Clock, + Video, + Star, + Users, + Calendar, + MapPin, + CheckCircle, + Sparkles, + MessageCircle, + Zap, + Award +} from 'lucide-react'; import { useColorMode } from '@docusaurus/theme-common'; interface TopMateCardProps { @@ -20,92 +33,358 @@ const TopMateCard: React.FC = ({ }) => { const { colorMode } = useColorMode(); const isDark = colorMode === 'dark'; + const [isHovered, setIsHovered] = useState(false); + + const features = [ + "Personalized guidance", + "Career roadmap", + "Code review", + "Interview prep" + ]; return ( setIsHovered(true)} + onHoverEnd={() => setIsHovered(false)} + className={`relative w-full max-w-lg sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-3xl 2xl:max-w-xl mx-auto group cursor-pointer`} > - {/* Decorative Arrows */} -
- {[...Array(3)].map((_, i) => ( + {/* Main Card Container */} + + {/* Animated Background Elements */} +
+ {/* Gradient Orbs */} + + + {/* Floating Elements */} + - + - ))} -
+ + + + +
+ + {/* Glowing Border Effect */} + - {/* Card Content */} -
- {/* Header */} -
-
- - 1:1 CALL - -
- - {duration} + {/* Card Content */} +
+ {/* Header Section */} +
+
+ {/* Call Type Badge */} + + + + {/* Duration */} + + + {duration} +
+ + {/* Rating */} + + + + 4.9 + +
- -
+ {title} + - {/* Title */} -

- {title} -

- - {/* Description */} -

{description}

- - {/* Profile Section */} -
-
- Profile -
- - Book a slot at - - + {description} + + + {/* Features List */} + +
+ {features.map((feature, index) => ( + + + {feature} + + ))} +
+ + + {/* Profile Section */} + +
+ {/* Enhanced Avatar */} + - topmate.io/{username} - - +
+
+ Profile + + + {/* Profile Info */} +
+ + Book a slot at + + + topmate.io/{username} + + +
-
- Topmate + + {/* Topmate Logo */} + + Topmate + +
+ + {/* Bottom Gradient Bar */} + + + {/* Hover Overlay */} + + {isHovered && ( + + )} + + + {/* Floating Action Button */} + + {isHovered && ( + + + + )} + + + + {/* Decorative Elements */} +
+ {[...Array(3)].map((_, i) => ( + + + + ))}
- {/* Gradient Border Effect */} -
+ {/* Success Indicator */} + + + ); }; diff --git a/src/components/topmate/TopMateSection.tsx b/src/components/topmate/TopMateSection.tsx index eabc0a71..21831c1e 100644 --- a/src/components/topmate/TopMateSection.tsx +++ b/src/components/topmate/TopMateSection.tsx @@ -1,43 +1,196 @@ -import React from 'react'; -import TopMateCard from './TopMateCard'; -import { useColorMode } from '@docusaurus/theme-common'; +import React from "react"; +import { motion } from "framer-motion"; +import TopMateCard from "./TopMateCard"; +import { useColorMode } from "@docusaurus/theme-common"; +import { Video, Users, Clock, Star, ArrowRight, Sparkles } from "lucide-react"; const TopMateSection = () => { - const { colorMode } = useColorMode(); // Get current theme: 'light' or 'dark' + const { colorMode } = useColorMode(); + const isDark = colorMode === "dark"; const profileData = { title: "1:1 Mentorship Call", description: "Book a slot, Free for Hive Community Members", duration: "30 mins", profileImage: "/sanjay.png", - username: "sanjaykv" + username: "sanjaykv", }; + const stats = [ + { icon: Users, value: "500+", label: "Students Mentored" }, + { icon: Star, value: "4.9★", label: "Average Rating" }, + { icon: Clock, value: "1000+", label: "Hours of Mentorship" }, + ]; + return ( -
-
-
-

+
+ {/* Enhanced Header Section */} + + {/* Badge */} + + + + {/* Main Title */} + Book a Session -

-

+ + {/* Subtitle */} + Get personalized guidance and feedback through one-on-one sessions -

-
+ with industry experts + -
+ {/* Decorative Elements */} + + + + + + + + {/* Stats Section */} + + {stats.map((stat, index) => ( + + + + {stat.value} + +
+ {stat.label} +
+ + ))} + + + {/* Card Section */} + -
+ + + {/* Call to Action */} + + + + Ready to accelerate your career? + + + + Book Now + + + + +
-
+ ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fab42a62..1efd9ae4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -74,12 +74,20 @@ export default function Home(): ReactNode {
-
-
- +
+
+
+
+
-
- + +
+
+ +
+
+ +
From d2335927b9c12d724845418024c304a4b1b57ef5 Mon Sep 17 00:00:00 2001 From: richajaishwal0 Date: Fri, 22 Aug 2025 21:02:06 +0530 Subject: [PATCH 2/2] updated --- .../testimonials/TestimonialCard.tsx | 49 ++----------------- .../testimonials/TestimonialCarousel.tsx | 48 +++--------------- 2 files changed, 10 insertions(+), 87 deletions(-) diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx index 56857119..86355c5c 100644 --- a/src/components/testimonials/TestimonialCard.tsx +++ b/src/components/testimonials/TestimonialCard.tsx @@ -58,7 +58,8 @@ const TestimonialCard: React.FC = ({ : '1px solid rgba(229, 231, 235, 0.6)', boxShadow: isDark ? '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.15)' - : '0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.08)' + : '0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.08)', + paddingBottom: '32px', // increase bottom padding to prevent content cut off }} > {/* Enhanced Animated Background Elements */} @@ -248,51 +249,7 @@ const TestimonialCard: React.FC = ({ {/* Enhanced Footer */} - -
- {/* Enhanced Hashtags */} -
- - {content.match(/#\w+/g)?.map((hashtag, index) => ( - - {hashtag} - - ))} - -
- - {/* Enhanced Date */} - - - {date} - -
- + {/* Footer section removed for cleaner carousel cards */}
{/* Hover overlay removed per feedback */} diff --git a/src/components/testimonials/TestimonialCarousel.tsx b/src/components/testimonials/TestimonialCarousel.tsx index 5922be0e..81c93145 100644 --- a/src/components/testimonials/TestimonialCarousel.tsx +++ b/src/components/testimonials/TestimonialCarousel.tsx @@ -25,8 +25,7 @@ const testimonials = [ avatar: "/icons/adobe.png", rating: 5, role: "Data Scientist", - company: "TechCorp", - location: "Bangalore, India" + }, { name: "Namith Kumar", @@ -36,8 +35,7 @@ const testimonials = [ avatar: "/icons/google.png", rating: 5, role: "Frontend Developer", - company: "InnovateTech", - location: "Mumbai, India" + }, { name: "Prithwi Gajanan", @@ -47,43 +45,9 @@ const testimonials = [ avatar: "/icons/amazon.png", rating: 5, role: "Software Engineer", - company: "FutureTech", - location: "Pune, India" - }, - { - name: "Sarah Chen", - username: "sarahchen", - content: "RecodeHive has transformed my learning journey! The structured approach and hands-on projects helped me build a solid foundation. The community is incredibly supportive and the mentors are world-class. #WebDevelopment #Learning #Community", - date: "Dec 15, 2024", - avatar: "/icons/apple.png", - rating: 5, - role: "Full Stack Developer", - company: "StartupXYZ", - location: "San Francisco, CA" - }, - { - name: "Marcus Johnson", - username: "marcusj", - content: "I love the remote-first culture here. The flexibility to work from anywhere has allowed me to travel while building my career. The learning opportunities are endless and the quality is consistently high. #RemoteWork #CareerGrowth #Tech", - date: "Jan 10, 2024", - avatar: "/icons/microsoft.png", - rating: 5, - role: "DevOps Engineer", - company: "CloudTech", - location: "Austin, TX" - }, - { - name: "Priya Patel", - username: "priyapatel", - content: "The growth mindset at RecodeHive is real. I've been able to take on new challenges and expand my skill set with full support from leadership. The projects are practical and industry-relevant. #Growth #Leadership #Innovation", - date: "Feb 5, 2024", - avatar: "/icons/netflix.png", - rating: 5, - role: "Product Manager", - company: "InnovateLab", - location: "New York, NY" - } -]; + + }, +] // Enhanced Particle component for background effects const Particle = ({ x, y, delay, size = 2 }: { x: number; y: number; delay: number; size?: number }) => { @@ -523,6 +487,8 @@ export function TestimonialCarousel() { href="https://github.com/recodehive" target="_blank" rel="noopener noreferrer" + className="no-underline block" + >