frontend/src/components/Header.js

import React from 'react';
import { Typography, Box, Paper } from '@mui/material';

const Header = () => {
  return (
    <Paper 
      elevation={3} 
      sx={{ 
        p: 3, 
        mb: 4, 
        textAlign: 'center',
        background: 'linear-gradient(45deg, #1976d2 30%, #21CBF3 90%)',
        color: 'white'
      }}
    >
      <Typography variant="h4" component="h1" gutterBottom>
        RAG Question Answering System
      </Typography>
      <Typography variant="subtitle1">
        Upload a document and ask questions about its content
      </Typography>
    </Paper>
  );
};

export default Header;