diff --git a/webapps/world-builder-dashboard/src/assets/IconDiscord.tsx b/webapps/world-builder-dashboard/src/assets/IconDiscord.tsx new file mode 100644 index 00000000..8dd24023 --- /dev/null +++ b/webapps/world-builder-dashboard/src/assets/IconDiscord.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IconDiscord: React.FC> = (props) => ( + + + +) + +export default IconDiscord diff --git a/webapps/world-builder-dashboard/src/assets/IconForkTheWorld.tsx b/webapps/world-builder-dashboard/src/assets/IconForkTheWorld.tsx new file mode 100644 index 00000000..d8eb0c1c --- /dev/null +++ b/webapps/world-builder-dashboard/src/assets/IconForkTheWorld.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +const IconForkTheWorld: React.FC> = (props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) + +export default IconForkTheWorld diff --git a/webapps/world-builder-dashboard/src/assets/IconGitHub.tsx b/webapps/world-builder-dashboard/src/assets/IconGitHub.tsx new file mode 100644 index 00000000..2bbde241 --- /dev/null +++ b/webapps/world-builder-dashboard/src/assets/IconGitHub.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IconGitHub: React.FC> = (props) => ( + + + +) + +export default IconGitHub diff --git a/webapps/world-builder-dashboard/src/assets/IconLinkedIn.tsx b/webapps/world-builder-dashboard/src/assets/IconLinkedIn.tsx new file mode 100644 index 00000000..166194f5 --- /dev/null +++ b/webapps/world-builder-dashboard/src/assets/IconLinkedIn.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IconLinkedIn: React.FC> = (props) => ( + + + +) + +export default IconLinkedIn diff --git a/webapps/world-builder-dashboard/src/assets/IconMail.tsx b/webapps/world-builder-dashboard/src/assets/IconMail.tsx new file mode 100644 index 00000000..24e2f6e0 --- /dev/null +++ b/webapps/world-builder-dashboard/src/assets/IconMail.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IconMail: React.FC> = (props) => ( + + + +) + +export default IconMail diff --git a/webapps/world-builder-dashboard/src/assets/IconTelegram.tsx b/webapps/world-builder-dashboard/src/assets/IconTelegram.tsx new file mode 100644 index 00000000..fc350fef --- /dev/null +++ b/webapps/world-builder-dashboard/src/assets/IconTelegram.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IconTelegram: React.FC> = (props) => ( + + + +) + +export default IconTelegram diff --git a/webapps/world-builder-dashboard/src/assets/IconX.tsx b/webapps/world-builder-dashboard/src/assets/IconX.tsx new file mode 100644 index 00000000..b5177a54 --- /dev/null +++ b/webapps/world-builder-dashboard/src/assets/IconX.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IconX: React.FC> = (props) => ( + + + +) + +export default IconX diff --git a/webapps/world-builder-dashboard/src/assets/ftwotf.png b/webapps/world-builder-dashboard/src/assets/ftwotf.png new file mode 100644 index 00000000..2785ae08 Binary files /dev/null and b/webapps/world-builder-dashboard/src/assets/ftwotf.png differ diff --git a/webapps/world-builder-dashboard/src/components/landing/BenefitsSection.tsx b/webapps/world-builder-dashboard/src/components/landing/BenefitsSection.tsx index 08684d15..6a831c63 100644 --- a/webapps/world-builder-dashboard/src/components/landing/BenefitsSection.tsx +++ b/webapps/world-builder-dashboard/src/components/landing/BenefitsSection.tsx @@ -5,7 +5,7 @@ const benefits = [ { title: "Build for gamers", imageClass: styles.cardImageGamers, - description: "Bootstrap your game with access to 250k+ citizens and counting", + description: "Bootstrap your game with access to 470k+ citizens and counting", }, { title: "Fast and efficient", diff --git a/webapps/world-builder-dashboard/src/components/landing/Container.module.css b/webapps/world-builder-dashboard/src/components/landing/Container.module.css index b53d51b0..d69a7e62 100644 --- a/webapps/world-builder-dashboard/src/components/landing/Container.module.css +++ b/webapps/world-builder-dashboard/src/components/landing/Container.module.css @@ -19,9 +19,9 @@ .progressBar { position: absolute; right: 34px; - top: 102px; + top: 118px; z-index: 1001; - height: calc(100% - 102px - 16px - 20px); + height: calc(100% - 118px - 16px - 20px); } diff --git a/webapps/world-builder-dashboard/src/components/landing/Container.tsx b/webapps/world-builder-dashboard/src/components/landing/Container.tsx index 0a530ed3..311e4219 100644 --- a/webapps/world-builder-dashboard/src/components/landing/Container.tsx +++ b/webapps/world-builder-dashboard/src/components/landing/Container.tsx @@ -1,9 +1,10 @@ -import React, {ReactNode, useEffect, useRef, useState} from 'react'; +import React, { ReactNode, useEffect, useRef, useState } from 'react'; import styles from "./Container.module.css"; import parentStyles from "./Landing.module.css" import SegmentedProgressBar from "./SegmentedProgressBar"; import Navbar from "@/components/landing/Navbar"; import backgroundImage from "../../assets/G7LandingPageBGDark.jpg"; +import Footer from './Footer'; interface ContainerProps { @@ -11,13 +12,13 @@ interface ContainerProps { isNavbarOpen: boolean setIsNavbarOpen: React.Dispatch>; isSmallView: boolean - navigateLink: (item: {name: string, link: string}) => void + navigateLink: (item: { name: string, link: string }) => void startBuilding: () => void } -const Container: React.FC = ({components, isNavbarOpen, setIsNavbarOpen, isSmallView, navigateLink, startBuilding}) => { +const Container: React.FC = ({ components, isNavbarOpen, setIsNavbarOpen, isSmallView, navigateLink, startBuilding }) => { const [progress, setProgress] = useState(0); const [page, setPage] = useState(0) @@ -47,8 +48,7 @@ const Container: React.FC = ({components, isNavbarOpen, setIsNav return () => { window.removeEventListener('scroll', handleScroll); }; - }, []); - + }, []); @@ -65,41 +65,39 @@ const Container: React.FC = ({components, isNavbarOpen, setIsNav }, [page]); - - return ( -
-
-
-
- - -
-
- {components[pageToRender]} -
-
- {isSmallView && ( -
- Start building -
- )} -
-
- -
-
-
-
- ); +
+
+
+
+ +
+
+ {components[pageToRender]} +
+
+ {isSmallView && ( +
+ Start building +
+ )} +
+
+ +
+
+
+
+
+ ); }; export default Container; diff --git a/webapps/world-builder-dashboard/src/components/landing/Footer.module.css b/webapps/world-builder-dashboard/src/components/landing/Footer.module.css new file mode 100644 index 00000000..3011c0dc --- /dev/null +++ b/webapps/world-builder-dashboard/src/components/landing/Footer.module.css @@ -0,0 +1,123 @@ +.footer { + display: flex; + padding: 40px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; + border-radius: 12px 12px 0px 0px; + border: 1px solid #727272; + border-bottom: none; + background: url('../../assets/ftwotf.png') lightgray 50% / cover no-repeat; +} + +.footerMobile { + display: flex; + padding: 40px 24px 24px 24px; + justify-content: left; + align-items: center; + align-self: stretch; + border-radius: 12px 12px 0px 0px; + border: 1px solid var(--Gray-true-500, #727272); + background: url('../../assets/ftwotf.png') lightgray 50% / cover no-repeat; +} + +.footerContent { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 40px; + align-self: stretch; +} + +.footerContentMobile { + display: flex; + flex-direction: column; + min-width: 295px; + align-items: flex-start; + gap: 40px; +} + +.footerLinks { + display: flex; + align-items: flex-start; + gap: 120px; +} + +.footerLinksMobile { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 20px; + align-self: stretch; +} + +.footerLinksMobileExpanded { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; +} + +.footerSection { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.footerSectionHeaderContainer { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; +} + +.footerSectionHeader { + color: #FFF; + /* Text xl Bold */ + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 30px; + /* 150% */ +} + +.footerSectionLink { + cursor: pointer; + color: #FFF; + /* Text md Regular */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; +} + +.footerIcons { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 12px; +} + +.footerIcon { + cursor: pointer; +} + +.layoutFooter { + padding-left: 24px; + padding-right: 24px; + background: #171717; +} + + +@media (max-width: 750px) { + .layoutFooter { + padding-left: 16px; + padding-right: 16px; + background: #171717; + } +} \ No newline at end of file diff --git a/webapps/world-builder-dashboard/src/components/landing/Footer.tsx b/webapps/world-builder-dashboard/src/components/landing/Footer.tsx new file mode 100644 index 00000000..312159c8 --- /dev/null +++ b/webapps/world-builder-dashboard/src/components/landing/Footer.tsx @@ -0,0 +1,138 @@ +import React, { useState } from 'react' +import styles from './Footer.module.css' +import IconDiscord from '@/assets/IconDiscord' +import IconX from '@/assets/IconX' +import IconGitHub from '@/assets/IconGithub' +import IconLinkedIn from '@/assets/IconLinkedIn' +import IconForkTheWorld from '@/assets/IconForkTheWorld' +import { useNavigate } from 'react-router-dom' +import { useBlockchainContext } from '@/contexts/BlockchainContext' +import { useMediaQuery } from 'summon-ui/mantine' +import IconChevronDown from '@/assets/IconChevronDown' + + +const Footer: React.FC = () => { + const navigate = useNavigate() + const smallView = useMediaQuery('(max-width: 750px)') + const { setSelectedNetworkType } = useBlockchainContext() + const footerIcons = [ + { component: , navigate: () => window.open('/discord', '_blank') }, + { component: , navigate: () => window.open('https://x.com/g7_dao', '_blank') }, + { component: , navigate: () => window.open('https://github.com/G7DAO', '_blank') }, + { component: , navigate: () => window.open('https://www.linkedin.com/company/g7dao', '_blank') }, + ]; + const [collapsedSections, setCollapsedSections] = useState<{ [key: number]: boolean }>({ 0: true, 1: true, 2: true }) + + const toggleSection = (index: number) => { + setCollapsedSections(prev => ({ ...prev, [index]: !prev[index] })) + } + + const footerSections = [ + { + header: 'DevHub', + links: [ + { name: 'Faucet', url: '/faucet' }, + { name: 'Bridge', url: '/bridge' }, + { name: 'Documentation', url: 'https://docs.game7.io/' }, + { name: 'Explorer', url: 'https://mainnet.game7.io/' }, + ], + }, + { + header: 'Media', + links: [ + { name: 'Community', url: 'https://discord.com/invite/g7dao' }, + ], + }, + { + header: 'Legal', + links: [ + { name: 'Terms', url: '/terms' }, + { name: 'Privacy', url: '/privacy' }, + { name: 'Cookie', url: '/cookie' }, + ], + }, + ] + + const navigateLink = (item: any) => { + if (item.name === 'Faucet') { + setSelectedNetworkType('Testnet') + navigate(item.url) + } else if (item.name === "Bridge") { + setSelectedNetworkType('Mainnet') + navigate(item.url) + } else { + window.open(item.url, '_blank') + } + } + + return ( + <> + {!smallView && ( +
+
+
+ +
+ {footerSections.map((section, index) => ( +
+
{section.header}
+ {section.links.map((link, linkIndex) => ( +
navigateLink(link)} className={styles.footerSectionLink} key={linkIndex}> + {link.name} +
+ ))} +
+ ))} +
+
+ {footerIcons.map((icon, index) => ( +
+ {icon.component} +
+ ))} +
+
+
+
+ )} + {smallView && ( +
+
+
+ +
+ {footerSections.map((section, index) => ( +
+
toggleSection(index)}> +
{section.header}
+ +
+ {!collapsedSections[index] && ( // Show links only if not collapsed + section.links.map((link, linkIndex) => ( +
navigateLink(link)} className={styles.footerSectionLink} key={linkIndex}> + {link.name} +
+ )) + )} +
+ ))} +
+
+ {footerIcons.map((icon, index) => ( +
+ {icon.component} +
+ ))} +
+
+
+
+ )} + + ) +} + +export default Footer \ No newline at end of file diff --git a/webapps/world-builder-dashboard/src/components/landing/Landing.module.css b/webapps/world-builder-dashboard/src/components/landing/Landing.module.css index 8c1133a5..a840f3b2 100644 --- a/webapps/world-builder-dashboard/src/components/landing/Landing.module.css +++ b/webapps/world-builder-dashboard/src/components/landing/Landing.module.css @@ -4,6 +4,16 @@ body { -webkit-overflow-scrolling: auto; } +.container { + width: 100%; + height: 100%; +} + +.viewContainer { + position: relative; + height: 5000px; +} + .layout { display: flex; width: 100vw; @@ -14,25 +24,38 @@ body { gap: 16px; background: #171717; cursor: url('../../assets/cursor.svg'), auto; - overflow: hidden; + /* overflow: hidden; */ + scrollbar-width: 0px; overscroll-behavior: none; -webkit-overflow-scrolling: auto; } .layout.darkened { - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */ - pointer-events: none; /* Prevent interactions with the background */ + background-color: rgba(0, 0, 0, 0.5); + pointer-events: none; } .navbarContainer { display: flex; width: 100%; - padding: 4px 0px; + padding: 12px 12px 12px 16px; flex-direction: column; align-items: center; align-self: stretch; } +.navbarSticky { + position: sticky; + z-index: 1005; + top: 0px; + padding-top: 24px; + padding: 12px 12px 12px 16px; + align-items: flex-start; + border-radius: 20px; + border: 1px solid var(--gray-500, #737373); + background: hsl(0, 0%, 3%); +} + .navbar { display: flex; justify-content: space-between; @@ -79,7 +102,8 @@ body { font-size: 16px; font-style: normal; font-weight: 600; - line-height: 24px; /* 150% */ + line-height: 24px; + /* 150% */ } .navbarCTA { @@ -302,8 +326,10 @@ body { } .scrollBarFill { - width: 100%; /* Full width */ - height: 0%; /* Start at 0% height */ + width: 100%; + /* Full width */ + height: 0%; + /* Start at 0% height */ background-color: #f04438; border-radius: 100px; transition: height 0.25s ease-in-out; @@ -334,7 +360,8 @@ body { font-size: 14px; font-style: normal; font-weight: 500; - line-height: 20px; /* 142.857% */ + line-height: 20px; + /* 142.857% */ } .contentContainer { @@ -357,7 +384,8 @@ body { font-size: 48px; font-style: normal; font-weight: 700; - line-height: 60px; /* 125% */ + line-height: 60px; + /* 125% */ letter-spacing: -0.96px; } @@ -394,7 +422,8 @@ body { font-size: 24px; font-style: normal; font-weight: 500; - line-height: 32px; /* 133.333% */ + line-height: 32px; + /* 133.333% */ } .cardImage { @@ -429,7 +458,8 @@ body { font-size: 18px; font-style: normal; font-weight: 400; - line-height: 28px; /* 155.556% */ + line-height: 28px; + /* 155.556% */ border-radius: 12px; border: 1px solid #727272; flex-grow: 1; @@ -460,9 +490,6 @@ body { backdrop-filter: blur(0.6990200281143188px); } -.sponsorCard::hover { -} - .sponsorCardImage { display: flex; padding: 8.627px; @@ -565,7 +592,8 @@ body { font-size: 24px; font-style: normal; font-weight: 500; - line-height: 32px; /* 133.333% */ + line-height: 32px; + /* 133.333% */ cursor: url('../../assets/hand.svg'), pointer; } @@ -607,6 +635,80 @@ body { flex: 1 0 auto; } +.footer { + display: flex; + padding: 40px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; + border-radius: 12px 12px 0px 0px; + border: 1px solid #727272; + background: url('../../assets/ftwotf.png') lightgray 50% / cover no-repeat; +} + +.footerContent { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 20px; + align-self: stretch; +} + +.footerLinks { + display: flex; + align-items: flex-start; + gap: 120px; +} + +.footerSection { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.footerSectionHeader { + color: #FFF; + /* Text xl Bold */ + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 30px; + /* 150% */ +} + +.footerSectionLink { + color: #FFF; + /* Text md Regular */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + /* 150% */ +} + +.footerIcons { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 12px; +} + +.layoutFooter { + padding: 24px; + background: #171717; +} + +.layoutNavbar { + padding: 24px 24px 0px 24px; + background: #171717; +} + + +/* Tablet */ @media (max-width: 1199px) { .layout { display: flex; @@ -682,6 +784,7 @@ body { align-items: center; align-self: stretch; } + .fourthSection { display: flex; flex-direction: column; @@ -700,9 +803,34 @@ body { width: 100%; min-width: 300px; } + + .navbarSticky { + position: sticky; + z-index: 1005; + top: 0px; + padding-top: 24px; + padding: 12px 12px 12px 16px; + align-items: flex-start; + border-radius: 20px; + border: 1px solid var(--gray-500, #737373); + background: hsl(0, 0%, 3%); + } } +/* Mobile */ @media (max-width: 750px) { + .navbarSticky { + position: sticky; + z-index: 1005; + top: 0px; + padding-top: 24px; + padding: 12px 12px 12px 16px; + align-items: flex-start; + border-radius: 20px; + border: 1px solid var(--gray-500, #737373); + background: hsl(0, 0%, 3%); + } + .sectionTitle { font-size: 30px; line-height: 38px; @@ -761,12 +889,15 @@ body { .navContainer { padding-top: 100px; - position: fixed; /* Make the menu overlay the entire screen */ + position: fixed; + /* Make the menu overlay the entire screen */ top: 72px; left: 0; - width: 100vw; /* Full width */ + width: 100vw; + /* Full width */ background-color: rgba(0, 0, 0, 0.75); - z-index: 1000; /* Ensure it's on top */ + z-index: 1000; + /* Ensure it's on top */ padding: 24px 24px 24px 24px; display: flex; flex-direction: column; @@ -870,6 +1001,7 @@ body { } } + @media (min-width: 1440px) { .networkEssentialCards { display: flex; @@ -893,6 +1025,7 @@ body { @media(min-width: 1860px) { .networkEssentialCards { - justify-content: center; /*cards fit to container */ + justify-content: center; + /*cards fit to container */ } -} +} \ No newline at end of file diff --git a/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx b/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx index c0bb3ac9..8999f747 100644 --- a/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx +++ b/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx @@ -1,6 +1,6 @@ // Navbar.tsx import React from 'react' -import { useNavigate } from 'react-router-dom' +import { useNavigate, useLocation } from 'react-router-dom' import styles from './Landing.module.css' import IconGame7 from '@/assets/IconGame7' import IconGame7Logo from '@/assets/IconGame7Logo' @@ -12,6 +12,7 @@ interface NavbarProps { setIsNavbarOpen: React.Dispatch> startBuilding: () => void navigateLink: (item: { name: string; link: string }) => void + isSticky: boolean } const NAVBAR_ITEMS = [ @@ -25,13 +26,12 @@ const NAVBAR_ITEMS = [ } ] -const Navbar: React.FC = ({ navbarOpen, smallView, setIsNavbarOpen, startBuilding, navigateLink }) => { +const Navbar: React.FC = ({ navbarOpen, smallView, setIsNavbarOpen, startBuilding, navigateLink, isSticky }) => { const navigate = useNavigate() - + const location = useLocation() return ( <> - {/* Main Navbar */} -
+
navigate('/')}> @@ -43,7 +43,7 @@ const Navbar: React.FC = ({ navbarOpen, smallView, setIsNavbarOpen, {NAVBAR_ITEMS.map((item, index) => (
{ navigateLink(item) }} diff --git a/webapps/world-builder-dashboard/src/legal.ts b/webapps/world-builder-dashboard/src/legal.ts new file mode 100644 index 00000000..c708137a --- /dev/null +++ b/webapps/world-builder-dashboard/src/legal.ts @@ -0,0 +1,80 @@ +export const LEGAL = { + terms: { + title: 'Terms and Conditions', + lastUpdated: 'June 1st, 2023', + sections: [ + { + title: 'First', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Second', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Third', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Fourth', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Fifth', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + ] + }, + cookie: { + title: 'Cookie Policy', + lastUpdated: 'June 1st, 2023', + sections: [ + { + title: 'First', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Second', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Third', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Fourth', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Fifth', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + ] + }, + privacy: { + title: 'Privacy Policy', + lastUpdated: 'June 1st, 2023', + sections: [ + { + title: 'First', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Second', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Third', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Fourth', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + { + title: 'Fifth', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ' + }, + ] + } +} \ No newline at end of file diff --git a/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.module.css b/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.module.css index ede82e95..57058e7a 100644 --- a/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.module.css +++ b/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.module.css @@ -22,8 +22,10 @@ body { } .layout.darkened { - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */ - pointer-events: none; /* Prevent interactions with the background */ + background-color: rgba(0, 0, 0, 0.5); + /* Semi-transparent dark overlay */ + pointer-events: none; + /* Prevent interactions with the background */ } .navbarContainer { @@ -81,7 +83,8 @@ body { font-size: 16px; font-style: normal; font-weight: 600; - line-height: 24px; /* 150% */ + line-height: 24px; + /* 150% */ } .navbarCTA { @@ -304,8 +307,10 @@ body { } .scrollBarFill { - width: 100%; /* Full width */ - height: 0%; /* Start at 0% height */ + width: 100%; + /* Full width */ + height: 0%; + /* Start at 0% height */ background-color: #f04438; border-radius: 100px; transition: height 0.25s ease-in-out; @@ -336,7 +341,8 @@ body { font-size: 14px; font-style: normal; font-weight: 500; - line-height: 20px; /* 142.857% */ + line-height: 20px; + /* 142.857% */ } .contentContainer { @@ -357,7 +363,8 @@ body { font-size: 48px; font-style: normal; font-weight: 700; - line-height: 60px; /* 125% */ + line-height: 60px; + /* 125% */ letter-spacing: -0.96px; } @@ -394,7 +401,8 @@ body { font-size: 24px; font-style: normal; font-weight: 500; - line-height: 32px; /* 133.333% */ + line-height: 32px; + /* 133.333% */ } .cardImage { @@ -429,7 +437,8 @@ body { font-size: 18px; font-style: normal; font-weight: 400; - line-height: 28px; /* 155.556% */ + line-height: 28px; + /* 155.556% */ border-radius: 12px; border: 1px solid #727272; flex-grow: 1; @@ -565,7 +574,8 @@ body { font-size: 24px; font-style: normal; font-weight: 500; - line-height: 32px; /* 133.333% */ + line-height: 32px; + /* 133.333% */ cursor: url('../../assets/hand.svg'), pointer; } @@ -607,6 +617,7 @@ body { flex: 1 0 auto; } + @media (max-width: 1199px) { .layout { display: flex; @@ -682,6 +693,7 @@ body { align-items: center; align-self: stretch; } + .fourthSection { display: flex; flex-direction: column; @@ -761,12 +773,15 @@ body { .navContainer { padding-top: 100px; - position: fixed; /* Make the menu overlay the entire screen */ + position: fixed; + /* Make the menu overlay the entire screen */ top: 72px; left: 0; - width: 100vw; /* Full width */ + width: 100vw; + /* Full width */ background-color: rgba(0, 0, 0, 0.75); - z-index: 1000; /* Ensure it's on top */ + z-index: 1000; + /* Ensure it's on top */ padding: 24px 24px 24px 24px; display: flex; flex-direction: column; @@ -868,4 +883,4 @@ body { .firstSection { height: var(--Landing-Page-First-Section-Height-Phone); } -} +} \ No newline at end of file diff --git a/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx b/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx index 05b0ac92..79ca18e4 100644 --- a/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx +++ b/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx @@ -1,5 +1,5 @@ // LandingPage.tsx -import React, {useEffect, useState} from 'react' +import React, { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import styles from './LandingPage.module.css' import { useMediaQuery } from 'summon-ui/mantine' @@ -11,6 +11,7 @@ import Navbar from '@/components/landing/Navbar' import NetworkEssentials from '@/components/landing/NetworksEssentials' import { useBlockchainContext } from '@/contexts/BlockchainContext' import backgroundImage from "@/assets/G7LandingPageBGDark.jpg"; +import Footer from '@/components/landing/Footer' const LandingPage: React.FC = () => { const navigate = useNavigate() @@ -57,39 +58,45 @@ const LandingPage: React.FC = () => { return ( <> {isLargeView ? ( - - ) : ( -
- + - -
- - - - -
- - {smallView && ( -
- Start building + + ) : (<> +
+
+
+ +
+ + + + +
+ {smallView && ( +
+ Start building +
+ )}
- )} +
+
+ )} ) diff --git a/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.module.css b/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.module.css new file mode 100644 index 00000000..b3a0f7b3 --- /dev/null +++ b/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.module.css @@ -0,0 +1,606 @@ +html, +body { + overscroll-behavior: none; + scrollbar-width: none; + -webkit-overflow-scrolling: auto; + -webkit-scrollbar: none; +} + + +.mainLayout { + position: relative; + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + gap: 200px; + flex: 1 0 0; + align-self: stretch; + border-radius: 12px; + background-color: #1b1b1b; + overflow-y: scroll; + scrollbar-width: none; + -ms-overflow-style: none; + transition: justify-content 0.3s ease; + overscroll-behavior: none; + -webkit-overflow-scrolling: auto; +} + +.container { + width: 100%; + height: 100%; +} + +.viewContainer { + position: relative; +} + +.legalHeader { + display: flex; + padding: 145.5px 0px 123.5px 0px; + flex-direction: column; + align-items: center; + gap: 145.5px; + border-bottom: 1px solid var(--gray-700, #4E4E4E); + width: calc(100% + 48px); + background: url() lightgray 0% 0% / 50px 50px repeat, #1D1D1D; +} + +.headerContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.titleHeader { + color: var(--white-500, #F2F7F2); + text-align: center; + font-family: Inter; + font-size: 80px; + font-style: normal; + font-weight: 700; + line-height: 96px; + /* 120% */ + letter-spacing: -1.6px; + text-transform: capitalize; +} + +.lastUpdated { + color: var(--white-600, #CBCFCB); + text-align: center; + + /* text/description/web */ + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 30px; + /* 150% */ +} + +.legalMain { + display: flex; + width: 100%; + padding: 32px 56px 100px 56px; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.legalSection { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 20px; +} + +.legalTitle { + color: var(--white-500, #F2F7F2); + font-family: Inter; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: 60px; + /* 125% */ + letter-spacing: -0.96px; + text-transform: capitalize; +} + +.legalContent { + align-self: stretch; + color: var(--white-600, #CBCFCB); + + /* text/description/web */ + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 30px; + /* 150% */ +} + + +.layout { + display: flex; + width: 100vw; + height: 100svh; + padding-left: 24px; + padding-right: 24px; + padding-top: 24px; + flex-direction: column; + align-items: center; + background: #171717; + cursor: url('../../assets/cursor.svg'), auto; + overflow: hidden; + overscroll-behavior: none; + -webkit-overflow-scrolling: auto; + overflow-y: scroll; + scrollbar-width: none; + -ms-overflow-style: none; + transition: justify-content 0.3s ease; + overscroll-behavior: none; + -webkit-overflow-scrolling: auto; +} + +.layout.darkened { + background-color: rgba(0, 0, 0, 0.5); + /* Semi-transparent dark overlay */ + pointer-events: none; + /* Prevent interactions with the background */ +} + +.navbarContainer { + display: flex; + max-width: 1920px; + padding: 4px 0px; + flex-direction: column; + align-items: center; + align-self: stretch; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; +} + +.navbarItemsContainer { + display: flex; + align-items: center; + gap: 12px; +} + +.navbarItems { + display: flex; + align-items: center; + gap: 4px; +} + +.navbarItem { + cursor: url('../../assets/hand.svg'), pointer; + display: flex; + padding: 8px 12px; + align-items: center; + gap: 8px; + border-radius: 6px; + color: #d5d5d5; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; +} + +.navbarItemHome { + cursor: url('../../assets/hand.svg'), pointer; + display: flex; + padding: 8px 12px; + align-items: center; + gap: 8px; + border-radius: 6px; + color: #fff; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; + /* 150% */ +} + +.navbarCTA { + display: flex; + padding: 10px 16px; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: 8px; + border: 1px solid #f04438; + background: #f04438; + box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); + color: #fff; + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; +} + +.navbarCTA:hover { + display: flex; + padding: 10px 16px; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: 8px; + background: linear-gradient(147deg, #f04438 11.16%, #fff 142.48%); + box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); + color: #fff; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; +} + + +.logoWrapper { + cursor: url('../../assets/hand.svg'), pointer; + display: flex; + align-items: center; + gap: 12px; +} + +.themeSwitchButton { + cursor: url('../../assets/hand.svg'), pointer; + display: flex; + width: 40px; + height: 40px; + padding: 8px; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: 8px; + border: 1px solid var(--Gray-300, #d0d5dd); +} + +.mainLayout { + position: relative; + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + gap: 200px; + flex: 1 0 0; + align-self: stretch; + border-radius: 12px; + background-color: #1b1b1b; + overflow-y: scroll; + scrollbar-width: none; + -ms-overflow-style: none; + transition: justify-content 0.3s ease; + overscroll-behavior: none; + -webkit-overflow-scrolling: auto; +} + +.mainLayoutStart { + justify-content: start; +} + +.titleContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; +} + +.titleText { + align-self: stretch; + color: #f9fafb; + text-align: center; + font-family: Inter; + font-size: 120px; + font-style: normal; + font-weight: 900; + line-height: 100%; + letter-spacing: -4px; + text-transform: uppercase; +} + +.subtitleText { + color: #b9b9b9; + text-align: center; + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 32px; + align-self: stretch; +} + +.ctaContainer { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 16px; +} + +.scrollBarsContainer { + display: flex; + flex-direction: column; + gap: 10px; +} + +.contentContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + align-self: stretch; + overscroll-behavior: none; + -webkit-overflow-scrolling: auto; +} + +.sectionTitle { + align-self: stretch; + color: #f9fafb; + text-align: center; + font-family: Inter; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: 60px; + /* 125% */ + letter-spacing: -0.96px; +} + +.cards { + display: flex; + justify-content: center; + align-items: flex-start; + align-content: flex-start; + gap: 24px; + flex-wrap: wrap; +} + +.card { + display: flex; + width: 100%; + max-width: 400px; + padding: 24px; + flex-direction: column; + align-items: center; + gap: 16px; + border-radius: 24px; + border: 1px solid #727272; + background: #171717; + height: 100%; + max-height: 426px; + flex: 1 0 0; +} + +.cardTitle { + color: #f9fafb; + + /* Display xs Medium */ + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 32px; + /* 133.333% */ +} + +.cardImage { + height: 178px; + align-self: stretch; + border-radius: 12px; + border: 1px solid #393939; +} + +.cardImageGamers { + background: url('../../assets/G7ReachGamersDark.jpg') lightgray 50% / cover no-repeat; +} + +.cardImageLightningQuick { + background: url('../../assets/G7LightningQuickDark.jpg') lightgray 50% / cover no-repeat; +} + +.cardImageSpecialEcon { + background: url('../../assets/G7SpecialEconZoneDark.jpg') lightgray 50% / cover no-repeat; +} + +.cardDescription { + display: flex; + padding: 24px; + flex-direction: column; + align-items: center; + gap: var(--20px, 20px); + align-self: stretch; + color: #b9b9b9; + text-align: center; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 28px; + /* 155.556% */ + border-radius: 12px; + border: 1px solid #727272; + flex-grow: 1; + justify-content: center; +} + +.sponsorCards { + display: flex; + justify-content: center; + align-items: center; + align-content: center; + gap: 24px; + flex-wrap: wrap; +} + +.sponsorCard { + display: flex; + height: 120px; + width: 220px; + padding: 31.231px 37.218px 31.257px 37.75px; + justify-content: center; + align-items: center; + border-radius: 12px; + border: 1px solid #727272; + background: #171717; + backdrop-filter: blur(0.6990200281143188px); +} + +.sponsorCard:hover { + cursor: url('../../assets/hand.svg'), pointer; + border: 1px solid #f04438; +} + +.sponsorCardImage { + display: flex; + padding: 8.627px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4.313px; +} + +.summonLogoContainer { + display: flex; + height: 28px; + padding: 0px 5.637px 0px 0.734px; + align-items: flex-start; + gap: 14.826px; + flex-shrink: 0; +} + +.networkEssentialCards { + display: flex; + align-items: flex-start; + gap: 24px; + align-self: stretch; + justify-content: center; + scrollbar-width: none; + flex-wrap: wrap; +} + +.networkEssentialCards::-webkit-scrollbar { + display: none; +} + +.networkEssentialCard { + display: flex; + width: 100%; + max-width: 340px; + height: 422px; + padding: 24px; + flex-direction: column; + align-items: center; + gap: 16px; + border-radius: 24px; + background: #0b0b0b; + border: 1px solid #727272; +} + +.networkEssentialCard:hover { + cursor: url('../../assets/hand.svg'), pointer; + border: 1px solid #f04438; +} + +.networkEssentialCardImage { + width: 292px; + height: 178px; + cursor: url('../../assets/hand.svg'), pointer; + border-radius: 12px; + border: 1px solid #393939; + height: 178px; + align-self: stretch; + width: 100%; +} + +.networkEssentialFaucet { + background: url('../../assets/G7FaucetCardDark.jpg') 50% / cover no-repeat; + background-size: contain; +} + +.networkEssentialBridge { + background: url('../../assets/G7BridgeCardDark.jpg') 50% / cover no-repeat; + background-size: contain; +} + +.networkEssentialExplorer { + background: url('../../assets/G7ExplorerCardDark.jpg') 50% / cover no-repeat; + background-size: contain; +} + +.networkEssentialDocs { + background: url('../../assets/G7DocsCardDark.jpg') 50% / cover no-repeat; + background-size: contain; +} + +.networkEssentialDiscord { + background: url('../../assets/G7DiscordCardDark.jpg') 50% / cover no-repeat; + background-size: contain; +} + +.networkEssentialCardText { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; + cursor: url('../../assets/hand.svg'), pointer; +} + +.networkEssentialCardTitle { + color: #f9fafb; + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 32px; + /* 133.333% */ + cursor: url('../../assets/hand.svg'), pointer; +} + +.networkEssentialCardDescription { + color: #b9b9b9; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 28px; + cursor: url('../../assets/hand.svg'), pointer; +} + +.firstSection { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-self: stretch; + height: var(--Landing-Page-First-Section-Height-Tablet); + flex: 1 0 auto; +} + +.secondSection { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-self: stretch; + flex: 1 0 auto; +} + +.thirdSection { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-self: stretch; + flex: 1 0 auto; +} \ No newline at end of file diff --git a/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.tsx b/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.tsx new file mode 100644 index 00000000..697930cb --- /dev/null +++ b/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.tsx @@ -0,0 +1,85 @@ +// LandingPage.tsx +import React, { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import styles from './LegalPage.module.css' +import { useMediaQuery } from 'summon-ui/mantine' +import Navbar from '@/components/landing/Navbar' +import { useBlockchainContext } from '@/contexts/BlockchainContext' +import Footer from '@/components/landing/Footer' + +interface LegalPageProps { + legalContent: any +} + +const LandingPage: React.FC = ({legalContent}) => { + const navigate = useNavigate() + const { setSelectedNetworkType } = useBlockchainContext() + const [navbarOpen, setNavBarOpen] = useState(false) + const smallView = useMediaQuery('(max-width: 750px)') + + + + const startBuilding = () => { + setSelectedNetworkType('Testnet') + navigate('/faucet') + } + + const navigateLink = (item: any) => { + if (item.name === 'Faucet') { + setSelectedNetworkType('Testnet') + navigate(`/${item.link}`) + } else if (item.name === "Bridge") { + setSelectedNetworkType('Mainnet') + navigate(`/${item.link}`) + } else { + window.open(item.link, '_blank') + } + } + + + return ( + <> +
+
+
+ +
+
+
+ {legalContent.title} +
+
+ Last updated: {legalContent.lastUpdated} +
+
+
+
+ {legalContent.sections.map((section: any, index: number) => ( +
+
+ {section.title} +
+
+ {section.content} +
+
+ ))} +
+
+
+
+
+
+
+ + ) +} + +export default LandingPage diff --git a/webapps/world-builder-dashboard/src/router.tsx b/webapps/world-builder-dashboard/src/router.tsx index af1f639b..afecb645 100644 --- a/webapps/world-builder-dashboard/src/router.tsx +++ b/webapps/world-builder-dashboard/src/router.tsx @@ -7,6 +7,10 @@ import FaucetPage from '@/pages/FaucetPage/FaucetPage' //Pages import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage' import LandingPage from './pages/LandingPage/LandingPage' +import LegalPage from './pages/LegalPage/LegalPage' +import { LEGAL } from './legal' + +console.log(LEGAL) const router = createBrowserRouter([ { @@ -14,6 +18,21 @@ const router = createBrowserRouter([ path: '/', errorElement: }, + { + element: , + path: '/terms', + errorElement: + }, + { + element: , + path: '/privacy', + errorElement: + }, + { + element: , + path: '/cookie', + errorElement: + }, { element: , children: [