website/index.html at main · Vision-Data/website · GitHub

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="fr" data-theme="light">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vision Data</title>
    <script async defer data-website-id="b01934f9-04b8-44b9-beb9-0060289554e4" src="https://analytics.app-tricycle.com/script.js"></script>
</head>

<body>
    <div class="navbar mb-2 text-neutral-content rounded-box">
        <div class="flex-1 px-2 mx-2">
            <a href="/">
                <img src="/assets/watermark-color.png" alt="Logo de Vision" class="logo">
            </a>
        </div>
        <div class="vision-menu flex-none hidden px-2 mx-2 lg:flex text-neutral">
            <div>
                <a href="/" class="btn btn-ghost btn-sm rounded-btn">
          Notre produit
        </a>
                <a href="/blog/index.html" class="btn btn-ghost btn-sm rounded-btn">
          Articles
        </a>
                <a href="/prices/index.html" class="btn btn-ghost btn-sm rounded-btn">
            Tarifs
          </a>
                <a href="https://app.vision-data.io" class="launch">
                    <span class="btn btn-primary">Lancer l'appli</span>
                </a>
            </div>
        </div>
    </div>

    <main>
        <div class="hero">
            <div class="flex-col hero-content lg:flex-row-reverse">
                <div class="hero-image">
                    <img src="assets/interface-vision.png" class="rounded-lg hero-image-media" alt="Interface de Vision Data">
                </div>
                <div class="hero-text">
                    <b>Open Source</b>
                    <h1 class="mb-5 text-5xl font-bold hero-text-title">
                        Visionnez vos <em>données</em> en un clin d'oeil
                    </h1>
                    <p class="mb-5 hero-text-description">
                        Vision est une application web vous permettant de visualiser vos données provenant d'une API. Inserez une URL d'une API et Vision vous permettra de transformer ces données.
                    </p>
                </div>
            </div>
        </div>
        <div class="presentation-container">
            <div class="asset">
                <img src="assets/shapes-2d.svg" alt="">
            </div>
            <div class="callout-text">
                <h2>Transformez vos données API en schéma clair</h2>
                <div class="flex text-justify mt-5 mb-5">
                    <p>
                        Vision vous permet d’illustrer vos données à travers des schémas clairs et précis. <br /> Selon vos besoins, vous aurez plusieurs types de schémas mis à disposition.
                    </p>
                </div>
            </div>
        </div>
        <div class="presentation-container">
            <div class="asset">
                <img src="assets/box-decoration.png" alt="">
            </div>
            <div class="callout-text">
                <h2>Organisez vos espaces de travail</h2>
                <div class="flex text-justify mt-5 mb-5">
                    <p>
                        Vision vous aide à organiser vos analyses de données grâce aux espaces de travail. <br /> L'application s'adapte à tous vos projets.<br/> Les epaces de travail collaboratifs seront bientôt disponibles.
                    </p>
                </div>
            </div>
        </div>

        <div class="features-container">
            <div class="card text-center shadow-2xl">
                <figure>
                    <img src="assets/page-icon.png" class="rounded-xl" alt="">
                </figure>
                <div class="card-body">
                    <h2 class="card-title">Référence API</h2>
                    <p>Construisez un espace de travail qui sert de référence pour les APIs que vous utilisez.</p>
                </div>
            </div>
            <div class="card text-center shadow-2xl">
                <figure>
                    <img src="assets/circular-chart.png" class="rounded-xl" alt="">
                </figure>
                <div class="card-body">
                    <h2 class="card-title">Visualisation de données</h2>
                    <p>Transformez vos données en schéma dynamique</p>
                </div>
            </div>
            <div class="card text-center shadow-2xl">
                <figure>
                    <img src="assets/magnifier.png" class="rounded-xl" alt="">
                </figure>
                <div class="card-body">
                    <h2 class="card-title">Open-Source</h2>
                    <p>Notre produit est Open-Source et gratuit, son code est consultable sur le site Github.</p>
                </div>
            </div>
        </div>

        <div class="callout">
            <div class="card shadow-2xl lg:card-side bg-primary text-primary-content">
                <div class="card-body">
                    <p>Envie de tester notre produit ?</p>
                    <div class="justify-end card-actions">
                        <button class="btn btn-primary">
              Essayer
            </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="journey">
            <h2 class="mb-5 text-4xl font-bold journey-title">Visualisez vos données simplement</h2>
            <div class="journey-container">
                <div class="journey-number">1</div>
                <div class="journey-infos">
                    <div class="journey-text">Rentrée l'URL de votre API</div>
                    <div class="asset query-animation">
                        <img src="assets/query-animation.gif" alt="">
                    </div>
                </div>
            </div>
            <div class="journey-container">
                <div class="journey-number">2</div>
                <div class="journey-infos">
                    <div class="journey-text">Sélectionnez les données qui <em class="font-italic">vous intéressent</em>
                    </div>
                    <div class="asset data-animation">
                        <img src="assets/data-animation.gif" alt="">
                    </div>
                </div>
            </div>
            <div class="journey-container">
                <div class="journey-number">3</div>
                <div class="journey-infos">
                    <div class="journey-text">Créez des <em>schémas adaptés</em> à vos données</div>
                    <div class="asset chart-animation">
                        <img src="assets/chart-animation.gif" alt="">
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="transition-asset">
                    <img src="assets/result.png" alt="" class="result">
                </div>
                <p class="journey-text result-text">
                    Il ne vous reste plus qu'à visualiser votre schéma !
                </p>
            </div>
        </div>


        <div class="callout">
            <div class="card shadow-2xl lg:card-side bg-primary text-primary-content">
                <div class="card-body">
                    <p>Envie de tester notre produit ?</p>
                    <div class="justify-end card-actions">
                        <button class="btn btn-primary">
              Essayer
            </button>
                    </div>
                </div>
            </div>
        </div>
    </main>


    <footer class="p-10 footer bg-base-200 text-base-content">
        <div>
            <img src="favicon.png" alt="Logo de Vision" style="width: 3rem;height: 3rem;">
            <b>Vision Data</b>
            <p>Open-source project started in 2021</p>
        </div>
        <div>
            <span class="footer-title">Ressources</span>
            <a href="#" class="link link-hover">Documentation</a>
            <a href="https://github.com/Vision-Data/app" class="link link-hover">Source</a>
            <a href="/pages/index.html#lexique" class="link link-hover">Lexique</a>
        </div>
        <div>
            <span class="footer-title">Produit</span>
            <a href="/pages/index.html#aboutus" class="link link-hover">Qui sommes-nous ?</a>
            <a href="/pages/index.html#contact" class="link link-hover">Nous contacter</a>
        </div>
        <div>
            <span class="footer-title">Legal</span>
            <a href="https://github.com/Vision-Data/app/blob/main/LICENSE" class="link link-hover">License</a>
            <a href="/pages/index.html#agreement" class="link link-hover">Conditions d'utilisations</a>
            <a href="/pages/index.html#policy" class="link link-hover">Politique de confidentialité</a>
        </div>
        <div class="footer-social">
            <span class="footer-title">Social</span>
            <div class="grid grid-flow-col gap-4">
                <a href="https://twitter.com/AppVisiondata" title="Accéder à Twitter">
                    <img src="assets/twitter.svg" alt="">
                </a>
                <a href="https://github.com/Vision-Data" title="Accéder à Github">
                    <img src="assets/github.svg" alt="">
                </a>
                <a href="https://www.linkedin.com/company/appvisiondata/" title="Accéder à Linkedin">
                    <img src="assets/linkedin.svg" alt="">
                </a>
            </div>
        </div>
    </footer>
    <div class="decoration"></div>
    <script type="module" src="/main.js"></script>
</body>

</html>