diff --git a/pages/complete/index.tsx b/pages/complete/index.tsx
index 82e17d5..33f9c3c 100644
--- a/pages/complete/index.tsx
+++ b/pages/complete/index.tsx
@@ -111,6 +111,15 @@ export default function CompletePage() {
{availableAddress}
+
+
+ Make your way up the leaderboard
+
+
+ Tweet an invite link and both you and your friend will earn points
+ on the ICNS leaderboard.
+
+
@@ -120,8 +129,100 @@ export default function CompletePage() {
width={28}
height={28}
/>
- INVITE FRIENDS
+ TWEET INVITE LINK
+ {
+ e.preventDefault();
+
+ const { twitterUsername } = router.query;
+
+ navigator.clipboard.writeText(
+ `https://app.icns.xyz?referral=${twitterUsername}`,
+ );
+ }}
+ >
+ copy invite link
+
+
+
+
+
+
+
+
+
+
+
+ Coming soon
+
+
+ Leaderboard
+
+
+
+
+
+
+
+
+
);
@@ -142,14 +243,10 @@ const MainContainer = styled.div`
color: white;
`;
-const MainTitle = styled.h1`
- text-overflow: ;
-`;
-
const ContentContainer = styled.div`
width: 31rem;
- padding: 2.625rem 3rem;
+ padding: 2.625rem 0;
background-color: ${color.grey["900"]};
`;
@@ -174,7 +271,7 @@ const TitleContainer = styled.div`
const RecipentContainer = styled.div`
display: flex;
flex-direction: column;
- margin: 0 1rem;
+ margin: 0 4rem;
gap: 0.5rem;
`;
@@ -188,6 +285,33 @@ const RecipentTitle = styled.div`
color: ${color.grey["400"]};
`;
+const SubLeaderboardIntroContainer = styled.div`
+ margin: 0 2.5rem;
+ margin-top: 2.5rem;
+
+ padding: 1.25rem 1.5rem;
+
+ background-color: ${color.grey["700"]};
+`;
+
+const SubLeaderboardIntroTitle = styled.div`
+ font-weight: 600;
+ font-size: 0.8125rem;
+ line-height: 123.5%;
+
+ margin-bottom: 0.75rem;
+
+ color: ${color.grey["100"]};
+`;
+
+const SubLeaderboardIntroDescription = styled.div`
+ font-weight: 400;
+ font-size: 0.8125rem;
+ line-height: 138%;
+
+ color: ${color.grey["300"]};
+`;
+
const AddressContainer = styled.div`
font-family: "Inter", serif;
font-style: normal;
@@ -260,7 +384,8 @@ const ShareButtonContainer = styled.div`
width: 20rem;
height: 5rem;
- margin-top: 0.75rem;
+ margin-top: 1.5rem;
+ margin-bottom: 1.125rem;
cursor: pointer;
user-select: none;
@@ -278,3 +403,74 @@ const ShareButtonText = styled.div`
color: ${color.grey["100"]};
`;
+
+const CopyInviteLink = styled.div`
+ display: flex;
+ align-items: center;
+
+ font-weight: 600;
+ font-size: 0.875rem;
+ line-height: 102.5%;
+
+ text-align: center;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+
+ color: ${color.grey["200"]};
+ stroke: ${color.grey["200"]};
+
+ &:hover {
+ color: ${color.grey["300"]};
+ stroke: ${color.grey["300"]};
+ }
+
+ cursor: pointer;
+`;
+
+const ComingSoonLeaderboardContainer = styled.div`
+ margin-top: 4.5rem;
+
+ height: 5rem;
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+`;
+
+const ComingSoonLeaderboardContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ width: 10rem;
+`;
+
+const ComingSoonLeaderboardContent1 = styled.div`
+ font-weight: 600;
+ font-size: 0.8125rem;
+ line-height: 102.5%;
+
+ letter-spacing: 0.19em;
+ text-transform: uppercase;
+
+ margin-bottom: 0.5rem;
+
+ color: ${color.grey["700"]};
+`;
+
+const ComingSoonLeaderboardContent2 = styled.div`
+ font-weight: 600;
+ font-size: 1rem;
+ line-height: 102.5%;
+
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+
+ color: ${color.grey["500"]};
+`;
+
+const RotateSvg = styled.svg`
+ animation: ${spinAnimation} 4s linear infinite;
+`;