chore: fix all images in home and links

Boyadjie · Jun 29, 2024 · 1ce476f · 1ce476f
1 parent e6094ae
commit 1ce476f
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 39 deletions.
diff --git a/app/accueil/page.tsx b/app/accueil/page.tsx
@@ -6,31 +6,9 @@ import {MapPreview} from '../../src/components/map/MapPreview';
 import {Navbar} from '../../src/components/navbar/Navbar';
 import {Onboarding} from '../../src/components/onboarding/Onboarding';
 import {Profile} from '../../src/components/profile/Profile';
+import {actus, articles} from '../../src/data/homePage';
 import styles from './page.module.css';
 
-const tempData = [
-  {
-    title: 'Préparer son voyage en 5 étapes',
-    date: new Date('2024-06-05'),
-    pictureUrl: '/user.jpg',
-  },
-  {
-    title: 'Vie locale : conseils pratiques',
-    date: new Date('2024-11-09'),
-    pictureUrl: '/user.jpg',
-  },
-  {
-    title: 'Où manger local ?',
-    date: new Date('2024-03-01'),
-    pictureUrl: '/user.jpg',
-  },
-  {
-    title: 'Transports et déplacements',
-    date: new Date('2024-03-23'),
-    pictureUrl: '/user.jpg',
-  },
-];
-
 export default function Home() {
   return (
     <>
@@ -61,10 +39,10 @@ export default function Home() {
         <div className={styles.homeContentContainer}>
           <Slider
             title="Articles conseillés"
-            items={tempData}
-            link="/accueil#"
+            items={articles}
+            link="/articles"
           />
-          <Slider title="Actualités" items={tempData} link="/accueil#" />
+          <Slider title="Actualités" items={actus} link="/accueil#" />
           <MapPreview />
         </div>
       </div>

diff --git a/app/articles/page.module.css b/app/articles/page.module.css
@@ -28,3 +28,13 @@
     }
   }
 }
+
+.loader {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  svg {
+    width: 120px;
+  }
+}
diff --git a/app/articles/page.tsx b/app/articles/page.tsx
@@ -2,6 +2,7 @@
 import {useState} from 'react';
 
 import {ArticlesList} from '../../src/components/articles/articlesList/ArticlesList';
+import {Loader} from '../../src/components/decorations/loader';
 import {InputRadio} from '../../src/components/Form/Inputs/InputRadio';
 import {Navbar} from '../../src/components/navbar/Navbar';
 import {useArticles} from '../../src/hook/useArticles';
@@ -41,7 +42,11 @@ export default function Articles() {
           ))}
         </div>
 
-        {loading && 'Loading ...'}
+        {loading && (
+          <div className={styles.loader}>
+            <Loader />
+          </div>
+        )}
         {!loading && categories && (
           <ArticlesList articles={categories[selectedCategory]} />
         )}

diff --git a/src/components/blocs/preview/article/articlePreview.module.css b/src/components/blocs/preview/article/articlePreview.module.css
@@ -6,19 +6,11 @@
     width: 100%;
 
     .imageContainer {
-      position: relative;
       width: 100%;
-      overflow: hidden;
-      border-radius: 5px;
 
       > img {
-        position: absolute;
-        aspect-ratio: 16 / 9;
         width: 100%;
         height: auto;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
       }
     }
 
@@ -39,9 +31,17 @@
     position: relative;
     width: 125px;
     height: 125px;
