[Frontend] Page à propos

common/logic/Order/Order/Repository/OrderRepository.php

@@ -83,6 +83,19 @@ class OrderRepository extends AbstractRepository
             ->count();
     }
 
+    public function countGlobalUserOrdersAverageLastSevenDays()
+    {
+        $count = 0;
+        $date = new \DateTime();
+
+        for($i = 0; $i < 7; $i++) {
+            $date->modify('-1 day');
+            $count += $this->countGlobalOrdersByDateAndOrigin($date);
+        }
+
+        return intval($count / 7);
+    }
+
     public function findOrdersByDistributionDate(string $date): array
     {
         return $this->createDefaultQuery()
@@ -329,4 +342,37 @@ class OrderRepository extends AbstractRepository
 
         return $pointSale;
     }
+
+    public function getTurnoverByDate(\DateTime $date)
+    {
+        $res = \Yii::$app->db->createCommand("SELECT SUM(product_order.price * product_order.quantity) AS total
+                    FROM `order`, product_order, distribution
+                    WHERE `order`.id_distribution = distribution.id
+                    AND `order`.id = product_order.id_order
+                    AND distribution.date >= :date_start
+                    AND distribution.date <= :date_end
+                ")
+            ->bindValue(':date_start', date('Y-m-', $date->getTimestamp()) . '01')
+            ->bindValue(':date_end', date('Y-m-', $date->getTimestamp()) . '31')
+            ->queryOne();
+
+        if ($res['total']) {
+            return $res['total'];
+        } else {
+            return 0;
+        }
+    }
+
+    public function getAverageTurnoverLastThreeMonths()
+    {
+        $total = 0;
+        $date = new \DateTime();
+
+        for($i = 0; $i < 3; $i++) {
+            $date->modify('-1 month');
+            $total += $this->getTurnoverByDate($date);
+        }
+
+        return intval($total / 3);
+    }
 }

common/logic/PointSale/PointSale/Repository/PointSaleRepository.php

@@ -106,4 +106,24 @@ class PointSaleRepository extends AbstractRepository
             ->orderBy('name ASC')
             ->find();
     }
+
+    public function countPointSalesActiveLastThreeMonths()
+    {
+        $connection = \Yii::$app->getDb();
+        $command = $connection->createCommand(
+            '
+            SELECT point_sale.id, COUNT(`order`.id) AS count_orders
+            FROM `point_sale`
+            LEFT JOIN `order` ON point_sale.id = `order`.id_point_sale AND `order`.`date` >= :date_limit
+            GROUP BY point_sale.id
+            HAVING count_orders > 0;',
+            [
+                ':date_limit' => date('Y-m-d', strtotime("-3 month")),
+            ]
+        );
+
+        $results = $command->query();
+
+        return count($results);
+    }
 }

common/logic/User/User/Repository/UserRepository.php

@@ -204,4 +204,24 @@ class UserRepository extends AbstractRepository
             ->filterByStatus($status)
             ->find();
     }
+
+    public function countUsersActiveLastThreeMonths()
+    {
+        $connection = \Yii::$app->getDb();
+        $command = $connection->createCommand(
+            '
+            SELECT `user`.id, COUNT(`order`.id) AS count_orders
+            FROM `user`
+            LEFT JOIN `order` ON `user`.id = `order`.`id_user` AND `order`.`date` >= :date_limit
+            GROUP BY `user`.id
+            HAVING count_orders > 0;',
+            [
+                ':date_limit' => date('Y-m-d', strtotime("-3 month")),
+            ]
+        );
+
+        $results = $command->query();
+
+        return count($results);
+    }
 }

frontend/controllers/SiteController.php

