Added the ranks section

Added in carosoul section, but needs fix up.

frontend2/components/Ranks/LeaderBoard/LeaderBoard.module.css

@@ -1,9 +1,16 @@
+.pageContainer{
+    margin: 10rem auto;
+    background-color: #DD995B;
+    width: 100%;
+    padding: 2rem;
+    border-radius: 1rem;
+}
+
 .collection{
     background-color: #87562A;
-    margin: 2rem;
-    margin-top: 10rem;
     width: 100%;
     padding: 3rem;
+    border: none;
 }
 
 .title {

frontend2/components/Ranks/LeaderBoard/LeaderBoard.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { Grid, Container, Paper, Title } from '@mantine/core';
 import { MemberCard, Member } from '../MemberCard/MemberCard';
+import { RankBalls } from '../RankBalls/RankBalls';
 import styles from './LeaderBoard.module.css';
 
 export interface LeaderBoard {
@@ -37,7 +38,8 @@ export function LeaderBoard({
     innerPaddingRight = ""
 }: LeaderBoard) {
     return (
-        <Container pt={outerPaddingTop} pb={outerPaddingBottom} pl={outerPaddingLeft} pr={outerPaddingRight}>
+        <Container className={styles.pageContainer} pt={outerPaddingTop} pb={outerPaddingBottom} pl={outerPaddingLeft} pr={outerPaddingRight}>
+            <RankBalls />
             <Paper shadow={shadow} radius={radius} withBorder={withBorder} className={styles.collection}>
                 <Container pt={innerPaddingTop} pb={innerPaddingBottom} pl={innerPaddingLeft} pr={innerPaddingRight}>
                     <Title className={styles.title} pt="1vw" pb="2vw">Leader Board</Title>

frontend2/components/Ranks/MemberCard/MemberCard.module.css

@@ -4,8 +4,8 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: 1rem;
-    border-radius: 1rem;
+    padding: 1rem 2rem;
+    border-radius: 20rem;
     background-color: #DD995B;
     align-items: center;
     border: none;

frontend2/components/Ranks/RankBalls/RankBalls.module.css

@@ -0,0 +1,38 @@
+.ball {
+    height: rem(140px);
+    width: rem(140px);
+    border-radius: rem(70px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .ballContainer{
+    background-color: transparent;
+  }
+
+  .title {
+    font-weight: 900;
+    color: var(--mantine-color-white);
+    line-height: 1.2;
+    font-size: rem(32px);
+    margin-top: var(--mantine-spacing-xs);
+  }
+
+  .category {
+    color: var(--mantine-color-white);
+    opacity: 0.7;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .button {
+    margin-top: 1rem;
+  }
+
+  .carosoul {
+    background-colour: #87562A;
+  }

frontend2/components/Ranks/RankBalls/RankBalls.tsx

@@ -0,0 +1,83 @@
+import { Carousel } from '@mantine/carousel';
+import { useMediaQuery } from '@mantine/hooks';
+import { Paper, Text, Title, Button, useMantineTheme, rem } from '@mantine/core';
+import classes from './RankBalls.module.css';
+
+interface BallProps {
+  colour: string;
+  rank: number;
+}
+
+function Ball({ colour, rank }: BallProps) {
+  return (
+    <Paper
+      shadow='None'
+      style={{ backgroundColor: '#87562A' }}
+    >
+        <div className={classes.ballContainer}>
+            <div
+            className={classes.ball}
+            style={{ backgroundColor: colour }}
+            >
+                <Text className={classes.category} size="xs">
+                {rank}
+                </Text>
+            </div>
+            <Button variant="white" color="dark">
+                View Leaderboard
+            </Button>
+        </div>
+    </Paper>
+  );
+}
+
+const data = [
+  {
+    colour: '#D9D9D9',
+    rank: 0,
+  },
+  {
+    colour:'#C5B460',
+    rank: 1,
+  },
+  {
+    colour:'#3E76B4',
+    rank: 2,
+  },
+  {
+    colour:'#658A66',
+    rank: 3,
+  },
+  {
+    colour:'#A65656',
+    rank: 4,
+  },
+  {
+    colour:'#222629',
+    rank: 5,
+  },
+];
+
+export function RankBalls() {
+  const theme = useMantineTheme();
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  const slides = data
+    .filter((item): item is BallProps => item.colour !== undefined && item.rank !== undefined)
+    .map((item) => (
+    <Carousel.Slide key={item.rank}>
+      <Ball {...item} />
+    </Carousel.Slide>
+  ));
+
+  return (
+    <Carousel
+      slideSize={{ base: '100%', sm: '6' }}
+      slideGap={{ base: rem(2), sm: 'xl' }}
+      align="start"
+      slidesToScroll={mobile ? 1 : 2}
+      style={classes.carousel}
+    >
+      {slides}
+    </Carousel>
+  );
+}