Merge pull request #14 from FabienBounoir/rework_homepage

Rework homepage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bounsbot",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "private": true,
   "description": "BounsBot is a Discord bot",
   "dependencies": {

public/index.html

@@ -5,20 +5,20 @@
   <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#A80C00" />
+  <meta name="theme-color" content="#0f0f10" />
   <meta name="description"
     content="Bouns'Bot, a Discord bot developed by BadbounsTV, offers a rewarding experience with innovative and entertaining commands. Enjoy unique features that add a touch of usability and fun to your Discord server with this creative and exciting bot." />
   <meta property="og:title" content="Bouns'Bot">
   <meta property="og:type" content="website">
   <meta property="og:site_name" content="Bouns'bot">
   <meta property="og:description"
-    content="Bouns'Bot a discord bot compatible with 20 languages developed by @Badbouns. The easiest Discord bot to use ! Game | Moderation | Leveling | Twitch Chat | Radio | Ticket | Temp Channel & more !">
+    content="Enhance your server with our all-in-one bot. The easiest Discord bot to use ! Game, Moderation, Leveling, Twitch, Radio, Ticket, Temporary voice Channel & more ! 👀">
   <meta name="language" content="French">
   <meta name="author" content="BadbounsTV">
   <meta property="og:url" content="https://bounsbot.com/">
   <meta property="og:image" content="%PUBLIC_URL%/banner.png">
-  <meta property="og:image:width" content="1616">
-  <meta property="og:image:height" content="1010">
+  <meta property="og:image:width" content="5088">
+  <meta property="og:image:height" content="3042">
   <meta property="og:image:type" content="image/png">
 
   <meta property="twitter:card" content="summary_large_image">
@@ -66,6 +66,7 @@
     media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
     rel="apple-touch-startup-image" />
   <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="version" content="2.7.0">
 
   <title>Bouns'Bot</title>
   <meta name="google-site-verification" content="84Ofysxu1K3gydBGwK2SFJpXGPJ9b4ashL8cXGCnW-A" />
@@ -95,14 +96,16 @@
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', function () {
         navigator.serviceWorker.register('worker.js').then(function (registration) {
+          console.log("navigator.onLine", navigator.onLine)
           if (navigator.onLine) {
+            console.log('Update worker', registration.scope);
             registration.update();
           }
-          // console.log('Worker registration successful', registration.scope);
+          console.log('Worker registration successful', registration.scope);
         }, function (err) {
-          // console.log('Worker registration failed', err);
+          console.log('Worker registration failed', err);
         }).catch(function (err) {
-          // console.log(err);
+          console.log(err);
         });
       });
     } else {

public/sitemap.xml

@@ -2,57 +2,57 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 <url>
   <loc>https://bounsbot.com/</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/level</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/demo</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/dashboard</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/commands</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/status</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 
 <url>
   <loc>https://bounsbot.com/login</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/a-propos</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/bot/terms</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/bot/privacy</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 
 <url>
   <loc>https://bounsbot.com/bot/privacy</loc>
-  <lastmod>2023-12-10T15:30:00+00:00</lastmod>
+  <lastmod>2024-02-10T15:30:00+00:00</lastmod>
 </url>
 </urlset>

public/worker.js

@@ -1,3 +1,5 @@
+const version = '2.7.1'
+
 var CACHE_NAME = 'pwa-bounsbot';
 var urlsToCache = [
   '/',
@@ -15,6 +17,7 @@ self.addEventListener('install', event => {
   event.waitUntil(
     caches.open(CACHE_NAME)
       .then(function (cache) {
+        console.log('Opened cache', cache);
         return cache.addAll(urlsToCache);
       })
   );
@@ -25,6 +28,7 @@ self.addEventListener('fetch', event => {
   event.respondWith(
     caches.match(event.request)
       .then(function (response) {
+        console.log("response", response)
         // Cache hit - return response
         if (response) {
           return response;

src/app/App.css

@@ -2,21 +2,18 @@
 
 html {
   --logo-bouns-bot: "var(--color-principal)";
-  /* --color-principal: #0cab34; */
-  /* --color-principal-hover: #058f28; */
   --color-principal: #EF3F3F;
   --color-principal-hover: #A80C00;
 
   --color-red: 239;
   --color-green: 63;
   --color-blue: 63;
 
-  --back-first-color: #383c41;
+  --back-first-color: #0f0f10;
   --back-second-color: #202225;
-  --back-html-color: #212529;
+  --back-html-color: #0f0f10;
 
   background-color: var(--back-html-color);
-  animation: test 0.3s infinite;
 }
 
 h1, h2, h3 {

src/app/App.jsx

@@ -55,7 +55,7 @@ export const App = () => {
     let r = document.getElementsByTagName("html")[0];
 
     let date = new Date();
-    if (date.getMonth() === 9) { //&& date.getDate() === 31
+    if (date.getMonth() === 9 && (date.getDate() <= 31 && date.getDate() >= 15)) {
       let r = document.getElementsByTagName("html")[0];
       r.style.setProperty('--color-principal', '#ff5e00');
       r.style.setProperty('--color-principal-hover', '#702a00');
@@ -64,7 +64,7 @@ export const App = () => {
       r.style.setProperty('--color-green', '94');
       r.style.setProperty('--color-blue', '0');
     }
-    else if (date.getMonth() === 11 && (date.getDate() <= 26 && date.getDate() >= 10)) {
+    else if (date.getMonth() === 11 && (date.getDate() <= 27 && date.getDate() >= 10)) {
       let r = document.getElementsByTagName("html")[0];
       //frozen color
       r.style.setProperty('--color-principal', '#00bfff');
@@ -142,9 +142,11 @@ export const App = () => {
               title="Bouns'Botㆍcommandes"
               description="Learn how to use Bouns'bot, the multifunction bot for your Discord server."
               name="Bouns'Bot" />
-            <Commandes />
-            <BrandAddBot />
-            <Footer />
+            <ScrollToTop>
+              <Commandes />
+              <BrandAddBot />
+              <Footer />
+            </ScrollToTop>
           </Route>
 
           <Route exact path="/status">

src/components/approvedBy/_approvedBy.css

@@ -13,6 +13,7 @@
     height: 100svh;
 
     user-select: none;
+    scroll-padding-top: 1em;
 }
 
 
@@ -92,6 +93,7 @@
     background: linear-gradient(180deg, var(--color-principal) 0%, var(--color-principal-hover) 350%);
     position: relative;
     color: #1f2129;
+    scroll-padding-top: 1em;
 }
 
 .infoComponent .info-content {
@@ -230,8 +232,6 @@
 }
 
 .infoComponent .guilds-container .guilds p {
-    /* color: #fff; */
-    /* font-size: 16px; */
     padding: 0;
     margin: 0;
 }
@@ -278,16 +278,12 @@
         margin: 0;
         padding: 0;
         display: flex;
-        /* gap:  */
         flex-direction: column;
         justify-content: center;
         align-items: center;
         height: calc(100vh - 25px);
-        /* min-height: 60vh; */
-        /* max-height: 50vh; */
         padding: 40px 10px 40px 10px;
         gap: 1.5em;
-        /* background: #1f2129; */
     }
 
     .infoComponent h2 {
@@ -309,16 +305,12 @@
         margin: 0;
         padding: 0;
         display: flex;
-        /* gap:  */
         flex-direction: column;
         justify-content: center;
         align-items: center;
         height: calc(100vh - 25px);
-        /* min-height: 60vh; */
-        /* max-height: 50vh; */
         padding: 40px 10px 40px 10px;
         gap: 1.5em;
-        /* background: #1f2129; */
     }
 
     .infoComponent h2 {

src/components/approvedBy/bestGuild.jsx

@@ -5,7 +5,7 @@ export const BestGuild = ({ guild, display, index }) => {
     const { t } = useTranslation();
     const [ref, inView] = useInView({
         triggerOnce: true, // Pour déclencher l'animation une seule fois
-        threshold: 0.5, // Le pourcentage de l'élément visible pour déclencher l'animation
+        threshold: 0.1, // Le pourcentage de l'élément visible pour déclencher l'animation
     });
 
 
@@ -21,7 +21,7 @@ export const BestGuild = ({ guild, display, index }) => {
         }
     }
 
-    return (<div className={`guilds ${inView ? 'active' : ''}`} ref={ref} style={{ transitionDelay: `${index * 0.1}s` }}>
+    return (<div className={`guilds ${inView ? 'active' : ''}`} ref={ref} style={{ transitionDelay: `${index * 0.05}s` }}>
         <img src={guild.iconURL || "https://media.discordapp.net/attachments/1014101467126304798/1056241554764869673/image.png?width=1290&height=1290"} alt="logo" onError={(e) => { e.target.outerHTML = `<img loading="lazy" src='https://media.discordapp.net/attachments/1014101467126304798/1056241554764869673/image.png?width=1290&height=1290'/>` }} />
         <div>
             <h3>{guild.name}</h3>

src/components/callback/callback.jsx

@@ -5,10 +5,8 @@ import { getUser, login } from "../../utils/API/authAPI";
 import { useHistory } from "react-router-dom/cjs/react-router-dom";
 import { useStore } from "../../utils/store";
 
-// class Callback extends Component {
 export const Callback = () => {
     const history = useHistory();
-    // const [state, dispatch] = useStore();
     const [state, dispatch] = useStore();
 
     useEffect(() => {
@@ -38,15 +36,11 @@ export const Callback = () => {
         })
     }, [])
 
-
-
     return (
         <div className="container-logo">
             <Avatar classElement="width-logo-svg" />
             <p><strong>Authentification en cours</strong><br />Veuillez patienter...</p>
             <span>Se connecter avec Discord</span>
         </div>
     )
-}
-
-// export default Callback;
+}

src/components/command/_commandSqueleton.css

@@ -20,21 +20,18 @@
 }
 
 .btn-commands-category_squeleton {
-    /* color: #686873; */
     background-color: #1f1f25;
     color: transparent;
     padding: 13px 28px;
     font-weight: 600;
     cursor: pointer;
     scroll-snap-align: start;
     min-width: fit-content;
-
     animation: opacityChange 2s infinite;
 }
 
 .btn-commands-category_squeleton:hover {
     box-shadow: var(--color-principal) 0px 0px 0px 1px inset;
-    /* transi: test 2s ease-in-out; */
     transition: box-shadow 0.3s ease-in-out;
     user-select: none;
 }