Updates files - v.1.3.0-beta.11

src/404.tsx

@@ -1,18 +1,22 @@
-import Error404 from './assets/404.svg'
+import { useNavigate } from 'react-router-dom';
+import Error404 from './assets/404.gif'
 import './App.css'
 
 function Error() {
+  const navigate = useNavigate();
   return (
     <>
-<div>
+<div className='text-center'>
       <br />
         <br />
         <br />
         <br />
-        <img src={Error404} height="100" width="100" className="logo" alt="Error 404" />
+        <img src={Error404} height="300" width="300" className="logo mx-auto" alt="Error 404" />
         <br />
         <br />
-        <h4>D'une manière ou d'une autre, vous vous êtes perdu dans les profondeurs de l'espace.</h4><a href="https://levetica.vercel.app">Retour</a>
+        <h4>D'une manière ou d'une autre, vous vous êtes perdu dans les profondeurs de l'espace.</h4>
+        <br />
+        <button className='ms-3 btn btn-secondary' onClick={() => navigate("/")}>Retour</button>
 </div>
   </>
   )

src/App.css

@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 body {
-    background-color: #C0CFC0;
-    color: #000;
+    background-color: #171918;
+    color: #fff;
   }
 
 .margin {
@@ -47,4 +47,8 @@ body {
 
 .float-right {
     float: right;
+}
+
+.container-home {
+    margin-top: 10px;
 }

src/App.tsx

@@ -26,6 +26,7 @@ import Download from '../src/assets/components/tools/pages/download'
 import Explore from '../src/assets/components/tools/pages/explore'
 import Profile from '../src/assets/components/tools/pages/profile'
 import Security from '../src/assets/components/tools/pages/security'
+import Error from '../src/404'
 
 
 const App = () => {
@@ -57,6 +58,7 @@ const App = () => {
           <Route path="/explore" element={<Explore />} />
           <Route path="/profile" element={<Profile />} />
           <Route path="/security" element={<Security />} />
+          <Route path='/error' element={<Error />} />
         </Routes>
       </div>
       <FooterNew />

src/assets/components/Navbar.tsx

@@ -5,17 +5,17 @@ import "../components/hero/hero.css";
 
 export default function Navbar() {
     return(
-    <nav className="navbar navbar-expand-lg body-tertiary">
+    <nav className="navbar navbar-expand-lg bg-dark body-tertiary">
     <a className="navbar-brand d-flex text-start" href="#"></a><p className="ahsing mb-2 fs-2">Levetica</p>
     <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
       <span className="navbar-toggler-icon"></span>
     </button>
       <div className="navbar-nav mx-5">
-            <Nav.Link as={Link} to="/"><span className="text-dark"><i className="fa-solid fa-house"></i>&nbsp;Accueil</span></Nav.Link>
-            <Nav.Link as={Link} to="/products"><span className="text-dark"><i className="fa-solid fa-book"></i>&nbsp;Outils</span></Nav.Link>
-            <Nav.Link as={Link} to="/articles"><span className="text-dark"><i className="fa-solid fa-newspaper"></i>&nbsp;Articles</span></Nav.Link>
-            <Nav.Link as={Link} to="/about"><span className="text-dark"><i className="fa-solid fa-circle-info"></i>&nbsp;À propos</span></Nav.Link>
-            <Nav.Link as={Link} to="https://github.com/mpcgt/levetica" target="_blank"><span className="text-dark"><i className="fa-brands fa-github"></i>&nbsp;GitHub</span></Nav.Link>
+            <Nav.Link as={Link} to="/"><span className="text-light"><i className="fa-solid fa-house"></i>&nbsp;Accueil</span></Nav.Link>
+            <Nav.Link as={Link} to="/products"><span className="text-light"><i className="fa-solid fa-book"></i>&nbsp;Outils</span></Nav.Link>
+            <Nav.Link as={Link} to="/articles"><span className="text-light"><i className="fa-solid fa-newspaper"></i>&nbsp;Articles</span></Nav.Link>
+            <Nav.Link as={Link} to="/about"><span className="text-light"><i className="fa-solid fa-circle-info"></i>&nbsp;À propos</span></Nav.Link>
+            <Nav.Link as={Link} to="https://github.com/mpcgt/levetica" target="_blank"><span className="text-light"><i className="fa-brands fa-github"></i>&nbsp;GitHub</span></Nav.Link>
       </div>
 </nav>
     )

src/assets/components/hero/hero.tsx

@@ -40,7 +40,8 @@ const Hero = () => {
               className="btn btn-success btn-lg px-4 me-md-2"
               onClick={() => navigate("/products")}
             >
-              Voir les outils
+              Voir les outils  
+              <i className="fa-solid fa-arrow-right"></i>
             </button>
             <Dropdown>
               <Dropdown.Toggle

src/assets/components/tools/NavBarTools.tsx

@@ -6,7 +6,7 @@ export default function NavbarTools() {
   return (
     <nav className="navbar bg-body-secondary navbar-expand-lg">
       <a className="navbar-brand d-flex text-start" href="#"></a>
-      <p className="ahsing mb-2 fs-2">Outils</p>&nbsp;
+      <p className="ahsing mb-2 fs-2 text-dark">Outils</p>&nbsp;
       <small className="red ahsing">Beta</small>
       <button
         className="navbar-toggler"

src/assets/components/tools/tools.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import NavbarTools from "./NavBarTools"
 import Logo from "/src/assets/lvtcw.png"
 import transitionTools from "./pages/transitionTools"
@@ -11,6 +12,7 @@ import Ubuntu from './images/ubuntu.png'
 
 // eslint-disable-next-line react-refresh/only-export-components
 function Tools() {
+  const navigate = useNavigate();
   return (
     <>
     <NavbarTools />
@@ -19,69 +21,72 @@ function Tools() {
     <img className="me-3" src={Logo} alt="" width="48" height="38" />
     <div className="lh-1">
       <h1 className="h6 mb-0 text-white lh-1">Levetica</h1>
-      <small>v.1.3.0-beta-10</small>
+      <small>v.1.3.0-beta.11</small>
     </div>
   </div>
 
-  <div className="my-3 p-3 bg-success bg-opacity-25 rounded shadow-sm">
-    <h6 className="border-bottom pb-2 text-start text-dark fw-bold">Dernières mises à jour</h6>
+  <div className="my-3 p-3 bg-secondary bg-opacity-25 rounded shadow-sm">
+    <h6 className="border-bottom pb-2 text-start text-light fw-bold">Dernières mises à jour</h6>
     <div className="d-flex text-body-secondary pt-3">
       <img src={React} width={50} />
-      <p className="pb-3 ms-3 mb-0 small lh-sm border-bottom text-dark">
-        <strong className="d-block text-gray-dark text-start text-dark">React</strong>
-        Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page (ou portion) HTML à chaque changement d'état.      </p>
+      <p className="pb-3 ms-3 mb-0 small lh-sm border-bottom text-light">
+        <strong className="d-block text-gray-dark text-start text-light">React</strong>
+        Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page (ou portion) HTML à chaque changement d'état.</p>
+        <button className='ms-3 btn btn-secondary' onClick={() => navigate("/react")}>Voir</button>
     </div>
     <div className="d-flex text-body-secondary pt-3">
       <img src={Angular} width={50} />
-      <p className="pb-3 ms-3 mb-0 small lh-sm border-bottom text-dark">
-        <strong className="d-block text-gray-dark text-start text-dark">Angular</strong>
+      <p className="pb-3 ms-3 mb-0 small lh-sm border-bottom text-light">
+        <strong className="d-block text-gray-dark text-start text-light">Angular</strong>
         Angular est un framework open source écrit en TypeScript qui permet de créer des applications web modernes et performantes.
       </p>
-    </div>
+      <button className='ms-3 btn btn-secondary' onClick={() => navigate("/angular")}>Voir</button>
+      </div>
     <div className="d-flex text-body-secondary pt-3">
       <img src={Vue} width={50} />
-      <p className="pb-3 ms-3 mb-0 small lh-sm border-bottom text-dark">
-        <strong className="d-block text-start text-dark">Vue</strong>
+      <p className="pb-3 ms-3 mb-0 small lh-sm border-bottom text-light">
+        <strong className="d-block text-start text-light">Vue</strong>
         Vue.js est un framework JavaScript populaire qui facilite la création d'interfaces utilisateur interactives et d'applications web modernes.
       </p>
+      <button className='ms-3 btn btn-secondary' onClick={() => navigate("/vue")}>Voir</button>
     </div>
     <small className="d-block text-end mt-3">
-      <a className="text-dark" href="#">Autre page</a>
+      <a className="text-light" href="#">Autre page</a>
     </small>
   </div>
 
-  <div className="my-3 p-3 bg-success bg-opacity-25 rounded shadow-sm">
+  <div className="my-3 p-3 bg-secondary bg-opacity-25 rounded shadow-sm">
     <h6 className="border-bottom pb-2 mb-0 text-start fw-bold">Tendances actuelles</h6>
     <div className="d-flex text-body-secondary pt-3">
-    <img src={Ubuntu} width={50} />
+    <img src={Ubuntu} width={70} />
     <div className="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div className="d-flex justify-content-between">
-          <strong className="text-dark">&nbsp;&nbsp;Ubuntu</strong>
+          <strong className="text-light">&nbsp;&nbsp;Ubuntu</strong>
         </div>
-        <span className="d-block text-start text-dark">
-        &nbsp;&nbsp;Ubuntu est une distribution Linux gratuite et conviviale, dérivée de Debian, destinée aux ordinateurs personnels, serveurs et objets connectés.</span>
+        <span className="d-block text-start text-light">
+        &nbsp;&nbsp;Ubuntu est une distribution Linux gratuite et conviviale, dérivée de Debian, destinée aux ordinateurs personnels, serveurs et objets connectés.<button className='ms-3 btn btn-secondary' onClick={() => navigate("/error")}>Voir</button></span>
       </div>
     </div>
     <div className="d-flex text-body-secondary pt-3">
       <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
       <div className="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div className="d-flex justify-content-between">
-          <strong className="text-dark">Nom de l'app</strong>
+          <strong className="text-light">Nom de l'app</strong>
         </div>
-        <span className="d-block text-start text-dark">Bientôt !</span>
+        <span className="d-block text-start text-light">Bientôt !</span>
       </div>
     </div>
     <div className="d-flex text-body-secondary pt-3">
       <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
       <div className="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div className="d-flex justify-content-between">
-          <strong className="text-dark">Nom de l'app</strong>
+          <strong className="text-light">Nom de l'app</strong>
         </div>
-        <span className="d-block text-start text-dark">Bientôt !</span>
+        <span className="d-block text-start text-light">Bientôt !</span>
       </div>
     </div>
     <small className="d-block text-end mt-3">
-      <a className="text-dark" href="#">Autre page</a>
+      <a className="text-light" href="#">Autre page</a>
     </small>
   </div>
   </main>

src/assets/routes/pages/news.tsx

@@ -32,7 +32,7 @@ function News() {
           <h3 className="mb-0">Bientôt disponible</h3>
           <div className="mb-1 text-body-secondary">21/06/2024</div>
           <p className="card-text mb-auto">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, adipisci exercitationem facere reprehenderit soluta nihil doloremque quo quam praesentium cupiditate.</p>
-          <a href="#" className="icon-link gap-1 text-dark icon-link-hover stretched-link">
+          <a href="#" className="icon-link gap-1 text-light icon-link-hover stretched-link">
             En savoir plus
             <i className="fa-solid fa-arrow-right"></i>
             <svg className="bi"><use xlinkHref="#chevron-right"/></svg>
@@ -52,7 +52,7 @@ function News() {
         <h3 className="mb-0">Bientôt disponible</h3>
         <div className="mb-1 text-body-secondary">21/06/2024</div>
         <p className="card-text mb-auto">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, adipisci exercitationem facere reprehenderit soluta nihil doloremque quo quam praesentium cupiditate.</p>
-        <a href="#" className="icon-link gap-1 text-dark icon-link-hover stretched-link">
+        <a href="#" className="icon-link gap-1 text-light icon-link-hover stretched-link">
             En savoir plus
             <i className="fa-solid fa-arrow-right"></i>
             <svg className="bi"><use xlinkHref="#chevron-right"/></svg>

src/index.tsx

@@ -1,5 +1,4 @@
 import Hero from '../src/assets/components/hero/hero'
-import dev from "../src/assets/images/dev.png";
 import transition from "../src/assets/routes/pages/transition"
 import 'bootstrap/dist/css/bootstrap.css';
 import "./App.css";
@@ -11,94 +10,34 @@ function Text() {
     <>
         <Hero />
 
-        <br />
-        <br />
-        <div className="margin">
-          {" "}
-          {/* Décale le texte en 15px */}
-          <h3 className='center mb-5 fw-bold fs-3 italic'>Modification prévu dans quelques jours</h3>
-          <h2>Bonjour ! 👋🏼</h2>
-          <h4>
-            <b>
-              <u>Quel est le but de ce projet ?</u>
-            </b>
-          </h4>
-          <p>
-            Aider les développeurs, débutants ou expérimentés, à trouver les
-            outils et les langages de programmation les plus adaptés à leurs
-            besoins.
-          </p>
-          <br />
-          <div className="center">
-            {" "}
-            {/* Centrer le texte */}
-            <img alt="Dev" height="250" width="500" src={dev} />{" "}
-            {/* Une image qui fait 250px de hauteur et 500px de largeur */}
-          </div>
-          <br />
-          <h4>
-            <b>
-              <u>Comment ça fonctionne ?</u>
-            </b>
-          </h4>
-          <p>
-            1.{" "}
-            <b>
-              Pour chaque outil et langage, le site fournit une description
-              détaillée
-            </b>
-            , des exemples d'utilisation, des tutoriels et des liens vers la
-            communauté.
-          </p>
-          <p>
-            2.{" "}
-            <b>
-              Le développeur peut également consulter des articles et des guides
-            </b>{" "}
-            pour l'aider à choisir les meilleurs outils pour son projet.
-          </p>
-          <h4>
-            <b>
-              <u>Quels avantages ?</u>
-            </b>
-          </h4>
-          <p>
-            1. <b>Gain de temps et d'énergie :</b> le développeur n'a pas à
-            passer des heures à rechercher les outils et les langages qui lui
-            conviennent.
-          </p>
-          <p>
-            2. <b>Choix éclairé :</b> le développeur a accès à toutes les
-            informations dont il a besoin pour prendre une décision réfléchie.
-          </p>
-          <p>
-            3. <b>Développement plus efficace :</b> le développeur utilise les
-            outils et les langages les plus adaptés à ses besoins, ce qui lui
-            permet de travailler plus rapidement et de manière plus productive.
-          </p>
-          <h4>
-            <b>
-              <u>Quels public ciblés ?</u>
-            </b>
-          </h4>
-          <p>
-            1. <b>Développeurs débutants</b> qui ne savent pas quels outils et
-            langages choisir.
-          </p>
-          <p>
-            2. <b>Développeurs expérimentés</b> qui recherchent de nouveaux
-            outils pour améliorer leur productivité.
-          </p>
-          <p>
-            3. <b>Étudiants en informatique</b> qui veulent découvrir les
-            différents langages de programmation.
-          </p>
-          <br />A bientôt et merci à ceux qui me soutiennent en laissant une ⭐
-          dans mon projet sur <a href="https://levetica.vercel.app">GitHub</a>{" "}
-          😊
-          <br />
-          <br />
-      </div>
+        <div className="container-home">
+<p className="fs-1 text-center ahsing">
+Pourquoi Levetica ?<br /></p>
+<p className='fs-4 mb-5 fw-bold text-center'>Le but de Levetica est d'aider les développeurs, débutants ou expérimentés, à trouver les outils et les langages de programmation les plus adaptés à leurs besoins.</p>
+<hr />
+<div className="row topspace-2x mt-5 mb-5">
+<figure className="col-md-3 col-sm-6 bottomspace-xs text-center">
+<i className="fa-solid fa-user-check fa-4x color-accent mb-2"></i>
+<p className='fs-4 fw-bold mb-2'>Votre guide</p>
+<p className="text-center">Levetica vous aide à choisir les meilleurs outils, des vidéos, apprendre des langages de programmations pour votre projet et etc...</p>
+</figure>
+<figure className="col-md-3 col-sm-6 bottomspace-xs text-center">
+<i className="fa-solid fa-clock fa-4x color-accent mb-2"></i>
+<p className='fs-4 fw-bold mb-2'>Gain de temps et d'énergie</p>
+<p className="text-center">Vous n'avez pas à passer des heures à rechercher les outils et les langages qui vous conviennent.</p>
+</figure>
+<figure className="col-md-3 col-sm-6 bottomspace-xs text-center">
+<i className="fa-solid fa-lightbulb fa-4x color-accent mb-2"></i>
+<p className='fs-4 fw-bold mb-2'>Choix éclairé</p>
+<p className="text-center">Vous avez accès à toutes les informations dont vous avez besoin pour prendre une décision réfléchie.</p>
+</figure>
+<figure className="col-md-3 col-sm-6 bottomspace-xs text-center">
+<i className="fa-solid fa-arrow-trend-up fa-4x color-accent mb-2"></i>
+<p className='fs-4 fw-bold mb-2'>Développement plus efficace</p>
+<p className="text-center">Vous utilisez les outils et les langages les plus adaptés à vos besoins, ce qui permet de travailler plus rapidement et de manière plus productive.</p>
+</figure>
+</div> 
+</div>
     </>
   );
 }