[LUM-847] Website -> Update Oct 2023

.github/workflows/merge.yaml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     environment: production
     steps:
-      - name: Set up Node version to 14
+      - name: Set up Node version to 18
         uses: actions/setup-node@v2
         with:
-            node-version: '14'
+            node-version: '18'
 
       - name: Checkout repository
         uses: actions/checkout@v2

.github/workflows/pull_request.yml

@@ -10,10 +10,10 @@ jobs:
   build_and_preview:
     runs-on: ubuntu-latest
     steps:
-      - name: Set up Node version to 14
+      - name: Set up Node version to 18
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
       - name: Checkout repository and submodules
         uses: actions/checkout@v2
         with:

.gitignore

@@ -1,6 +1,9 @@
 build
 .idea
 
+# misc
+.DS_Store
+
 # Logs
 logs
 *.log

package.json

@@ -3,7 +3,7 @@
     "version": "0.2.0",
     "private": true,
     "dependencies": {
-        "@lum-network/sdk-javascript": "^0.7.11",
+        "@lum-network/sdk-javascript": "^0.8.9",
         "@octokit/auth-token": "^3.0.2",
         "@octokit/core": "^4.1.0",
         "@octokit/plugin-rest-endpoint-methods": "^6.7.0",
@@ -73,18 +73,11 @@
             "react-app/jest"
         ]
     },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
