-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
126 lines (119 loc) · 7.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
---
layout: default
section_id: accueil
js_file: home
home_title : Créez avec nous l’IA qui parle français !
home_desc : Aidez-nous à atteindre 25 000 contributions pour que les robots s’entraînent à parler français.
home_top_highlights :
- icon: robot
desc: Entraînez les robots<br> à parler français
- icon: hand
desc: Posez vos questions<br> et surlignez vos réponses
home_help_title : Aidez ceux qui souhaitent travailler sur l’IA en français
home_help_desc : "Notre ambition : construire le premier jeu de données ouvert de questions-réponses francophone"
home_help_img: home-help.png
home_help_elements :
- title: Comment ?
desc: Une plateforme d’annotation ouverte aux contributions de tous les citoyens
- title: 25,000 <br>questions-réponses
desc: Participez à ce projet collectif pour bâtir ensemble l’IA francophone
home_process_title : Une démarche<br> scientifique et contributive
home_process_elements :
- icon: microscope
title: Une démarche<br> scientifique
desc: Le projet PIAF s'appuie sur un protocole scientifique construit avec des datascientists spécialisés en traitement automatique du langage.
link: presentation.html
- icon: peoples
title: Une communauté<br> de contributeurs
desc: PIAF a pour objectif d'être co-construit avec une communauté de contributeurs qui bénéficieront ensuite du projet. Chercheurs, agents publics, citoyens, associations sont invités à participer.
link: contribution.html
- icon: network
title: Des données <br>ouvertes
desc: Les données produites sont disponibles pour tous, notamment pour les administrations souhaitant développer des IA, en cliquant ici.
link: https://www.data.gouv.fr/fr/datasets/piaf-le-dataset-francophone-de-questions-reponses/
---
<div class="home-top relative font-cooper-light flex flex-col py-10 sm:py-0 sm:h-screen justify-center align-items text-white">
<div class="svg-container absolute left-0 bottom-0 z-10 hidden sm:block">
<svg class="top__gradient-back absolute left-0 bottom-0" viewBox="0 0 1412 692">
<path fill-rule="evenodd" transform="translate(-10, 70) scale(1.05)" opacity="0.059" fill="rgb(255, 255, 255)" d="M4,8 C4,8 224,-33 468,68 C711,171 868,270 1155,248 C1270,238 1411,165 1412,165 L1412,692 L0,692 L4,8 Z"/>
</svg>
<svg class="top__gradient-front absolute left-0 bottom-0 z-20" viewBox="0 0 1415 623">
<defs>
<linearGradient id="PSgrad_0" x1="0%" x2="71.934%" y1="0%" y2="69.466%" gradientTransform="rotate(44)">
<stop offset="0%" stop-color="rgb(14,7,54)" stop-opacity="1" />
<stop offset="100%" stop-color="rgb(10,5,40)" stop-opacity="0" />
</linearGradient>
</defs>
<g transform="translate(-20, 40) scale(1.05)">
<path fill="url(#PSgrad_0)" d="M11,7 C11,7 260,-40 738,126 C1021,231 1415,171 1415,171 L1415,623 L0,623 L0,14 L11,7 Z"/>
</g>
</svg>
</div>
<div class="container relative mx-auto text-center mt-16 z-10 px-6">
<h1 class="text-4xl sm:text-5xl">{{ page.home_title }}</h1>
<p class="text-2xl max-w-lg mx-auto hidden sm:block">{{ page.home_desc }}</p>
<div class="flex flex-wrap sm:mt-10 justify-center space-around">
{% for highlight in page.home_top_highlights %}
<div class="home-top__highlight relative flex-col w-full sm:w-64 h-64 inline-flex flex-wrap content-center items-center justify-center {% if forloop.last == true %} md:ml-24 {% endif %}">
<svg class="icon-{{ highlight.icon }} max-w-full h-12 mb-4">
<use xlink:href="#icon-{{ highlight.icon }}"></use>
</svg>
<svg class="highlight-svg__back absolute {% if forloop.last == true %}top-0 bottom-0 my-auto sm:-left-6{% else %}sm:-bottom-6 sm:-left-6{% endif %}" width="231px" height="233px" viewBox="0 0 231 233">
<path opacity="0.25" fill="rgb(15, 65, 122)" d="M41.1,31.6c0,0,56-71.6,129.2,0.6s59.4,118.9,59.4,118.9s-9.5,44.3-69.5,66.7c-60,22.4-103.2,23.8-134.5-25.5 C-5.7,143-4,106.5,7.9,81C19.8,55.4,41.1,31.6,41.1,31.6z"/>
</svg>
<svg class="highlight-svg__front absolute {% if forloop.first == true %}inset-0 m-auto{% else %}right-0 left-0 mx-auto -bottom-1{% endif %}" width="232.96" height="231.79" viewBox="0 0 232.96 231.79">
<path opacity="0.35" fill="rgb(15, 65, 122)" d="M18.1,51.5c0,0,32.6-84.6,123.4-37s91.4,96.2,91.4,96.2s3.8,45-46.9,83.9s-91.6,52.7-135.8,14.8 S-3.1,136.1,0.8,108.3S18.1,51.5,18.1,51.5z"/>
</svg>
<p class="relative text-lg max-w-xs">{{ highlight.desc }}</p>
</div>
{% endfor %}
</div>
<a href="https://piaf.etalab.studio/fin" class="btn--red relative inline-flex px-8 py-4 rounded-lg bg-red font-cooper-medium uppercase">
<span class="btn-overlay--white"></span>
<span class="relative">Contribuer</span>
</a>
</div>
</div>
<div class="home-center relative px-6 sm:px-0">
<div class="home-center__masked-img absolute w-3/5 h-screen bg-countain bg-no-repeat bg-left-top top-40 hidden lg:block" style="background-image: url('/img/{{ page.home_help_img }}');"></div>
<div class="container font-cooper-light text-blue relative mx-auto text-center mt-16 z-10">
<h1 class="text-4xl">{{ page.home_help_title }}</h1>
<p class="text-xl mt-6">{{ page.home_help_desc }}</p>
<div class="relative flex flex-wrap justify-end my-16 lg:my-32">
{% for element in page.home_help_elements %}
<div class="w-full first:mb-6 md:w-1/2 lg:w-1/3 lg:px-12 flex justify-center flex-wrap">
<p class="font-cooper-medium w-full text-2xl mt-0 sm:mb-6">{{element.title}}</p>
<p class="mt-auto mb-0">{{element.desc}}</p>
</div>
{% endfor %}
<div class="banner-right--red relative mt-24 py-8 w-11/12 sm:w-2/3 flex flex-wrap sm:flex-no-wrap items-center justify-end">
<p class="relative text-white w-full sm:w-auto text-3xl ml-0 mr-auto">Comment contribuer au projet PIAF ? </p>
<a href="/contribution.html" class="btn--white relative inline-flex px-8 py-4 mt-6 sm:mt-0 mx-auto rounded-lg bg-white font-cooper-medium uppercase">
<span class="btn-overlay--blue"></span>
<span class="relative">mode d'emploi</span>
</a>
</div>
</div>
<h1 class="text-4xl">{{ page.home_process_title }}</h1>
<div class="flex flex-wrap sm:flex-no-wrap justify-end mt-16">
{% for element in page.home_process_elements %}
<div class="flex flex-wrap justify-center w-full sm:w-1/3 mb-16 sm:mb-0">
<a href="{{ element.link }}">
<svg class="icon-{{ element.icon }} max-w-full h-24 mb-4 mx-auto">
<use xlink:href="#icon-{{ element.icon }}"></use>
</svg>
<p class="font-cooper-medium text-2xl w-full mb-2 sm:mb-6">{{element.title}}</p>
<p class="max-w-xs mt-auto mb-0 mx-auto {% if forloop.first == true %}px-6 {% else %}px-2{% endif%}">{{element.desc}}</p>
</a>
</div>
{% endfor %}
</div>
<div class="flex flex-wrap sm:flex-no-wrap justify-center items-center pb-16 sm:py-32">
<p class="font-cooper-medium text-2xl w-full sm:w-auto">En savoir plus sur le projet PIAF</p>
<a href="/presentation.html" class="btn--white relative inline-flex px-8 py-4 mt-6 sm:mt-0 sm:ml-8 rounded-lg bg-red text-white font-cooper-medium uppercase">
<span class="btn-overlay--blue"></span>
<span class="relative">notre démarche</span>
</a>
</div>
</div>
</div>