Merge pull request #233 from Shirisha-16/main

Feat: Added splide js #184
RamakrushnaBiswal · Oct 12, 2024 · a462317 · a462317
2 parents cf044d3 + c001666
commit a462317
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 10 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@kinde-oss/kinde-auth-react": "^4.0.4",
+    "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
     "@splidejs/splide-extension-auto-scroll": "^0.5.3",
     "antd": "^5.21.2",

diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
@@ -1,4 +1,8 @@
-import React, { useState ,useEffect} from 'react';
+import React, { useState,useEffect  } from 'react';
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
+import '@splidejs/react-splide/css';
+
 import board1 from '../../assets/Boardgames/board1.png';
 import board2 from '../../assets/Boardgames/board2.png';
 import board3 from '../../assets/Boardgames/board3.jpg';
@@ -202,6 +206,7 @@ export default function Boardgame() {
     },
   ];
 
+
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -223,15 +228,57 @@ export default function Boardgame() {
                 </p>
               </div>
             </div>
-            <LazyLoadImage
-              alt={'bg'}
-              effect="blur"
-              wrapperProps={{
-                style: { transitionDelay: '1s' },
+            <Splide
+              options={{
+                type: 'loop',
+                perPage: 1,
+                autoplay: true,
+                lazyLoad: 'sequential',
+                autoScroll: {
+                  speed: 0.2, 
+                  pauseOnHover:true
+                }
               }}
-              className="mx-auto w-full aspect-[3/1] overflow-hidden rounded-t-xl object-cover object-center shadow-2xl"
-              src={bg}
-            />
+              className="mx-auto w-full rounded-t-xl object-cover object-center shadow-2xl"
+            >
+              <SplideSlide>
+                <LazyLoadImage
+                  alt="bg"
+                  effect="blur"
+                  src="https://images.unsplash.com/photo-1656686631034-e88d4fbde1e3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  className="object-cover w-full"
+                  style={{height : "500px" ,width:"2000px"}}
+                />
+              </SplideSlide>
+              <SplideSlide>
+                <LazyLoadImage
+                  alt="bg1"
+                  effect="blur"
+                  src="https://images.unsplash.com/photo-1681402720847-961bb1aab8d8?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  className="object-cover w-full"
+                  style={{height : "500px",width:"2000px"}}
+                />
+              </SplideSlide>
+              <SplideSlide>
+                <LazyLoadImage
+                  alt="bg2"
+                  effect="blur"
+                  src="https://images.unsplash.com/photo-1609818698346-8cb3be6e0bc0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  className="object-cover"
+                  style={{height : "500px",width:"2000px"}}
+                />
+              </SplideSlide>
+              <SplideSlide>
+                <LazyLoadImage
+                  alt="bg3"
+                  effect="blur"
+                  src="https://images.unsplash.com/photo-1659480142923-0cd01191e0e9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  className="object-cover"
+                  style={{height : "500px",width:"2000px"}}
+                />
+              </SplideSlide>
+              {/* Add more slides as necessary */}
+            </Splide>
           </div>
         </section>
         <section className="w-full py-12 md:py-24 lg:py-32">
@@ -323,4 +370,4 @@ export default function Boardgame() {
       </div>
     </>
   );
-}
+}
diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
@@ -2,6 +2,7 @@
 import { useState , useEffect } from "react";
 import photo from "../../assets/login.png";
 import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const Signup = () => {
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
@@ -118,6 +119,12 @@ const Signup = () => {
             {error}
           </div>
         )}
+        <h3 className="flex items-center justify-between w-full">
+          Already have an account?
+          <span className="block text-[#666] font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition">
+            <Link to={'/login'}>Login</Link>
+          </span>
+        </h3>
         <button
           className="button-confirm mx-auto mt-12 px-4 w-30 h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
           onClick={(e) => handleSubmit(e)}