Skip to content

Commit 9bc558c

Browse files
jess2304jess2304
committed
Rectify Home
1 parent 82c386c commit 9bc558c

File tree

5 files changed

+56
-72
lines changed

5 files changed

+56
-72
lines changed

‎UI/public/Evolution.png‎

-157 KB
Binary file not shown.

‎UI/public/IMC&Calories.png‎

-211 KB
Binary file not shown.

‎UI/public/hero-nextshape.png‎

1.63 MB
Loading

‎UI/src/assets/js/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ export const NAVBAR_ELEMENTS = [
3535
// Presentation texts for home
3636
export const TITLE = "Transforme ton corps, contrôle tes calories !"
3737
export const SUBTITLE =
38-
"NextShape t'aide à suivre ton évolution physique avec une précision inégalée."
38+
"NextShape t'aide à suivre ton évolution physique avec une précision inégalée. En quelques clics, tu peux <strong>calculer ton IMC</strong> à tout moment, gratuitement et sans inscription. Pour aller plus loin et <strong>connaître tes besoins caloriques personnalisés</strong>, il te suffit de créer un compte. C'est rapide, sécurisé, et ça te donne accès à des recommandations sur mesure."
3939
export const PRESENTATION_TEXT =
40-
"Tu cherches un moyen simple et efficace de suivre ton évolution physique ? NextShape est là pour t'aider à calculer ton IMC, déterminer tes besoins caloriques et visualiser tes progrès au fil du temps. Que tu sois en phase de perte de poids, de prise de masse ou simplement curieux de voir comment ton corps évolue, cette plateforme te permet d'avoir une vue d'ensemble claire et détaillée de tes données. Pas d'algorithmes compliqués ni de recommandations approximatives : juste des calculs précis et des graphiques pour t'aider à mieux comprendre ton évolution et ajuster ton mode de vie en fonction de tes propres objectifs."
40+
"<strong>Tu cherches un moyen simple et efficace de suivre ton évolution physique ?</strong><br><br> NextShape est là pour t'aider à calculer ton IMC, déterminer tes besoins caloriques et visualiser tes progrès au fil du temps. <br><br>Que tu sois en phase de perte de poids, de prise de masse ou simplement curieux de voir comment ton corps évolue, cette plateforme te permet d'avoir une vue d'ensemble claire et détaillée de tes données. <br><br>Pas d'algorithmes compliqués ni de recommandations approximatives : juste des calculs précis et des graphiques pour t'aider à mieux comprendre ton évolution et ajuster ton mode de vie en fonction de tes propres objectifs."
4141

4242
export const GENDER = [
4343
{

‎UI/src/views/HomeView.vue‎

Lines changed: 54 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,64 @@
11
<script setup lang="ts">
22
import Button from "primevue/button"
3-
import Panel from "primevue/panel"
4-
import Card from "primevue/card"
5-
import { PRESENTATION_TEXT, SUBTITLE, TITLE } from "@/assets/js/constants"
3+
import { Panel } from "primevue"
4+
import { TITLE, SUBTITLE, PRESENTATION_TEXT } from "@/assets/js/constants"
65
</script>
76

87
<template>
9-
<div class="mx-8">
10-
<section class="text-center">
11-
<h1 class="text-6xl font-bold">
12-
{{ TITLE }}
13-
</h1>
14-
<p class="text-xl mt-3 opacity-90">
15-
{{ SUBTITLE }}
16-
</p>
17-
<div class="flex gap-3 justify-content-center mt-4">
18-
<Button
19-
as="router-link"
20-
label="Calculer mon IMC 📊"
21-
to="/calculatrice-imc"
22-
class="no-underline font-semibold"
23-
severity="primary"
24-
rounded
25-
raised
26-
/>
8+
<div>
9+
<section class="p-fluid md:px-8">
10+
<div class="grid align-items-center justify-content-center">
11+
<div class="col-12 md:col-6 text-center md:text-left">
12+
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-3">
13+
{{ TITLE }}
14+
</h1>
15+
<p v-html="SUBTITLE" class="text-xl text-gray-600 mb-5" />
16+
<div
17+
class="flex flex-column sm:flex-row gap-3 justify-content-center md:justify-content-start"
18+
>
19+
<Button
20+
as="router-link"
21+
to="/calculatrice-imc"
22+
label="Calculer mon IMC"
23+
severity="primary"
24+
rounded
25+
raised
26+
class="no-underline font-semibold w-full sm:w-auto"
27+
/>
28+
<Button
29+
as="router-link"
30+
to="/calculatrice-calories"
31+
label="Calculer mes calories"
32+
severity="secondary"
33+
rounded
34+
raised
35+
class="no-underline font-semibold w-full sm:w-auto"
36+
/>
37+
</div>
38+
</div>
39+
<div
40+
class="col-12 md:col-6 flex justify-content-center md:justify-content-end mt-5 md:mt-0"
41+
>
42+
<img
43+
src="/hero-nextshape.png"
44+
alt="Illustration NextShape"
45+
class="w-11 md:w-20 lg:w-15 shadow-3 border-round-xl"
46+
/>
47+
</div>
2748
</div>
2849
</section>
29-
<section class="text-center px-8 py-6">
30-
<h2 class="text-3xl font-bold">
31-
Pourquoi choisir <span class="text-blue-500">NextShape</span> ?
32-
</h2>
33-
<Panel class="shadow-3 mt-4 border-round-lg">
34-
<p class="text-lg text-700 mt-3 leading-loose">
35-
{{ PRESENTATION_TEXT }}
36-
</p>
37-
</Panel>
38-
</section>
39-
<section class="px-8 py-6 flex justify-content-center gap-4">
40-
<Card class="w-5 md:w-3 lg:w-3">
41-
<template #header>
42-
<img alt="user header" src="/IMC&Calories.png" class="w-full" />
43-
</template>
44-
<template #title>Calcule</template>
45-
<template #subtitle>Ton IMC & Tes besoins en calories</template>
46-
<template #content>
47-
<ul class="m-0">
48-
<li>
49-
<strong>IMC :</strong> Indicateur du poids idéal selon la taille,
50-
utile pour évaluer les risques de surpoids ou de maigreur.
51-
</li>
52-
<li>
53-
<strong>Besoins caloriques :</strong> Quantité d'énergie
54-
nécessaire au corps selon l'âge, le poids et l'activité.
55-
</li>
56-
</ul>
57-
</template>
58-
</Card>
59-
<Card class="w-5 md:w-3 lg:w-3">
60-
<template #header>
61-
<img alt="user header" src="/Evolution.png" class="w-full" />
62-
</template>
63-
<template #title>Analyse</template>
64-
<template #subtitle>L'évolution de ton corps</template>
65-
<template #content>
66-
<ul class="m-0">
67-
<li>
68-
Visualise tes progrès pour rester motivé et ajuster tes efforts en
69-
fonction des résultats obtenus.
70-
</li>
71-
<li>
72-
Analyse ton évolution pour identifier les tendances et adapter ton
73-
alimentation et ton activité physique efficacement.
74-
</li>
75-
</ul>
76-
</template>
77-
</Card>
50+
<section class="mt-7 px-4 md:px-8 text-center">
51+
<div class="flex justify-content-center">
52+
<Panel
53+
header=""
54+
class="w-full md:w-10 lg:w-full shadow-3 border-round-xl"
55+
>
56+
<p
57+
v-html="PRESENTATION_TEXT"
58+
class="text-base md:text-lg text-gray-700 leading-normal mt-2"
59+
/>
60+
</Panel>
61+
</div>
7862
</section>
7963
</div>
8064
</template>

0 commit comments

Comments
 (0)