no message

src/components/AutoBanner/index.jsx

@@ -0,0 +1,68 @@
+// styling
+
+// components
+import LazyImage from '@components/LazyImage';
+
+// utils
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {Swiper, SwiperSlide} from "swiper/react";
+import {useState,useEffect} from "react";
+import {
+    A11y,
+    Autoplay,
+    EffectCoverflow,
+    EffectCreative,
+    EffectCube,
+    EffectFade,
+    EffectFlip,
+    Manipulation
+} from "swiper";
+import {useThemeProvider} from "@contexts/themeContext";
+import Spring from "@components/Spring";
+import {StyledSwiper} from "@components/AutoBanner/style";
+import SwiperControls from "@ui/SwiperControls";
+
+const AutoBanner = ({data,perview=3,spaceBetween=15,delay=3000,speed=1000}) => {
+    const [swiper, setSwiper] = useState(null);
+    const {isMobile} = useThemeProvider();
+    if (isMobile())perview=1;
+    useEffect(() => {
+        if (swiper) {
+            swiper.update();
+        }
+    }, [swiper]);
+    return (
+        <Spring className="w-100">
+            <StyledSwiper onSwiper={setSwiper}
+                    slidesPerView={perview}
+                    spaceBetween={spaceBetween}
+                    loop
+                    autoplay={{delay: delay, disableOnInteraction: false}}
+                    effect="fade"
+                    fadeEffect={{crossFade: true}}
+                    modules={[Autoplay]}
+                    speed={speed}
+            >
+                {
+                    data.map((item, index) => (
+                        <SwiperSlide key={index}>
+                            <a href={item.link}>
+                                <LazyImage className="banner-img" src={item.img} alt={item.alt}>
+
+                                </LazyImage>
+                            </a>
+                        </SwiperSlide>
+                    ))
+                }
+            </StyledSwiper>
+            <SwiperControls swiper={swiper}/>
+        </Spring>
+    )
+}
+
+AutoBanner.propTypes = {
+    data:PropTypes.any.isRequired,
+}
+
+export default AutoBanner

src/components/AutoBanner/style.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components/macro';
+import theme from "styled-theming";
+import {Swiper} from "swiper/react";
+export const StyledSwiper = styled(Swiper)`
+ padding: 20px 0px;
+ .swiper-wrapper{
+    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ }
+ .swiper-slide{
+    
+ }
+`

src/layout/AppGrid.jsx

@@ -27,7 +27,7 @@ const AppGrid = ({widgets, id}) => {
         lg: width >= 1280 && width < 1500,
         xl: width >= 1500
     }
