update responsive design

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, onUnmounted, provide, ref } from "vue";
 import { storeToRefs } from "pinia";
 
 import Web3 from "web3";
@@ -9,10 +9,37 @@ import { useWalletStore } from "@/stores/wallet";
 const walletStore = useWalletStore();
 import { useTokenStore } from "@/stores/tokens";
 import { useContractStore } from "@/stores/contracts";
+import { useMemeburnerStore } from "@/stores/memeburner";
+import { useRewardLockerStore } from "@/stores/rewardlocker";
 const tokenStore = useTokenStore();
 const contractStore = useContractStore();
+const memeBurnerStore = useMemeburnerStore();
+const rewardLockerStore = useRewardLockerStore();
 const { memeBurner } = storeToRefs(tokenStore);
 const { list } = storeToRefs(contractStore);
+const isMobile = ref(false);
+isMobile.value = isMobileFunc();
+
+onMounted(() => {
+	window.addEventListener("resize", handleWindowSizeChange);
+	handleWindowSizeChange();
+});
+onUnmounted(() => {
+	window.removeEventListener("resize", handleWindowSizeChange);
+});
+const handleWindowSizeChange = () => {
+	isMobile.value = isMobileFunc();
+	// your code
+};
+
+function isMobileFunc() {
+	if (screen.width <= 760) {
+		return true;
+	} else {
+		return false;
+	}
+}
+provide("isMobile", isMobile);
 
 onMounted(async () => {
 	var test = await walletStore.isConnected();
@@ -25,11 +52,36 @@ onMounted(async () => {
 		memeBurner.value.config.abi,
 		memeBurner.value.config.contractAddress
 	);
+
+	//Memeburner Contract
+	memeBurnerStore.contract = new web3.eth.Contract(
+		memeBurnerStore.config.abi,
+		memeBurnerStore.config.contractAddress
+	);
+
+	var getGoal = await memeBurnerStore.getGoal(2);
+
+	console.log("getGoal", getGoal);
+	console.log("memeBurnerStore.contract", memeBurnerStore.contract);
 	console.log("list", list.value);
 	const currentRound = await contract.methods.currentRound().call();
 	const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
 	console.log("currentRound", currentRound);
 	console.log("rounds", rounds);
+
+	rewardLockerStore.contract = new web3.eth.Contract(
+		rewardLockerStore.config.abi,
+		rewardLockerStore.config.contractAddress
+	);
+
+	var lastCompletedRound = await rewardLockerStore.lastCompletedRound();
+	console.log("lastCompletedRound", lastCompletedRound);
+	var getwards = await rewardLockerStore.getRewards(
+		walletStore.address,
+		1,
+		"0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
+	);
+	console.log("getwards", getwards);
 });
 </script>
 
@@ -38,6 +90,22 @@ onMounted(async () => {
 	<div class="main">
 		<RouterView />
 	</div>
+	<div class="footer">
+		<div class="footer-inner">
+			$BLOOD is 100%<br />
+			community owned.<br />
+			No team %, no pre-mine.
+		</div>
+	</div>
 </template>
 
-<style lang="sass"></style>
+<style lang="sass">
+.footer
+    height: 450px
+    min-height: 450px
+    background-color: var(--grey2)
+    .footer-inner
+        padding: 24px
+        font-size: 24px
+        text-align: center
+</style>

src/assets/contracts/LiquidityOwner.json

@@ -1,6 +1,6 @@
 {
   "contractName": "LiquidityOwner",
-  "contractAddress": "0x0ce1d955f2a2658d6ca1CF61Fa300234fD8A262c",
+  "contractAddress": "0xF58FC44A2862335F3577253EC544488006aF676A",
   "abi": [
     {
       "inputs": [
@@ -83,7 +83,7 @@
       "inputs": [
         {
           "internalType": "uint256[]",
-          "name": "liquidityTokenIds",
+          "name": "tokenIds",
           "type": "uint256[]"
         }
       ],
@@ -198,7 +198,7 @@
       "inputs": [
         {
           "internalType": "uint256[]",
-          "name": "positionsToCancel",
+          "name": "tokenIds",
           "type": "uint256[]"
         },
         {
@@ -240,22 +240,22 @@
       "inputs": [
         {
           "internalType": "address",
-          "name": "",
+          "name": "operator",
           "type": "address"
         },
         {
           "internalType": "address",
-          "name": "",
+          "name": "from",
           "type": "address"
         },
         {
           "internalType": "uint256",
-          "name": "",
+          "name": "tokenId",
           "type": "uint256"
         },
         {
           "internalType": "bytes",
-          "name": "",
+          "name": "data",
           "type": "bytes"
         }
       ],
@@ -267,7 +267,7 @@
           "type": "bytes4"
         }
       ],
-      "stateMutability": "pure",
+      "stateMutability": "nonpayable",
       "type": "function"
     },
     {

src/assets/contracts/MemeBurner.json

@@ -1,6 +1,6 @@
 {
   "contractName": "MemeBurner",
-  "contractAddress": "0x6eEAe97975e156400DD1DDD8eFc4CcB167BaAFC3",
+  "contractAddress": "0x5c7077b0424c0e425B16363AdA59f1D72914C5c5",
   "abi": [
     {
       "inputs": [
@@ -146,6 +146,35 @@
       "name": "MemeSacrificed",
       "type": "event"
     },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "goal",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "achieved",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amountOfAsset",
+          "type": "uint256"
+        }
+      ],
+      "name": "_calculateLinearDecreasingReward",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "reward",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "pure",
+      "type": "function"
+    },
     {
       "inputs": [
         {
@@ -177,59 +206,6 @@
       "stateMutability": "view",
       "type": "function"
     },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "memeToSacrifice",
-          "type": "address"
-        },
-        {
-          "internalType": "uint256",
-          "name": "amountToSacrifice",
-          "type": "uint256"
-        }
-      ],
-      "name": "getRewardFor",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "uint256",
-          "name": "roundNumber",
-          "type": "uint256"
-        },
-        {
-          "internalType": "address",
-          "name": "meme",
-          "type": "address"
-        }
-      ],
-      "name": "getSacrificedMeme",
-      "outputs": [
-        {
-          "internalType": "bool",
-          "name": "participation",
-          "type": "bool"
-        },
-        {
-          "internalType": "uint256",
-          "name": "amountAchieved",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
     {
       "inputs": [],
       "name": "liquidityAmountLimit",

src/assets/contracts/MemeToken.json

@@ -1,6 +1,6 @@
 {
   "contractName": "MemeToken",
-  "contractAddress": "0xeC73Ec89897a36E9Ca36B2190964bBd8C46748AD",
+  "contractAddress": "0x0e349D42C125acA39ea58024FFC23ED0fE5feE32",
   "abi": [
     {
       "inputs": [

src/assets/contracts/RewardLocker.json

@@ -1,6 +1,6 @@
 {
   "contractName": "RewardLocker",
-  "contractAddress": "0x3bEc26159dbA0A32210eaDF6A938F1BbE8bfDAA0",
+  "contractAddress": "0x6749F75Ece2755d38f209Da1cBab07A1caD69554",
   "abi": [
     {
       "inputs": [
@@ -15,7 +15,7 @@
     },
     {
       "inputs": [],
-      "name": "MemeAltarAlreadyInitialized",
+      "name": "MemeBurnerAlreadyInitialized",
       "type": "error"
     },
     {
@@ -23,21 +23,6 @@
       "name": "MemeTokenAlreadyInitialized",
       "type": "error"
     },
-    {
-      "inputs": [],
-      "name": "RoundIsNotCompletedYet",
-      "type": "error"
-    },
-    {
-      "inputs": [],
-      "name": "TooEarlyToUnstake",
-      "type": "error"
-    },
-    {
-      "inputs": [],
-      "name": "Unsynchronized",
-      "type": "error"
-    },
     {
       "anonymous": false,
       "inputs": [
@@ -48,7 +33,7 @@
           "type": "address"
         },
         {
-          "indexed": true,
+          "indexed": false,
           "internalType": "uint256",
           "name": "amount",
           "type": "uint256"
@@ -57,56 +42,6 @@
       "name": "ClaimedReward",
       "type": "event"
     },
-    {
-      "anonymous": false,
-      "inputs": [
-        {
-          "indexed": true,
-          "internalType": "address",
-          "name": "staker",
-          "type": "address"
-        },
-        {
-          "indexed": true,
-          "internalType": "uint256",
-          "name": "stakedRound",
-          "type": "uint256"
-        },
-        {
-          "indexed": true,
-          "internalType": "uint256",
-          "name": "stakedAmount",
-          "type": "uint256"
-        }
-      ],
-      "name": "RewardStaked",
-      "type": "event"
-    },
-    {
-      "anonymous": false,
-      "inputs": [
-        {
-          "indexed": true,
-          "internalType": "address",
-          "name": "unstaker",
-          "type": "address"
-        },
-        {
-          "indexed": true,
-          "internalType": "uint256",
-          "name": "unstakeRound",
-          "type": "uint256"
-        },
-        {
-          "indexed": true,
-          "internalType": "uint256",
-          "name": "unstakedAmount",
-          "type": "uint256"
-        }
-      ],
-      "name": "RewardUnstaked",
-      "type": "event"
-    },
     {
       "anonymous": false,
       "inputs": [
@@ -171,29 +106,23 @@
       "type": "event"
     },
     {
-      "anonymous": false,
       "inputs": [
         {
-          "indexed": true,
           "internalType": "address",
-          "name": "unstaker",
+          "name": "_burnedToken",
           "type": "address"
-        },
+        }
+      ],
+      "name": "claim",
+      "outputs": [
         {
-          "indexed": true,
           "internalType": "uint256",
-          "name": "unstakeRound",
+          "name": "claimedAmount",
-          "type": "uint256"
-        },
-        {
-          "indexed": true,
-          "internalType": "uint256",
-          "name": "unstakedAmount",
           "type": "uint256"
         }
       ],
-      "name": "UnstakeOrdered",
+      "stateMutability": "nonpayable",
-      "type": "event"
+      "type": "function"
     },
     {
       "inputs": [
@@ -204,7 +133,7 @@
         },
         {
           "internalType": "address[]",
-          "name": "_sacrificedTokens",
+          "name": "_burnedTokens",
           "type": "address[]"
         }
       ],
@@ -219,6 +148,81 @@
       "stateMutability": "nonpayable",
       "type": "function"
     },
+    {
+      "inputs": [
+        {
+          "internalType": "address[]",
+          "name": "_burnedTokens",
+          "type": "address[]"
+        }
+      ],
+      "name": "claim",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "claimedAmount",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_round",
+          "type": "uint256"
+        }
+      ],
+      "name": "claim",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "claimedAmount",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_round",
+          "type": "uint256"
+        },
+        {
+          "internalType": "address[]",
+          "name": "_burnedTokens",
+          "type": "address[]"
+        }
+      ],
+      "name": "claim",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "claimedAmount",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "claim",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "claimedAmount",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
     {
       "inputs": [
         {
@@ -247,7 +251,31 @@
         },
         {
           "internalType": "address",
-          "name": "_sacrificedToken",
+          "name": "_burnedToken",
+          "type": "address"
+        }
+      ],
+      "name": "claim",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "claimedAmount",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_round",
+          "type": "uint256"
+        },
+        {
+          "internalType": "address",
+          "name": "_burnedToken",
           "type": "address"
         }
       ],
@@ -266,31 +294,7 @@
       "inputs": [
         {
           "internalType": "address",
-          "name": "beneficiary",
+          "name": "_memeBurner",
-          "type": "address"
-        },
-        {
-          "internalType": "uint256[]",
-          "name": "roundNumbers",
-          "type": "uint256[]"
-        }
-      ],
-      "name": "getTotalRewardsOf",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "totalRewardsAmount",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "_memeAltar",
           "type": "address"
         },
         {
@@ -319,7 +323,7 @@
     },
     {
       "inputs": [],
-      "name": "memeAltar",
+      "name": "memeBurner",
       "outputs": [
         {
           "internalType": "address",
@@ -343,19 +347,6 @@
       "stateMutability": "view",
       "type": "function"
     },
-    {
-      "inputs": [],
-      "name": "orderUnstake",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "unstakeRound",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
     {
       "inputs": [
         {
@@ -365,7 +356,7 @@
         },
         {
           "internalType": "address[]",
-          "name": "sacrificableTokens",
+          "name": "burnableTokens",
           "type": "address[]"
         }
       ],
@@ -389,7 +380,7 @@
         },
         {
           "internalType": "address",
-          "name": "_sacrificedToken",
+          "name": "_burnedToken",
           "type": "address"
         },
         {
@@ -477,11 +468,6 @@
           "name": "roundCompleted",
           "type": "bool"
         },
-        {
-          "internalType": "uint256",
-          "name": "totalDefaultRewards",
-          "type": "uint256"
-        },
         {
           "internalType": "uint256",
           "name": "totalRewards",
@@ -490,150 +476,6 @@
       ],
       "stateMutability": "view",
       "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "uint256",
-          "name": "amount",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "deadline",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint8",
-          "name": "v",
-          "type": "uint8"
-        },
-        {
-          "internalType": "bytes32",
-          "name": "r",
-          "type": "bytes32"
-        },
-        {
-          "internalType": "bytes32",
-          "name": "s",
-          "type": "bytes32"
-        }
-      ],
-      "name": "stakeToBeSecured",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "stakedAmount",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "uint256[]",
-          "name": "_rounds",
-          "type": "uint256[]"
-        },
-        {
-          "internalType": "address[]",
-          "name": "_sacrificedTokens",
-          "type": "address[]"
-        }
-      ],
-      "name": "stakeToBeSecured",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "stakedAmount",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "uint256",
-          "name": "amount",
-          "type": "uint256"
-        }
-      ],
-      "name": "stakeToBeSecured",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "stakedAmount",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "",
-          "type": "address"
-        }
-      ],
-      "name": "staked",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "uint256",
-          "name": "unstakeRound",
-          "type": "uint256"
-        }
-      ],
-      "name": "unstake",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "unstakedAmount",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        },
-        {
-          "internalType": "address",
-          "name": "",
-          "type": "address"
-        }
-      ],
-      "name": "unstakeOrdered",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
     }
   ]
 }

