init leaderboard ui

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/CrewList.tsx

@@ -66,14 +66,16 @@ export default function CrewList() {
     });
 
     return (
-        <Wrapper>
-            <ScrollArea ref={scrollAreaRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
-                {members.map((member) => (
-                    <Member key={member.id} member={member} />
-                ))}
-            </ScrollArea>
+        <Wrapper $noMembers={members.length === 0}>
+            {members.length !== 0 && (
+                <ScrollArea ref={scrollAreaRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                    {members.map((member) => (
+                        <Member key={member.id} member={member} />
+                    ))}
+                </ScrollArea>
+            )}
 
-            <AddNewButton>
+            <AddNewButton $noMembers={members.length === 0}>
                 <PlusIcon />
             </AddNewButton>
 

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/styles.ts

@@ -1,11 +1,17 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled('div')`
+export const Wrapper = styled('div')<{ $noMembers?: boolean }>`
     display: grid;
-    align-items: center;
     grid-template-columns: auto 1fr;
 
     gap: 14px;
+
+    ${({ $noMembers }) =>
+        $noMembers &&
+        css`
+            display: flex;
+            align-items: center;
+        `}
 `;
 
 export const PlaceholderText = styled('div')`
@@ -25,9 +31,9 @@ export const PlaceholderText = styled('div')`
     padding: 12px 16px;
 `;
 
-export const AddNewButton = styled('button')`
-    width: 92px;
-    height: 92px;
+export const AddNewButton = styled('button')<{ $noMembers?: boolean }>`
+    width: 99px;
+    height: 99px;
     border-radius: 100%;
 
     background: rgba(217, 217, 217, 0.1);
@@ -43,6 +49,12 @@ export const AddNewButton = styled('button')`
 
     transition: background 0.3s ease;
 
+    ${({ $noMembers }) =>
+        !$noMembers &&
+        css`
+            transform: translateY(6px);
+        `}
+
     &:hover {
         background: rgba(255, 255, 255, 0.2);
     }

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/Leaderboard.tsx

@@ -1,6 +1,19 @@
 /* eslint-disable i18next/no-literal-string */
-import { Wrapper } from './styles';
+import LeaderboardList from './segments/LeaderboardList/LeaderboardList';
+import Progress from './segments/Progress/Progress';
+import { Wrapper, TopRow, SectionTitle, Button } from './styles';
 
 export default function Leaderboard() {
-    return <Wrapper>Leaderboard</Wrapper>;
+    return (
+        <Wrapper>
+            <TopRow>
+                <SectionTitle>Leaderboard</SectionTitle>
+                <Button>VIEW full LEADERBOARD</Button>
+            </TopRow>
+
+            <Progress />
+
+            <LeaderboardList />
+        </Wrapper>
+    );
 }

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/LeaderboardList.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable i18next/no-literal-string */
+import { Wrapper } from './styles';
+
+export default function LeaderboardList() {
+    return <Wrapper>Leaderboard List</Wrapper>;
+}

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/styles.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled('div')``;

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/Progress.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable i18next/no-literal-string */
+import { Wrapper, TopLabel, Line, Text, CapLeft, CapRight } from './styles';
+
+export default function Progress() {
+    return (
+        <Wrapper>
+            <TopLabel>
+                <Line />
+                <Text>
+                    You’re <span>15 hours</span> away from the next rank. Keep mining!
+                </Text>
+                <Line />
+                <CapLeft />
+                <CapRight />
+            </TopLabel>
+        </Wrapper>
+    );
+}

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/styles.ts

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled('div')``;
+
+export const TopLabel = styled('div')`
+    display: flex;
+    align-items: center;
+    gap: 40px;
+    width: 100%;
+    position: relative;
+`;
+
+export const Line = styled('div')`
+    width: 100%;
+    height: 2px;
+    background-color: #e6ff47;
+`;
+
+export const Text = styled('div')`
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 129.623%;
+    text-transform: uppercase;
+    white-space: nowrap;
+
+    span {
+        color: #e6ff47;
+    }
+`;
+
+export const CapLeft = styled('div')`
+    width: 2px;
+    height: 8px;
+    background-color: #e6ff47;
+
+    position: absolute;
+    top: 8px;
+    left: 0;
+`;
+
+export const CapRight = styled('div')`
+    width: 2px;
+    height: 8px;
+    background-color: #e6ff47;
+
+    position: absolute;
+    top: 8px;
+    right: 0;
+`;

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/styles.ts

@@ -1,3 +1,47 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled('div')``;
+export const Wrapper = styled('div')`
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+`;
+
+export const TopRow = styled('div')`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+export const SectionTitle = styled('div')`
+    color: #fff;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 129.623%;
+    text-transform: uppercase;
+`;
+
+export const Button = styled('div')`
+    color: #fff;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: normal;
+    text-transform: uppercase;
+
+    border-radius: 9px;
+    background: rgba(217, 217, 217, 0.1);
+
+    height: 35px;
+    padding: 12px 16px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    cursor: pointer;
+
+    transition: background 0.3s ease;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+`;