-
+    const rowH=180;
     return (
         <div className="layout">
             {
@@ -37,7 +37,7 @@ const AppGrid = ({widgets, id}) => {
                         layouts={layouts[id]}
                         breakpoints={breakpoints}
                         cols={{xl: 4, lg: 3, md: 2}}
-                        rowHeight={fontScale === 1 ? 220 : 220 + (fontScale * 3)}
+                        rowHeight={fontScale === 1 ? rowH : rowH + (fontScale * 3)}
                         isDraggable={false}
                         isResizable={false}
                         margin={[25, 20]}
@@ -72,4 +72,4 @@ AppGrid.propTypes = {
     id: PropTypes.string.isRequired
 }
 
-export default AppGrid
+export default AppGrid

src/layout/Footer/index.jsx

@@ -0,0 +1,55 @@
+import styles from './styles.module.scss';
+const i18n=global.i18n;
+const Footer=()=>{
+    const renderGameing=()=>{
+        return (
+            <div className={styles.footer_block}>
+                <div className={styles.tit}>{i18n.t('footer.game_res')}</div>
+                <div className={styles.footer_gaming_wrap}>
+                    <div className={styles.gameing_item}>
+                        <a href="https://www.ouro777.com/verifytogc.html">
+                            <img src="https://cdn.ouro777.com/img/gc-logo.png" alt="GAMING CURACAO LICENSEE CLICK FOR MORE INFORMATION" />
+                        </a>
+                    </div>
+                    <div className={styles.gameing_item}>
+                        <a href="https://cryptogambling.org" keep-scroll-position="true" rel="noopener noreferrer" className="">
+                            <img alt="verify" src="https://cdn.ouro777.com/img/verify.webp" />
+                        </a>
+                    </div>
+                    <div className={styles.gameing_item}>
+                        <a href="https://www.responsiblegambling.org/" keep-scroll-position="true" rel="noopener noreferrer" className="">
+                            <img alt="respon" src="https://cdn.ouro777.com/img/respon.webp"/>
+                        </a>
+                    </div>
+                    <div className={styles.gameing_item}>
+                        <a href="https://www.ouro777.com/protect.html" keep-scroll-position="true" rel="noopener noreferrer" className="">
+                            <img src="https://cdn.ouro777.com/img/18.png" style={{width:'40px'}} />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+    const renderPolicy=()=>{
+        return (
+            <div className={styles.footer_block}>
+                <div>
+                    <a href="https://cdn.ouro777.com/privacy.html">{i18n.t("footer.privacy_policy")}</a>
+                    {" | "}
+                    <a href="https://cdn.ouro777.com/service.html">{i18n.t("footer.terms_of_service")}</a>
+                    {" | "}
+                    <a href="https://cdn.ouro777.com/kyc.html">{i18n.t("footer.kyc_policy")}</a>
+                </div>
+            </div>
+        )
+    }
+    return (
+        <footer className="app_container-footer">
+            <div className={styles.footer_content}>
+                {renderGameing()}
+                {renderPolicy()}
+            </div>
+        </footer>
+    )
+}
+export default Footer;

src/layout/Footer/styles.module.scss

@@ -0,0 +1,35 @@
+.footer_content{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 1430px;
+}
+.footer_block{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 48px 0;
+  border-top: 1px solid var(--divider);
+  .tit{
+    margin: 0;
+    font-size: 18px;
+    color: var(--header);
+  }
+}
+.footer_gaming_wrap{
+  display: flex;
+  width: 100%;
+  align-items:center;
+  justify-content: center;
+  margin-top: 2.5rem;
+  gap: 2rem;
+  @media screen and (min-width: 768px) {
+    gap: 6rem;
+  }
+  .gameing_item{
+    width: 7.5rem;
+    height: auto;
+  }
+}

src/layout/Layout.jsx

@@ -12,6 +12,7 @@ import {preventDefault} from "@utils/helpers";
 import {useThemeProvider} from "@contexts/themeContext";
 import CRoute from "@layout/Routes";
 import {CBrowserRouter,CHashRouter} from "@layout/Routes";
+import Footer from "@layout/Footer";
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 
 const Layout=()=>{
@@ -45,8 +46,8 @@ const Layout=()=>{
                       <Suspense fallback={<LoadingScreen/>}>
                           <CBrowserRouter routes={inRoutes}></CBrowserRouter>
                       </Suspense>
-
                   </div>
+                  <Footer />
                   {/*</div>*/}
               </AppContainer>
           </div>

src/layout/Navbar/index.jsx

@@ -75,13 +75,16 @@ const DesktopNavToggle=()=>{
     const currRoute=useSelector(getRoute(pathname));
     const getRootRoute=(pathname)=>{
         let route="";
-        let clv=currRoute.lv;
-        for (let i = 0; i < LINKS.length; i++) {
-            let link=LINKS[i];
-            let lv=link.lv;
-            if (clv.startsWith(lv)){
-                route=link.path;
-                break;
+        if (currRoute){
+            let clv=currRoute.lv;
+            if (clv==null)return route;
+            for (let i = 0; i < LINKS.length; i++) {
+                let link=LINKS[i];
+                let lv=link.lv;
+                if (clv.startsWith(lv)){
+                    route=link.path;
+                    break;
+                }
             }
         }
         return route;
@@ -105,7 +108,7 @@ const DesktopNavToggle=()=>{
                             <svg className={"icon"}>
                                 <use xlinkHref={`${symbol}#${link.icon}`} />
                             </svg>
-                            {i18n.t(link.title)}
+                            {i18n.t("links."+link.title)}
                         </NavLink>
                     </StyledToggle>
                 ))
@@ -189,7 +192,12 @@ const PageHeader = () => {
     const {pathname} = useLocation();
     const navigate=useNavigate();
     const barRef = useRef(null);
+    const currRoute=useSelector(getRoute(pathname));
     let lastscroll=0;
+    const checkNavActive=(lv)=>{
+        if (currRoute&&currRoute.lv)return currRoute.lv.startsWith(lv);
+        else return false;
+    }
     const getHeaderHeight = () => {
         const header = document.querySelector('#appbar');
         if (header!=null)return `${header.offsetHeight || 0}px`
@@ -266,13 +274,13 @@ const PageHeader = () => {
                     </button>
                     {
                         LINKS.map((link, index) => (
-                            <button key={index} className={`${styles['mb-top-navigate-item']} ${pathname===link.path?active:''}`} onClick={()=>{
+                            <button key={index} className={`${styles['mb-top-navigate-item']} ${checkNavActive(link.lv)?active:''}`} onClick={()=>{
                                 changePath(link.path);
                             }}>
                                 <svg className={"icon"}>
                                     <use xlinkHref={`${symbol_m}#${link.icon}`} />
                                 </svg>
-                                <span>{i18n.t(link.title)}</span>
+                                <span>{i18n.t("links."+link.title)}</span>
                             </button>
                         ))
                     }

src/layout/Routes/RouteWrapper.jsx

@@ -40,7 +40,7 @@ const RouteWrapper = (props) => {
         if (Comp!=null)isexit=true;
         return (
             <>
-                <PageHeader title={i18n.t(`links.${route.title}`)}/>
+                {/*<PageHeader title={i18n.t(`links.${route.title}`)}/>*/}
                 {/*<Comp {...mergeQueryToProps()} />*/}
                 {
                     isexit?<Comp />:<></>

src/layout/Sidebar/index.jsx

@@ -187,8 +187,8 @@ const Sidebar = () => {
     const renderLink=(link)=>{
         let pages=link.subs||link.pages;
         let linkItem=(
-                <StyledAccordion defaultExpanded={true} open={open} square={true} key={link.title} expanded={checkCkey(link.lv)} onChange={handleChange(`${link.lv}`,link.path)}>
-                    <MTooltip disableHoverListener={open} title={i18n.t("links."+link.title)} arrow placement="right">
+                <StyledAccordion defaultExpanded={true} open={open} square={true} key={link.lv} expanded={checkCkey(link.lv)} onChange={handleChange(`${link.lv}`,link.path)}>
+                    <MTooltip  disableHoverListener={open} title={i18n.t("links."+link.title)} arrow placement="right">
                         <StyledAccordionSummary open={open}>
                                 <Link open={open} className={`${checkPath(link) ? 'active' : ''} h4`}>
                                     <svg className={"icon"}>

src/layouts.js

@@ -429,7 +429,18 @@ const layouts = {
             {i: 'notifications_schedule', x: 0, y: 7, w: 1, h: 1},
             {i: 'password', x: 1, y: 6, w: 1, h: 2}
         ]
+    },
+    home:{
+        xl:[
+            {i: 'banner', x: 0, y: 0, w: 4, h: 1},
+        ],
+        lg:[
+            {i: 'banner', x: 0, y: 0, w: 3, h: 1},
+        ],
+        md:[
+            {i: 'banner', x: 0, y: 0, w: 2, h: 1},
+        ]
     }
 }
 
-export default layouts
+export default layouts

src/locales/languages/en_US.json

@@ -30,5 +30,11 @@
     "light": "Light"
   },
   "sign_in": "Sign in",
-  "sign_up": "Sign up"
+  "sign_up": "Sign up",
+  "footer": {
+    "game_res": "Gaming Responsibilities",
+    "privacy_policy": "Privacy Policy",
+    "terms_of_service": "Terms of Service",
+    "kyc_policy": "AML & KYC Policy"
+  }
 }

src/pages/Home.jsx

@@ -0,0 +1,16 @@
+import AppGrid from "@layout/AppGrid";
+import Banner from "@widgets/Banner";
+
+const widgets = {
+    banner:<Banner />
+}
+
+const Home = () => {
+    return (
+        <>
+            <AppGrid id="home" widgets={widgets}/>
+        </>
+    )
+}
+
+export default Home

src/pages/index.jsx

@@ -1,6 +1,6 @@
 import {lazy} from "react";
 
-const ClubSummary = lazy(() => import('@pages/ClubSummary'));
+const Home=lazy(()=>import('@pages/Home'));
 export default {
-    Home:ClubSummary,
+    Home:Home,
 }

src/styles/_global.scss

@@ -32,6 +32,13 @@ body {
         align-items: stretch;
         flex: 1;
         margin: 15px 15px 70px;
+        &-content{
+            min-height: 92vh;
+        }
+        &-footer{
+            margin-top: 3rem;
+            background-color: var(--body);
+        }
     }
 
     &.fluid {
@@ -155,7 +162,7 @@ input, input::placeholder {
 }
 .fold-line {
     width: 100%;
-    border-top: 1px solid #25272C;
+    border-top: 1px solid var(--divider);
     margin: 12px 0;
 }
 @keyframes rotate {
@@ -169,3 +176,9 @@ input, input::placeholder {
 .overflow-visible{
     overflow:visible !important;
 }
+.page-max-width-wrap{
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 25px;
+    max-width: 1430px;
+}

src/styles/theme.js

@@ -65,7 +65,7 @@ export default createGlobalStyle`
     })};
     --divider: ${theme('theme', {
         light: '#ccc',
-        dark: '#3e3e3e',
+        dark: '#25272C',
     })};
     --placeholder: ${theme('theme', {
         light: '#8C9876',

src/widgets/Banner/index.jsx

@@ -0,0 +1,36 @@
+import AutoBanner from "@components/AutoBanner";
+import {useThemeProvider} from "@contexts/themeContext";
+
+const Banner=()=>{
+    const {isMobile} = useThemeProvider();
+    const testdata=[
+        {
+            img:'http://localhost:3000/banner/1.png',
+            alt:'1',
+            link:'http://localhost:3000/'
+        },
+        {
+            img:'http://localhost:3000/banner/2.png',
+            alt:'2',
+            link:'http://localhost:3000/'
+        },
+        {
+            img:'http://localhost:3000/banner/3.png',
+            alt:'3',
+            link:'http://localhost:3000/'
+        },
+        {
+            img:'http://localhost:3000/banner/4.png',
+            alt:'4',
+            link:'http://localhost:3000/'
+        }
+    ];
+    return (
+        <div className={`${isMobile()?'':'page-max-width-wrap'}`}>
+            <AutoBanner data={testdata}>
+
+            </AutoBanner>
+        </div>
+    )
+}
+export default Banner;