Merge pull request #239 from Monadical-SAS/ai-redesign

Ai redesign

Pipfile

@@ -11,4 +11,4 @@ feedgen = "*"
 markupsafe = "*"
 
 [requires]
-python_version = "3.7"
+python_version = "3.11"

content.json

@@ -31,10 +31,15 @@
       "template": "sales.html"
     },
     "services": {
-      "title": "Services",
+      "title": "Web Dev",
       "url": "/services.html",
       "template": "services.html"
     },
+    "ai-services": {
+      "title": "AI",
+      "url": "/ai-services.html",
+      "template": "ai-services.html"
+    },
     "projects": {
       "title": "Projects",
       "url": "/projects.html",
@@ -45,16 +50,16 @@
       "url": "/contact-us.html",
       "template": "contact-us.html"
     },
-    "principles": {
-      "title": "Principles",
-      "url": "/principles.html",
-      "template": "posts/principles-handbook.html"
-    },
     "portfolio": {
       "title": "Portfolio",
       "url": "/portfolio.html",
       "template": "portfolio.html"
     },
+    "principles": {
+      "title": "Principles",
+      "url": "/principles.html",
+      "template": "posts/principles-handbook.html"
+    },
     "yak": {
       "title": "Lightning Yak",
       "url": "/yak.html",
@@ -2112,5 +2117,11 @@
     "portfolio",
     "team",
     "blog"
-  ]
+  ],
+  "SubHeaderLinks": {
+    "services": {
+      "title": "Services",
+      "links": ["ai-services"]
+    }
+  }
 }

static/core/css/base.css

@@ -38,10 +38,91 @@ header .container .nav-item .nav-link {
     line-height: 1.43;
     letter-spacing: normal;
     object-fit: contain;
+    cursor: pointer;
+}
+
+header .container .nav-item .nav-link:hover {
+    color: #0086b4;
 }
 
-header .container .nav-item a.nav-link:hover {
+header .container .nav-item .nav-link:focus {
     color: #0086b4;
+    text-decoration: none;
+}
+
+header .container .nav-item .dropdown-toggle {
+    height: 100%;
+    border: none;
+}
+
+header .container .nav-item .dropdown-menu {
+    box-shadow: 0 7px 20px -12px rgba(144, 144, 144, 0.8);
+    border: none;
+    min-width: auto;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-top: 1px solid #0086b4;
+    top: calc(100% + 10px);
+}
+
+
+@media (max-width: 992px) {
+    header .container .navbar-collapse .nav-item .dropdown-menu {
+        margin-left: 10px;
+        box-shadow: none;
+        border: none;
+    }
+}
+
+.navbar-dark .navbar-nav .show>.nav-link {
+    color: rgb(43, 43, 43);
+}
+
+.navbar-dark .navbar-nav .show>.nav-link:hover {
+    background-color: inherit;
+}
+
+.ai-link {
+    font-size: 81px;
+}
+
+.image-link-services {
+    width: 250px;
+    height: 250px;
+    padding: 0;
+    gap: 10px;
+    border-radius: 12px;
+    border: 6px solid #000;
+    color: black;
+    font-size: 75px;
+    line-height: 75px;
+    background-repeat: no-repeat;
+    background-color: white;
+    background-size: cover;
+    position: relative;
+}
+
+.image-link-services .text {
+    z-index: 1;
+}
+
+.image-link-services .image {
+    opacity: .6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.image-link-services:hover .image,
+.image-link-services:focus .image {
+    opacity: 1;
+}
+
+.image-link-services:hover,
+.image-link-services:focus {
+    color: black;
 }
 
 a {
@@ -53,12 +134,12 @@ a:hover {
     color: #818182;
 }
 
-a{
+a {
     color: #0086b4;
     background: transparent;
 }
 
-a:hover{
+a:hover {
     color: #818182;
 }
 
@@ -260,7 +341,7 @@ a:hover{
     border: 1px solid #818182;
 }
 
-.btn-circle.btn-info{
+.btn-circle.btn-info {
     font-size: 20px;
     color: #0086b4;
     border: 2px solid #0086b4;
@@ -300,14 +381,14 @@ header .container::before {
 header .container::after {
     display: none;
     content: "";
-} 
+}
 
-header .navbar::before{
+header .navbar::before {
     display: none;
     content: "";
 }
 
-header .navbar::after{
+header .navbar::after {
     display: none;
     content: "";
 }
@@ -342,14 +423,14 @@ header .navbar-toggler-icon {
         flex-direction: column;
         align-items: flex-start;
     }
-    
+
     .button-navbar {
         max-width: 100%;
         margin: 10px 20px 10px 0;
     }
 }
 
-@media (min-width: 576px) and (max-width: 600px){
+@media (min-width: 576px) and (max-width: 600px) {
     header .container .nav-item:last-child {
         max-width: calc(121px*0.8);
     }
@@ -387,7 +468,7 @@ header .navbar-toggler-icon {
     justify-content: center;
 }
 
-.card.card-guaranties .card-text{
+.card.card-guaranties .card-text {
     font-size: 16px;
     font-weight: normal;
     font-stretch: normal;
@@ -516,7 +597,7 @@ header .navbar-toggler-icon {
     display: inline-block;
 }
 
-.scroll-down > span{
+.scroll-down>span {
     font-size: 18px;
     font-weight: normal;
     font-stretch: normal;
@@ -527,7 +608,7 @@ header .navbar-toggler-icon {
     color: #2b2b2b;
 }
 
-.scroll-down > i{
+.scroll-down>i {
     font-size: 30px;
     display: inline-block;
     font-weight: normal;
@@ -618,7 +699,8 @@ header .navbar-toggler-icon {
         margin-top: 20px;
 
     }
-    .margin-bottom-xs{
+
+    .margin-bottom-xs {
         margin-bottom: 30px;
     }
 
@@ -1074,7 +1156,7 @@ button.black-button {
     padding: 0 10px;
 }
 
-.project.card > p.card-content {
+.project.card>p.card-content {
     color: #666666;
     font-size: 14px;
     letter-spacing: normal;
@@ -1433,7 +1515,7 @@ button.read-more {
     }
 }
 
-@media screen and (max-width: 768px){
+@media screen and (max-width: 768px) {
     .first-section {
         text-align: center;
     }
@@ -1612,7 +1694,7 @@ button.read-more {
         max-width: 559px;
     }
 
-    .card-project-img{
+    .card-project-img {
         background-position: center;
         background-size: cover;
         border-radius: 10px;
@@ -1646,15 +1728,15 @@ button.read-more {
 
     .card-open-source {}
 
-    h4 > a {
+    h4>a {
         font-size: 1rem;
     }
 
     .octopus-img {
         width: 100%;
     }
 
-    .card-img > img {
+    .card-img>img {
         width: 100%;
     }
 
@@ -1676,20 +1758,20 @@ button.read-more {
     max-height: 100%;
 }
 
-a.card-link > h2 {
+a.card-link>h2 {
     color: black;
 }
 
 ul.open-positions {
     padding: 0;
 }
 
-ul.open-positions > li {
+ul.open-positions>li {
     color: #818182;
     list-style: none;
 }
 
-.card-open-source .card-img-top{
+.card-open-source .card-img-top {
     align-items: center;
     display: flex;
     height: 46px;