Merge pull request #443 from consensusnetworks/enhancement/landing-copy

Enhancement/landing copy

apps/landing/src/pages/landing/Landing.vue

@@ -100,8 +100,8 @@ const toggleQuestionItem = (index: number) => {
         <div class="text__container">
           <span class="pill">Beta</span>
           <h1 class="text-1">
-            Stake and earn Ethereum <br>
-            without giving up custody
+            Get the most from your staked Ethereum
+            <br>
           </h1>
           <!-- <span class="text-r">
             Casimir allows you to natively stake any amount of Ethereum to a decentralized
@@ -114,7 +114,7 @@ const toggleQuestionItem = (index: number) => {
             :href="appUrl"
             class="btn-primary"
           >
-            Launch App
+            Launch Staking App
           </a>
           <a
             href="https://drive.google.com/file/d/1giIojTS-4gf0xWXUirmd2AaqalFmgA72/view"
@@ -125,7 +125,7 @@ const toggleQuestionItem = (index: number) => {
         </div>
       </div>
       <div class="mockup">
-        <img src="/hero.png">
+        <img src="/hero-new.png">
       </div>
     </section>
 
@@ -139,6 +139,21 @@ const toggleQuestionItem = (index: number) => {
       </div>
       <!-- <div class="mock"><img src="/hero.png" /></div> -->
       <div class="overview__container">
+        <div class="overview__item">
+          <div class="overview__item__header">
+            <div class="icon">
+              <img
+                src="/disc.svg"
+                width="17"
+              >
+            </div>
+            <span class="text-7 bold">Maximize your Yield</span>
+          </div>
+          <span class="text-r">
+            Integrate with features like Restaking on EigenLayer to increase your stake yield.
+          </span>
+        </div>
+
         <div class="overview__item">
           <div class="overview__item__header">
             <div class="icon">
@@ -151,7 +166,7 @@ const toggleQuestionItem = (index: number) => {
           </div>
           <span class="text-r">
             Distributed validator technology (DVT) greatly mitigates loss of
-            funds.
+            funds due to slashing.
           </span>
         </div>
 
@@ -182,7 +197,7 @@ const toggleQuestionItem = (index: number) => {
             <span class="text-7 bold">You're In Control</span>
           </div>
           <span class="text-r">
-            You can stake any amount and withdraw at any time, no lockup period.
+            You can stake any amount and withdraw at any time.
           </span>
         </div>
 
@@ -216,53 +231,40 @@ const toggleQuestionItem = (index: number) => {
             Casimir is open-sourced; anyone can use and review the service.
           </span>
         </div>
-
-        <div class="overview__item">
-          <div class="overview__item__header">
-            <div class="icon">
-              <img
-                src="/disc.svg"
-                width="17"
-              >
-            </div>
-            <span class="text-7 bold">Finds You Other Ways to Earn</span>
-          </div>
-          <span class="text-r">
-            Our architecture allows us to integrate crypto-native features like
-            Eigenlayer.
-          </span>
-        </div>
       </div>
     </section>
 
     <section class="bento">
       <h2 class="">
-        Staking. Analytics. We've got you covered.
+        One place to connect your <br>wallets, stake, and see your analytics.
       </h2>
       <div class="bento__container">
         <div class="bento__base__card bento__card__1">
           <h2 class="text-6">
-            Simple self-custodial <br>Ethereum staking
+            Track all of your historical balances, rewards, and  <br> withdrawals in one dashboard.
           </h2>
-          <div><img src="/tx.png"></div>
+          <div><img src="/analytics-chart.png"></div>
         </div>
-        <div class="bento__base__card bento__card__2">
+
+        <div class="bento__base__card bento__card__4">
           <h2 class="text-6">
-            Connect multiple wallets to stake
+            Natively stake or withdraw ETH.
           </h2>
-          <div><img src="/tx.png"></div>
+          <div><img src="/staking-component.png"></div>
         </div>
+
         <div class="bento__base__card bento__card__3">
           <h2 class="text-6">
-            Simple self-custodial <br>Ethereum staking
+            Get your transaction history <br> for any connected address.
           </h2>
           <div><img src="/tx.png"></div>
         </div>
-        <div class="bento__base__card bento__card__4">
+
+        <div class="bento__base__card bento__card__2">
           <h2 class="text-6">
-            Connect multiple wallets to stake
+            Connect any number of wallets at the same time.
           </h2>
-          <div><img src="/stake.png"></div>
+          <div><img src="/multi-wallet.png"></div>
         </div>
       </div>
     </section>
@@ -333,7 +335,7 @@ const toggleQuestionItem = (index: number) => {
 
     <section class="footer">
       <div class="footer__container">
-        <span class="c">© 2023 Casimir. All rights reserved.</span>
+        <span class="c">© 2023 Consensus Networks. All rights reserved.</span>
         <ul>
           <li>
             <a

apps/web/src/mockData/mock_transaction_data.ts

@@ -1,11 +1,20 @@
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 const txData = ref(null as any)
 
 export default function useTxData () {
 
-  function generateRandomBalance() {
-    // Generate a random balance between 0 and 100
-    return Math.floor(Math.random() * 101)
+  function generateRandomBalance(index: number, walletAddress: string) {
+    if(
+      walletAddress === '0xd557a5745d4560B24D36A68b52351ffF9c86A212'
+    ) {
+      const lowBound = 100 + index * 1.06
+      const highBound = 200 + index * 1.06
+      return Math.random() * (highBound - lowBound) + lowBound
+    } else if(walletAddress === '0x728474D29c2F81eb17a669a7582A2C17f1042b57') {
+      const lowBound = 180 + index * 1.15
+      const highBound = 300 + index * 1.15
+      return Math.random() * (highBound - lowBound) + lowBound
+    }
   }
 
   function generateRandomDate() {
@@ -29,7 +38,7 @@ export default function useTxData () {
   function generateMockTransactionData(numTransactions: number) {
     const walletAddresses = [
       '0xd557a5745d4560B24D36A68b52351ffF9c86A212',
-      // '0x728474D29c2F81eb17a669a7582A2C17f1042b57',
+      '0x728474D29c2F81eb17a669a7582A2C17f1042b57',
       // '0x84725c8f954f18709aDcA150a0635D2fBE94fDfF',
       // '0x2EFD9900b748EbFfe658662c1ED853982Bf86ED9',
       // '0x9347155C4586f25306462EbA8BB8df7f06Bb5247',
@@ -45,7 +54,7 @@ export default function useTxData () {
     for (let i = 0; i < numTransactions; i++) {
       const transaction = {
         walletAddress: walletAddresses[i % walletAddresses.length],
-        walletBalance: String(generateRandomBalance()),
+        walletBalance: i,
         txDirection: Math.random() < 0.5? 'incoming': 'outgoing',
         txId: '0xf46d39ca96e489fb0eb2097f073bfde2dc7960bf8358e0692fa79cc8597d283e',
         receivedAt: generateRandomDate(),
@@ -59,12 +68,20 @@ export default function useTxData () {
       }
       data.push(transaction)
     }
+
+    data.sort((a, b) => {
+      return new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime()
+    })
+
+    for (let i = 0; i < data.length; i++) {
+      data[i].walletBalance = generateRandomBalance(i, data[i].walletAddress) as number
+    }
 
     return data
   }
 
   const mockData = () => {
-    const numTransactions = 400 // Number of transactions to generate
+    const numTransactions = 720 // Number of transactions to generate
     const data = generateMockTransactionData(numTransactions)
     // const jsonData = JSON.stringify(data, null, 2)