feat: using static json file for text content in landing page

cardano-foundation · Aug 18, 2023 · 9eddb8b · 9eddb8b
1 parent 8ec56c6
commit 9eddb8b
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 49 deletions.
diff --git a/ui/summit-2023/src/components/Hero/Hero.tsx b/ui/summit-2023/src/components/Hero/Hero.tsx
@@ -1,8 +1,9 @@
-import React, {useState} from 'react';
-import {Button, Typography, Grid, useTheme, useMediaQuery, Dialog} from '@mui/material';
+import React, { useState } from 'react';
+import { Button, Typography, Grid, useTheme, useMediaQuery, Dialog } from '@mui/material';
 import PlayCircleOutlineRoundedIcon from '@mui/icons-material/PlayCircleOutlineRounded';
 import { Hexagon } from '../common/Hexagon';
 import './Hero.scss';
+import { i18n } from '../../i18n';
 
 const Hero: React.FC = () => {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -13,8 +14,6 @@ const Hero: React.FC = () => {
     ? { padding: '100px 40px', display: 'flex', height: '80vh', alignItems: 'center' }
     : { padding: '10px 20px', width: '85%', margin: '0 auto', display: 'flex', height: '80vh', alignItems: 'center' };
 
-
-
   const handleOpenModal = () => {
     setModalOpen(true);
   };
@@ -41,21 +40,19 @@ const Hero: React.FC = () => {
             variant="h2"
             style={{ textAlign: isMobile ? 'center' : 'left' }}
           >
-            Vote for the Cardano Summit Awards
+            {i18n.t('landing.title')}
           </Typography>
           <Typography
             variant="body1"
             style={{ textAlign: isMobile ? 'center' : 'left', marginTop: isMobile ? '40px' : '40px' }}
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Commodo elit at imperdiet
-            dui accumsan.
+            {i18n.t('landing.description')}
           </Typography>
           <Grid
             container
             justifyContent={isMobile ? 'center' : 'flex-start'}
           >
-            <Button className="get-started-button">Get Started</Button>
+            <Button className="get-started-button">{i18n.t('landing.getStartedButton')}</Button>
           </Grid>
         </div>
       </Grid>
@@ -64,29 +61,40 @@ const Hero: React.FC = () => {
         xs={12}
         md={6}
       >
-        <div style={{padding: isMobile ? '0px' : '20px'}}>
+        <div style={{ padding: isMobile ? '0px' : '20px' }}>
           <Hexagon>
             <>
               <div className="right-title-container">
-                <span>CARDANO</span>
-                <span>SUMMIT</span>
-                <span>2023</span>
+                {i18n
+                  .t('landing.hexagon.title')
+                  .trim()
+                  .split(' ')
+                  .map((titleChunk, key) => (
+                    <span key={key}>{titleChunk}</span>
+                  ))}
               </div>
-              <PlayCircleOutlineRoundedIcon className="play-icon" onClick={handleOpenModal} />
-              <Dialog open={isModalOpen} onClose={handleCloseModal} maxWidth="md" fullWidth>
+              <PlayCircleOutlineRoundedIcon
+                className="play-icon"
+                onClick={handleOpenModal}
+              />
+              <Dialog
+                open={isModalOpen}
+                onClose={handleCloseModal}
+                maxWidth="md"
+                fullWidth
+              >
                 <iframe
-                    width="100%"
-                    height="600px"
-                    src="https://www.youtube.com/embed/UiY5-ycvM7w"
-                    title="Video de YouTube"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
+                  width="100%"
+                  height="600px"
+                  src="https://www.youtube.com/embed/UiY5-ycvM7w"
+                  title="Video de YouTube"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
                 ></iframe>
               </Dialog>
             </>
           </Hexagon>
         </div>
-
       </Grid>
     </Grid>
   );

diff --git a/ui/summit-2023/src/components/common/Header/Header.scss b/ui/summit-2023/src/components/common/Header/Header.scss
@@ -1,7 +1,9 @@
 .nav-link {
   margin-right: 48px;
   text-decoration: none;
-  transition: background-color 0.5s ease, color 0.5s ease;
+  transition:
+    background-color 0.5s ease,
+    color 0.5s ease;
   padding: 16px 24px;
   border-radius: 5px;
   color: #434656;
@@ -13,7 +15,7 @@
 
 .nav-link:hover {
   color: #434656;
-  background-color: #DAEEFB;
+  background-color: #daeefb;
   animation-timing-function: ease-out;
   animation-duration: 300ms;
 }
@@ -25,9 +27,9 @@
   align-items: flex-start;
   gap: 8px;
   border-radius: 8px;
-  background-color: #03021F !important;
+  background-color: #03021f !important;
   transition: transform 0.3s ease;
-  color: #F6F9FF;
+  color: #f6f9ff;
   font-size: 16px;
   font-style: normal;
   font-weight: 600;

diff --git a/ui/summit-2023/src/components/common/Header/Header.tsx b/ui/summit-2023/src/components/common/Header/Header.tsx
@@ -24,7 +24,11 @@ const Header: React.FC = () => {
   const drawerItems = (
     <List>
       <ListItem>
-          <img src='/static/cardano-ballot.png' alt="Cardano Logo" style={{ flexGrow: 1, height: '40px' }} />
+        <img
+          src="/static/cardano-ballot.png"
+          alt="Cardano Logo"
+          style={{ flexGrow: 1, height: '40px' }}
+        />
       </ListItem>
       <Divider style={{ marginTop: '3px' }} />
       <ListItem
@@ -67,8 +71,13 @@ const Header: React.FC = () => {
               >
                 <MenuIcon />
               </IconButton>
-                <div style={{ flexGrow: 1 }}></div>
-              <Button className="connect-button" color="inherit">Connect Wallet</Button>
+              <div style={{ flexGrow: 1 }}></div>
+              <Button
+                className="connect-button"
+                color="inherit"
+              >
+                Connect Wallet
+              </Button>
             </>
           ) : (
             <Grid
@@ -77,7 +86,11 @@ const Header: React.FC = () => {
               justifyContent="space-between"
             >
               <Grid item>
-                  <img src='/static/cardano-ballot.png' alt="Cardano Logo" style={{ flexGrow: 1, height: '40px' }} />
+                <img
+                  src="/static/cardano-ballot.png"
+                  alt="Cardano Logo"
+                  style={{ flexGrow: 1, height: '40px' }}
+                />
               </Grid>
               <Grid item>
                 <NavLink
@@ -100,7 +113,12 @@ const Header: React.FC = () => {
                 </NavLink>
               </Grid>
               <Grid item>
-                <Button className="connect-button" color="inherit">Connect Wallet</Button>
+                <Button
+                  className="connect-button"
+                  color="inherit"
+                >
+                  Connect Wallet
+                </Button>
               </Grid>
             </Grid>
           )}

diff --git a/ui/summit-2023/src/i18n/index.ts b/ui/summit-2023/src/i18n/index.ts
@@ -1,19 +1,17 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 import en from './locales/en/en.json';
 
-i18n
-    .use(initReactI18next)
-    .init({
-        resources: {
-            en: {
-                translation: en,
-            },
-        },
-        fallbackLng: "en",
-        interpolation: {
-            escapeValue: false,
-        },
-    });
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: en,
+    },
+  },
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+});
 
 export { i18n };
diff --git a/ui/summit-2023/src/i18n/locales/en/en.json b/ui/summit-2023/src/i18n/locales/en/en.json
@@ -1,3 +1,10 @@
 {
-  "hello": "world"
+  "landing": {
+    "title": "Vote for the Cardano Summit Awards",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Commodo elit at imperdiet dui accumsan.",
+    "getStartedButton": "Get Started",
+    "hexagon": {
+      "title": "CARDANO SUMMIT 2023"
+    }
+  }
 }
diff --git a/ui/summit-2023/src/pages/Home/Home.tsx b/ui/summit-2023/src/pages/Home/Home.tsx
@@ -5,7 +5,6 @@ const Home = () => {
   return (
     <>
       <Hero />
-      <div style={{ height: '100px' }} />
     </>
   );
 };

diff --git a/ui/summit-2023/src/pages/Home/Home.types.ts b/ui/summit-2023/src/pages/Home/Home.types.ts
diff --git a/ui/summit-2023/tsconfig.json b/ui/summit-2023/tsconfig.json
@@ -22,6 +22,7 @@
     "emitDecoratorMetadata": true
   },
   "include": [
-    "src"
+    "src",
+    "node_modules/cypress/types/cypress-global-vars.d.ts"
   ]
 }