@@ -175,15 +175,29 @@ class SiteController extends FrontendController
     public function actionAbout()
     {
         $producerManager = $this->getProducerManager();
+        $pointSaleManager = $this->getPointSaleManager();
+        $userManager = $this->getUserManager();
+        $orderManager = $this->getOrderManager();
 
         $countProducersActive = $producerManager->countProducersActiveWithTurnover();
-
+        $countPointSalesActive = $pointSaleManager->countPointSalesActiveLastThreeMonths();
+        $countUsersActive = $userManager->countUsersActiveLastThreeMonths();
+        $averageOrdersPerDay = $orderManager->countGlobalUserOrdersAverageLastSevenDays();
+        $averageTurnover = $orderManager->getAverageTurnoverLastThreeMonths();
         $resultMatomoApiVisitSummary = json_decode(file_get_contents(Yii::$app->params['matomoApiVisitSummaryUrl']));
         $numberVisitsMonth = $resultMatomoApiVisitSummary->nb_uniq_visitors;
 
+        /*
+        -- Nombre de clients actifs (sur les 3 derniers mois)
+
+        */
 
         return $this->render('about', [
             'countProducersActive' => $countProducersActive,
+            'countPointSalesActive' => $countPointSalesActive,
+            'countUsersActive' => $countUsersActive,
+            'averageOrdersPerDay' => $averageOrdersPerDay,
+            'averageTurnover' => $averageTurnover,
             'numberVisitsMonth' => $numberVisitsMonth
         ]);
     }

frontend/views/site/about.php

@@ -54,8 +54,16 @@ $this->setTitle('À propos');
         <div class="col-md-12">
             <div class="panel panel-default">
                 <div class="panel-body">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat justo ac augue volutpat lobortis. Nulla facilisi. Cras sed justo et libero lobortis faucibus sed ac metus. Nulla lacinia sagittis maximus. In id euismod sapien, sed facilisis quam. Phasellus consectetur libero at dolor consequat, rutrum fermentum est laoreet. Quisque pellentesque risus nec augue bibendum venenatis. Suspendisse sagittis ultrices augue eu accumsan. Phasellus vehicula, odio eu auctor egestas, urna nisi tincidunt erat, sit amet semper dolor tellus a nulla.</p>
-                    <p>Morbi aliquet non felis vel fermentum. Ut ultricies lacus in convallis laoreet. Vestibulum magna magna, sollicitudin sed urna ac, vulputate pharetra velit. Sed dictum enim in sodales finibus. Sed luctus porta turpis, at pulvinar dui tempus a. Proin dictum vitae erat quis dapibus. Praesent felis justo, bibendum nec turpis nec, scelerisque dignissim justo. Etiam vel mauris non ipsum feugiat laoreet. Nulla facilisi. Aliquam pellentesque, mauris et pretium pellentesque, diam neque hendrerit augue, auctor luctus turpis urna quis purus. Nam eu porttitor augue. Quisque varius velit enim, id interdum libero laoreet eu. Phasellus viverra dui arcu, vitae semper leo malesuada id. Fusce eros est, facilisis ut odio non, iaculis ornare mi. Pellentesque laoreet, lacus a commodo lobortis, nisl risus tincidunt nisl, sed scelerisque dolor tellus ac nulla.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat justo ac augue volutpat
+                        lobortis. Nulla facilisi. Cras sed justo et libero lobortis faucibus sed ac metus. Nulla lacinia
+                        sagittis maximus. In id euismod sapien, sed facilisis quam. Phasellus consectetur libero at
+                        dolor consequat, rutrum fermentum est laoreet. Quisque pellentesque risus nec augue bibendum
+                        venenatis.</p>
+                    <p>Vestibulum magna magna, sollicitudin sed urna ac, vulputate pharetra velit. Sed dictum enim in
+                        sodales finibus. Sed luctus porta turpis, at pulvinar dui tempus a. Proin dictum vitae erat
+                        quis dapibus. Praesent felis justo, bibendum nec turpis nec, scelerisque dignissim justo. Etiam
+                        vel mauris non ipsum feugiat laoreet. Nulla facilisi. Aliquam pellentesque, mauris et pretium
+                        pellentesque, diam neque hendrerit augue, auctor luctus turpis urna quis purus.</p>
                 </div>
             </div>
             <div class="panel panel-default" id="few-numbers">
@@ -63,69 +71,36 @@ $this->setTitle('À propos');
                     <h2>Résumé en quelques chiffres</h2>
                 </div>
                 <div class="panel-body">
