nouvel avancement dans le projet

bethuel2805 · Feb 3, 2024 · 108c86b · 108c86b
1 parent b3df514
commit 108c86b
Show file tree

Hide file tree

Showing 12 changed files with 285 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <!-- <script src="./cdn.tailwindcss.js"></script> -->
+    <script src="./cdn.tailwindcss.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bozwa</title>
     <style>

diff --git a/src/assets/empreteur_image1.svg b/src/assets/empreteur_image1.svg
diff --git a/src/assets/empreteur_image2.svg b/src/assets/empreteur_image2.svg
diff --git a/src/assets/preteur_person.svg b/src/assets/preteur_person.svg
diff --git a/src/components/home/HeaderComponent.vue b/src/components/home/HeaderComponent.vue
@@ -12,27 +12,27 @@
             </div>
                 <div class="h-full py-2">
                     <ul class="float-right flex items-center gap-10">
-                        <router-link :to="{name:'home_view'}" active-class="underline underline-offset-8 decoration-[#F37021]">
+                        <router-link :to="{name:'home_view'}" active-class="underline underline-offset-8 decoration-[#F37021] font-bold">
                             <li class="cursor-pointer hover:animate-bounce hover:tracking-widest hover:underline hover:underline-offset-8 hover:decoration-[#F37021]">Accueil</li>
                         </router-link>
 
-                        <router-link :to="{name:'home_view'}" active-class="underline underline-offset-8 decoration-[#F37021]">
+                        <router-link :to="{name:'about_view'}" active-class="underline underline-offset-8 decoration-[#F37021] font-bold">
                             <li class="cursor-pointer hover:animate-bounce hover:tracking-widest hover:underline hover:underline-offset-8 hover:decoration-[#F37021]">À Propos</li>
                         </router-link>
 
-                        <router-link :to="{name:'home_view'}" active-class="underline underline-offset-8 decoration-[#F37021]">
+                        <router-link :to="{name:'preteur_view'}" active-class="underline underline-offset-8 decoration-[#F37021] font-bold">
                             <li class="cursor-pointer hover:animate-bounce hover:tracking-widest hover:underline hover:underline-offset-8 hover:decoration-[#F37021]">Prêteurs</li>
                         </router-link>
 
-                        <router-link :to="{name:'home_view'}" active-class="underline underline-offset-8 decoration-[#F37021]">
+                        <router-link :to="{name:'emprunteur_view'}" active-class="underline underline-offset-8 decoration-[#F37021] font-bold">
                             <li class="cursor-pointer hover:animate-bounce hover:tracking-widest hover:underline hover:underline-offset-8 hover:decoration-[#F37021]">Emprunteurs</li>
                         </router-link>
 
-                        <router-link :to="{name:'club_view'}" active-class="underline underline-offset-8 decoration-[#F37021]">
+                        <router-link :to="{name:'club_view'}" active-class="underline underline-offset-8 decoration-[#F37021] font-bold">
                             <li class="cursor-pointer hover:animate-bounce hover:tracking-widest hover:underline hover:underline-offset-8 hover:decoration-[#F37021]">Club</li>
                         </router-link>
 
-                        <router-link :to="{name:'contact_view'}" active-class="underline underline-offset-8 decoration-[#F37021]">
+                        <router-link :to="{name:'contact_view'}" active-class="underline underline-offset-8 decoration-[#F37021] font-bold">
                             <li class="cursor-pointer hover:animate-bounce hover:tracking-widest hover:underline hover:underline-offset-8 hover:decoration-[#F37021]">Nous Contacter</li>
                         </router-link>
                         <li class="cursor-pointer ">Français (☻♣)</li>

diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import "./css/style.css"
+// import "./css/style.css"
 import router from "./routers/routers"
 
 const app = createApp(App)

diff --git a/src/routers/routers.js b/src/routers/routers.js
@@ -1,13 +1,19 @@
 import {createRouter,createWebHistory} from "vue-router"
-import GlobalHome from "../../src/App.vue"
+// import GlobalHome from "../../src/App.vue"
 import HomeViews from "../views/Home.views.vue"
 import ContactUs from "../views/Contact.views.vue"
 import Club from "../views/Club.views.vue"