+    "browserslist": [
+        ">0.2%",
+        "not dead",
+        "not op_mini all"
+    ],
     "resolutions": {
         "react-scripts/**/react-error-overlay": "6.0.9",
         "@types/react": "~17.0.21"

src/App.tsx

@@ -75,8 +75,7 @@ const App = (): JSX.Element => {
 
     useEffect(() => {
         dispatch.stats.getLumStats().finally(() => null);
-        dispatch.stats.getDfrStats().finally(() => null);
-        dispatch.stats.getSkrStats().finally(() => null);
+        dispatch.stats.getCmStats().finally(() => null);
         dispatch.stats.getToolsStats().finally(() => null);
     }, []);
 

src/assets/index.ts

@@ -27,12 +27,8 @@ import transparencyIcon from './images/transparency.png';
 import trustLayers from './images/trust_layers.png';
 import trustLayersShadows from './images/trust_layers_shadows.png';
 
-import showcaseLumkiIllu from './images/showcase_lumki_illu.png';
-import showcaseNetreviewsIllu from './images/showcase_netreviews_illu.png';
-import showcaseJoinIllu from './images/showcase_join_illu.png';
-
-import skeepers from './images/partners/skeepers.png';
 import arcanum from './images/partners/arcanum.png';
+import citadelone from './images/partners/citadelone.svg';
 import swissborg from './images/partners/swissborg.png';
 import stakefish from './images/partners/stakefish.png';
 import cosmostation from './images/partners/cosmostation.png';
@@ -75,14 +71,11 @@ const Assets = {
         transparencyIcon,
         trustLayers,
         trustLayersShadows,
-        showcaseLumkiIllu,
-        showcaseNetreviewsIllu,
-        showcaseJoinIllu,
     },
     partners: {
         ignite,
-        skeepers,
         arcanum,
+        citadelone,
         swissborg,
         stakefish,
         cosmostation,

src/components/Footer/Footer.tsx

@@ -9,11 +9,9 @@ import {
     LUM_NETWORK_DOCUMENTATION,
     LUM_EXPLORER,
     LUM_NETWORK_GITHUB,
-    LUM_TELEGRAM,
     LUM_TWITTER,
     LUM_WALLET,
     LUM_DISCORD,
-    LUM_NETWORK_WHITEPAPER,
     NavigationConstants,
     LUM_MEDIUM,
 } from 'constant';
@@ -59,17 +57,10 @@ const Footer = (): JSX.Element => {
                                     <strong>{t('footer.useCases')}</strong>
                                     <NavLink
                                         preventScrollReset
-                                        to={NavigationConstants.SKR}
+                                        to={NavigationConstants.CM}
                                         className="footer-link text-reset text-decoration-none scale-anim my-4"
                                     >
-                                        Skeepers Rewards
-                                    </NavLink>
-                                    <NavLink
-                                        preventScrollReset
-                                        to={NavigationConstants.DFRACT}
-                                        className="footer-link text-reset text-decoration-none scale-anim mb-4"
-                                    >
-                                        DFract
+                                        Cosmos Millions
                                     </NavLink>
                                 </div>
                                 <div className="d-flex flex-column ms-0 ms-lg-3 mt-4 mt-lg-0">
@@ -92,9 +83,6 @@ const Footer = (): JSX.Element => {
                                     <Link link={LUM_DISCORD} className="footer-link mb-4">
                                         Discord
                                     </Link>
-                                    <Link link={LUM_TELEGRAM} className="footer-link mb-4">
-                                        Telegram
-                                    </Link>
                                     <Link link={LUM_MEDIUM} className="footer-link mb-4">
                                         Medium
                                     </Link>
@@ -106,9 +94,6 @@ const Footer = (): JSX.Element => {
                                 <div className="d-flex flex-column-reverse flex-lg-row justify-content-around">
                                     <p className="footer-link mb-0">Lum Network {moment().utc().year()} ©</p>
                                     <p className="footer-link mb-0 ms-0 ms-lg-5">[email protected]</p>
-                                    <Link link={LUM_NETWORK_WHITEPAPER} className="footer-link mb-0 ms-0 ms-lg-5">
-                                        White paper
-                                    </Link>
                                     {/* <p className="footer-link mb-0 ms-5">{t('footer.privacyPolicy')}</p> */}
                                 </div>
                                 <Button

src/components/Header/Header.tsx

@@ -1,17 +1,17 @@
-import React, { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useRef } from 'react';
 import { gsap } from 'gsap';
 
-import { LUM_NETWORK_WHITEPAPER, NavigationConstants } from 'constant';
-import { DropdownButton, Link } from 'components';
+import { NavigationConstants } from 'constant';
+import { DropdownButton } from 'components';
 
 import './styles/Header.scss';
 
 import lumNetworkLogoDark from 'assets/images/lum_network_logo_dark.png';
 import { Link as ReactRouterLink } from 'react-router-dom';
 
-const Header = ({ bgTriggerElem }: { modalId: string; bgTriggerElem?: string }): JSX.Element => {
-    const { t } = useTranslation();
+const Header = (): JSX.Element => {
+    const tl = useRef<gsap.core.Timeline>();
+
     useEffect(() => {
         // Enables Header GSAP animation only on the landing page
         if (window.location.pathname === '/') {
@@ -36,24 +36,23 @@ const Header = ({ bgTriggerElem }: { modalId: string; bgTriggerElem?: string }):
     }, []);
 
     useEffect(() => {
-        if (bgTriggerElem) {
-            gsap.to(`header .background`, {
-                opacity: 1,
-                ease: 'none',
-                scrollTrigger: {
-                    trigger: `#welcome`,
-                    start: '10% top',
-                    end: '30% top',
-                    scrub: true,
-                },
-            });
-        } else {
-            gsap.to(`header .background`, {
-                opacity: 1,
-                duration: 0,
-            });
+        const scrollTrigger = {
+            trigger: '#root',
+            start: 'top top',
+            end: 'top+=45px top',
+            scrub: true,
+        };
+
+        if (!tl.current) {
+            tl.current = gsap.timeline();
         }
-    }, [bgTriggerElem]);
+
+        tl.current.to(`header .background`, {
+            opacity: 1,
+            ease: 'none',
+            scrollTrigger,
+        });
+    }, []);
 
     return (
         <header className="navbar fixed-top mt-4 mx-auto container p-4">
@@ -63,18 +62,12 @@ const Header = ({ bgTriggerElem }: { modalId: string; bgTriggerElem?: string }):
                     <img alt="Lum" src={lumNetworkLogoDark} width="235" height="38" className="lum-logo-header" />
                 </ReactRouterLink>
                 <div className="navbar-items-container d-none d-md-flex flex-row align-items-center">
-                    <Link className="me-sm-3 me-md-5" link={LUM_NETWORK_WHITEPAPER}>
-                        {t('landing.whitePaper')}
-                    </Link>
                     <ReactRouterLink to={NavigationConstants.TOOLS} className="link-btn me-sm-3 me-md-5">
                         Tools
                     </ReactRouterLink>
                     <DropdownButton
                         title="Use Cases"
-                        items={[
-                            { title: 'Skeepers Rewards', onPress: NavigationConstants.SKR },
-                            { title: 'DFract', onPress: NavigationConstants.DFRACT },
-                        ]}
+                        items={[{ title: 'Cosmos Millions', onPress: NavigationConstants.CM }]}
                     />
                 </div>
             </nav>

src/components/UseCaseCard/UseCaseCard.tsx

@@ -4,42 +4,34 @@ import { useTranslation } from 'react-i18next';
 
 import { NavigationConstants } from 'constant';
 
-import skr from 'assets/images/skr.png';
-import dfract from 'assets/images/dfract.png';
-import dfractBig from 'assets/images/dfract_big.png';
-import skrBig from 'assets/images/skr_big.png';
+import cm from 'assets/images/cm_big.png';
+import tools from 'assets/images/tools_big.png';
 import ellipse1 from 'assets/images/ellipse.svg';
 
+import { ResponsiveImage } from 'components';
+
 import './UseCaseCard.scss';
-import ResponsiveImage from 'components/ResponsiveImage/ResponsiveImage';
-
-const UseCaseCard = ({
-    className,
-    useCase,
-    big,
-}: {
-    useCase: 'skr' | 'dfract';
-    className?: string;
-    big?: boolean;
-}): JSX.Element => {
+
+const UseCaseCard = ({ className, useCase }: { useCase: 'cm' | 'tools'; className?: string }): JSX.Element => {
     const { t } = useTranslation();
 
-    const icon = useCase === 'skr' ? (big ? skrBig : skr) : big ? dfractBig : dfract;
-    const title = useCase === 'skr' ? 'useCases.skr.card.title' : 'useCases.dfract.card.title';
-    const description = useCase === 'skr' ? 'useCases.skr.card.description' : 'useCases.dfract.card.description';
-    const to = useCase === 'skr' ? NavigationConstants.SKR : NavigationConstants.DFRACT;
+    const image = useCase === 'cm' ? cm : tools;
+    const title = useCase === 'cm' ? 'useCases.cosmosMillions.card.title' : 'tools.page.title';
+    const description =
+        useCase === 'cm' ? 'useCases.cosmosMillions.card.description' : 'tools.landingSection.description';
+    const to = useCase === 'cm' ? NavigationConstants.CM : NavigationConstants.TOOLS;
 
     return (
         <div className={`use-case-card w-100 ${className}`}>
             <img src={ellipse1} className="ellipse" />
             <div className="content">
                 <NavLink preventScrollReset to={to} className="position-relative">
-                    <ResponsiveImage src={icon} alt={useCase} className="illustration" />
+                    <ResponsiveImage src={image} alt={useCase} className="illustration" />
                 </NavLink>
                 <div className="p-4">
                     <div className="fw-bold fs-3">{t(title)}</div>
                     <div className="d-flex flex-column flex-lg-row justify-content-between mt-2">
-                        <p>{t(description)}</p>
+                        <p>{t(description).replace('\n', ' ')}</p>
                         <NavLink
                             to={to}
                             preventScrollReset