update logo

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -42,7 +42,14 @@ const LeaderboardFilters = ({ allSections }) => {
   return (
     <Stack spacing={4} sx={{ width: "100%", mb: 4, alignItems: "center" }}>
       {/* Categories */}
-      <Box sx={{ width: "60%" }}>
+      <Box
+        sx={{
+          width: {
+            xs: "90%",
+            md: "60%",
+          },
+        }}
+      >
         <Stack
           direction="row"
           spacing={1}

client/src/components/Logo/Logo.jsx

@@ -1,19 +1,38 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Box } from "@mui/material";
+import logoText from "../../assets/logo-text.svg";
+import gradient from "../../assets/gradient.svg";
 
 const Logo = () => {
   return (
-    <Link to="/" style={{ textDecoration: "none" }}>
+    <Link to="/" style={{ textDecoration: "none", position: "relative" }}>
       <Box
         component="img"
-        src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
-        alt="Hugging Face"
+        src={gradient}
+        alt=""
         sx={{
-          height: 80,
+          position: "absolute",
+          width: "150%",
+          height: "auto",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: 0,
+          opacity: 1,
+        }}
+      />
+      <Box
+        component="img"
+        src={logoText}
+        alt="Leaderboards on the Hub"
+        sx={{
+          height: 110,
           width: "auto",
           display: "block",
           margin: "0 auto",
+          position: "relative",
+          zIndex: 1,
         }}
       />
     </Link>

client/src/components/PageTitle/PageTitle.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import crown from "../../assets/crown.svg";
+
+const PageTitle = () => {
+  const text = "Leaderboards on the Hub";
+  const words = text.split(" ");
+
+  // Find the position of the first 'd'
+  const firstDIndex = text.toLowerCase().indexOf("d");
+
+  let letterCount = 0;
+
+  return (
+    <Typography
+      fontWeight="900"
+      variant="h3"
+      component="h1"
+      color="#364254"
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        flexWrap: "wrap",
+      }}
+    >
+      {words.map((word, wordIndex) => (
+        <span
+          key={wordIndex}
+          style={{ position: "relative", whiteSpace: "nowrap" }}
+        >
+          {word.split("").map((letter, letterIndex) => {
+            const isFirstD = letterCount === firstDIndex;
+            letterCount++;
+            return (
+              <span
+                key={letterIndex}
+                style={{
+                  display: "inline",
+                  position: "relative",
+                }}
+              >
+                {isFirstD && (
+                  <Box
+                    component="img"
+                    src={crown}
+                    alt=""
+                    sx={{
+                      position: "absolute",
+                      top: "0px",
+                      left: "21px",
+                      transform: "translateX(-50%)",
+                      width: "13px",
+                    }}
+                  />
+                )}
+                {letter}
+              </span>
+            );
+          })}
+          {wordIndex < words.length - 1 && "\u00A0"}
+        </span>
+      ))}
+    </Typography>
+  );
+};
+
+export default PageTitle;

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import Logo from "../../components/Logo/Logo";
+import PageTitle from "../../components/PageTitle/PageTitle";
 import PageHeader from "../../components/PageHeader/PageHeader";
 import LeaderboardSection from "../../components/LeaderboardSection";
 import LeaderboardFilters from "../../components/LeaderboardFilters/LeaderboardFilters";
@@ -69,9 +70,7 @@ const LeaderboardPageContent = () => {
           gap: 2,
         }}
       >
-        <Typography fontWeight="bold" variant="h3" component="h1">
-          Leaderboards on the Hub
-        </Typography>
+        <PageTitle />
         <Typography variant="h6" color="text.secondary">
           <span style={{ fontWeight: 600 }}>Discover</span> and{" "}
           <span style={{ fontWeight: 600 }}>explore</span> all leaderboards from