-                    <?= few_numbers_item($countProducersActive, 'Producteurs actifs'); ?>
-                    <?= few_numbers_item('3000', 'Clients réguliers'); ?>
-                    <?= few_numbers_item('250', 'Points de vente'); ?>
-                    <?= few_numbers_item('150', 'Commandes clients / jour'); ?>
-                    <?= few_numbers_item('150 000 €', 'Moyenne CA / mois'); ?>
-                    <?= few_numbers_item($numberVisitsMonth, 'Visiteurs le mois dernier'); ?>
+                    <?= few_numbers_item($countProducersActive, 'Producteurs', 'actifs sur les 3 derniers mois'); ?>
+                    <?= few_numbers_item(few_numbers_format_number($countUsersActive), 'Clients', 'actifs sur les 3 derniers mois'); ?>
+                    <?= few_numbers_item(few_numbers_format_number($countPointSalesActive), 'Points de vente', 'actifs sur les 3 derniers mois'); ?>
+                    <?= few_numbers_item(few_numbers_format_number($averageOrdersPerDay), 'Commandes clients / jour', 'en moyenne sur les 7 derniers jours'); ?>
+                    <?= few_numbers_item(few_numbers_format_number($averageTurnover).' €', 'CA / mois', 'moyenne sur les 3 derniers mois'); ?>
+                    <?= few_numbers_item(few_numbers_format_number($numberVisitsMonth), 'Visiteurs', 'le mois dernier'); ?>
                     <?php //few_numbers_item('4', 'Heures gagnées / semaine'); ?>
-
                 </div>
             </div>
         </div>
-
-        <!--<div class="col-md-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h2>Qui suis-je ?</h2>
-                </div>
-                <div class="panel-body">
-                    <p>Parcours, compétences, histoire de la création du projet.</p>
-                </div>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h2>Mes services</h2>
-                </div>
-                <div class="panel-body">
-                    <p>Services proposés.</p>
-                </div>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h2>Quelques chiffres</h2>
-                </div>
-                <div class="panel-body">
-                    <p>Nombre de producteurs actifs, nombre de commandes clients par mois, cumul chiffre d'affaire producteurs</p>
-                </div>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h2>Vision</h2>
-                </div>
-                <div class="panel-body">
-                    <p>Explication de la vision du projet.</p>
-                </div>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h2>Transparence</h2>
-                </div>
-                <div class="panel-body">
-                    <p>Modèle économique, CA des 3 derniers mois, charges.</p>
-                </div>
-            </div>
-        </div>-->
     </div>
-
 </div>
 
 
 <?php
 
-function few_numbers_item($number, $description) {
-    return '<div class="col-md-4 item"><div class="number">'.$number.'</div><div class="description">'.$description.'</div></div>';
+function few_numbers_item($number, $description, $detail = null) {
+    $html = '<div class="col-md-4 item"><div class="number">'.$number.'</div><div class="description">'.$description.'</div>';
+    
+    if($detail) {
+        $html .= '<div class="detail">'.$detail.'</div>';
+    }
+
+    $html .= '</div>';
+    
+    return $html;
+}
+
+function few_numbers_format_number($number) {
+    return number_format($number, 0, '', ' ');
 }
 
 ?>

frontend/web/css/screen.css

@@ -801,33 +801,46 @@ ul li {
   padding: 0px;
   font-size: 25px;
 }
-/* line 844, ../sass/screen.scss */
+/* line 842, ../sass/screen.scss */
+#content .site-about .panel .panel-body p:last-child {
+  margin-bottom: 0px;
+  padding-bottom: 5px;
+}
+/* line 850, ../sass/screen.scss */
 #content .site-about #few-numbers .item {
   text-align: center;
   padding-top: 20px;
   padding-bottom: 20px;
 }
-/* line 849, ../sass/screen.scss */
+/* line 855, ../sass/screen.scss */
 #content .site-about #few-numbers .item .number {
   font-family: 'highvoltageregular';
   font-weight: bold;
   font-size: 50px;
 }
-
 /* line 861, ../sass/screen.scss */
+#content .site-about #few-numbers .item .description {
+  font-size: 18px;
+}
+/* line 865, ../sass/screen.scss */
+#content .site-about #few-numbers .item .detail {
+  color: gray;
+}
+
+/* line 872, ../sass/screen.scss */
 #content #mentions {
   padding-top: 20px;
 }
-/* line 864, ../sass/screen.scss */
+/* line 875, ../sass/screen.scss */
 #content #mentions div.content {
   width: 60%;
   font-size: 90%;
 }
