Kombai Showcase

Dev Courses Landing Page

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:

tstheme.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;

cssglobals.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;
}

tsxAnimatedSection.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<HTMLDivElement>(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 (
    <Box ref={ref} className={`scroll-reveal ${className}`}>
      {children}
    </Box>
  );
}

tsxHeroSection.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 (
    <Box className={styles.hero}>
      <Container size="xl" py={120}>
        <AnimatedSection>
          <Box ta="center" maw={800} mx="auto">
            <Title 
              order={1} 
              className={`${styles.heroTitle} gradient-text animate-slide-up`}
              mb={24}
            >
              Master Development Skills
            </Title>
            <Text 
              size="xl" 
              c="muted.4" 
              mb={40}
              className="animate-slide-up"
              style={{ animationDelay: '0.2s' }}
            >
              Join thousands of developers learning cutting-edge technologies through 
              interactive courses, hands-on projects, and expert-led instruction.
            </Text>
            <Box className={`${styles.buttonGroup} animate-fade-scale`} style={{ animationDelay: '0.4s' }}>
              <Button 
                size="xl" 
                variant="gradient" 
                gradient={{ from: 'primary.6', to: 'accent.6' }}
                leftSection={<FontAwesomeIcon icon={faPlay} />}
                className="hover-glow"
                mr={16}
              >
                Start Learning
              </Button>
              <Button 
                size="xl" 
                variant="outline" 
                c="text.0"
                className="glass hover-lift"
              >
                Browse Courses
              </Button>
            </Box>
          </Box>
        </AnimatedSection>
      </Container>
      <Box className={styles.heroBackground} />
    </Box>
  );
}

cssHeroSection.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;
  }
}

tsxCourseCard.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 (
    <Card 
      className={`${styles.courseCard} glass hover-lift`}
      radius="lg"
      p="lg"
    >
      <Card.Section>
        <Image
          src={image}
          alt={imageAlt}
          height={200}
          style={{ objectFit: 'cover' }}
        />
      </Card.Section>

      <Box mt="md">
        <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }} mb="xs">
          <Badge 
            variant="gradient" 
            gradient={{ from: 'primary.6', to: 'accent.6' }}
            size="sm"
          >
            {level}
          </Badge>
          <Text fw={700} size="lg" c="primary.4">
            {price}
          </Text>
        </Box>

        <Text fw={600} size="lg" c="text.0" mb="xs">
          {title}
        </Text>

        <Text size="sm" c="muted.4" mb="md" lineClamp={2}>
          {description}
        </Text>

        <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} mb="md">
          <Box style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <FontAwesomeIcon icon={faClock} style={{ color: '#cccccc', fontSize: '0.875rem' }} />
            <Text size="sm" c="muted.4">{duration}</Text>
          </Box>
          <Box style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
            <FontAwesomeIcon icon={faStar} style={{ color: '#bb32ff', fontSize: '0.875rem' }} />
            <Text size="sm" c="text.0" fw={500}>{rating}</Text>
            <Text size="sm" c="muted.4">({students})</Text>
          </Box>
        </Box>

        <Button 
          fullWidth 
          variant="gradient" 
          gradient={{ from: 'primary.6', to: 'accent.6' }}
          className="hover-glow"
        >
          Enroll Now
        </Button>
      </Box>
    </Card>
  );
}

cssCourseCard.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);
}

tsxCourseCatalog.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 (
    <Box py={80} bg="surface.9">
      <Container size="xl">
        <AnimatedSection>
          <Box ta="center" mb={60}>
            <Title order={2} className="gradient-text" mb={16}>
              Featured Courses
            </Title>
            <Text size="xl" c="muted.4" maw={600} mx="auto">
              Discover our most popular courses designed by industry experts 
              to help you master in-demand skills.
            </Text>
          </Box>
        </AnimatedSection>

        <Box className={styles.courseGrid}>
          {courses.map((course, index) => (
            <AnimatedSection key={course.title} delay={index * 100}>
              <CourseCard {...course} />
            </AnimatedSection>
          ))}
        </Box>
      </Container>
    </Box>
  );
}

cssCourseCatalog.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;
  }
}

tsxReviewCard.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 (
    <Card className={`${styles.reviewCard} glass hover-lift`} radius="lg" p="xl">
      <Box style={{ display: 'flex', alignItems: 'center' }} mb="md">
        <Avatar src={avatar} size="lg" radius="xl" mr="md" />
        <Box>
          <Text fw={600} c="text.0">{name}</Text>
          <Text size="sm" c="muted.4">{role}</Text>
        </Box>
      </Box>
      
      <Rating value={rating} readOnly size="sm" mb="md" color="primary.6" />
      
      <Text c="muted.2" style={{ lineHeight: 1.6 }}>
        "{review}"
      </Text>
    </Card>
  );
}

cssReviewCard.module.css
.reviewCard {
  border: 1px solid rgba(242, 242, 242, 0.1);
  height: 100%;
}