+import Emprunteur from "../views/Emprunteur.views.vue"
+import Preteur from "../views/Preteur.views.vue"
+import About from "../views/About.views.vue"
 const routes = [
     {name:"global_home", path:"/", component: HomeViews},
     {name:"home_view", path:"/accueil", component: HomeViews}, 
     {name:"contact_view", path:"/contact_us", component: ContactUs}, 
     {name:"club_view", path:"/club", component: Club}, 
+    {name:"emprunteur_view", path:"/emprunteur", component: Emprunteur}, 
+    {name:"preteur_view", path:"/preteur", component: Preteur}, 
+    {name:"about_view", path:"/about", component: About}, 
 ]
 
 const router = createRouter({

diff --git a/src/views/About.views.vue b/src/views/About.views.vue
@@ -0,0 +1,61 @@
+<script setup>
+import HeaderComponent from '../components/home/HeaderComponent.vue';
+</script>
+
+<template>
+     <div>
+        <div id="header" class="sticky top-0 z-[10] bg-white pb-1">
+            <HeaderComponent/>
+       </div>
+        <div class="w-[100%] mx-auto flex gap-5 p-2">
+            <div class="basis-2/4 mb-5 h-[80vh]">
+                <div class="w-[90%] h-full px-2 py-5 flex flex-col gap-7 bg-[#F37021] rounded-r-3xl">
+                    <h1 class="text-white text-xl font-semibold text-center">QUI SOMMES NOUS ?</h1>
+                    <p class="w-full text-gray-200">Bozwa est une plateforme d'emprunt d'argent instantané aux services des travailleurs, mais aussi des entreprises désirants </p>
+                    <p class="text-white">la première plateforme adaptée à tout environnement
+                    bancaires du Monde Son succès réside dans son
+                     Omniprésence dans les réseaux bancaires subdivisé
+                    en trois Catégories <b>Freelancers</b>,  <b>Travailleurs</b> &  <b>Entreprises</b></p>
+                </div>
+            </div>
+            <div class="basis-2/4 mb-5">
+                <div class="w-[85%] h-full float-right bg-[#F37021] px-8 py-5 rounded-l-3xl mb-5">
+                    <div class="h-[160px] w-full">
+                        <div class="flex relative top-5 justify-start items-end">
+                            <img src="/src/assets/preteur_person.svg" class="w-12">
+                            <h1>Mon premier texte</h1>
+                        </div>
+                        <div class="bg-red-500 h-full w-full border border-2">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- <div class="basis-2/4 mb-5">
+                <div class="w-[85%] h-full float-right bg-[#F37021] px-8 py-5 rounded-l-3xl mb-5">
+                    <div class="h-full flex flex-col gap-7">
+                        <h1 class="text-white font-semibold text-2xl">Club 20</h1>
+                        <p class="text-white">Veillez entrer le code d'accès au club</p>
+                        <div class="flex w-full flex-row justify-between ">
+                            <div v-for="i in 5" :key="i" class="bg-gray-300 w-12 h-12 rounded"></div>
+                        </div>
+                        <p class="text-right my-2 w-full text-white">Code pin erroné ?</p>
+                        <div class="self-center">
+                            <img src="/src/assets/arrow_right.svg">
+                        </div>
+                        <div class="flex flex-col gap-5">
+                            <form class="flex flex-col gap-5 my-1">
+                                <input type="text" placeholder="Email" class="h-12 border rounded-lg px-2">
+    
+                                <input type="password" placeholder="Mot de passe" class="h-12 border rounded-lg px-2">
+                            </form>
+                            <p class="text-white text-right mb-5">Mot de passe oublié ?</p>
+                            <div>
+                                <button class="flex items-center justify-evenly w-[180px] h-[40px] bg-[#fff] rounded-md text-[#F37021] float-right mb-8">Envoyer <span class="w-2"><img src="/src/assets/arrow_right_color.svg"></span></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> -->
+        </div>
+     </div>
+</template>
diff --git a/src/views/Club.views.vue b/src/views/Club.views.vue
@@ -7,20 +7,41 @@ import HeaderComponent from '../components/home/HeaderComponent.vue';
         <div id="header" class="sticky top-0 z-[10] bg-white pb-1">
             <HeaderComponent/>
        </div>
-        <div class="w-[95%] float-right flex gap-5 p-2">
+        <div class="w-[95%] mx-auto flex gap-5 p-2">
             <div class="basis-2/4">
                 <div class="w-[65%] m-5 flex flex-col gap-7">
                     <h1 class="text-[#F37021] text-xl font-semibold">Club</h1>
                     <h2 class="text-xl font-semibold">Vous êtes porteur de projet ?</h2>
                     <p>Rejoignez le <b>Club 20</b> afin de pouvoir financé la création de votre entreprise où son développement.</p>
                     <div>
-                        <button class="px-4 py-3 bg-[#F37021] text-sm rounded-md text-white mb-5">Je m'inscris    ♠♣♦</button>
+                        <button class="flex items-center justify-evenly w-[180px] h-[40px] bg-[#F37021] rounded-md text-white mb-5">Je m'inscris <span class="w-2"><img src="/src/assets/arrow_right.svg"></span></button>
                     </div>
                 </div>
             </div>
-            <div class="basis-2/4 bg-slate-600">
-                <div class="relative top-20 bg-green-500 p-5 h-[80%]">
-
+            <div class="basis-2/4 mb-5">
+                <div class="w-[85%] h-full float-right bg-[#F37021] px-8 py-5 rounded-l-3xl mb-5">
+                    <div class="h-full flex flex-col gap-7">
+                        <h1 class="text-white font-semibold text-2xl">Club 20</h1>
+                        <p class="text-white">Veillez entrer le code d'accès au club</p>
+                        <div class="flex w-full flex-row justify-between ">
+                            <div v-for="i in 5" :key="i" class="bg-gray-300 w-12 h-12 rounded"></div>
+                        </div>
+                        <p class="text-right my-2 w-full text-white">Code pin erroné ?</p>
+                        <div class="self-center">
+                            <img src="/src/assets/arrow_right.svg">
+                        </div>
+                        <div class="flex flex-col gap-5">
+                            <form class="flex flex-col gap-5 my-1">
+                                <input type="text" placeholder="Email" class="h-12 border rounded-lg px-2">
+
+                                <input type="password" placeholder="Mot de passe" class="h-12 border rounded-lg px-2">
+                            </form>
+                            <p class="text-white text-right mb-5">Mot de passe oublié ?</p>
+                            <div>
+                                <button class="flex items-center justify-evenly w-[180px] h-[40px] bg-[#fff] rounded-md text-[#F37021] float-right mb-8">Envoyer <span class="w-2"><img src="/src/assets/arrow_right_color.svg"></span></button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/src/views/Contact.views.vue b/src/views/Contact.views.vue
@@ -29,15 +29,15 @@ import HeaderComponent from '../components/home/HeaderComponent.vue';
                     </div>
 
                     <div>
-                        <textarea name="" id="" cols="20" rows="5" class="py-4 px-2 rounded-md border border-[#F37021] w-full"></textarea>
+                        <textarea placeholder="Ecrivez-nous un message" class="h-[30vh] p-4 px-2 rounded-md border border-[#F37021] w-full"></textarea>
                     </div>
 
                     <div>
                         <p class="text-sm">Informations de base sur la protection des données : la <b>Société bozwa</b> recueille vos données pour être en mesure de répondre aux questions, suggestions ou plaintes déposées. Plus d'infos Politique de confidentialité.</p>
                     </div>
 
                     <div>
-                        <button class="px-4 py-3 bg-[#F37021] rounded-lg text-white float-right mb-5">Envoyer    ♠♣♦</button>
+                        <button class="flex items-center justify-evenly w-[180px] h-[40px] bg-[#F37021] rounded-md text-white float-right mb-5">Envoyer <span class="w-2"><img src="/src/assets/arrow_right.svg"></span></button>
                     </div>
 
                 </form>

diff --git a/src/views/Emprunteur.views.vue b/src/views/Emprunteur.views.vue
@@ -0,0 +1,77 @@
+<script setup>
+import HeaderComponent from '../components/home/HeaderComponent.vue';
+</script>
+
+<template>
+     <div>
+        <div id="header" class="sticky top-0 z-[10] bg-white pb-1">
+            <HeaderComponent/>
+       </div>
+       <!-- debut du body  -->
+        <div>
+            <div>
+                <div class="w-full h-96 py-2 px-10 py-10 flex items-center">
+                <div class="basis-4/12">
+                    <h1 class="font-bold text-4xl pt-1 pb-5 text-[#F37021]">Emprunteurs Individuels</h1>
+                    <h2 class="font-semibold text-2xl pt-1 pb-5">Plus jamais en panne d'argent avec nous</h2>
+                    <p class="mb-10 ">L'alternative bancaire le plus adapté aux travailleurs et entreprises</p>
+
+                    <div class="flex flex-row gap-10 justify-start">
+                        <button class="bg-[#F37021] px-3 py-2 gap-4 text-white rounded-md flex items-center justify-around">
+                            <span>Je prête mon argent</span>
+                            <span><img src="/src/assets/arrow_right.svg" alt="wolrd_icon" class="w-[10px]"></span>
+                        </button>
+                        <button class="bg-[#F37021] px-3 py-2 gap-4 text-white rounded-md flex items-center justify-around">
+                            <span>Je visualise la liste</span>
+                            <span><img src="/src/assets/arrow_right.svg" alt="wolrd_icon" class="w-[10px]"></span>
+                        </button>
+                    </div>
+                    </div>
+                        <div class="basis-8/12 px-2">
+                            <img src="/src/assets/empreteur_image1.svg" alt="first-image-money" class="h-[300px] w-[300px] relative left-40">
+                        </div>
+                </div>
+            </div>
+            <div class="w-full h-[300px] bg-[#F37021] flex items-center flex-col justify-center">
+                <h1 class="text-white font-semibold text-2xl py-5">Notre impact mondial</h1>
+                <div class="flex flex-row justify-evenly w-[80%] my-5 text-white">
+                    <div class="flex flex-col gap-6 items-center">
+                        <p>Pays</p>
+                        <h1 class="text-4xl font-bold">+189</h1>
+                    </div>
+                    <div class="flex flex-col gap-6 items-center">
+                        <p>Investissements</p>
+                        <h1 class="text-4xl font-bold">+120 md</h1>
+                    </div>
+                    <div class="flex flex-col gap-6 items-center">
+                        <p>Investisseurs Satisfaits</p>
+                        <h1 class="text-4xl font-bold">99%</h1>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="w-full h-96 py-2 px-10 py-10 flex items-center">
+                <div class="basis-4/12">
+                    <h1 class="font-bold text-4xl pt-1 pb-5 text-[#F37021]">Entreprises emprunteurs</h1>
+                    <h2 class="font-semibold text-2xl pt-1 pb-5">Plus jamais en panne d'argent avec nous</h2>
+                    <p class="mb-10 ">L'alternative bancaire le plus adapté aux travailleurs et entreprises</p>
+
+                    <div class="flex flex-row gap-10 justify-start">
+                        <button class="bg-[#F37021] px-3 py-2 gap-4 text-white rounded-md flex items-center justify-around">
+                            <span>Je prête mon argent</span>
+                            <span><img src="/src/assets/arrow_right.svg" alt="wolrd_icon" class="w-[10px]"></span>
+                        </button>
+                        <button class="bg-[#F37021] px-3 py-2 gap-4 text-white rounded-md flex items-center justify-around">
+                            <span>Je visualise la liste</span>
+                            <span><img src="/src/assets/arrow_right.svg" alt="wolrd_icon" class="w-[10px]"></span>
+                        </button>
+                    </div>
+                    </div>
+                        <div class="basis-8/12 px-2">
+                            <img src="/src/assets/empreteur_image2.svg" alt="first-image-money" class="h-[350px] w-[350px] relative left-40">
+                        </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>