-/* line 869, ../sass/screen.scss */
+/* line 880, ../sass/screen.scss */
 #content #mentions p {
   padding-bottom: 15px;
 }
-/* line 873, ../sass/screen.scss */
+/* line 884, ../sass/screen.scss */
 #content #mentions h2 {
   color: black;
   padding-bottom: 40px;
@@ -835,7 +848,7 @@ ul li {
   line-height: 35px;
   font-family: 'highvoltageregular';
 }
-/* line 881, ../sass/screen.scss */
+/* line 892, ../sass/screen.scss */
 #content #mentions h3 {
   font-family: "highvoltageregular";
   font-size: 18px;
@@ -844,35 +857,35 @@ ul li {
   color: black;
 }
 
-/* line 896, ../sass/screen.scss */
+/* line 907, ../sass/screen.scss */
 .vegas-loading {
   display: none;
 }
 
-/* line 903, ../sass/screen.scss */
+/* line 914, ../sass/screen.scss */
 #profil-user .form-group.field-user-no_mail label {
   font-weight: normal;
 }
-/* line 907, ../sass/screen.scss */
+/* line 918, ../sass/screen.scss */
 #profil-user .form-group label {
   cursor: pointer;
 }
-/* line 912, ../sass/screen.scss */
+/* line 923, ../sass/screen.scss */
 #profil-user #mails-days-distribution .form-group {
   float: left;
   margin-right: 15px;
 }
-/* line 916, ../sass/screen.scss */
+/* line 927, ../sass/screen.scss */
 #profil-user #mails-days-distribution .form-group label {
   font-weight: normal;
 }
-/* line 922, ../sass/screen.scss */
+/* line 933, ../sass/screen.scss */
 #profil-user p.strong {
   font-weight: bold;
 }
 
 /* login */
-/* line 932, ../sass/screen.scss */
+/* line 943, ../sass/screen.scss */
 .back-white, .site-login .col-lg-5, .site-signup .col-lg-5 {
   background-color: white;
   padding: 30px;
@@ -881,7 +894,7 @@ ul li {
   border-radius: 5px;
 }
 
-/* line 939, ../sass/screen.scss */
+/* line 950, ../sass/screen.scss */
 .site-login .col-lg-5 {
   margin: 0px auto;
   float: none;
@@ -889,19 +902,19 @@ ul li {
 }
 
 /* signup */
-/* line 949, ../sass/screen.scss */
+/* line 960, ../sass/screen.scss */
 .modal-backdrop {
   z-index: 999;
 }
 
-/* line 954, ../sass/screen.scss */
+/* line 965, ../sass/screen.scss */
 .site-signup .col-lg-5 {
   margin: 0px auto;
   float: none;
   max-width: 500px;
 }
 
-/* line 964, ../sass/screen.scss */
+/* line 975, ../sass/screen.scss */
 #modal-cgv .modal-body h2 {
   margin-bottom: 5px;
   padding-bottom: 0px;
@@ -909,41 +922,41 @@ ul li {
   margin-top: 0px;
 }
 
-/* line 974, ../sass/screen.scss */
+/* line 985, ../sass/screen.scss */
 #form-signup #user-producer {
   margin-bottom: 30px;
 }
-/* line 979, ../sass/screen.scss */
+/* line 990, ../sass/screen.scss */
 #form-signup #signupform-id_producer option:disabled {
   font-weight: bold;
   color: black;
 }
-/* line 985, ../sass/screen.scss */
+/* line 996, ../sass/screen.scss */
 #form-signup #champs-producer {
   display: none;
 }
-/* line 989, ../sass/screen.scss */
+/* line 1000, ../sass/screen.scss */
 #form-signup #buttons-signup {
   margin-top: 30px;
 }
-/* line 993, ../sass/screen.scss */
+/* line 1004, ../sass/screen.scss */
 #form-signup .field-signupform-is_test {
   display: none;
 }
 
-/* line 998, ../sass/screen.scss */
+/* line 1009, ../sass/screen.scss */
 #col-left {
   padding: 0px;
   z-index: 15;
 }
