📷 Pictures (#2)

* 📷 update pictures

* 🤵 set netlify forms

src/components/counters.jsx

@@ -5,22 +5,22 @@ const Counters = () => (
     <div class="container">
       <div class="row counters">
         <div class="col-lg-3 col-6 text-center">
-          <span data-toggle="counter-up">1232</span>
-          <p>Élèves</p>
+          <span data-toggle="counter-up">100+</span>
+          <p>Élèves satisfaits</p>
         </div>
 
         <div class="col-lg-3 col-6 text-center">
-          <span data-toggle="counter-up">64</span>
-          <p>Cours</p>
+          <span data-toggle="counter-up">3</span>
+          <p>Niveaux</p>
         </div>
 
         <div class="col-lg-3 col-6 text-center">
-          <span data-toggle="counter-up">42</span>
-          <p>Ateliers</p>
+          <span data-toggle="counter-up">10+</span>
+          <p>Ateliers organisés</p>
         </div>
 
         <div class="col-lg-3 col-6 text-center">
-          <span data-toggle="counter-up">15</span>
+          <span data-toggle="counter-up">3</span>
           <p>Enseignants</p>
         </div>
       </div>

src/components/courseItem.jsx

@@ -1,7 +1,10 @@
 import React from "react"
 import PropTypes from "prop-types"
+import { Link } from "gatsby"
 
-const CourseItem = ({ title, price, description, image }) => {
+import * as ROUTES from "../global/routes"
+
+const CourseItem = ({ title, price, description, image, slug }) => {
   return (
     <div className="col-lg-4 col-md-6 d-flex align-items-stretch">
       <div className="course-item">
@@ -13,7 +16,7 @@ const CourseItem = ({ title, price, description, image }) => {
           </div>
 
           <h3>
-            <a href="course-details.html">{title}</a>
+            <Link to={`${ROUTES.COURSES}/${slug}`}>{title}</Link>
           </h3>
           <p>{description}</p>
         </div>
@@ -26,6 +29,7 @@ export default CourseItem
 
 CourseItem.propTypes = {
   title: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
   price: PropTypes.number.isRequired,
   description: PropTypes.string.isRequired,
   image: PropTypes.node.isRequired,

src/components/courses.jsx

@@ -8,7 +8,8 @@ import img3 from "../static/img/course-3.jpg"
 
 const data = [
   {
-    title: "Garderie",
+    title: "Primaire",
+    slug: "primaire",
     price: 10,
     description:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
@@ -16,6 +17,7 @@ const data = [
   },
   {
     title: "Collège",
+    slug: "college",
     price: 15,
     description:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
@@ -23,6 +25,7 @@ const data = [
   },
   {
     title: "Lycée",
+    slug: "lycee",
     price: 18,
     description:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",

src/components/footer.jsx

@@ -48,10 +48,6 @@ const Footer = ({ siteTitle }) => (
           <div className="col-lg-3 col-md-6 footer-links">
             <h4>Nos niveaux</h4>
             <ul>
-              <li>
-                <i className="bx bx-chevron-right"></i>{" "}
-                <Link to={ROUTES.GARDERIE}>Garderie</Link>
-              </li>
               <li>
                 <i className="bx bx-chevron-right"></i>{" "}
                 <Link to={ROUTES.PRIMAIRE}>Primaire</Link>
@@ -64,6 +60,10 @@ const Footer = ({ siteTitle }) => (
                 <i className="bx bx-chevron-right"></i>{" "}
                 <Link to={ROUTES.LYCEE}>Lycée</Link>
               </li>
+              <li>
+                <i className="bx bx-chevron-right"></i>{" "}
+                <Link to={ROUTES.ATELIER}>Ateliers</Link>
+              </li>
             </ul>
           </div>
 
@@ -73,8 +73,14 @@ const Footer = ({ siteTitle }) => (
               Tamen quem nulla quae legam multos aute sint culpa legam noster
               magna
             </p>
-            <form action="" method="post">
-              <input type="email" name="email" />
+            <form
+              name="newsletter"
+              action="/success"
+              method="post"
+              data-netlify="true"
+              data-netlify-honeypot="bot-field"
+            >
+              <input type="email" name="email" required />
               <input type="submit" value="S'inscrire" />
             </form>
           </div>

src/global/routes.js

@@ -4,7 +4,7 @@ export const A_PROPOS = "/a-propos"
 export const CONTACT = "/contact"
 export const CALENDAR = "/calendrier"
 export const LEGAL = "/legal"
-export const GARDERIE = COURSES + "/garderie"
+export const ATELIER = COURSES + "/ateliers"
 export const PRIMAIRE = COURSES + "/primaire"
 export const COLLEGE = COURSES + "/college"
 export const LYCEE = COURSES + "/lycee"

src/static/css/style.css

@@ -1,10 +1,3 @@
-/**
-* Template Name: Mentor - v2.1.0
-* Template URL: https://bootstrapmade.com/mentor-free-education-bootstrap-theme/
-* Author: BootstrapMade.com
-* License: https://bootstrapmade.com/license/
-*/
-
 /*--------------------------------------------------------------
 # General
 --------------------------------------------------------------*/
@@ -22,7 +15,12 @@ a:hover {
   text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: "Raleway", sans-serif;
 }
 
@@ -177,7 +175,9 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 500;
 }
 
-.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
+.nav-menu a:hover,
+.nav-menu .active > a,
+.nav-menu li:hover > a {
   color: #5fcf80;
 }
 
@@ -215,7 +215,9 @@ h1, h2, h3, h4, h5, h6 {
   color: #37423b;
 }
 
-.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
+.nav-menu .drop-down ul a:hover,
+.nav-menu .drop-down ul .active > a,
+.nav-menu .drop-down ul li:hover > a {
   color: #5fcf80;
 }
 
@@ -335,7 +337,9 @@ h1, h2, h3, h4, h5, h6 {
   outline: none;
 }
 
-.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
+.mobile-nav a:hover,
+.mobile-nav .active > a,
+.mobile-nav li:hover > a {
   color: #5fcf80;
   text-decoration: none;
 }
@@ -397,7 +401,7 @@ h1, h2, h3, h4, h5, h6 {
 #hero {
   width: 100%;
   height: 80vh;
-  background: url("../img/hero-bg.jpg") top center;
+  background: url("../img/hero-bg.jpg") center;
   background-size: cover;
   position: relative;
 }
@@ -885,7 +889,8 @@ section {
   margin: 0;
 }
 
-.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
+.testimonials .testimonial-item .quote-icon-left,
+.testimonials .testimonial-item .quote-icon-right {
   color: #c1ecce;
   font-size: 26px;
 }
@@ -908,7 +913,8 @@ section {
   margin: 15px auto 15px auto;
 }
 
-.testimonials .owl-nav, .testimonials .owl-dots {
+.testimonials .owl-nav,
+.testimonials .owl-dots {
   margin-top: 5px;
   text-align: center;
 }
@@ -952,7 +958,7 @@ section {
 }
 
 .course-details h3:before {
-  content: '';
+  content: "";
   position: absolute;
   display: block;
   width: 100%;
@@ -963,7 +969,7 @@ section {
 }
 
 .course-details h3:after {
-  content: '';
+  content: "";
   position: absolute;
   display: block;
   width: 60px;
@@ -1281,11 +1287,14 @@ section {
   color: #657a6d;
 }
 
-.contact .info .email, .contact .info .phone {
+.contact .info .email,
+.contact .info .phone {
   margin-top: 40px;
 }
 
-.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
+.contact .info .email:hover i,
+.contact .info .address:hover i,
+.contact .info .phone:hover i {
   background: #5fcf80;
   color: #fff;
 }
@@ -1349,13 +1358,15 @@ section {
   animation: animate-loading 1s linear infinite;
 }
 
-.contact .php-email-form input, .contact .php-email-form textarea {
+.contact .php-email-form input,
+.contact .php-email-form textarea {
   border-radius: 4px;
   box-shadow: none;
   font-size: 14px;
 }
 
-.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
+.contact .php-email-form input:focus,
+.contact .php-email-form textarea:focus {
   border-color: #5fcf80;
 }