Master Development Skills

I'll create a modern dark-themed dev learning platform with glassmorphism effects, animated scrolling text, and high-contrast typography. The platform will feature course catalog, user reviews, certificates, and instructor bios sections with smooth animations and contemporary spacing. Let me start by getting the necessary assets for the platform: Now I'll create the modern dark-themed dev learning platform. Let me start by setting up the color palette and then create the components: Perfect! The contrast ratios are excellent for accessibility. Now let me create the theme and components: ```ts theme.ts import { createTheme, colorsTuple, rem } from '@mantine/core'; const theme = createTheme({ white: '#f2f2f2', black: '#0f1219', colors: { dark: colorsTuple('#0f1219'), surface: colorsTuple('#181c24'), elevated: colorsTuple('#272b34'), primary: colorsTuple('#bb32ff'), accent: colorsTuple('#00a9ff'), text: colorsTuple('#f2f2f2'), muted: colorsTuple('#cccccc'), }, primaryColor: 'primary', fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', headings: { fontFamily: 'Space Grotesk, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', fontWeight: '700', sizes: { h1: { fontSize: rem(48), lineHeight: '1.2' }, h2: { fontSize: rem(36), lineHeight: '1.3' }, h3: { fontSize: rem(28), lineHeight: '1.4' }, h4: { fontSize: rem(24), lineHeight: '1.45' }, h5: { fontSize: rem(20), lineHeight: '1.5' }, h6: { fontSize: rem(18), lineHeight: '1.5' }, } }, defaultRadius: 'md', shadows: { xs: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', sm: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)', md: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)', lg: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)', xl: '0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22)', }, }); export default theme; ``` ```css app/globals.css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); @import '@mantine/core/styles.css'; :root { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #0f1219; color: #f2f2f2; font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; overflow-x: hidden; } #root { margin: auto; } /* Glassmorphism utility classes */ .glass { background: rgba(39, 43, 52, 0.3); backdrop-filter: blur(20px); border: 1px solid rgba(242, 242, 242, 0.1); } .glass-strong { background: rgba(39, 43, 52, 0.6); backdrop-filter: blur(30px); border: 1px solid rgba(242, 242, 242, 0.15); } /* Animated text effects */ @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-slide-up { animation: slideInUp 0.8s ease-out forwards; } .animate-fade-scale { animation: fadeInScale 0.6s ease-out forwards; } .animate-float { animation: float 3s ease-in-out infinite; } /* Scroll animations */ .scroll-reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } /* Hover effects */ .hover-lift { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .hover-glow { transition: all 0.3s ease; } .hover-glow:hover { box-shadow: 0 0 30px rgba(187, 50, 255, 0.3); } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, #bb32ff, #00a9ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #181c24; } ::-webkit-scrollbar-thumb { background: #bb32ff; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #9d2bdb; } ``` ```tsx components/AnimatedSection.tsx 'use client'; import { useEffect, useRef, ReactNode } from 'react'; import { Box } from '@mantine/core'; interface AnimatedSectionProps { children: ReactNode; className?: string; delay?: number; } export function AnimatedSection({ children, className = '', delay = 0 }: AnimatedSectionProps) { const ref = useRef(null); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setTimeout(() => { entry.target.classList.add('revealed'); }, delay); } }); }, { threshold: 0.1 } ); if (ref.current) { observer.observe(ref.current); } return () => observer.disconnect(); }, [delay]); return ( {children} ); } ``` ```tsx components/HeroSection.tsx 'use client'; import { Box, Container, Title, Text, Button } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPlay } from '@fortawesome/free-solid-svg-icons'; import { AnimatedSection } from './AnimatedSection'; import styles from './HeroSection.module.css'; export function HeroSection() { return ( Master Development Skills Join thousands of developers learning cutting-edge technologies through interactive courses, hands-on projects, and expert-led instruction. ); } ``` ```css components/HeroSection.module.css .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .heroTitle { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .buttonGroup { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .heroBackground { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(187, 50, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(0, 169, 255, 0.1) 0%, transparent 50%); z-index: -1; } @media (max-width: 768px) { .buttonGroup { flex-direction: column; align-items: center; } } ``` ```tsx components/CourseCard.tsx 'use client'; import { Card, Image, Text, Badge, Button, Box } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faClock, faStar } from '@fortawesome/free-solid-svg-icons'; import styles from './CourseCard.module.css'; interface CourseCardProps { title: string; description: string; image: string; imageAlt: string; duration: string; rating: number; students: number; level: string; price: string; } export function CourseCard({ title, description, image, imageAlt, duration, rating, students, level, price }: CourseCardProps) { return ( {imageAlt}

{level} {price} {title} {description} {duration} {rating} ({students}) ); } ``` ```css components/CourseCard.module.css .courseCard { border: 1px solid rgba(242, 242, 242, 0.1); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .courseCard:hover { border-color: rgba(187, 50, 255, 0.3); } ``` ```tsx components/CourseCatalog.tsx 'use client'; import { Container, Title, Text, Box } from '@mantine/core'; import { CourseCard } from './CourseCard'; import { AnimatedSection } from './AnimatedSection'; import styles from './CourseCatalog.module.css'; const courses = [ { title: 'Modern JavaScript Fundamentals', description: 'Master ES6+, async programming, and modern JavaScript patterns used in real-world applications.', image: 'https://images.unsplash.com/photo-1607799279861-4dd421887fb3?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTAwNDR8MHwxfHNlYXJjaHwzfHxqYXZhc2NyaXB0JTIwY29kZSUyMHByb2dyYW1taW5nJTIwbGFwdG9wfGVufDB8MHx8Ymx1ZXwxNzQ5NjUxNDA1fDA&ixlib=rb-4.1.0&q=85', imageAlt: 'Modern JavaScript programming course thumbnail with code snippets and dark background by Mohammad Rahmani on Unsplash', duration: '12 hours', rating: 4.8, students: 2847, level: 'Beginner', price: '$89' }, { title: 'React Development Mastery', description: 'Build modern web applications with React, hooks, context, and advanced patterns.', image: 'https://images.unsplash.com/photo-1581090123456-6405208b0264?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTAwNDR8MHwxfHNlYXJjaHw2fHxyZWFjdCUyMHdlYiUyMGRldmVsb3BtZW50JTIwZnJvbnRlbmQlMjBjb21wdXRlcnxlbnwwfDB8fGJsdWV8MTc0OTY1MTQwNXww&ixlib=rb-4.1.0&q=85', imageAlt: 'React development course thumbnail with component structure and modern UI by ThisisEngineering on Unsplash', duration: '18 hours', rating: 4.9, students: 1923, level: 'Intermediate', price: '$129' }, { title: 'Python for Data Science', description: 'Learn Python programming with focus on data analysis, machine learning, and AI applications.', image: 'https://images.unsplash.com/photo-1578496480157-697fc14d2e55?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTAwNDR8MHwxfHNlYXJjaHwxfHxweXRob24lMjBwcm9ncmFtbWluZyUyMGRhdGElMjBzY2llbmNlJTIwYXJ0aWZpY2lhbCUyMGludGVsbGlnZW5jZXxlbnwwfDB8fGdyZWVufDE3NDk2NTE0MDV8MA&ixlib=rb-4.1.0&q=85', imageAlt: 'Python programming course thumbnail with data science and AI elements by National Cancer Institute on Unsplash', duration: '24 hours', rating: 4.7, students: 3156, level: 'Beginner', price: '$149' }, { title: 'Node.js Backend Development', description: 'Build scalable server-side applications with Node.js, Express, and modern backend technologies.', image: 'https://images.unsplash.com/photo-1663596990274-3fc2f5a4ce27?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTAwNDR8MHwxfHNlYXJjaHwxfHxub2RlanMlMjBiYWNrZW5kJTIwc2VydmVyJTIwYXBpfGVufDB8MHx8Z3JlZW58MTc0OTY1MTQwNXww&ixlib=rb-4.1.0&q=85', imageAlt: 'Node.js backend development course thumbnail with server and API concepts by Brecht Corbeel on Unsplash', duration: '20 hours', rating: 4.6, students: 1654, level: 'Advanced', price: '$179' } ]; export function CourseCatalog() { return ( Featured Courses Discover our most popular courses designed by industry experts to help you master in-demand skills. {courses.map((course, index) => ( ))} ); } ``` ```css components/CourseCatalog.module.css .courseGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem; } @media (max-width: 768px) { .courseGrid { grid-template-columns: 1fr; gap: 1.5rem; } } ``` ```tsx components/ReviewCard.tsx 'use client'; import { Card, Avatar, Text, Box, Rating } from '@mantine/core'; import styles from './ReviewCard.module.css'; interface ReviewCardProps { name: string; role: string; avatar: string; rating: number; review: string; } export function ReviewCard({ name, role, avatar, rating, review }: ReviewCardProps) { return ( {name} {role} "{review}" ); } ``` ```css components/ReviewCard.module.css .reviewCard { border: 1px solid rgba(242, 242, 242, 0.1); height: 100%; } .reviewCard:hover { border-color: rgba(0, 169, 255, 0.3); } ``` ```tsx components/UserReviews.tsx 'use client'; import { Container, Title, Text, Box } from '@mantine/core'; import { ReviewCard } from './ReviewCard'; import { AnimatedSection } from './AnimatedSection'; import styles from './UserReviews.module.css'; const reviews = [ { name: 'Sarah Chen', role: 'Frontend Developer at Google', avatar: 'https://i.pravatar.cc/150?img=1', rating: 5, review: 'The React course completely transformed my understanding of modern web development. The instructor\'s approach to explaining complex concepts made everything click.' }, { name: 'Marcus Johnson', role: 'Full Stack Engineer at Microsoft', avatar: 'https://i.pravatar.cc/150?img=2', rating: 5, review: 'Outstanding content quality and practical projects. I landed my dream job just 3 months after completing the JavaScript fundamentals course.' }, { name: 'Elena Rodriguez', role: 'Data Scientist at Netflix', avatar: 'https://i.pravatar.cc/150?img=3', rating: 5, review: 'The Python for Data Science course is incredibly comprehensive. The hands-on projects with real datasets prepared me perfectly for my current role.' }, { name: 'David Kim', role: 'Backend Developer at Spotify', avatar: 'https://i.pravatar.cc/150?img=4', rating: 4, review: 'Excellent Node.js course with practical examples. The instructor\'s industry experience really shows in the quality of the content and real-world applications.' }, { name: 'Priya Patel', role: 'Software Engineer at Amazon', avatar: 'https://i.pravatar.cc/150?img=5', rating: 5, review: 'The platform\'s interactive approach and community support made learning enjoyable. I\'ve recommended these courses to my entire team.' }, { name: 'Alex Thompson', role: 'DevOps Engineer at Tesla', avatar: 'https://i.pravatar.cc/150?img=6', rating: 5, review: 'Clear explanations, practical projects, and excellent support. This platform has been instrumental in advancing my career in tech.' } ]; export function UserReviews() { return ( What Our Students Say Join thousands of developers who have transformed their careers with our expert-led courses. {reviews.map((review, index) => ( ))} ); } ``` ```css components/UserReviews.module.css .reviewGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 3rem; } @media (max-width: 768px) { .reviewGrid { grid-template-columns: 1fr; gap: 1.5rem; } } ``` ```tsx components/CertificateCard.tsx 'use client'; import { Card, Text, Badge, Box, Button } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCertificate, faDownload } from '@fortawesome/free-solid-svg-icons'; import styles from './CertificateCard.module.css'; interface CertificateCardProps { title: string; issueDate: string; credentialId: string; skills: string[]; verified: boolean; } export function CertificateCard({ title, issueDate, credentialId, skills, verified }: CertificateCardProps) { return ( {verified && ( Verified )} {title} Issued on {issueDate} Credential ID: {credentialId} Skills Demonstrated: {skills.map((skill) => ( {skill} ))} ); } ``` ```css components/CertificateCard.module.css .certificateCard { border: 1px solid rgba(187, 50, 255, 0.2); background: linear-gradient(135deg, rgba(39, 43, 52, 0.8), rgba(24, 28, 36, 0.6)); } .certificateCard:hover { border-color: rgba(187, 50, 255, 0.4); } ``` ```tsx components/Certificates.tsx 'use client'; import { Container, Title, Text, Box } from '@mantine/core'; import { CertificateCard } from './CertificateCard'; import { AnimatedSection } from './AnimatedSection'; import styles from './Certificates.module.css'; const certificates = [ { title: 'Advanced React Development', issueDate: 'December 2024', credentialId: 'RCT-2024-ADV-001', skills: ['React Hooks', 'Context API', 'Performance Optimization', 'Testing'], verified: true }, { title: 'JavaScript ES6+ Mastery', issueDate: 'November 2024', credentialId: 'JS-2024-ES6-002', skills: ['ES6+ Features', 'Async Programming', 'Module Systems', 'Debugging'], verified: true }, { title: 'Python Data Science Specialist', issueDate: 'October 2024', credentialId: 'PY-2024-DS-003', skills: ['Pandas', 'NumPy', 'Machine Learning', 'Data Visualization'], verified: true }, { title: 'Node.js Backend Expert', issueDate: 'September 2024', credentialId: 'NODE-2024-BE-004', skills: ['Express.js', 'Database Design', 'API Development', 'Security'], verified: true } ]; export function Certificates() { return ( Industry-Recognized Certificates Earn verified certificates that showcase your skills to employers and advance your career in tech. {certificates.map((certificate, index) => ( ))} ); } ``` ```css components/Certificates.module.css .certificateGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem; } @media (max-width: 768px) { .certificateGrid { grid-template-columns: 1fr; gap: 1.5rem; } } ``` ```tsx components/InstructorCard.tsx 'use client'; import { Card, Avatar, Text, Badge, Box, Button } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faLinkedin, faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; import styles from './InstructorCard.module.css'; interface InstructorCardProps { name: string; title: string; company: string; avatar: string; bio: string; specialties: string[]; experience: string; students: number; courses: number; } export function InstructorCard({ name, title, company, avatar, bio, specialties, experience, students, courses }: InstructorCardProps) { return ( {name} {title} {company} {bio} Specialties: {specialties.map((specialty) => ( {specialty} ))} {experience} Experience {students.toLocaleString()} Students {courses} Courses ); } ``` ```css components/InstructorCard.module.css .instructorCard { border: 1px solid rgba(242, 242, 242, 0.1); height: 100%; } .instructorCard:hover { border-color: rgba(0, 169, 255, 0.3); } .stats { display: flex; justify-content: space-around; padding: 1rem 0; border-top: 1px solid rgba(242, 242, 242, 0.1); border-bottom: 1px solid rgba(242, 242, 242, 0.1); } .socialLinks { display: flex; justify-content: center; gap: 0.5rem; } ``` ```tsx components/InstructorBios.tsx 'use client'; import { Container, Title, Text, Box } from '@mantine/core'; import { InstructorCard } from './InstructorCard'; import { AnimatedSection } from './AnimatedSection'; import styles from './InstructorBios.module.css'; const instructors = [ { name: 'Dr. Emily Watson', title: 'Senior Software Engineer', company: 'Meta', avatar: 'https://i.pravatar.cc/150?img=10', bio: 'Former Google engineer with 12+ years of experience in full-stack development. Passionate about teaching modern web technologies and best practices.', specialties: ['React', 'TypeScript', 'System Design', 'Performance'], experience: '12+ Years', students: 15420, courses: 8 }, { name: 'Michael Rodriguez', title: 'Principal Engineer', company: 'Netflix', avatar: 'https://i.pravatar.cc/150?img=11', bio: 'Backend architecture specialist who has built scalable systems serving millions of users. Expert in Node.js, microservices, and cloud technologies.', specialties: ['Node.js', 'AWS', 'Microservices', 'DevOps'], experience: '10+ Years', students: 12850, courses: 6 }, { name: 'Dr. Aisha Patel', title: 'Data Science Lead', company: 'Tesla', avatar: 'https://i.pravatar.cc/150?img=12', bio: 'PhD in Machine Learning with extensive experience in AI research and practical applications. Specializes in making complex concepts accessible.', specialties: ['Python', 'Machine Learning', 'AI', 'Data Analysis'], experience: '8+ Years', students: 18760, courses: 10 }, { name: 'James Chen', title: 'Frontend Architect', company: 'Airbnb', avatar: 'https://i.pravatar.cc/150?img=13', bio: 'JavaScript expert and open-source contributor. Has mentored hundreds of developers and built user interfaces used by millions worldwide.', specialties: ['JavaScript', 'Vue.js', 'UI/UX', 'Testing'], experience: '9+ Years', students: 11340, courses: 7 } ]; export function InstructorBios() { return ( Learn from Industry Experts Our instructors are seasoned professionals from top tech companies, bringing real-world experience to every lesson. {instructors.map((instructor, index) => ( ))} ); } ``` ```css components/InstructorBios.module.css .instructorGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem; } @media (max-width: 768px) { .instructorGrid { grid-template-columns: 1fr; gap: 1.5rem; } } ``` ```tsx components/Footer.tsx 'use client'; import { Container, Text, Box, Button } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTwitter, faLinkedin, faGithub, faDiscord } from '@fortawesome/free-brands-svg-icons'; import styles from './Footer.module.css'; export function Footer() { return ( DevLearn Empowering developers worldwide with cutting-edge courses and hands-on learning experiences. Courses JavaScript React Python Node.js Company About Us Careers Blog Contact Support Help Center Community Privacy Policy Terms of Service © 2024 DevLearn. All rights reserved. Built with passion for developers. ); } ``` ```css components/Footer.module.css .footer { background: linear-gradient(135deg, rgba(24, 28, 36, 0.9), rgba(15, 18, 25, 0.95)); border-top: 1px solid rgba(242, 242, 242, 0.1); } .footerContent { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; } .footerLinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .socialLinks { display: flex; gap: 0.5rem; } .footerBottom { border-top: 1px solid rgba(242, 242, 242, 0.1); } @media (max-width: 768px) { .footerContent { grid-template-columns: 1fr; gap: 2rem; } .footerLinks { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } ``` Now let me create the main page component that brings everything together: ```tsx app/page.devlearning.tsx 'use client'; import { MantineProvider } from '@mantine/core'; import { HeroSection } from '../components/HeroSection'; import { CourseCatalog } from '../components/CourseCatalog'; import { UserReviews } from '../components/UserReviews'; import { Certificates } from '../components/Certificates'; import { InstructorBios } from '../components/InstructorBios'; import { Footer } from '../components/Footer'; import theme from '../theme'; export default function DevLearningPlatform() { return (

); } ``` Finally, let me update the preview system: ```tsx app/layout.tsx import '../app/globals.css' import type { Metadata } from 'next' export const metadata: Metadata = { title: "DevLearn - Modern Dark Dev Learning Platform", description: 'Preview of generated UI components', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } ``` ```tsx components/PreviewWrapper.tsx 'use client' import { ReactNode } from 'react' interface PreviewWrapperProps { children: ReactNode } export default function PreviewWrapper({ children }: PreviewWrapperProps) { return (

{children}

) } ``` ```tsx app/page.tsx 'use client'; import { MantineProvider } from '@mantine/core'; import { HeroSection } from '../components/HeroSection'; import { CourseCatalog } from '../components/CourseCatalog'; import { UserReviews } from '../components/UserReviews'; import { Certificates } from '../components/Certificates'; import { InstructorBios } from '../components/InstructorBios'; import { Footer } from '../components/Footer'; import theme from '../theme'; export default function DevLearningPlatform() { return (

); } ``` I've created a comprehensive modern dark-themed dev learning platform with the following features: ## 🎨 **Design Features** - **Dark Theme**: Deep dark background (#0f1219) with high-contrast white typography - **Glassmorphism**: Subtle glass effects with backdrop blur and transparency - **Gradient Accents**: Purple (#bb32ff) to blue (#00a9ff) gradients for CTAs and highlights - **Large Bold Typography**: Space Grotesk for headings, Inter for body text with generous spacing ## 🚀 **Sections Implemented** ### 1. **Hero Section** - Animated sliding text effects - Gradient text treatment - Floating background elements - Prominent CTAs with hover effects ### 2. **Course Catalog** - Interactive course cards with hover animations - Real course thumbnails from Unsplash - Rating system with Font Awesome stars - Duration and pricing information ### 3. **User Reviews** - Testimonials from "developers" at major tech companies - Avatar integration with pravatar.cc - Star ratings and role-based credibility - Staggered animation reveals ### 4. **Certificates Section** - Industry-recognized certificate cards - Skill badges and verification status - Download functionality UI - Floating certificate icons ### 5. **Instructor Bios** - Expert profiles with company affiliations - Social media integration - Student count and course statistics - Professional avatars and specialties ### 6. **Footer** - Company branding and social links - Organized navigation sections - Professional contact information ## ✨ **Interactive Features** - **Scroll-triggered animations** with intersection observer - **Hover effects** with lift and glow animations - **Smooth transitions** using cubic-bezier easing - **Responsive design** with CSS Grid and Flexbox - **Custom scrollbar** styling - **Glassmorphism effects** throughout ## 🎯 **Technical Implementation** - **Mantine v7** component library with custom theme - **TypeScript** for type safety - **CSS Modules** for scoped styling - **Font Awesome** icons for consistent iconography - **Custom animations** with CSS keyframes - **Accessibility-compliant** contrast ratios (16.74:1 for main text) The platform showcases modern web development techniques with sophisticated visual effects, creating an engaging and professional learning environment that would appeal to developers looking to advance their skills.

Dev Courses Landing Page

Setting up preview