|
15 | 15 | <body class="bg-gray-100 text-gray-800"> |
16 | 16 |
|
17 | 17 | <nav class="px-4 py-4 flex justify-between items-center bg-white sticky top-0 z-10 border-b-2"> |
18 | | - <a class="text-3xl font-bold leading-none" href="#"> |
| 18 | + <a class="text-3xl font-bold leading-none" href="/"> |
19 | 19 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 400 400"> |
20 | 20 | <path d="M0 0 C44.55 0 89.1 0 135 0 C135 8.25 135 16.5 135 25 C99.69 25 64.38 25 28 25 C28 44.8 28 64.6 28 85 C60.67 85 93.34 85 127 85 C127 93.25 127 101.5 127 110 C94.33 110 61.66 110 28 110 C28 131.78 28 153.56 28 176 C64.96 176 101.92 176 140 176 C140 185.24 140 194.48 140 204 C93.8 204 47.6 204 0 204 C0 136.68 0 69.36 0 0 Z " fill="#000" transform="translate(129,140)" /> |
21 | 21 | <path d="M0 0 C0.32596165 7.4350299 -0.83407478 13.92180553 -2.625 21.125 C-3.03214233 22.78160645 -3.03214233 22.78160645 -3.44750977 24.47167969 C-10.27702769 51.39532357 -24.24524598 76.29458091 -48.4765625 90.93359375 C-49.64972368 91.62463823 -50.8241307 92.31357373 -52 93 C-52.95648438 93.56847656 -53.91296875 94.13695313 -54.8984375 94.72265625 C-68.18938979 102.00103489 -83.98608437 105.22119911 -99.0625 105.0625 C-100.75052734 105.04896484 -100.75052734 105.04896484 -102.47265625 105.03515625 C-103.30667969 105.02355469 -104.14070313 105.01195313 -105 105 C-105 100.64765999 -102.32989909 98.5893151 -99.5625 95.5 C-98.44951159 94.23135345 -97.3375409 92.96181337 -96.2265625 91.69140625 C-95.67516602 91.06379395 -95.12376953 90.43618164 -94.55566406 89.78955078 C-92.46249682 87.38168577 -90.44557633 84.91656151 -88.4375 82.4375 C-85.11831177 78.34584615 -81.73154571 74.32040056 -78.3125 70.3125 C-74.3549843 65.66737449 -70.58398786 60.94009138 -67 56 C-67.78375 56.825 -68.5675 57.65 -69.375 58.5 C-72 61 -72 61 -74 61 C-74.24878906 61.58652344 -74.49757812 62.17304687 -74.75390625 62.77734375 C-76.17411196 65.31056333 -77.71183746 66.70985353 -79.9375 68.5625 C-82.88306043 71.03190133 -82.88306043 71.03190133 -85.62890625 73.71484375 C-87 75 -87 75 -89 75 C-89.25394531 75.59167969 -89.50789063 76.18335937 -89.76953125 76.79296875 C-91.13553212 79.2430973 -92.52936211 80.5359582 -94.6875 82.3125 C-97.37372417 84.5357677 -99.85019574 86.85325024 -102.27734375 89.3515625 C-105.87973 92.98480018 -109.75201196 96.04477081 -113.875 99.0625 C-114.92445801 99.83630005 -114.92445801 99.83630005 -115.99511719 100.62573242 C-117.99154167 102.0911191 -119.9952653 103.54601659 -122 105 C-122.95648438 105.70640625 -123.91296875 106.4128125 -124.8984375 107.140625 C-125.67445313 107.69234375 -126.45046875 108.2440625 -127.25 108.8125 C-127.89453125 109.27269531 -128.5390625 109.73289062 -129.203125 110.20703125 C-131 111 -131 111 -133.046875 110.76171875 C-135 110 -135 110 -138 108 C-136.56047553 104.51162854 -134.83604769 102.84192137 -131.8125 100.625 C-127.72507649 97.56273935 -123.8482719 94.35700314 -120 91 C-120.9738018 89.01966357 -121.93080349 87.10763901 -123.125 85.25 C-124.71092636 81.17190365 -124.65665658 77.19473139 -123.41796875 73.0546875 C-120.61184769 66.72489844 -115.80035494 61.88089781 -111 57 C-110.41734375 56.40445313 -109.8346875 55.80890625 -109.234375 55.1953125 C-90.124612 37.20458968 -63.02254682 25.89947712 -39.25 15.5 C-38.14978516 15.01658646 -38.14978516 15.01658646 -37.02734375 14.52340698 C-28.06566747 10.58720985 -19.08448799 6.70863173 -10 3.0625 C-9.1946582 2.73894531 -8.38931641 2.41539063 -7.55957031 2.08203125 C-2.26695224 0 -2.26695224 0 0 0 Z " fill="#000" transform="translate(268,20)" /> |
|
105 | 105 | <div class="lg:w-1/2" data-sr-id="49" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all, opacity 2.8s cubic-bezier(0.5, 0, 0, 1), transform 2.8s cubic-bezier(0.5, 0, 0, 1);"> |
106 | 106 | <!-- BREAKPOINTS --> |
107 | 107 | <h1 class="font-semibold text-5xl text-black-600/[.06] mb-6 leading-tight"> |
108 | | - Ethicode est une association qui se focalise sur le numérique. |
| 108 | + Association de développeurs engagés pour un web plus sain |
109 | 109 | </h1> |
110 | | - <p class="w-9/12"> |
111 | | - Née du désir d'avoir un web plus sain, plus respectueux... plus éthique ! |
112 | | - </p> |
113 | 110 | </div> |
114 | 111 | </div> |
115 | 112 | </div> |
|
123 | 120 | </svg> |
124 | 121 | </div> |
125 | 122 | <div class="flex flex-col"> |
126 | | - <h3 class="text-2xl font-semibold mb">Améliorer ses compétences</h3> |
127 | | - <p class="text-gray-700 mb-3">En participant à des projets Open Source</p> |
| 123 | + <h3 class="text-2xl font-semibold mb">Former</h3> |
| 124 | + <p class="text-gray-700 mb-3">aux bonnes pratiques et à une utilisation sécuritaire</p> |
128 | 125 | </div> |
129 | 126 | </div> |
130 | 127 | <div class="p-6 flex flex-row"> |
|
135 | 132 | </div> |
136 | 133 |
|
137 | 134 | <div class="flex flex-col"> |
138 | | - <h3 class="text-2xl font-semibold mb">Apprendre</h3> |
139 | | - <p class="text-gray-700 mb-3">Grâce à des activités variées</p> |
| 135 | + <h3 class="text-2xl font-semibold mb">Développer</h3> |
| 136 | + <p class="text-gray-700 mb-3">des alternatives européenes qui répondent aux besoins de leurs temps</p> |
140 | 137 | </div> |
141 | 138 | </div> |
142 | 139 | <div class="p-6 flex flex-row"> |
|
146 | 143 | </svg> |
147 | 144 | </div> |
148 | 145 | <div class="flex flex-col"> |
149 | | - <h3 class="text-2xl font-semibold mb">Agrandir son réseau</h3> |
150 | | - <p class="text-gray-700 mb-3">Et rencontrer des gens passionnants</p> |
| 146 | + <h3 class="text-2xl font-semibold mb">Sensibiliser</h3> |
| 147 | + <p class="text-gray-700 mb-3">face aux dangers des ingérences, des bots et du crime en ligne</p> |
151 | 148 | </div> |
152 | 149 | </div> |
153 | 150 | </div> |
154 | 151 | </section> |
155 | 152 |
|
156 | | - <section class="container mx-auto py-36"> |
| 153 | + <section class="bg-white"> |
| 154 | + <div class="bg-white container mx-auto py-36"> |
| 155 | + |
157 | 156 |
|
158 | | - <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center"> |
159 | | - <div class="flex flex-row gap-8"> |
160 | | - <div class="w-1/2"> |
161 | | - <img src="https://placehold.co/600x600" alt="" srcset="" class="mb-8"> |
| 157 | + <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center"> |
| 158 | + <div class="flex flex-row gap-8"> |
| 159 | + <div class="w-1/2"> |
| 160 | + <img src="/_media/images/computer-science.jpg" alt="" srcset="" class="mb-8"> |
162 | 161 |
|
163 | | - <img src="https://placehold.co/600x600" alt="" srcset="" class=""> |
| 162 | + </div> |
| 163 | + <div class="w-1/2"> |
| 164 | + <img src="/_media/images/computer.jpg" alt="" srcset="" class="mt-5 mb-4"> |
| 165 | + </div> |
164 | 166 | </div> |
165 | | - <div class="w-1/2"> |
166 | | - <img src="/_media/images/computer.jpg" alt="" srcset="" class="mt-5 mb-4"> |
| 167 | + <div> |
| 168 | + <div class="mx-auto max-w-2xl p-8"> |
| 169 | + <p class="mt-2 mb-10 text-4xl sm:leading-tight font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"> |
| 170 | + A propos d'Ethicode |
| 171 | + </p> |
| 172 | + <p class="text-gray-500 leading-7 mb-3"> |
| 173 | + Ethicode est née dans l'oise, région de france avec un taux d'illétrisme électronique record. Sa mission initiale a été la création d'ateliers numériques de sensibilisation à la sécurité en ligne. |
| 174 | + Avec la crise de la COVID, qui a mis un terme à ces ateliers et montré les dangers de la désinformation en ligne, la mission de l'association s'est transformée autour de deux poles : le développement en interne d'alternatives numériques plus sûres, et la fédération de développeurs désireux de contribuer à un web plus sain. |
| 175 | + </p> |
| 176 | + </div> |
167 | 177 | </div> |
168 | 178 | </div> |
169 | | - <div> |
170 | | - <div class="mx-auto max-w-2xl"> |
171 | | - <p class="mt-2 text-4xl sm:leading-tight font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"> |
172 | | - Avec Ethicode, c'est l'occasion de participer à des ateliers |
173 | | - </p> |
174 | | - </div> |
| 179 | + </div> |
| 180 | + |
| 181 | + </section> |
| 182 | + |
| 183 | + <section class="container mx-auto py-36"> |
| 184 | + <!-- Section Title Start --> |
| 185 | + <div> |
| 186 | + <div class="" data-sr-id="9" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all, opacity 2.8s cubic-bezier(0.5, 0, 0, 1), transform 2.8s cubic-bezier(0.5, 0, 0, 1);"> |
| 187 | + <h2 class="mt-2 text-4xl m-auto text-center w-1/2 sm:leading-tight font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance">Projets actuels</h2> |
| 188 | + <p class="text-center mt-8 mb-16" x-text="sectionTitleText">Quelques projets réalisés ou en cours de réalisation par Ethicode</p> |
175 | 189 | </div> |
176 | 190 | </div> |
| 191 | + <!-- Section Title End --> |
| 192 | + |
| 193 | + <div class="max-w-7xl mx-auto"> |
| 194 | + <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| 195 | + <div class="p-8 bg-white rounded-md flex flex-col" data-sr-id="10" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 2.8s cubic-bezier(0.5, 0, 0, 1), transform 2.8s cubic-bezier(0.5, 0, 0, 1);"> |
| 196 | + <img class="h-16 w-16" src="/_media/images/m.svg" alt="Icon"> |
| 197 | + <h4 class="text-2xl font-semibold mb-4">Maillage</h4> |
| 198 | + <p class="text-gray-700 mb-3">Un réseau social centré sur l'informatique.</p> |
| 199 | + </div> |
| 200 | + |
| 201 | + <div class="p-8 bg-white rounded-md flex flex-col" data-sr-id="11" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 2.8s cubic-bezier(0.5, 0, 0, 1), transform 2.8s cubic-bezier(0.5, 0, 0, 1);"> |
| 202 | + <span class="flex grow"></span> |
| 203 | + <h4 class="text-2xl font-semibold mb-4">Contributio</h4> |
| 204 | + <p class="text-gray-700 mb-3">Une plateforme qui vise à mettre en avant les projets et contributions Open Source.</p> |
| 205 | + </div> |
| 206 | + |
| 207 | + <div class="p-8 bg-white rounded-md flex flex-col" data-sr-id="12" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 2.8s cubic-bezier(0.5, 0, 0, 1), transform 2.8s cubic-bezier(0.5, 0, 0, 1);"> |
| 208 | + <span class="flex grow"></span> |
| 209 | + <h4 class="text-2xl font-semibold mb-4">Vulgarisation</h4> |
| 210 | + <p class="text-gray-700 mb-3">Comprendre comment fonctionne le web, comment détecter des arnaques.</p> |
| 211 | + </div> |
177 | 212 |
|
| 213 | + </div> |
| 214 | + </div> |
178 | 215 | </section> |
179 | 216 |
|
180 | 217 | <div class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32 hero-image"> |
|
186 | 223 | <div class="aspect-1097/845 w-[68.5625rem] bg-linear-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div> |
187 | 224 | </div> |
188 | 225 | <div class="mx-auto max-w-7xl px-6 lg:px-8"> |
189 | | - <div class="mx-auto max-w-2xl lg:mx-0"> |
190 | | - <h2 class="text-5xl font-semibold tracking-tight text-white sm:text-7xl">Rejoins-nous !</h2> |
191 | | - <p class="mt-8 text-lg font-medium text-pretty text-gray-300 sm:text-xl/8">La communauté s'organise librement sur Discord. Viens partager ta passion avec d'autres et construisons ensemble !</p> |
192 | | - </div> |
193 | | - <div class="mx-auto mt-10 max-w-2xl lg:mx-0 lg:max-w-none"> |
194 | | - <div class="grid grid-cols-1 gap-x-8 gap-y-6 text-base/7 font-semibold text-white sm:grid-cols-2 md:flex lg:gap-x-10"> |
195 | | - <a href="{{$discord}}">La communauté <span aria-hidden="true">→</span></a> |
196 | | - <a href="{{$github}}">Les projets <span aria-hidden="true">→</span></a> |
197 | | - <!-- <a href="#">Les principes <span aria-hidden="true">→</span></a> --> |
| 226 | + <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| 227 | + |
| 228 | + <div> |
| 229 | + |
| 230 | + <div class="mx-auto max-w-2xl lg:mx-0"> |
| 231 | + <h2 class="text-5xl font-semibold tracking-tight text-white sm:text-6xl">Vous souhaitez nous rejoindre ? |
| 232 | + </h2> |
| 233 | + <p class="mt-8 text-lg font-medium text-pretty text-gray-300 sm:text-xl/8">Venez faire connaissance sur le Discord de l'association :</p> |
| 234 | + </div> |
| 235 | + <div class="mx-auto mt-10 max-w-2xl lg:mx-0 lg:max-w-none"> |
| 236 | + <div class="grid grid-cols-1 gap-x-8 gap-y-6 text-base/7 font-semibold text-white sm:grid-cols-2 md:flex lg:gap-x-10"> |
| 237 | + <a href="{{$discord}}">La communauté <span aria-hidden="true">→</span></a> |
| 238 | + <a href="{{$github}}">Les projets <span aria-hidden="true">→</span></a> |
| 239 | + <!-- <a href="#">Les principes <span aria-hidden="true">→</span></a> --> |
| 240 | + </div> |
| 241 | + </div> |
| 242 | + </div> |
| 243 | + <div class=""> |
| 244 | + <h2 class="text-2xl font-semibold mb-4 text-white">Nous contacter</h2> |
| 245 | + <form action="https://formspree.io/f/mzzdjavd " method="POST"> |
| 246 | + <div class="mb-4"> |
| 247 | + <label for="email" class="block text-white">Adresse email</label> |
| 248 | + <input type="email" id="email" name="email" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| 249 | + </div> |
| 250 | + <div class="mb-4"> |
| 251 | + <label for="message" class="block text-white">Message</label> |
| 252 | + <textarea id="message" name="message" rows="4" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| 253 | + </div> |
| 254 | + <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600">Envoyer</button> |
| 255 | + </form> |
198 | 256 | </div> |
199 | 257 | </div> |
200 | 258 | </div> |
201 | 259 | </div> |
202 | | - </main> |
203 | | - |
204 | | - <!-- Footer Section --> |
205 | | - <footer class="bg-main-600 text-black py-8"> |
206 | | - <div class="container mx-auto text-center"> |
207 | | - <h2 class="text-xl font-bold mb-4">Liens utiles</h2> |
208 | | - <ul class="flex justify-center space-x-6"> |
209 | | - <li><a href="#" class="hover:text-blue-300">Accueil</a></li> |
210 | | - </ul> |
211 | | - <p class="mt-6">Ethicode</p> |
| 260 | + |
| 261 | + <!-- <div class="container mx-auto p-4"> |
| 262 | + <h1 class="text-3xl font-bold text-center mb-8">Blog Grid</h1> |
| 263 | + <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| 264 | + <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| 265 | + <img class="w-full h-48 object-cover" src="https://via.placeholder.com/600x400" alt="Blog Image 1"> |
| 266 | + <div class="p-4"> |
| 267 | + <h2 class="text-xl font-semibold">Blog Title 1</h2> |
| 268 | + <p class="text-gray-600 mt-2">This is a brief description of the blog post.</p> |
| 269 | + <a href="#" class="text-blue-500 mt-4 inline-block">Read more</a> |
| 270 | + </div> |
| 271 | + </div> |
| 272 | + </div> |
212 | 273 | </div> |
213 | | - </footer> |
| 274 | + </main> --> |
| 275 | + |
| 276 | + |
| 277 | + |
| 278 | + <!-- Footer Section --> |
| 279 | + <footer class="bg-main-600 text-black py-8"> |
| 280 | + <div class="container mx-auto"> |
| 281 | + <a href="/mentions-legales" class="flex items-center justify-center">Mentions légales</a> |
| 282 | + </div> |
| 283 | + </footer> |
214 | 284 |
|
215 | 285 | </body> |
216 | 286 |
|
|
0 commit comments