frontend/src/components/Intro.jsx

import React from "react";
import { Box, Typography } from "@mui/material";
import HFLogo from "./Logo/HFLogo";

const Intro = () => (
  <Box sx={{ textAlign: "center", mb: 4 }}>
    <Box
      sx={{ height: "60px", mb: 4, display: "flex", justifyContent: "center" }}
    >
      <HFLogo />
    </Box>
    <Typography
      variant="h4"
      component="h1"
      gutterBottom
      sx={{ fontWeight: 800 }}
    >
      Yourbench Demo
    </Typography>
    <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }}>
      YourBench is an <b>open-source framework</b> for generating{" "}
      <b>domain-specific benchmarks</b> in a <b>zero-shot</b> manner. It aims to
      keep your large language models on their toes—even as new data sources,
      domains, and knowledge demands evolve.
    </Typography>
  </Box>
);

export default Intro;