fix: new roadmap etc

src/js/components/App/pages/Home.tsx

@@ -9,10 +9,12 @@ import Whitepaper from './Home/Whitepaper';
 import Presale from './Home/Presale';
 
 const Home = () => (
-  <Container.FlexCols className="gap-8">
+  <Container.FlexCols className="gap-8 items-center">
     <Intro />
-    <Presale />
-    <Launchpad />
+    <Container.FlexResponsiveRow className="items-center justify-around w-3/6">
+      <Presale />
+      <Launchpad />
+    </Container.FlexResponsiveRow>
     <Tokenomics />
     <Roadmap />
     <Whitepaper />

src/js/components/App/pages/Home/Intro.tsx

@@ -19,16 +19,20 @@ const Intro = () => (
     </Container.Container>
     <Container.Container>
       <Paragraph.Leading className="sm:w-5/6 mx-auto">
-        EKOKE is an innovative tool that aims to revolutionize the real estate
-        industry. The Ekoketoken project emerges as the evolutionary response to
-        the traditional real estate landscape, originating from a Milan-based
-        agency's immersion into the realms of blockchain and cryptocurrencies.
-        This innovative venture aspires to redefine real estate transactions by
-        embracing the potential of the{' '}
+        <strong>EKOKE</strong> is an innovative tool that aims to revolutionize
+        the real estate industry. The <strong>EKOKE-DAO</strong> project emerges
+        as the evolutionary response to the traditional real estate landscape,
+        originating from a Milan-based agency's immersion into the realms of
+        blockchain and cryptocurrencies. This innovative venture aspires to
+        redefine real estate transactions by embracing the potential of the{' '}
+        <Link.Paragraph href={'https://ethereum.org/'} target="_blank">
+          Ethereum
+        </Link.Paragraph>{' '}
+        and{' '}
         <Link.Paragraph href={'https://internetcomputer.org/'} target="_blank">
           Internet Computer
         </Link.Paragraph>{' '}
-        (ICP) blockchain.
+        blockchains.
       </Paragraph.Leading>
     </Container.Container>
     <Container.FlexResponsiveRow className="justify-center items-center gap-4">

src/js/components/App/pages/Home/Launchpad.tsx

@@ -6,7 +6,7 @@ import Heading from '../../../reusable/Heading';
 import Link from '../../../reusable/Link';
 
 const Launchpad = () => (
-  <Container.FlexCols className="items-center justify-center w-3/6 sm:w-full mx-auto gap-2">
+  <Container.FlexCols className="items-center justify-center sm:w-full gap-2">
     <Container.Container>
       <Heading.H2>
         <span className="text-brandRed font-bold">SNS</span> Launchpad

src/js/components/App/pages/Home/Presale.tsx

@@ -7,7 +7,7 @@ import Link from '../../../reusable/Link';
 import { Route } from '../../../../utils/routes';
 
 const Presale = () => (
-  <Container.FlexCols className="items-center justify-center w-3/6 sm:w-full mx-auto gap-2">
+  <Container.FlexCols className="items-center justify-center sm:w-full gap-2">
     <Container.Container>
       <Heading.H2>
         <span className="text-brandRed font-bold">EKOKE Presale</span> is NOW

src/js/components/App/pages/Home/Roadmap.tsx

@@ -2,51 +2,96 @@ import * as React from 'react';
 
 import Container from '../../../reusable/Container';
 import Heading from '../../../reusable/Heading';
+import Paragraph from '../../../reusable/Paragraph';
+import Link from '../../../reusable/Link';
 
 const Roadmap = () => (
-  <Container.FlexCols className="items-center justify-center w-3/6 sm:w-full mx-auto gap-2">
+  <Container.FlexCols className="items-center justify-center sm:w-full">
     <Container.Container>
       <Heading.H2>
         <span className="text-brandRed font-bold">Project</span> Roadmap
       </Heading.H2>
     </Container.Container>
     <Container.FlexCols className="gap-4 w-full">
-      <Container.Container>
-        <span className="text-xl font-bold text-brandRed">2024</span>
-        <Container.FlexResponsiveRow className="gap-4">
-          <Milestone title="Token development" date="Q1" />
-          <Milestone title="DAO and SNS market analysis" date="Q2" />
-          <Milestone title="Anslysis of the real estate market" date="Q3" />
-          <Milestone title="DAO and SNS Launch" date="Q4" />
-        </Container.FlexResponsiveRow>
-      </Container.Container>
       <Container.Container>
         <span className="text-xl font-bold text-brandRed">2025</span>
         <Container.FlexResponsiveRow className="gap-4">
-          <Milestone title="Exchange Listing" date="Q1" />
-          <Milestone title="Airdrop" date="Q2" />
-          <Milestone title="Gold-backed token" date="Q3" />
-          <Milestone title="Real estate tokenization" date="Q4" />
+          <Milestone title="EKOKE Presale" date="Q1">
+            EKOKE Presale will be the first step to start the project. The goal
+            is to raise funds to develop the platform, the developers and to
+            give liquidity to the exchange to be able to start exchaning the
+            EKOKE ERC20 token. The Presale will take place on this website and
+            will be open to everyone. It will continue until the end of the
+            first quarter.
+          </Milestone>
+          <Milestone title="SNS Launch" date="Q2">
+            The SNS will be launched in the second quarter. We'll base our DAO
+            on the the{' '}
+            <Link.Paragraph href={'https://nns.ic0.app'}>
+              Internet Computer SNS
+            </Link.Paragraph>
+            . The SNS will be the place where the EKOKE-DAO will be able to
+            discuss and vote on the decisions of the EKOKE-DAO.
+          </Milestone>
+          <Milestone title="EKOKE-DAO is registered" date="Q3">
+            EKOKE-DAO will be registered in the second quarter. The DAO will be
+            registered as a DAO as recognized in the Wyoming state. The DAO will
+            be able to buy and sell real-estate and to manage the funds of the
+            EKOKE-DAO token holders. The DAO will be able to vote on the
+            decisions of the EKOKE-DAO.
+          </Milestone>
+          <Milestone title="First real-estate sold on EKOKE-DAO" date="Q4">
+            We expect to sell the first real-estate on the EKOKE-DAO marketplace
+            in the fourth quarter. The real-estate will be sold in USDT and the
+            transaction will be done on the blockchain. The real-estate will be
+          </Milestone>
         </Container.FlexResponsiveRow>
       </Container.Container>
       <Container.Container>
         <span className="text-xl font-bold text-brandRed">2026</span>
         <Container.FlexResponsiveRow className="gap-4">
-          <Milestone title="NFT Marketplace" date="Q1" />
-          <Milestone title="Real estate global network" date="Q2" />
-          <Milestone title="Enlarge the market worldwide" date="Q3" />
-          <Milestone title="Becoming a relevant reality" date="Q4" />
+          <Milestone title="First EKOKE-DAO partners" date="Q1">
+            We aim to start building the real-estate network in the first
+            quarter. We will start by partnering with real-estate agents and
+            real-estate developers. The goal is to have a network of real-estate
+            agents and developers that will be able to sell real-estate on the
+            EKOKE-DAO marketplace.
+          </Milestone>
+          <Milestone title="Real estate global network" date="Q2">
+            The real-estate global network will be launched in the second
+            quarter. The network will allow people to buy and sell real-estate
+            in a decentralized way. We will through voting allow people to{' '}
+          </Milestone>
+          <Milestone title="Enlarge the market worldwide" date="Q3">
+            We aim to enlarge the market worldwide in the third quarter. We will
+            start by partnering with real-estate agents and real-estate
+            developers in other countries.
+          </Milestone>
+          <Milestone title="Becoming a relevant reality" date="Q4">
+            We aim to become a relevant reality in the fourth quarter. We aim to
+            become a worldwide recognized platform for buying real-estate
+            without bank mortgages.
+          </Milestone>
         </Container.FlexResponsiveRow>
       </Container.Container>
     </Container.FlexCols>
   </Container.FlexCols>
 );
 
-const Milestone = ({ title, date }: { title: string; date: string }) => (
+const Milestone = ({
+  title,
+  date,
+  children,
+}: {
+  title: string;
+  date: string;
+  children: string | React.ReactNode | React.ReactNode[];
+}) => (
   <Container.Card className="transition-transform transform scale-100 hover:scale-105 text-center flex-1">
-    <Container.FlexCols className="justify-between h-full">
+    <Container.FlexCols className="h-full">
       <span className="block text-lg font-bold text-brandRed">{title}</span>
       <span className="block">{date}</span>
+      <Paragraph.Default>{children}</Paragraph.Default>
     </Container.FlexCols>
   </Container.Card>
 );

src/js/components/App/pages/Home/Tokenomics.tsx

@@ -4,6 +4,11 @@ import { Chart, ArcElement, Tooltip } from 'chart.js';
 
 import Container from '../../../reusable/Container';
 import Heading from '../../../reusable/Heading';
+import Link from '../../../reusable/Link';
+
+const EKOKE_SUPPLY = 8_880_101.01;
+const EKOKE_DECIMALS = 8;
+const EKOKE_ADDRESS = '0x';
 
 const colors = [
   '#36a2eb',
@@ -17,23 +22,11 @@ const colors = [
 ];
 
 const tokenomicsData = {
-  labels: [
-    'DAO Pool - NFT Rewards',
-    'SNS Treasury',
-    'Dev Team',
-    'SNS Swap',
-    'DAO Pool - ERC20 Swap',
-    'Seed Funders',
-    'LBP Pool',
-    'Airdrop',
-  ],
+  labels: ['Reward Pool - Deferred NFT Rewards', 'Admin mintable'],
   datasets: [
     {
       label: 'e8s',
-      data: [
-        266403000000000, 213122400000000, 133201487000000, 106561210000000,
-        106561212000000, 26640300000000, 26640300000000, 8880101000000,
-      ],
+      data: [592_006_734_000_000, 296_003_367_000_000],
       backgroundColor: colors,
     },
   ],
@@ -66,13 +59,29 @@ const Tokenomics = () => {
           <Container.Container>
             <span className="block text-center text-xl">Total supply</span>
             <span className="block text-center text-xl font-bold text-brandRed">
-              8,880,101.010
+              {EKOKE_SUPPLY.toLocaleString('en-US', {
+                maximumFractionDigits: 3,
+              })}
+            </span>
+          </Container.Container>
+          <Container.Container>
+            <span className="block text-center text-xl">
+              ERC20 Contract Address
+            </span>
+            <span className="block text-center text-xl font-bold text-brandRed">
+              <Link.Default
+                className="text-brandRed !font-bold"
+                href={`https://etherscan.io/address/${EKOKE_ADDRESS}`}
+                target="_blank"
+              >
+                {EKOKE_ADDRESS}
+              </Link.Default>
             </span>
           </Container.Container>
           <Container.Container>
             <span className="block text-center text-xl">Decimals</span>
             <span className="block text-center text-xl font-bold text-brandRed">
-              8
+              {EKOKE_DECIMALS}
             </span>
           </Container.Container>
         </Container.FlexCols>
@@ -84,28 +93,14 @@ const Tokenomics = () => {
           <Container.FlexCols>
             <LegendEntry
               color={colors[0]}
-              label="DAO Pool - NFT Rewards"
-              percentage={30}
+              label="Reward Pool - Deferred NFT Rewards"
+              percentage={66}
             />
             <LegendEntry
               color={colors[1]}
-              label="SNS Treasury"
-              percentage={24}
-            />
-            <LegendEntry color={colors[2]} label="Dev Team" percentage={15} />
-            <LegendEntry color={colors[3]} label="SNS Swap" percentage={12} />
-            <LegendEntry
-              color={colors[4]}
-              label="DAO Pool - ERC20 Swap"
-              percentage={12}
-            />
-            <LegendEntry
-              color={colors[5]}
-              label="Seed Funders"
-              percentage={3}
+              label="Admin mintable"
+              percentage={33}
             />
-            <LegendEntry color={colors[6]} label="LBP Pool" percentage={3} />
-            <LegendEntry color={colors[7]} label="Airdrop" percentage={1} />
           </Container.FlexCols>
         </Container.FlexCols>
       </Container.FlexResponsiveRow>

src/js/components/App/pages/Marketplace/pages/Contract/BuyTokenForm.tsx

@@ -24,7 +24,7 @@ interface Props {
 }
 
 const BuyTokenForm = (props: Props) => (
-  <Container.Card className="px-0 py-0 pt-4">
+  <Container.Card className="px-0 py-4">
     <Heading.H2 className="px-4 text-center">Buy contract tokens</Heading.H2>
     <WaitForMetamask otherwise={<LogWithMetamask />}>
       <BuyTokenFormInner {...props} />
@@ -34,9 +34,9 @@ const BuyTokenForm = (props: Props) => (
 
 const LogWithMetamask = () => (
   <Container.FlexCols className="items-center gap-4">
-    <Paragraph.Center>
+    <Paragraph.Default className="!text-center">
       Please connect to MetaMask to buy tokens.
-    </Paragraph.Center>
+    </Paragraph.Default>
     <MetamaskConnect />
   </Container.FlexCols>
 );

src/js/components/Footer.tsx

@@ -7,6 +7,7 @@ import Link from './reusable/Link';
 import X from './svg/X';
 import TikTok from './svg/TikTok';
 import Telegram from './svg/Telegram';
+import { Route } from '../utils/routes';
 
 const Footer = () => {
   const year = new Date().getFullYear();
@@ -15,14 +16,20 @@ const Footer = () => {
       <Container.Container className="bg-brandRed text-white m-0 p-8">
         <div className="bg-white content-none h-[1px] mx-auto w-page"></div>
         <Container.FlexResponsiveRow className="justify-between w-page sm:w-full mx-auto">
-          <Container.FlexCols>
+          <Container.FlexCols className="gap-4">
             <Heading.H2 className="text-white">EKOKE Token</Heading.H2>
-            <Link.Default
-              href={'https://www.ekoketoken.com/'}
-              className="text-white"
-            >
+            <Link.Default href={Route.HOME} className="text-white">
               Home
             </Link.Default>
+            <Link.Default href={Route.MARKETPLACE} className="text-white">
+              Marketplace
+            </Link.Default>
+            <Link.Default href={Route.PRESALE} className="text-white">
+              EKOKE Presale
+            </Link.Default>
+            <Link.Default href={Route.ABOUT} className="text-white">
+              About
+            </Link.Default>
           </Container.FlexCols>
           <Container.FlexCols className="gap-4">
             <Heading.H2 className="text-white">Contacts</Heading.H2>

src/js/components/MetamaskConnect.tsx

@@ -40,16 +40,16 @@ const MetamaskConnect = () => {
   };
 
   const addressText = (address: string) => {
-    return `${address.substring(0, 6)}...${address.substring(
+    return `${address.substring(0, 6)}…${address.substring(
       address.length - 4,
     )}`;
   };
 
   const text = () => {
-    if (status === 'initializing') return 'Initializing...';
+    if (status === 'initializing') return 'Initializing…';
     if (status === 'unavailable') return 'MetaMask not available';
-    if (status === 'notConnected') return 'Connect to MetaMask';
-    if (status === 'connecting') return 'Connecting...';
+    if (status === 'notConnected') return 'Login';
+    if (status === 'connecting') return 'Connecting…';
     if (status === 'connected') return addressText(account);
     return undefined;
   };
@@ -63,7 +63,7 @@ const MetamaskConnect = () => {
   return (
     <Container.FlexRow className="items-center gap-8">
       <Button.Alternative
-        className="my-0 !mb-0"
+        className="my-0 !mb-0 sm:text-xs"
         onClick={onClick}
         disabled={disabled}
       >

src/js/components/reusable/ProgressBar.tsx

@@ -11,7 +11,7 @@ interface Props {
 }
 
 const ProgressBar = (props: Props) => {
-  const percentage = Math.round((props.progress * 100) / props.max);
+  const percentage = Math.ceil((props.progress * 100) / props.max);
   let label = `${props.progress}/${props.max}`;
   if (props.percentage) {
     label = `${percentage.toString()}%`;

src/js/utils/routes.ts

@@ -1,4 +1,5 @@
 export enum Route {
+  ABOUT = 'about',
   HOME = 'home',
   MARKETPLACE = 'marketplace',
   MARKETPLACE_CONTRACT = 'marketplace/real-estate',

src/styles.css

@@ -52,6 +52,11 @@ input {
   line-height: inherit;
 }
 
+strong {
+  color: #fd6262;
+  font-weight: 600;
+}
+
 .lazyload-wrapper {
   display: flex;
   justify-content: center;