.reviewCard:hover {
  border-color: rgba(0, 169, 255, 0.3);
}

tsxUserReviews.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 (
    <Box py={80}>
      <Container size="xl">
        <AnimatedSection>
          <Box ta="center" mb={60}>
            <Title order={2} className="gradient-text" mb={16}>
              What Our Students Say
            </Title>
            <Text size="xl" c="muted.4" maw={600} mx="auto">
              Join thousands of developers who have transformed their careers 
              with our expert-led courses.
            </Text>
          </Box>
        </AnimatedSection>

        <Box className={styles.reviewGrid}>
          {reviews.map((review, index) => (
            <AnimatedSection key={review.name} delay={index * 100}>
              <ReviewCard {...review} />
            </AnimatedSection>
          ))}
        </Box>
      </Container>
    </Box>
  );
}

cssUserReviews.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;
  }
}

tsxCertificateCard.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 (
    <Card className={`${styles.certificateCard} glass-strong hover-lift`} radius="lg" p="xl">
      <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} mb="lg">
        <FontAwesomeIcon 
          icon={faCertificate} 
          style={{ color: '#bb32ff', fontSize: '2rem' }}
          className="animate-float"
        />
        {verified && (
          <Badge variant="gradient" gradient={{ from: 'accent.6', to: 'primary.6' }} size="sm">
            Verified
          </Badge>
        )}
      </Box>

      <Text fw={700} size="lg" c="text.0" mb="xs">
        {title}
      </Text>

      <Text size="sm" c="muted.4" mb="md">
        Issued on {issueDate}
      </Text>

      <Text size="xs" c="muted.5" mb="lg">
        Credential ID: {credentialId}
      </Text>

      <Box mb="lg">
        <Text size="sm" fw={500} c="text.0" mb="xs">Skills Demonstrated:</Text>
        <Box style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
          {skills.map((skill) => (
            <Badge key={skill} variant="light" color="primary" size="sm">
              {skill}
            </Badge>
          ))}
        </Box>
      </Box>

      <Button 
        fullWidth 
        variant="outline" 
        c="accent.4"
        leftSection={<FontAwesomeIcon icon={faDownload} />}
        className="glass hover-glow"
      >
        Download Certificate
      </Button>
    </Card>
  );
}

cssCertificateCard.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);
}

tsxCertificates.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 (
    <Box py={80} bg="surface.9">
      <Container size="xl">
        <AnimatedSection>
          <Box ta="center" mb={60}>
            <Title order={2} className="gradient-text" mb={16}>
              Industry-Recognized Certificates
            </Title>
            <Text size="xl" c="muted.4" maw={600} mx="auto">
              Earn verified certificates that showcase your skills to employers 
              and advance your career in tech.
            </Text>
          </Box>
        </AnimatedSection>

        <Box className={styles.certificateGrid}>
          {certificates.map((certificate, index) => (
            <AnimatedSection key={certificate.credentialId} delay={index * 100}>
              <CertificateCard {...certificate} />
            </AnimatedSection>
          ))}
        </Box>
      </Container>
    </Box>
  );
}

cssCertificates.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;
  }
}

tsxInstructorCard.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 (
    <Card className={`${styles.instructorCard} glass hover-lift`} radius="lg" p="xl">
      <Box ta="center" mb="lg">
        <Avatar src={avatar} size={120} radius="xl" mx="auto" mb="md" />
        <Text fw={700} size="xl" c="text.0" mb="xs">{name}</Text>
        <Text fw={500} c="primary.4" mb="xs">{title}</Text>
        <Text size="sm" c="muted.4">{company}</Text>
      </Box>

      <Text size="sm" c="muted.2" mb="lg" style={{ lineHeight: 1.6 }}>
        {bio}
      </Text>

      <Box mb="lg">
        <Text size="sm" fw={500} c="text.0" mb="xs">Specialties:</Text>
        <Box style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
          {specialties.map((specialty) => (
            <Badge key={specialty} variant="light" color="accent" size="sm">
              {specialty}
            </Badge>
          ))}
        </Box>
      </Box>

      <Box className={styles.stats} mb="lg">
        <Box ta="center">
          <Text fw={700} size="lg" c="primary.4">{experience}</Text>
          <Text size="xs" c="muted.4">Experience</Text>
        </Box>
        <Box ta="center">
          <Text fw={700} size="lg" c="accent.4">{students.toLocaleString()}</Text>
          <Text size="xs" c="muted.4">Students</Text>
        </Box>
        <Box ta="center">
          <Text fw={700} size="lg" c="text.0">{courses}</Text>
          <Text size="xs" c="muted.4">Courses</Text>
        </Box>
      </Box>

      <Box className={styles.socialLinks} mb="lg">
        <Button variant="subtle" size="sm" p="xs">
          <FontAwesomeIcon icon={faLinkedin} style={{ color: '#00a9ff' }} />
        </Button>
        <Button variant="subtle" size="sm" p="xs">
          <FontAwesomeIcon icon={faTwitter} style={{ color: '#00a9ff' }} />
        </Button>
        <Button variant="subtle" size="sm" p="xs">
          <FontAwesomeIcon icon={faGithub} style={{ color: '#f2f2f2' }} />
        </Button>
      </Box>

      <Button 
        fullWidth 
        variant="outline" 
        c="primary.4"
        className="glass hover-glow"
      >
        View Profile
      </Button>
    </Card>
  );
}