src/assets/sass/base.sass

@@ -1,12 +1,23 @@
 .bloodline-devider
     font-size: 42px
-    margin: 24px 0
     text-align: center
+    margin: 16px 0
+    @media (min-width: 992px)
+        margin: 24px 0
 
 .bloodline-border
-    padding: 24px 32px
+    padding: 16px
-    border: 4px solid #000000
     border-radius: 16px
+    border: 2px solid #000
+    &.bloodline-border--variant1
+        border: 4px solid var(--midnight-black)
+        @media (min-width: 992px)
+            border: 4px solid #000
+    @media (min-width: 992px)
+        padding: 24px 32px
+        border: 4px solid #000
+    &.purple
+        border-color: var(--purple)
 
 .bloodline-badge
     padding: 8px 16px 8px 16px
@@ -30,6 +41,20 @@
     border-color: rgba(var(--v-border-color),var(--v-border-opacity))
     border-style: solid
     border-width: 0
-    border-radius: 4px
+    border-radius: 16px
     box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
     background-color: $darkgrey
+    @media (min-width: 992px)
+        border-radius: 4px
+    &.card--variant1
+        border-radius: 0
+
+.bloodline-token
+    height: 50px
+    width: 50px
+    @media (min-width: 992px)
+        height: auto
+        width: auto
+
+.bloodline-container
+    padding: 0 24px

