frontend/src/components/Intro.jsx

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

const Intro = () => {
  const handleLogoClick = () => {
    window.history.replaceState(null, "", "/");
    window.location.reload();
  };

  return (
    <Box sx={{ textAlign: "center", mb: 4 }}>
      <Box
        sx={{
          width: "200px",
          height: "100px",
          display: "flex",
          justifyContent: "center",
          cursor: "pointer",
          margin: "0 auto",
          mb: 0,
          opacity: 0.9,
          transition: "opacity 0.3s ease",
          transform: "translateX(10px)",
          "&:hover": {
            opacity: 1,
          },
        }}
        onClick={handleLogoClick}
      >
        <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. Currently, this is an extremely minimal demo. To unlock the full capabilities, please visit our GitHub!
      </Typography>
    </Box>
  );
};

export default Intro;