cssInstructorCard.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;
}

tsxInstructorBios.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 (
    <Box py={80}>
      <Container size="xl">
        <AnimatedSection>
          <Box ta="center" mb={60}>
            <Title order={2} className="gradient-text" mb={16}>
              Learn from Industry Experts
            </Title>
            <Text size="xl" c="muted.4" maw={600} mx="auto">
              Our instructors are seasoned professionals from top tech companies, 
              bringing real-world experience to every lesson.
            </Text>
          </Box>
        </AnimatedSection>

        <Box className={styles.instructorGrid}>
          {instructors.map((instructor, index) => (
            <AnimatedSection key={instructor.name} delay={index * 100}>
              <InstructorCard {...instructor} />
            </AnimatedSection>
          ))}
        </Box>
      </Container>
    </Box>
  );
}

cssInstructorBios.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;
  }
}

tsxFooter.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 (
    <Box className={styles.footer} py={60}>
      <Container size="xl">
        <Box className={styles.footerContent}>
          <Box>
            <Text fw={700} size="xl" c="text.0" mb="md" className="gradient-text">
              DevLearn
            </Text>
            <Text c="muted.4" maw={300} mb="lg">
              Empowering developers worldwide with cutting-edge courses 
              and hands-on learning experiences.
            </Text>
            <Box className={styles.socialLinks}>
              <Button variant="subtle" size="sm" p="xs">
                <FontAwesomeIcon icon={faTwitter} style={{ color: '#00a9ff' }} />
              </Button>
              <Button variant="subtle" size="sm" p="xs">
                <FontAwesomeIcon icon={faLinkedin} style={{ color: '#00a9ff' }} />
              </Button>
              <Button variant="subtle" size="sm" p="xs">
                <FontAwesomeIcon icon={faGithub} style={{ color: '#f2f2f2' }} />
              </Button>
              <Button variant="subtle" size="sm" p="xs">
                <FontAwesomeIcon icon={faDiscord} style={{ color: '#bb32ff' }} />
              </Button>
            </Box>
          </Box>

          <Box className={styles.footerLinks}>
            <Box>
              <Text fw={600} c="text.0" mb="md">Courses</Text>
              <Text size="sm" c="muted.4" mb="xs">JavaScript</Text>
              <Text size="sm" c="muted.4" mb="xs">React</Text>
              <Text size="sm" c="muted.4" mb="xs">Python</Text>
              <Text size="sm" c="muted.4" mb="xs">Node.js</Text>
            </Box>
            <Box>
              <Text fw={600} c="text.0" mb="md">Company</Text>
              <Text size="sm" c="muted.4" mb="xs">About Us</Text>
              <Text size="sm" c="muted.4" mb="xs">Careers</Text>
              <Text size="sm" c="muted.4" mb="xs">Blog</Text>
              <Text size="sm" c="muted.4" mb="xs">Contact</Text>
            </Box>
            <Box>
              <Text fw={600} c="text.0" mb="md">Support</Text>
              <Text size="sm" c="muted.4" mb="xs">Help Center</Text>
              <Text size="sm" c="muted.4" mb="xs">Community</Text>
              <Text size="sm" c="muted.4" mb="xs">Privacy Policy</Text>
              <Text size="sm" c="muted.4" mb="xs">Terms of Service</Text>
            </Box>
          </Box>
        </Box>

        <Box className={styles.footerBottom} pt="xl" mt="xl">
          <Text size="sm" c="muted.5" ta="center">
            © 2024 DevLearn. All rights reserved. Built with passion for developers.
          </Text>
        </Box>
      </Container>
    </Box>
  );
}

cssFooter.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:

tsxpage.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 (
    <MantineProvider theme={theme}>
      <main style={{ minHeight: '100vh', background: '#0f1219' }}>
        <HeroSection />
        <CourseCatalog />
        <UserReviews />
        <Certificates />
        <InstructorBios />
        <Footer />
      </main>
    </MantineProvider>
  );
}

Finally, let me update the preview system:

tsxlayout.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 (
    <html lang="en">
      <body><div id="root">{children}</div></body>
    </html>
  )
}

tsxPreviewWrapper.tsx

'use client'

import { ReactNode } from 'react'

interface PreviewWrapperProps {
  children: ReactNode
}

export default function PreviewWrapper({ children }: PreviewWrapperProps) {
  return (
    <div className="preview-container">
      {children}
    </div>
  )
}

