fixbg

Author: Trangbth0203

components/common/Container.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-// import classnames from 'classnames'
+import classnames from 'classnames'
 // import BackgroundImage from 'components/common/BackgroundImage'
 
 const Container = memo(({ className, children }) => {
   return (
-    <div className="relative w-screen h-screen">
-      <div className={ className }>{children}</div>
+    <div className={classnames('relative w-screen h-screen', className)}>
+      <div>{children}</div>
     </div>
   )
 })

components/sessions/create/Step1.js

@@ -23,7 +23,6 @@ import Button from 'components/common/Button'
 import MapBox from 'components/common/MapBox'
 import LoadingOverlay from 'components/common/LoadingOverlay'
 import DetailIcon from 'components/icons/DetailIcon'
-// import Popup from 'components/common/Popup'
 import { useRouter } from 'next/router'
 import urls from 'consts/urls'
 
@@ -43,8 +42,6 @@ const Step1 = memo(({ formData, setFormData }) => {
   const [userLocation, setUserLocation] = useState(null)
   const [isToggleView, setIsToggleView] = useState(true)
   const [dataOldSessions, setDataOldSessions] = useState([])
-  // // const [openPopup, setOpenPopup] = useState(false)
-  // const [idDetail, setIdDetail] = useState('')
   const router = useRouter()
   sessionStorage.getItem('redirectURL') && sessionStorage.removeItem('redirectURL')
   sessionStorage.getItem('isSessionExpired') && sessionStorage.removeItem('isSessionExpired')

pages/index.js

@@ -38,7 +38,7 @@ export default function Home() {
       </Head>
       <Container className="bg-image">
         <Center>
-          <div className="py-36 md:py-60">
+          <div className="py-34 md:py-40">
             <h1 className="mb-3 text-gray-800 text-2xl md:text-5xl font-bold">GO OUT TOGETHER</h1>
             <h1 className="mb-3 text-gray-800 text-2xl md:text-5xl font-bold">
               Tạo nhóm và cùng bạn bè chọn địa điểm vui chơi

public/assets/images/bg32.png

@@ -1,50 +1,34 @@
 .bg-image {
   /* The image used */
-  background: url('/assets/images/bg25.png') no-repeat;
+  background: url('/assets/images/bg34.png') no-repeat;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100%;
 }
 .bg-image1 {
   /* The image used */
-  background: url('/assets/images/bg30.png') no-repeat;
-  /* background-attachment: fixed; */
+  background: url('/assets/images/bg32.png') no-repeat;
+  /* background-attachment: local; */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  /* min-width: 100%; */
+  min-width: 100%;
   min-height: 100%;
+  overflow-y: auto;
 }
 .bg-image2 {
   /* The image used */
-  width: 100%;
-  background: url('/assets/images/bg31.png') no-repeat; 
-  /* background-attachment: fixed; */
+  background: url('/assets/images/bg25.png') no-repeat; 
+  background-attachment: local;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100%;
+  min-width: 100%;
 }
-body::before {
-  content: '';
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-
-  display: block;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-
-  -webkit-filter: blur(2px);
-  -moz-filter: blur(2px);
-  -o-filter: blur(2px);
-  -ms-filter: blur(2px);
-  filter: blur(2px);
+body {
+  overflow-x: hidden;
 }
 
 .popup-direction {