-/* line 1002, ../sass/screen.scss */
+/* line 1013, ../sass/screen.scss */
 #col-left .affix {
   width: 25%;
   border-right: solid 1px #e0e0e0;
   background-color: #FAFAFA;
   height: 100%;
 }
-/* line 1009, ../sass/screen.scss */
+/* line 1020, ../sass/screen.scss */
 #col-left #link-home {
   text-decoration: none;
   font-size: 22px;
@@ -952,28 +965,28 @@ ul li {
   padding: 10px;
   background-color: white;
 }
-/* line 1017, ../sass/screen.scss */
+/* line 1028, ../sass/screen.scss */
 #col-left #link-home img {
   height: 50px;
   margin-bottom: 5px;
   float: left;
 }
-/* line 1023, ../sass/screen.scss */
+/* line 1034, ../sass/screen.scss */
 #col-left #link-home .text {
   padding-left: 62px;
 }
-/* line 1026, ../sass/screen.scss */
+/* line 1037, ../sass/screen.scss */
 #col-left #link-home .text .bap {
   font-family: "comfortaalight";
   font-size: 24px;
 }
-/* line 1031, ../sass/screen.scss */
+/* line 1042, ../sass/screen.scss */
 #col-left #link-home .text .plateforme {
   font-size: 17px;
   font-family: "myriadpro-light";
   color: #F39C12;
 }
-/* line 1039, ../sass/screen.scss */
+/* line 1050, ../sass/screen.scss */
 #col-left h2 {
   font-family: 'myriadpro-regular';
   color: black;
@@ -981,37 +994,37 @@ ul li {
   margin-bottom: 10px;
   padding: 15px 0px 5px 15px;
 }
-/* line 1047, ../sass/screen.scss */
+/* line 1058, ../sass/screen.scss */
 #col-left #links {
   background-color: white;
   margin-bottom: 20px;
 }
-/* line 1053, ../sass/screen.scss */
+/* line 1064, ../sass/screen.scss */
 #col-left #links ul li a {
   text-align: center;
   border-right: solid 1px #e0e0e0;
 }
-/* line 1057, ../sass/screen.scss */
+/* line 1068, ../sass/screen.scss */
 #col-left #links ul li a:hover {
   background-color: #F39C12;
   color: white;
 }
-/* line 1063, ../sass/screen.scss */
+/* line 1074, ../sass/screen.scss */
 #col-left #links ul li:last-child a {
   border-right: 0px none;
 }
-/* line 1073, ../sass/screen.scss */
+/* line 1084, ../sass/screen.scss */
 #col-left #producers nav.nav-producers ul li a {
   padding-left: 50px;
   height: 40px;
 }
-/* line 1079, ../sass/screen.scss */
+/* line 1090, ../sass/screen.scss */
 #col-left #producers nav.nav-producers ul li.active a {
   background-color: #F39C12;
   position: relative;
   color: white;
 }
-/* line 1084, ../sass/screen.scss */
+/* line 1095, ../sass/screen.scss */
 #col-left #producers nav.nav-producers ul li.active a:after {
   right: -40px;
   top: 50%;
@@ -1026,18 +1039,18 @@ ul li {
   border-width: 20px;
   margin-top: -20px;
 }
-/* line 1103, ../sass/screen.scss */
+/* line 1114, ../sass/screen.scss */
 #col-left ul {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
 }
-/* line 1108, ../sass/screen.scss */
+/* line 1119, ../sass/screen.scss */
 #col-left ul li {
   margin: 0px;
   padding: 0px;
 }
-/* line 1112, ../sass/screen.scss */
+/* line 1123, ../sass/screen.scss */
 #col-left ul li a {
   text-decoration: none;
   font-family: 'comfortaaregular';
@@ -1048,18 +1061,18 @@ ul li {
   display: block;
   color: black;
 }
-/* line 1122, ../sass/screen.scss */
+/* line 1133, ../sass/screen.scss */
 #col-left ul li a span.name, #col-left ul li a span.wording {
   display: none;
 }
-/* line 1129, ../sass/screen.scss */
+/* line 1140, ../sass/screen.scss */
 #col-left p {
   padding: 20px;
   padding-top: 0px;
   color: gray;
 }
 
