diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx index 5c1d008b..86355c5c 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,259 @@ 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 */} + {/* Footer section removed for cleaner carousel cards */}
- {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..81c93145 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,119 @@ 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", + }, { - 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", + }, { 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", + + }, +] + +// 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 +137,370 @@ 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) */} + - - {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 {
-
-
- +
+
+
+
+
-
- + +
+
+ +
+
+ +