src/assets/sass/buttons.sass

@@ -1,12 +1,15 @@
 
 .btn
     &.btn-immortal
-        background-color: $red
+
+        background-color: $purple
         color: $button-color
         font-size: 24px
         padding: 16px 24px
         gap: 8px
         border-radius: 14px
+        @media (min-width: 992px)
+            background-color: $red
         &:hover,&:focus,&:active
             background-color: lighten($button-background-color, 10%),
             color: darken($button-color, 10%),

src/assets/sass/main.sass

@@ -37,18 +37,12 @@ body
         margin-top: auto
 
 .container
-    padding-right: 15px
-    padding-left: 15px
     margin-right: auto
     margin-left: auto
     @media (min-width: 992px)
         max-width: 800px
-.section-header-container
+        padding-right: 15px
-    width: 655px
+        padding-left: 15px
-    text-align: center
-    font-size: 24px
-    margin-top: 64px
-    margin-bottom: 64px
 
 h1
     font-weight: 700
@@ -57,7 +51,16 @@ h1
     @media (min-width: 992px)
         font-size: 60px
     @media (min-width: 1200px)
-
+h2
+    font-size: 40px
+    font-weight: 200
+    @media (min-width: 992px)
+        font-size: 40px
+h3
+    font-size: 32px
+    font-weight: 200
+    @media (min-width: 992px)
+        font-size: 40px
 .page-head
     margin-bottom: 80px
 .page-body

src/assets/sass/variables.sass

@@ -13,8 +13,9 @@ $black: #0F0F0F
 $grey: #808080
 $red: #8B0000
 $purple: #4B0082
-
+$midnight-black: #0F0F0F
 $darkgrey: #202020
+$grey2: #2D2D2D
 
 $button-color: $white
 $button-background-color: $black