-/* line 1137, ../sass/screen.scss */
+/* line 1148, ../sass/screen.scss */
 #content .header-title {
   height: 79px;
   padding: 20px 20px;
@@ -1074,7 +1087,7 @@ ul li {
   -webkit-box-shadow: 0px 0px 8px #e0e0e0;
   box-shadow: 0px 0px 8px #e0e0e0;
 }
-/* line 1149, ../sass/screen.scss */
+/* line 1160, ../sass/screen.scss */
 #content .header-title h1 {
   color: black;
   font-family: 'myriadpro-regular';
@@ -1082,7 +1095,7 @@ ul li {
   font-size: 25px;
   text-transform: uppercase;
 }
-/* line 1157, ../sass/screen.scss */
+/* line 1168, ../sass/screen.scss */
 #content .header-title h2 {
   color: gray;
   text-transform: none;
@@ -1091,16 +1104,16 @@ ul li {
   line-height: 20px;
 }
 
-/* line 1168, ../sass/screen.scss */
+/* line 1179, ../sass/screen.scss */
 .header-producer {
   z-index: 1;
 }
-/* line 1171, ../sass/screen.scss */
+/* line 1182, ../sass/screen.scss */
 .header-producer #block-main-img {
   height: 144px;
   overflow: hidden;
 }
-/* line 1175, ../sass/screen.scss */
+/* line 1186, ../sass/screen.scss */
 .header-producer #block-main-img #main-img {
   width: 100%;
   height: auto;
@@ -1110,7 +1123,7 @@ ul li {
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-/* line 1184, ../sass/screen.scss */
+/* line 1195, ../sass/screen.scss */
 .header-producer h1 {
   font-family: 'comfortaaregular';
   text-align: center;
@@ -1118,23 +1131,23 @@ ul li {
   top: 30px;
   left: 40px;
 }
-/* line 1191, ../sass/screen.scss */
+/* line 1202, ../sass/screen.scss */
 .header-producer h1 span {
   background-color: rgba(255, 255, 255, 0.8);
   padding: 10px 30px;
   border: dotted 1px black;
 }
 
-/* line 1202, ../sass/screen.scss */
+/* line 1213, ../sass/screen.scss */
 nav#menu-producer {
   border-bottom: solid 1px #e0e0e0;
 }
-/* line 1206, ../sass/screen.scss */
+/* line 1217, ../sass/screen.scss */
 nav#menu-producer ul li {
   padding: 0px;
   margin: 0px;
 }
-/* line 1210, ../sass/screen.scss */
+/* line 1221, ../sass/screen.scss */
 nav#menu-producer ul li a {
   border-right: solid 1px #e0e0e0;
   text-decoration: none;
@@ -1142,30 +1155,30 @@ nav#menu-producer ul li a {
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-/* line 1215, ../sass/screen.scss */
+/* line 1226, ../sass/screen.scss */
 nav#menu-producer ul li a:hover {
   background-color: #F39C12;
   color: white;
 }
 
-/* line 1225, ../sass/screen.scss */
+/* line 1236, ../sass/screen.scss */
 .site-contact .col-lg-5 {
   margin: 0px auto;
   float: none;
 }
-/* line 1230, ../sass/screen.scss */
+/* line 1241, ../sass/screen.scss */
 .site-contact #contact-phone {
   font-family: 'capsuularegular';
   font-size: 20px;
   line-height: 25px;
 }
 
-/* line 1239, ../sass/screen.scss */
+/* line 1250, ../sass/screen.scss */
 #site-prices .panel p {
   padding-bottom: 0px;
 }
 
-/* line 1246, ../sass/screen.scss */
+/* line 1257, ../sass/screen.scss */
 #contact-form .field-contactform-istest {
   display: none;
 }

frontend/web/sass/screen.scss

@@ -838,6 +838,12 @@ ul {
         font-size: 25px;
       }
     }
+    .panel-body {
+      p:last-child {
+        margin-bottom: 0px;
+        padding-bottom: 5px;
+      }
+    }
   }
 
   #few-numbers {
@@ -851,8 +857,13 @@ ul {
         font-weight: bold;
         font-size: 50px;
       }
+
       .description {
+        font-size: 18px;
+      }
 
+      .detail {
+        color: gray;
       }
     }
   }