+    overflow: hidden;
+    border-radius: 5px;
 
     > img {
-      border-radius: 5px;
+      position: absolute;
+      aspect-ratio: 16 / 9;
+      width: auto;
+      height: 100%;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
     }
 
     .rate {

diff --git a/src/components/decorations/Loader.tsx b/src/components/decorations/Loader.tsx
@@ -0,0 +1,60 @@
+export const Loader = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+      <circle
+        fill="#00969F"
+        stroke="#00969F"
+        stroke-width="15"
+        r="15"
+        cx="40"
+        cy="100"
+      >
+        <animate
+          attributeName="opacity"
+          calcMode="spline"
+          dur="1"
+          values="1;0;1;"
+          keySplines=".5 0 .5 1;.5 0 .5 1"
+          repeatCount="indefinite"
+          begin="-.4"
+        ></animate>
+      </circle>
+      <circle
+        fill="#00969F"
+        stroke="#00969F"
+        stroke-width="15"
+        r="15"
+        cx="100"
+        cy="100"
+      >
+        <animate
+          attributeName="opacity"
+          calcMode="spline"
+          dur="1"
+          values="1;0;1;"
+          keySplines=".5 0 .5 1;.5 0 .5 1"
+          repeatCount="indefinite"
+          begin="-.2"
+        ></animate>
+      </circle>
+      <circle
+        fill="#00969F"
+        stroke="#00969F"
+        stroke-width="15"
+        r="15"
+        cx="160"
+        cy="100"
+      >
+        <animate
+          attributeName="opacity"
+          calcMode="spline"
+          dur="1"
+          values="1;0;1;"
+          keySplines=".5 0 .5 1;.5 0 .5 1"
+          repeatCount="indefinite"
+          begin="0"
+        ></animate>
+      </circle>
+    </svg>
+  );
+};
diff --git a/src/components/landing/contact/Contact.tsx b/src/components/landing/contact/Contact.tsx
@@ -21,7 +21,7 @@ export const Contact = () => {
               </>
             );
           })}
-          <PrimaryButton url="/Acceuil">Je veux l'application</PrimaryButton>
+          <PrimaryButton url="/accueil">Je veux l'application</PrimaryButton>
         </div>
       </div>
     </section>

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -6,7 +6,7 @@ export const Navbar = () => {
   return (
     <nav className={styles.navbar}>
       <ul>
-        <a href="">
+        <a href="/accueil">
           <li>
             <Image
               src="/icons/nav/home.svg"
@@ -16,7 +16,7 @@ export const Navbar = () => {
             />
           </li>
         </a>
-        <a href="">
+        <a href="/articles">
           <li>
             <Image
               src="/icons/nav/articles.svg"

diff --git a/src/data/homePage.ts b/src/data/homePage.ts
@@ -0,0 +1,47 @@
+export const articles = [
+  {
+    title: 'Préparer son voyage au Japon en 5 étapes',
+    date: new Date('2024-06-05'),
+    pictureUrl:
+      '/images/articles/préparer_son_voyage_au_japon_en_5_étapes.webp',
+  },
+  {
+    title: 'Vie locale : conseils pratiques',
+    date: new Date('2024-11-09'),
+    pictureUrl: '/images/articles/vie_locale_conseils_pratiques.webp',
+  },
+  {
+    title: 'Où manger local ?',
+    date: new Date('2024-03-01'),
+    pictureUrl: '/images/articles/où_manger_local.webp',
+  },
+  {
+    title: 'Transports & déplacements',
+    date: new Date('2024-03-23'),
+    pictureUrl: '/images/articles/transports_et_déplacements.webp',
+  },
+];
+
+export const actus = [
+  {
+    title: 'Transports & déplacements',
+    date: new Date('2024-03-23'),
+    pictureUrl: '/images/articles/transports_et_déplacements.webp',
+  },
+  {
+    title: 'Où manger local ?',
+    date: new Date('2024-03-01'),
+    pictureUrl: '/images/articles/où_manger_local.webp',
+  },
+  {
+    title: 'Vie locale : conseils pratiques',
+    date: new Date('2024-11-09'),
+    pictureUrl: '/images/articles/vie_locale_conseils_pratiques.webp',
+  },
+  {
+    title: 'Préparer son voyage au Japon en 5 étapes',
+    date: new Date('2024-06-05'),
+    pictureUrl:
+      '/images/articles/préparer_son_voyage_au_japon_en_5_étapes.webp',
+  },
+];