@@ -29,8 +30,11 @@ $button-background-color: $black
     --tertiary-light: #{$tertiary-light}
     --tertiary-dark: #{$tertiary-dark}
     --grey: #{$grey}
+    --grey2: #{$grey2}
     --purple: #{$purple}
     --blood-color: #{$red}
+    --midnight-black: #{$midnight-black}
+    --darkgrey: #{$darkgrey}
 // :root
 //     --font-size-text: 16px
 //     --font-size-title: 32px

src/components/BloodChart.vue

@@ -2,7 +2,9 @@
 	<div class="blood-chart-wrapper">
 		<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
 			<div class="blood-chart-element-header">
-				<div class="blood-chart-coin"></div>
+				<div class="blood-chart-coin">
+					<img :src="getImageUrl(coin.icon)" alt="logo" />
+				</div>
 				<div class="blood-chart-coin-title">{{ coin.name }}</div>
 			</div>
 			<div class="blood-chart-element-body">
@@ -50,18 +52,25 @@
 </template>
 
 <script setup>
+function getImageUrl(url) {
+	return new URL(url, import.meta.url).href;
+}
+
 const dataPoints = [
 	{
-		name: "PEPE",
+		name: "$PEPE",
 		percentage: 62.2,
+		icon: "/src/assets/img/token/pepevamp.png",
 	},
 	{
-		name: "Shiba",
+		name: "$SHIB",
 		percentage: 31.2,
+		icon: "/src/assets/img/token/shibvamp.png",
 	},
 	{
-		name: "Doge",
+		name: "$ELON",
 		percentage: 54.5,
+		icon: "/src/assets/img/token/elonvamp.png",
 	},
 ];
 </script>