tsxpage.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 (
    <MantineProvider theme={theme}>
      <main style={{ minHeight: '100vh', background: '#0f1219' }}>
        <HeroSection />
        <CourseCatalog />
        <UserReviews />
        <Certificates />
        <InstructorBios />
        <Footer />
      </main>
    </MantineProvider>
  );
}

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.

Screenshot 2025-06-11 at 7.59.47 PM.png

Screenshot 2025-06-11 at 8.01.15 PM.png

I'll modify the hero section to create a split layout with left-aligned text and add a coding illustration on the right side to match the design in your images.

Now I'll update the hero section to create the split layout with left-aligned text and a coding image on the right:

tsxHeroSection.tsx
'use client';

import { Box, Container, Title, Text, Button, Image } 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 (
    <Box className={styles.hero}>
      <Container size="xl" py={120}>
        <Box className={styles.heroContent}>
          {/* Left Content */}
          <AnimatedSection className={styles.heroLeft}>
            <Title 
              order={1} 
              className={`${styles.heroTitle} gradient-text animate-slide-up`}
              mb={24}
            >
              Master Development Skills
            </Title>
            <Text 
              size="xl" 
              c="muted.4" 
              mb={40}
              className="animate-slide-up"
              style={{ animationDelay: '0.2s' }}
            >
              Join thousands of developers learning cutting-edge technologies through 
              interactive courses, hands-on projects, and expert-led instruction.
            </Text>
            <Box className={`${styles.buttonGroup} animate-fade-scale`} style={{ animationDelay: '0.4s' }}>
              <Button 
                size="xl" 
                variant="gradient" 
                gradient={{ from: 'primary.6', to: 'accent.6' }}
                leftSection={<FontAwesomeIcon icon={faPlay} />}
                className="hover-glow"
                mr={16}
              >
                Start Learning
              </Button>
              <Button 
                size="xl" 
                variant="outline" 
                c="text.0"
                className="glass hover-lift"
              >
                Browse Courses
              </Button>
            </Box>
          </AnimatedSection>

          {/* Right Content - Coding Section */}
          <AnimatedSection className={styles.heroRight} delay={200}>
            <Box className={styles.codingSection}>
              <Box className={styles.codeEditor}>
                <Box className={styles.editorHeader}>
                  <Box className={styles.editorControls}>
                    <Box className={styles.editorDot} style={{ background: '#ff5f57' }} />
                    <Box className={styles.editorDot} style={{ background: '#ffbd2e' }} />
                    <Box className={styles.editorDot} style={{ background: '#28ca42' }} />
                  </Box>
                </Box>
                <Box className={styles.editorContent}>
                  <Text className={styles.codeLine}>
                    <Text component="span" c="primary.4">const</Text>{' '}
                    <Text component="span" c="text.0">coder</Text>{' '}
                    <Text component="span" c="muted.4">=</Text>{' '}
                    <Text component="span" c="accent.4">{'{'}</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">name:</Text>{' '}
                    <Text component="span" c="orange.4">'Master Coder'</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">skills:</Text>{' '}
                    <Text component="span" c="accent.4">[</Text>
                    <Text component="span" c="orange.4">'React'</Text>,{' '}
                    <Text component="span" c="orange.4">'Node'</Text>
                    <Text component="span" c="accent.4">]</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">hardWorker:</Text>{' '}
                    <Text component="span" c="green.4">true</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">problemSolver:</Text>{' '}
                    <Text component="span" c="green.4">true</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">hireable:</Text>{' '}
                    <Text component="span" c="primary.4">function</Text>
                    <Text component="span" c="accent.4">()</Text>{' '}
                    <Text component="span" c="accent.4">{'{'}</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={40}>
                    <Text component="span" c="primary.4">return</Text>{' '}
                    <Text component="span" c="accent.4">(</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={60}>
                    <Text component="span" c="accent.4">this</Text>
                    <Text component="span" c="muted.4">.</Text>
                    <Text component="span" c="text.0">hardWorker</Text>{' '}
                    <Text component="span" c="primary.4">&&</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={60}>
                    <Text component="span" c="accent.4">this</Text>
                    <Text component="span" c="muted.4">.</Text>
                    <Text component="span" c="text.0">problemSolver</Text>{' '}
                    <Text component="span" c="primary.4">&&</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={60}>
                    <Text component="span" c="accent.4">this</Text>
                    <Text component="span" c="muted.4">.</Text>
                    <Text component="span" c="text.0">skills.length</Text>{' '}
                    <Text component="span" c="primary.4">{'>'}</Text>
                    <Text component="span" c="primary.4">=</Text>{' '}
                    <Text component="span" c="orange.4">5</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={40}>
                    <Text component="span" c="accent.4">)</Text>;
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="accent.4">{'}'}</Text>
                  </Text>
                  <Text className={styles.codeLine}>
                    <Text component="span" c="accent.4">{'}'}</Text>;
                  </Text>
                </Box>
              </Box>
              <Box className={styles.subtitle}>
                <Title order={3} c="text.0" mb="xs">
                  Master Coding. Build Real Projects. Get Hired.
                </Title>
                <Text c="muted.4" mb="lg">
                  Structured, no-fluff courses that teach you the skills you need to succeed in the real world.
                </Text>
                <Button 
                  variant="gradient" 
                  gradient={{ from: 'primary.6', to: 'accent.6' }}
                  size="lg"
                  className="hover-glow"
                >
                  Sign Up for Free →
                </Button>
              </Box>
            </Box>
          </AnimatedSection>
        </Box>
      </Container>
      <Box className={styles.heroBackground} />
    </Box>
  );
}