@@ -69,8 +78,14 @@ const dataPoints = [
 <style lang="sass">
 .blood-chart-wrapper
     height: 750px
+    width: 100%
+    justify-content: space-around
     display: inline-flex
+    @media (min-width: 992px)
         gap: 96px
+        width: unset
+        justify-content: unset
+
     .blood-chart-element
         height: 100%
         width: 80px
@@ -82,19 +97,22 @@ const dataPoints = [
                 height: 80px
                 width: 80px
                 border-radius: 80px
-                background-color: grey
                 margin-left: auto
                 margin-right: auto
                 position: relative
                 margin-bottom: 16px
+                overflow: hidden
             .blood-chart-coin-title
                 text-align: center
                 margin-bottom: 32px
+                font-size: 16px
+                @media (min-width: 992px)
                     font-size: 24px
         .blood-chart-element-body
             background-color: rgba(233, 233, 233, 0.2)
             flex: 1 1 auto
             border-radius: 8px 8px 40px 40px
+            text-align: left
             .blood-chart-bar-wrapper
                 height: 100%
                 display: flex
@@ -103,14 +121,14 @@ const dataPoints = [
                     margin-top: auto
                     background-color: var(--blood-color)
                     position: relative
-                    border-radius: 8px 8px 40px 40px
+                    border-radius: 0 0 40px 40px
                     .blood-chart-bar-percentage
                         font-size: 14px
                         text-align: center
                         margin-top: 16px
                     .waves
                         position: absolute
-                        top: -8px
+                        top: -10px
                         width: 100%
                         height: 10px
         .blood-chart-element-footer

src/components/Navbar.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 const walletStore = useWalletStore();
 const { connected, address } = storeToRefs(walletStore);
+const isMobile = inject("isMobile");
 
 const showNavbar = ref(true);
 const lastScrollPosition = ref(0);
@@ -37,7 +38,7 @@ onBeforeUnmount(() => {
 					</router-link>
 				</div>
 				<div class="navbar-text">Bloodline</div>
-				<div class="navbar-center">
+				<div class="navbar-center" v-if="!isMobile">
 					<div class="navbar-social-links">
 						<div class="social-bloodline-badge">
 							<div class="social-bloodline-badge-icon">
@@ -60,9 +61,14 @@ onBeforeUnmount(() => {
 					</div>
 				</div>
 				<div class="navbar-end">
+					<div v-if="!isMobile">
 						<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
 						<span v-else> {{ address }}</span>
 					</div>
+					<div v-else class="hamburger-menu">
+						<font-awesome-icon :icon="['fas', 'bars']" />
+					</div>
+				</div>
 			</div>
 		</div>
 	</header>
@@ -78,6 +84,8 @@ header
         width: 100%
         transform: translate3d(0,0,0)
         transition: transform .3s ease,visibility 0s .3s linear
+        height: 82px
+        @media (min-width: 992px)
             height: 128px
         &.navbar--hidden
             transform: translate3d(0,-100%,0)
@@ -89,10 +97,18 @@ header
             align-items: center
             @media (min-width: 992px)
                 padding: 16px 24px
+            .navbar-icon
+                img
+                    height: 50px
+                    width: 50px
             .navbar-text
                 font-family: 'Vampire', sans-serif
-                font-size: 64px
+                font-size: 36px
+                margin-left: 16px
                 letter-spacing: 0.138em
+                line-height: 73.107px
+                @media (min-width: 992px)
+                    font-size: 64px
             .navbar-center
                 display: flex
                 margin-left: auto
@@ -105,10 +121,15 @@ header
                         border-radius: 14px
                         background-color: #0F0F0F
                         display: flex
+                        &:hover,&:active,&:focus
+                            background-color: lighten(#0F0F0F, 10%)
+                            cursor: pointer
                         .social-bloodline-badge-icon
                             margin-right: 8px
             .navbar-end
                 display: flex
-                flex: 0 0 200px
+                margin-left: auto
-                justify-content: flex-end
+                .hamburger-menu
+                    color: var(--purple)
+                    font-size: 42px
 </style>

src/components/RewardsWrapper.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="rewards-wrapper">
+		<div class="rewards-header">
+			<div class="rewards-header-title">
+				{{ props.title }}
+			</div>
+			<div class="rewards-header-info">{{ props.info }}</div>
+		</div>
+		<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
+			<div class="rewards-body">
+				<div class="rewards-coin">$BLOOD</div>
+				<div class="rewards-amount">0</div>
+			</div>
+			<img class="bloodline-token" :src="props.image" alt="vampir" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	title: String,
+	info: String,
+	image: String,
+});
+</script>
+
+<style lang="sass">
+.rewards-header
+    font-size: 16px
+    padding: 8px
+    display: flex
+    @media (min-width: 992px)
+        font-size: 24px
+    .rewards-header-info
+        margin-left: auto
+.rewards-sacrifice-wrapper, .rewards-clan-wrapper
+    display: flex
+    .rewards-body
+        align-self: center
+        .rewards-coin
+            font-size: 16px
+            @media (min-width: 992px)
+                font-size: 24px
+        .rewards-amount
+            font-size: 24px
+            margin-top: 8px
+            @media (min-width: 992px)
+                font-size: 40px
+                margin-top: 0
+    img
+        margin-left: auto
+        align-self: center
+</style>

src/components/SacrificeToken.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="sacrifice-wrapper card bloodline-wrapper">
 		{{ activeToken.allowance }}
-		<div class="sacrifice-headline">Select Token</div>
+
+		<div class="sacrifice-inner">
+			<div class="sacrifice-headline">Select Sacrifice</div>
 			<div class="sacrifice-select-tokens">
 				<div class="sacrifice-tokens">
 					<div
@@ -11,36 +13,44 @@
 						:key="token.contractAddress"
 						@click="tokenStore.changeActiveToken(token)"
 					>
-					{{ token.name }}
+						<div class="sacrifice-token-logo">
+							<img v-if="isMobile" :src="token.logoMobile" alt="token logo" />
+							<img v-if="!isMobile" :src="token.logo" alt="token logo" />
+						</div>
+						<div class="sacrifice-token-name">{{ token.name }}</div>
 					</div>
 				</div>
 			</div>
 			<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
-			<div class="sacrifice-from-wrapper bloodline-border">
+				<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
 					<div class="sarcrifice-from-input">
-					<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><img
+						<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" />
-						src="@/assets/img/vampir.png"
+						<div class="sacrifice-logo">
-						alt="vampir"
+							<img src="@/assets/img/vampir.png" alt="vampir" />
-					/>
+						</div>
 					</div>
 					<div class="value-adder">
-					<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000)">+1m</div>
 						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
 						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
-					<div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
+						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
-					<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</div>
+						<!-- <div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
+						<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">
+							Max
+						</div> -->
 					</div>
 				</div>
 				<div class="sacrifice-divider bloodline-devider">
 					<font-awesome-icon :icon="['fas', 'arrow-down']" />
 				</div>
-			<div class="sacrifice-to-wrapper bloodline-border">
+				<div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
 					<div class="sarcrifice-from-input">
 						<div class="sacrifice-to-output">
-						<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div>
+							<div class="sacrifice-to-output-coin">$BLOOD</div>
 							<div class="sacrifice-to-output-rewards">{{ output }}</div>
 						</div>
-					<img src="@/assets/img/vampir.png" alt="vampir" />
+						<div class="sacrifice-logo">
+							<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
+						</div>
 					</div>
 				</div>
 				<div class="sacrifice-fees-info-wrapper">
@@ -75,14 +85,16 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script setup>
-import { ref, defineProps, watch } from "vue";
+import { ref, defineProps, watch, inject } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
 import { storeToRefs } from "pinia";
 import Helper from "@/utils/helper.js";
+const isMobile = inject("isMobile");
 
 const walletStore = useWalletStore();
 const { contract, connected } = storeToRefs(walletStore);
@@ -115,6 +127,10 @@ async function test(e) {
 function addTokens(value) {
 	tokenNumber.value = tokenNumber.value + value;
 }
+
+function getImageUrl(url) {
+	return new URL(url, import.meta.url).href;
+}
 </script>
 
 <style lang="sass">
@@ -125,71 +141,111 @@ function addTokens(value) {
     margin-left: auto
     margin-right: auto
     background-color: var(--primary)
+    .sacrifice-inner
+        padding: 48px 24px
+        @media (min-width: 992px)
+            padding: 48px 64px
         .sacrifice-headline
             text-align: center
+            font-size: 24px
+            margin-bottom: 32px
+            @media (min-width: 992px)
                 font-size: 36px
         .sacrifice-select-tokens
-        padding: 24px
             display: flex
             margin-bottom: 32px
         .sacrifice-tokens
             display: flex
             width: 100%
+            justify-content: space-between
+            @media (min-width: 992px)
                 justify-content: space-evenly
+
             .sacrifice-token
-            width: 132px
-            height: 132px
                 border-radius: 16px
                 padding: 12px
-            border: 1px solid lightgrey
                 cursor: pointer
-            background-color: var(--tertiary)
+                background-color: #0F0F0F
+                text-align: center
+                @media (min-width: 992px)
+                    padding: 0
+                    background-color: unset
                 &:hover,
                 &:active,
                 &:focus
                     background-color: var(--tertiary-dark)
                 &.sacrifice-token--active
                     background-color: var(--tertiary-dark)
+                .sacrifice-token-name
+                    padding: 5px 26px
+                    font-size: 16px
+                    @media (min-width: 992px)
+                        font-size: 24px
+
         .sacrifice-buttons-function-wrapper
             text-align: center
-        display: flex
             justify-content: center
             margin-top: 24px
+            display: block
+            @media (min-width: 992px)
+                display: flex
             .btn
                 padding: 16px 64px
         .sacrifice-fees-info-wrapper
             display: flex
             border: 2px dashed var(--grey)
+            color: var(--grey)
             border-radius: 16px
             padding: 16px 24px
             margin-top: 24px
+            font-size: 16px
             .sacrifice-fees-img
                 flex: 0 0 15%
             .sacrifice-fees-body
                 flex: 1 1 auto
                 .sacrifice-fees-body-header
-                font-size: 24px
                     display: flex
                     flex-direction: row
                     justify-content: space-between
+                    margin-bottom: 8px
+                    @media (min-width: 992px)
+                        font-size: 24px
+                        margin-bottom: 0
 
 .sacrifice-from-to-wrapper
     .sacrifice-from-wrapper,.sacrifice-to-wrapper
         .sarcrifice-from-input
             display: flex
             margin-bottom: 8px
-            height: 60px
+            // height: 60px
             input
                 width: 100%
+                height: 45px
+                font-size: 24px
+                border-radius: 16px
+                padding: 0 16px
+                @media (min-width: 992px)
                     font-size: 32px
-            img
+                    height: auto
+        .sacrifice-logo
             margin-left: 16px
+            img
+                width: 45px
+                height: 45px
+                border-radius: 50%
+                @media (min-width: 992px)
+                    height: auto
+                    width: auto
         .sacrifice-to-output
             flex: 1 1 auto
             text-align: left
             .sacrifice-to-output-coin
+                font-size: 16px
+                @media (min-width: 992px)
                     font-size: 24px
             .sacrifice-to-output-rewards
+                font-size: 24px
+                @media (min-width: 992px)
                     font-size: 42px
         .value-adder
             display: flex
@@ -200,17 +256,16 @@ function addTokens(value) {
                 &:active,
                 &:focus
                     background-color: var(--secondary)
-                    border: 1px solid var(--secondary-dark)
                     cursor: pointer
-            .sacrifice-adder-balance
+            // .sacrifice-adder-balance
-                margin-left: auto
+            //     margin-left: auto
-            .sacrifice-adder-max
+            // .sacrifice-adder-max
-                margin-left: 12px
+            //     margin-left: 12px
-                color: red
+            //     color: red
-                &:hover,
+            //     &:hover,
-                &:focus,
+            //     &:focus,
-                &:active
+            //     &:active
-                    color: darken(red, 10%)
+            //         color: darken(red, 10%)
-                    transform: scale(1.1)
+            //         transform: scale(1.1)
-                    transition: transform 0s
+            //         transition: transform 0s
 </style>

src/components/TokenClaim.vue

@@ -1,57 +1,53 @@
 <template>
 	<div class="claim bloodline-border">
-		<div class="rewards-wrapper">
+		<div class="rewards-wrapper" v-if="!isMobile">
-			<div class="rewards-headline">Sacrafice Reward</div>
+			<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
-			<div class="rewards-sacrifice-wrapper bloodline-border">
-				<div class="rewards-body">
-					<div class="rewards-coin">$BLOOD</div>
-					<div class="rewards-amount">0</div>
-				</div>
-				<img src="@/assets/img/vampir.png" alt="vampir" />
-			</div>
 			<div class="rewards-divider bloodline-devider">
 				<font-awesome-icon icon="fa-solid fa-plus" />
 			</div>
-			<div class="rewards-headline">Clan Reward</div>
+			<rewards-wrapper title="Clan Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
-			<div class="rewards-clan-wrapper bloodline-border">
-				<div class="rewards-body">
-					<div class="rewards-coin">$BLOOD</div>
-					<div class="rewards-amount">0</div>
-				</div>
-				<img src="@/assets/img/vampir.png" alt="vampir" />
-			</div>
 			<div class="claim-button">
 				<div class="btn btn-immortal">Claim</div>
 			</div>
 		</div>
+		<div class="rewards-list" v-else>
+			<rewards-wrapper
+				title="Total Sacrafice Reward"
+				coin="$BLOOD"
+				amount="0"
+				image="/src/assets/img/vampir.png"
+			/>
+			<rewards-wrapper
+				title="Total Stake Reward"
+				coin="$BLOOD"
+				amount="0"
+				info="max: 312m"
+				image="/src/assets/img/vampir.png"
+			/>
+			<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
+			<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
+		</div>
 	</div>
 </template>
 
-<script setup></script>
+<script setup>
+import RewardsWrapper from "@/components/RewardsWrapper.vue";
+import { inject } from "vue";
+const isMobile = inject("isMobile");
+</script>
 
 <style lang="sass">
 .claim
     display: flex
+    padding: 32px 20px
     flex-direction: column
+    @media (min-width: 992px)
         padding: 32px 40px
     .claim-button
         text-align: center
         margin-top: 32px
-    .rewards-wrapper
+.rewards-wrapper
-        width: 100%
+    margin-bottom: 16px
-        .rewards-headline
+.rewards-divider
-            font-size: 24px
-            padding: 0 0 4px 8px
-        .rewards-divider
     text-align: center
-        .rewards-sacrifice-wrapper, .rewards-clan-wrapper
-            display: flex
-            .rewards-body
-                align-self: center
-                .rewards-coin
-                    font-size: 24px
-                .rewards-amount
-                    font-size: 40px
-            img
-                margin-left: auto
 </style>

src/helper/helper.js

@@ -0,0 +1,4 @@
+
+export function getImageUrl(url) {
+    return new URL(url, import.meta.url).href;
+}

src/main.js

@@ -14,12 +14,12 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faSpinner ,faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
 
 
 /* add icons to the library */
-library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus);
+library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars);
 
 const app = createApp(App)
 

src/stores/memeburner.js

@@ -0,0 +1,18 @@
+import { defineStore } from "pinia";
+import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
+
+export const useMemeburnerStore = defineStore("memeburner", {
+	state: () => ({
+		config: MemeBurnerJson,
+		contract: null,
+	}),
+	getters: {},
+	actions: {
+		async getCurrentRound() {
+			return await this.contract.methods.currentRound().call();
+		},
+		async getGoal(roundnumber) {
+			return await this.contract.methods.rounds(roundnumber).call();
+		},
+	},
+});

src/stores/rewardlocker.js

@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import RewardLockerJson from "@/assets/contracts/RewardLocker.json";
+
+export const useRewardLockerStore = defineStore("rewardlocker", {
+	state: () => ({
+		config: RewardLockerJson,
+		contract: null,
+	}),
+	getters: {},
+	actions: {
+		/*
+		 * @param {*} walletAddress
+		 * @param {*} roundNumber
+		 * @param {*} tokenAddress
+		 * @returns Rewards for specific token and specific round
+		 */
+		async getRewards(walletAddress, roundNumber, tokenAddress) {
+			return await this.contract.methods.rewards(walletAddress, roundNumber, tokenAddress).call();
+		},
+		async lastCompletedRound() {
+			return await this.contract.methods.lastCompletedRound().call();
+		},
+	},
+});

src/stores/tokens.js

@@ -397,15 +397,39 @@ export const useTokenStore = defineStore("token", {
 			// 	],
 			// },
 			{
-				name: "Meme1",
+				name: "$PEPE",
+				logo: "/src/assets/img/token/pepe.png",
+				logoMobile: "/src/assets/img/token/pepeMobile.png",
+				vamp: {
+					logo: "/src/assets/img/token/pepevamp.png",
+					name: "$PEPE Vamp Token",
+				},
+				backgroundColor: "#4b8501",
 				abi: Meme1Json.abi,
 				contractAddress: Meme1Json.contractAddress,
 			},
 			{
-				name: "Meme2",
+				name: "$SHIB",
+				logo: "/src/assets/img/token/shib.png",
+				logoMobile: "/src/assets/img/token/shibMobile.png",
+				vamp: {
+					logo: "/src/assets/img/token/shibvamp.png",
+					name: "$SHIBA Vamp Token",
+				},
 				abi: Meme2Json.abi,
 				contractAddress: Meme2Json.contractAddress,
 			},
+			{
+				name: "$ELON",
+				logo: "/src/assets/img/token/elon.png",
+				logoMobile: "/src/assets/img/token/elonMobile.png",
+				vamp: {
+					logo: "/src/assets/img/token/shibvamp.png",
+					name: "$ELON Vamp Token",
+				},
+				abi: null,
+				contractAddress: null,
+			},
 		],
 		activeToken: {
 			address: null,
@@ -417,8 +441,8 @@ export const useTokenStore = defineStore("token", {
 		loading: false,
 		memeBurner: {
 			config: MemeBurnerJson,
-            contract: null
+			contract: null,
-        }
+		},
 	}),
 	getters: {},
 	actions: {
@@ -430,13 +454,14 @@ export const useTokenStore = defineStore("token", {
 			if (walletStore.connected) {
 				this.activeToken.balance = await walletStore.getTokenBalance(token);
 				this.activeToken.allowance = await this.allowance();
-                
 			}
 		},
 		async allowance() {
 			const walletStore = useWalletStore();
 			console.log("walletStore.address", walletStore.address);
-            const allowance = await this.contract.methods.allowance(walletStore.address, MemeBurnerJson.contractAddress).call();
+			const allowance = await this.contract.methods
+				.allowance(walletStore.address, MemeBurnerJson.contractAddress)
+				.call();
 			console.log("allowance", allowance);
 			return allowance;
 		},
@@ -462,7 +487,6 @@ export const useTokenStore = defineStore("token", {
 				console.log("reward", reward);
 			} catch (error) {
 				error.log(error);
-
 			} finally {
 				this.loading = false;
 			}
@@ -472,7 +496,7 @@ export const useTokenStore = defineStore("token", {
 			var rewards = await contractsStore.list.memeBurnerPublic.methods
 				.getRewardFor(this.activeToken.contractAddress, amount)
 				.call();
-            return rewards
+			return rewards;
 		},
 		getTokenContract(token) {
 			console.log("token", token);

src/stores/wallet.js

@@ -9,7 +9,6 @@ export const useWalletStore = defineStore("wallet", {
 		address: null,
 	}),
 	getters: {
-		double: (state) => state.count * 2,
 	},
 	actions: {
 		increment() {

src/views/HomeView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed, inject } from "vue";
 import { storeToRefs } from "pinia";
 import SacrificeToken from "@/components/SacrificeToken.vue";
 import BloodChart from "@/components/BloodChart.vue";
@@ -8,11 +9,36 @@ import TokenClaim from "@/components/TokenClaim.vue";
 import { useTokenStore } from "@/stores/tokens";
 const tokenStore = useTokenStore();
 const { token } = storeToRefs(tokenStore);
-import { Navigation } from "swiper";
 // Import Swiper Vue.js components
+const swiperInstance = ref();
+import { Navigation } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import "swiper/css";
 import "swiper/css/navigation";
+const modules = [Navigation];
+const isMobile = inject("isMobile");
+function onSwiper(swiper) {
+	swiperInstance.value = swiper;
+}
+
+const rounds = [{ round: 1 }, { round: 2 }, { round: 3 }];
+const currentSlide = ref(1);
+const currentIndex = computed(() => {
+	return rounds.findIndex((obj) => obj.round === currentSlide.value);
+});
+
+function prevSlide() {
+	if (currentSlide.value !== rounds[0].round) {
+		currentSlide.value--;
+	}
+}
+
+function nextSlide() {
+	if (currentSlide.value < rounds[rounds.length - 1].round) {
+		currentSlide.value++;
+	}
+}
+
 // let web3 = new Web3(
 // 	"https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
 // );
@@ -31,28 +57,51 @@ import "swiper/css/navigation";
 				<sacrifice-token :data="token"></sacrifice-token>
 			</section>
 
-			<swiper :slides-per-view="1" :navigation="true" :space-between="50">
+			<div class="container section-header-container">
-				<swiper-slide>Slide 1</swiper-slide>
+				<h3>Bloodline Cycle</h3>
+				Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
+				each cycle's end.
+			</div>
+			<section id="cycle-section" class="container">
+				<swiper
+					:slides-per-view="1"
+					:navigation="true"
+					:space-between="50"
+					@swiper="onSwiper"
+					:modules="modules"
+					class="cycle-slider"
+				>
+					<swiper-slide>Cycle 1</swiper-slide>
 					<swiper-slide>Slide 2</swiper-slide>
 					<swiper-slide>Slide 3</swiper-slide>
 					<swiper-slide>Slide 4</swiper-slide>
 					<swiper-slide>Slide 5</swiper-slide>
 				</swiper>
-			<div class="container section-header-container">
+				<div class="slider-wrapper">
-				<h2>Bloodline Cycle</h2>
+					<font-awesome-icon
-				Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
+						:class="{ 'slider-prev': true, disabled: currentSlide === rounds[0].round }"
-				each cycle's end.
+						@click="prevSlide"
+						:icon="['fas', 'caret-left']"
+					/>
+					<div class="slider-text">Cycle {{ currentSlide }}</div>
+					<font-awesome-icon
+						:class="{ 'slider-next': true, disabled: currentSlide === rounds[rounds.length - 1].round }"
+						@click="nextSlide"
+						:icon="['fas', 'caret-right']"
+					/>
 				</div>
-			<section id="cycle-section" class="container">
 				<div class="cycle card bloodline-wrapper">
+					<div class="bloodline-inner">
 						<token-claim></token-claim>
-					<div>
+					</div>
-						<h2>Bloodline Clan</h2>
+
+					<div class="bloodline-clan">
+						<h3>Bloodline Clan</h3>
 						<p>
 							Win extra rewards for you and your clan. Increase the strength of your bloodline by
 							sacrificing more memes.
 						</p>
-						<table class="bonus-table">
+						<table class="bonus-table" v-if="!isMobile">
 							<tbody>
 								<tr>
 									<th scope="row">1st</th>
@@ -68,9 +117,34 @@ import "swiper/css/navigation";
 								</tr>
 							</tbody>
 						</table>
+						<div class="bloodline-container" v-else>
+							<div class="bloodline-border purple">
+								Get up to +100% Clan Bonus <br />on your sacrifice.
+							</div>
+						</div>
 						<div class="blood-chart">
 							<blood-chart></blood-chart>
 						</div>
+						<div class="cycle-end-wrapper">
+							<div class="cycle-end-inner">
+								<h2>Cycle End</h2>
+								<div class="cycle-end-text">A cycle ends when only one of these goals is reached.</div>
+								<div class="bloodline-border">
+									<table>
+										<tr>
+											<td>Sacrifice:</td>
+											<td class="divider"></td>
+											<td>200b $BLOOD</td>
+										</tr>
+										<tr>
+											<td>Time left:</td>
+											<td class="divider"></td>
+											<td>23h 59m</td>
+										</tr>
+									</table>
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
 			</section>
@@ -83,7 +157,8 @@ import "swiper/css/navigation";
 				<div class="card">
 					<h2>Tokenomics</h2>
 					<p>100% clan owned. No team %, no pre-mine</p>
-					<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
+					<img v-if="isMobile" src="@/assets/img/tokenomics_footer.png" alt="tokenomics" />
+					<img v-else src="@/assets/img/tokenomics.png" alt="tokenomics" />
 				</div>
 			</section>
 		</div>
@@ -92,17 +167,26 @@ import "swiper/css/navigation";
 
 <style lang="sass">
 .blood-chart
+    margin-top: 56px
     display: flex
     justify-content: center
-.bloodline-wrapper
+    margin-bottom: 80px
-    padding: 48px 64px
 
 .header-text
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
+    font-size: 32px
+    text-align: center
+    margin-top: 64px
+    margin-bottom: 100px
+    @media (min-width: 992px)
         font-size: 64px
+        margin-top: 0px
+        line-height: unset
+        text-shadow: unset
         line-height: 80px
         font-weight: 600
-    text-align: center
+
-    margin-bottom: 100px
+
 .chart-wrapper-coin
     display: flex
     justify-content: space-evenly
@@ -126,6 +210,7 @@ import "swiper/css/navigation";
     th
         padding-right: 16px
 #tokenomics
+    background-color: var(--darkgrey)
     >div
         text-align: center
         img
@@ -149,4 +234,62 @@ import "swiper/css/navigation";
             margin-top: auto
             text-align: center
             padding-top: 10px
+
+.cycle-slider
+    text-align: center
+    .swiper-button-next
+        right: 30%
+    .swiper-button-prev
+        left: 30%
+
+.slider-wrapper
+    display: flex
+    justify-content: center
+    font-size: 24px
+    user-select: none
+    .slider-text
+        margin: 0 24px
+        margin-top: auto
+        margin-bottom: auto
+    .slider-prev, .slider-next
+        color: #3B0067
+        font-size: 40px
+        cursor: pointer
+        &.disabled
+            opacity: .35
+            pointer-events: none
+
+.section-header-container
+    text-align: center
+    font-size: 24px
+    margin-top: 64px
+    margin-bottom: 64px
+    @media (min-width: 992px)
+        width: 655px
+
+.bloodline-wrapper
+    .bloodline-inner
+        padding: 4px
+        @media (min-width: 992px)
+            padding: 20px
+    .bloodline-clan
+        text-align: center
+
+.cycle-end-wrapper
+    .cycle-end-inner
+        text-align: center
+        font-size: 24px
+        padding: 0 24px 48px 24px
+        .cycle-end-text
+            margin-bottom: 32px
+        table
+            width: 100%
+            tr
+                td
+                    text-align: left
+                    &.divider
+                        width: 10px
+
+        h2
+            font-size: 40px
 </style>