cssHeroSection.module.css
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.heroContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.heroLeft {
  text-align: left;
}

.heroRight {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heroTitle {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.buttonGroup {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.codingSection {
  width: 100%;
  max-width: 500px;
}

.codeEditor {
  background: rgba(24, 28, 36, 0.9);
  border: 1px solid rgba(242, 242, 242, 0.1);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  margin-bottom: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.editorHeader {
  background: rgba(39, 43, 52, 0.8);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(242, 242, 242, 0.1);
}

.editorControls {
  display: flex;
  gap: 0.5rem;
}

.editorDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.editorContent {
  padding: 1.5rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.codeLine {
  margin-bottom: 0.25rem;
  font-family: inherit;
}

.subtitle {
  text-align: left;
}

.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: 1024px) {
  .heroContent {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .heroLeft {
    text-align: center;
  }
  
  .subtitle {
    text-align: center;
  }
  
  .buttonGroup {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .heroContent {
    gap: 2rem;
  }
  
  .buttonGroup {
    flex-direction: column;
    align-items: center;
  }
  
  .codeEditor {
    margin-bottom: 1.5rem;
  }
  
  .editorContent {
    padding: 1rem;
    font-size: 0.75rem;
  }
}

Perfect! I've updated the hero section to match the design in your images. Here are the key changes I made:

🎯 Layout Changes

Split Layout

Two-column grid: Left side for text content, right side for coding visual
Left-aligned text: Changed from center-aligned to left-aligned text
Responsive design: Stacks vertically on mobile devices

Left Section

"Master Development Skills" title with gradient text
Descriptive subtitle about learning technologies
Two action buttons: "Start Learning" (gradient) and "Browse Courses" (outline)

Right Section - Code Editor

Realistic code editor with macOS-style window controls (red, yellow, green dots)
Syntax-highlighted JavaScript code showing a developer object
Glassmorphism styling with backdrop blur and transparency
Secondary content below the editor with "Master Coding. Build Real Projects. Get Hired." message

🎨 Visual Features

Code Editor Design

Dark theme matching the overall design
Proper syntax highlighting with different colors for keywords, strings, etc.
Realistic indentation and code structure
Professional appearance with subtle shadows and borders

Responsive Behavior

Desktop: Side-by-side layout with proper spacing
Tablet: Maintains grid but adjusts spacing
Mobile: Stacks vertically with center alignment

Animation Effects

Staggered animations for left and right sections
Smooth transitions and hover effects
Scroll-triggered reveals for enhanced user experience

The new layout creates a more engaging and professional appearance that clearly communicates the platform's focus on practical coding education, just like the design you showed in the images!

Screenshot 2025-06-11 at 8.04.54 PM.png

I'll remove the secondary section that appears below the code editor in the hero section.

tsxHeroSection.tsx
'use client';

import { Box, Container, Title, Text, Button, Image } 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 (
    <Box className={styles.hero}>
      <Container size="xl" py={120}>
        <Box className={styles.heroContent}>
          {/* Left Content */}
          <AnimatedSection className={styles.heroLeft}>
            <Title 
              order={1} 
              className={`${styles.heroTitle} gradient-text animate-slide-up`}
              mb={24}
            >
              Master Development Skills
            </Title>
            <Text 
              size="xl" 
              c="muted.4" 
              mb={40}
              className="animate-slide-up"
              style={{ animationDelay: '0.2s' }}
            >
              Join thousands of developers learning cutting-edge technologies through 
              interactive courses, hands-on projects, and expert-led instruction.
            </Text>
            <Box className={`${styles.buttonGroup} animate-fade-scale`} style={{ animationDelay: '0.4s' }}>
              <Button 
                size="xl" 
                variant="gradient" 
                gradient={{ from: 'primary.6', to: 'accent.6' }}
                leftSection={<FontAwesomeIcon icon={faPlay} />}
                className="hover-glow"
                mr={16}
              >
                Start Learning
              </Button>
              <Button 
                size="xl" 
                variant="outline" 
                c="text.0"
                className="glass hover-lift"
              >
                Browse Courses
              </Button>
            </Box>
          </AnimatedSection>

          {/* Right Content - Coding Section */}
          <AnimatedSection className={styles.heroRight} delay={200}>
            <Box className={styles.codingSection}>
              <Box className={styles.codeEditor}>
                <Box className={styles.editorHeader}>
                  <Box className={styles.editorControls}>
                    <Box className={styles.editorDot} style={{ background: '#ff5f57' }} />
                    <Box className={styles.editorDot} style={{ background: '#ffbd2e' }} />
                    <Box className={styles.editorDot} style={{ background: '#28ca42' }} />
                  </Box>
                </Box>
                <Box className={styles.editorContent}>
                  <Text className={styles.codeLine}>
                    <Text component="span" c="primary.4">const</Text>{' '}
                    <Text component="span" c="text.0">coder</Text>{' '}
                    <Text component="span" c="muted.4">=</Text>{' '}
                    <Text component="span" c="accent.4">{'{'}</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">name:</Text>{' '}
                    <Text component="span" c="orange.4">'Master Coder'</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">skills:</Text>{' '}
                    <Text component="span" c="accent.4">[</Text>
                    <Text component="span" c="orange.4">'React'</Text>,{' '}
                    <Text component="span" c="orange.4">'Node'</Text>
                    <Text component="span" c="accent.4">]</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">hardWorker:</Text>{' '}
                    <Text component="span" c="green.4">true</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">problemSolver:</Text>{' '}
                    <Text component="span" c="green.4">true</Text>,
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="text.0">hireable:</Text>{' '}
                    <Text component="span" c="primary.4">function</Text>
                    <Text component="span" c="accent.4">()</Text>{' '}
                    <Text component="span" c="accent.4">{'{'}</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={40}>
                    <Text component="span" c="primary.4">return</Text>{' '}
                    <Text component="span" c="accent.4">(</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={60}>
                    <Text component="span" c="accent.4">this</Text>
                    <Text component="span" c="muted.4">.</Text>
                    <Text component="span" c="text.0">hardWorker</Text>{' '}
                    <Text component="span" c="primary.4">&&</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={60}>
                    <Text component="span" c="accent.4">this</Text>
                    <Text component="span" c="muted.4">.</Text>
                    <Text component="span" c="text.0">problemSolver</Text>{' '}
                    <Text component="span" c="primary.4">&&</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={60}>
                    <Text component="span" c="accent.4">this</Text>
                    <Text component="span" c="muted.4">.</Text>
                    <Text component="span" c="text.0">skills.length</Text>{' '}
                    <Text component="span" c="primary.4">{'>'}</Text>
                    <Text component="span" c="primary.4">=</Text>{' '}
                    <Text component="span" c="orange.4">5</Text>
                  </Text>
                  <Text className={styles.codeLine} pl={40}>
                    <Text component="span" c="accent.4">)</Text>;
                  </Text>
                  <Text className={styles.codeLine} pl={20}>
                    <Text component="span" c="accent.4">{'}'}</Text>
                  </Text>
                  <Text className={styles.codeLine}>
                    <Text component="span" c="accent.4">{'}'}</Text>;
                  </Text>
                </Box>
              </Box>
            </Box>
          </AnimatedSection>
        </Box>
      </Container>
      <Box className={styles.heroBackground} />
    </Box>
  );
}

cssHeroSection.module.css
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.heroContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.heroLeft {
  text-align: left;
}

.heroRight {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heroTitle {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.buttonGroup {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.codingSection {
  width: 100%;
  max-width: 500px;
}

.codeEditor {
  background: rgba(24, 28, 36, 0.9);
  border: 1px solid rgba(242, 242, 242, 0.1);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.editorHeader {
  background: rgba(39, 43, 52, 0.8);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(242, 242, 242, 0.1);
}

.editorControls {
  display: flex;
  gap: 0.5rem;
}

.editorDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.editorContent {
  padding: 1.5rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.codeLine {
  margin-bottom: 0.25rem;
  font-family: inherit;
}

.subtitle {
  text-align: left;
}

.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: 1024px) {
  .heroContent {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .heroLeft {
    text-align: center;
  }
  
  .subtitle {
    text-align: center;
  }
  
  .buttonGroup {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .heroContent {
    gap: 2rem;
  }
  
  .buttonGroup {
    flex-direction: column;
    align-items: center;
  }
  
  .codeEditor {
    margin-bottom: 1.5rem;
  }
  
  .editorContent {
    padding: 1rem;
    font-size: 0.75rem;
  }
}

cssHeroSection.module.css
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.heroContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.heroLeft {
  text-align: left;
}

.heroRight {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heroTitle {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.buttonGroup {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.codingSection {
  width: 100%;
  max-width: 500px;
}

.codeEditor {
  background: rgba(24, 28, 36, 0.9);
  border: 1px solid rgba(242, 242, 242, 0.1);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.editorHeader {
  background: rgba(39, 43, 52, 0.8);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(242, 242, 242, 0.1);
}

.editorControls {
  display: flex;
  gap: 0.5rem;
}

.editorDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.editorContent {
  padding: 1.5rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.codeLine {
  margin-bottom: 0.25rem;
  font-family: inherit;
}


.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: 1024px) {
  .heroContent {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .heroLeft {
    text-align: center;
  }
  
  .subtitle {
    text-align: center;
  }
  
  .buttonGroup {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .heroContent {
    gap: 2rem;
  }
  
  .buttonGroup {
    flex-direction: column;
    align-items: center;
  }
  
  .codeEditor {
    margin-bottom: 1.5rem;
  }
  
  .editorContent {
    padding: 1rem;
    font-size: 0.75rem;
  }
}

cssHeroSection.module.css
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.heroContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.heroLeft {
  text-align: left;
}

.heroRight {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heroTitle {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.buttonGroup {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.codingSection {
  width: 100%;
  max-width: 500px;
}

.codeEditor {
  background: rgba(24, 28, 36, 0.9);
  border: 1px solid rgba(242, 242, 242, 0.1);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.editorHeader {
  background: rgba(39, 43, 52, 0.8);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(242, 242, 242, 0.1);
}

.editorControls {
  display: flex;
  gap: 0.5rem;
}

.editorDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.editorContent {
  padding: 1.5rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.codeLine {
  margin-bottom: 0.25rem;
  font-family: inherit;
}


.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: 1024px) {
  .heroContent {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .heroLeft {
    text-align: center;
  }
  
  
  .buttonGroup {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .heroContent {
    gap: 2rem;
  }
  
  .buttonGroup {
    flex-direction: column;
    align-items: center;
  }
  
  .codeEditor {
    margin-bottom: 1.5rem;
  }
  
  .editorContent {
    padding: 1rem;
    font-size: 0.75rem;
  }
}

cssHeroSection.module.css
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.heroContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.heroLeft {
  text-align: left;
}

.heroRight {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heroTitle {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.buttonGroup {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.codingSection {
  width: 100%;
  max-width: 500px;
}

.codeEditor {
  background: rgba(24, 28, 36, 0.9);
  border: 1px solid rgba(242, 242, 242, 0.1);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.editorHeader {
  background: rgba(39, 43, 52, 0.8);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(242, 242, 242, 0.1);
}

.editorControls {
  display: flex;
  gap: 0.5rem;
}

.editorDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.editorContent {
  padding: 1.5rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.codeLine {
  margin-bottom: 0.25rem;
  font-family: inherit;
}


.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: 1024px) {
  .heroContent {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .heroLeft {
    text-align: center;
  }
  
  
  .buttonGroup {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .heroContent {
    gap: 2rem;
  }
  
  .buttonGroup {
    flex-direction: column;
    align-items: center;
  }
  
  
  .editorContent {
    padding: 1rem;
    font-size: 0.75rem;
  }
}

Perfect! I've removed the secondary section that contained the "Master Coding. Build Real Projects. Get Hired." text and the "Sign Up for Free" button that appeared below the code editor.

Now the hero section has a cleaner layout with:

Left side: The main title, description, and action buttons
Right side: Just the code editor with syntax-highlighted JavaScript code

The section is now more focused and matches the layout you wanted, with the code editor standing on its own as a visual element without the additional text content below it.

I'll add the additional content to each section as requested. Let me start by getting assets for the new courses:

Now I'll update each section with the additional content:

tsxCourseCatalog.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'
  },
  {
    title: 'TypeScript Fundamentals',
    description: 'Learn TypeScript from the ground up with type annotations, interfaces, and advanced type patterns.',
    image: 'https://images.unsplash.com/photo-1593720219128-218edc93bdc0?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTAwNDR8MHwxfHNlYXJjaHw3fHx0eXBlc2NyaXB0JTIwcHJvZ3JhbW1pbmclMjBqYXZhc2NyaXB0JTIwY29kZXxlbnwwfDB8fGJsdWV8MTc0OTY1NDU0MXww&ixlib=rb-4.1.0&q=85',
    imageAlt: 'TypeScript programming course thumbnail with type annotations and modern development by Ferenc Almasi on Unsplash',
    duration: '14 hours',
    rating: 4.8,
    students: 2341,
    level: 'Intermediate',
    price: '$109'
  },
  {
    title: 'Docker & Containerization',
    description: 'Master containerization with Docker, Docker Compose, and deployment strategies for modern applications.',
    image: 'https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTAwNDR8MHwxfHNlYXJjaHwzfHx0eXBlc2NyaXB0JTIwcHJvZ3JhbW1pbmclMjBqYXZhc2NyaXB0JTIwY29kZXxlbnwwfDB8fGJsdWV8MTc0OTY1NDU0MXww&ixlib=rb-4.1.0&q=85',
    imageAlt: 'Docker containerization course thumbnail with containers and DevOps concepts by Luca Bravo on Unsplash',
    duration: '16 hours',
    rating: 4.7,
    students: 1876,
    level: 'Advanced',
    price: '$159'
  }
];

export function CourseCatalog() {
  return (
    <Box py={80} bg="surface.9">
      <Container size="xl">
        <AnimatedSection>
          <Box ta="center" mb={60}>
            <Title order={2} className="gradient-text" mb={16}>
              Featured Courses
            </Title>
            <Text size="xl" c="muted.4" maw={600} mx="auto">
              Discover our most popular courses designed by industry experts 
              to help you master in-demand skills.
            </Text>
          </Box>
        </AnimatedSection>

        <Box className={styles.courseGrid}>
          {courses.map((course, index) => (
            <AnimatedSection key={course.title} delay={index * 100}>
              <CourseCard {...course} />
            </AnimatedSection>
          ))}
        </Box>
      </Container>
    </Box>
  );
}

tsxInstructorBios.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
  },
  {
    name: 'Sarah Kim',
    title: 'DevOps Engineer',
    company: 'Amazon',
    avatar: 'https://i.pravatar.cc/150?img=14',
    bio: 'Cloud infrastructure specialist with expertise in containerization, CI/CD pipelines, and scalable system architecture. Passionate about automation and developer productivity.',
    specialties: ['Docker', 'Kubernetes', 'AWS', 'CI/CD'],
    experience: '7+ Years',
    students: 9680,
    courses: 5
  }
];

export function InstructorBios() {
  return (
    <Box py={80}>
      <Container size="xl">
        <AnimatedSection>
          <Box ta="center" mb={60}>
            <Title order={2} className="gradient-text" mb={16}>
              Learn from Industry Experts
            </Title>
            <Text size="xl" c="muted.4" maw={600} mx="auto">
              Our instructors are seasoned professionals from top tech companies, 
              bringing real-world experience to every lesson.
            </Text>
          </Box>
        </AnimatedSection>

        <Box className={styles.instructorGrid}>
          {instructors.map((instructor, index) => (
            <AnimatedSection key={instructor.name} delay={index * 100}>
              <InstructorCard {...instructor} />
            </AnimatedSection>
          ))}
        </Box>
      </Container>
    </Box>
  );
}

tsxCertificates.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
  },
  {
    title: 'Apache Spark Big Data Specialist',
    issueDate: 'August 2024',
    credentialId: 'SPARK-2024-BD-005',
    skills: ['Apache Spark', 'Big Data Processing', 'Scala', 'Data Engineering'],
    verified: true
  },
  {
    title: 'TypeScript Advanced Developer',
    issueDate: 'July 2024',
    credentialId: 'TS-2024-ADV-006',
    skills: ['Type Systems', 'Generic Programming', 'Decorators', 'Advanced Types'],
    verified: true
  }
];

export function Certificates() {
  return (
    <Box py={80} bg="surface.9">
      <Container size="xl">
        <AnimatedSection>
          <Box ta="center" mb={60}>
            <Title order={2} className="gradient-text" mb={16}>
              Industry-Recognized Certificates
            </Title>
            <Text size="xl" c="muted.4" maw={600} mx="auto">
              Earn verified certificates that showcase your skills to employers 
              and advance your career in tech.
            </Text>
          </Box>
        </AnimatedSection>

        <Box className={styles.certificateGrid}>
          {certificates.map((certificate, index) => (
            <AnimatedSection key={certificate.credentialId} delay={index * 100}>
              <CertificateCard {...certificate} />
            </AnimatedSection>
          ))}
        </Box>
      </Container>
    </Box>
  );
}

Perfect! I've successfully added the requested content to each section:

🎓 Featured Courses (Added 2 new courses)

5. TypeScript Fundamentals

Duration: 14 hours
Level: Intermediate
Price: $109
Rating: 4.8/5 (2,341 students)
Description: Learn TypeScript from the ground up with type annotations, interfaces, and advanced type patterns

6. Docker & Containerization

Duration: 16 hours
Level: Advanced
Price: $159
Rating: 4.7/5 (1,876 students)
Description: Master containerization with Docker, Docker Compose, and deployment strategies

👨‍🏫 Industry Experts (Added 1 new instructor)

Sarah Kim - DevOps Engineer at Amazon

Experience: 7+ years
Students: 9,680
Courses: 5
Specialties: Docker, Kubernetes, AWS, CI/CD
Bio: Cloud infrastructure specialist with expertise in containerization, CI/CD pipelines, and scalable system architecture

🏆 Industry-Recognized Certificates (Added 2 new certificates)

5. Apache Spark Big Data Specialist

Issue Date: August 2024
Credential ID: SPARK-2024-BD-005
Skills: Apache Spark, Big Data Processing, Scala, Data Engineering
Status: Verified ✅

6. TypeScript Advanced Developer

Issue Date: July 2024
Credential ID: TS-2024-ADV-006
Skills: Type Systems, Generic Programming, Decorators, Advanced Types
Status: Verified ✅

All sections now have expanded content that maintains the same visual consistency and professional quality as the existing items. The new courses cover in-demand technologies (TypeScript and Docker), the new instructor brings DevOps expertise, and the certificates include the requested Apache Spark certification along with a TypeScript advanced certification.

Open this conversation in your favorite IDE

@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;
}

Read-only

Setting up preview

Please wait while we set everything up