Staging changes

Bridgeconn · Sep 22, 2023 · 6dea4df · 6dea4df
1 parent cd2c961
commit 6dea4df
Show file tree

Hide file tree

Showing 11 changed files with 503 additions and 94 deletions.
diff --git a/app/static/css/hugo-styles.css b/app/static/css/hugo-styles.css
@@ -11598,7 +11598,7 @@ textarea.form-control-lg {
 }
 
 .section.hero .hero-title strong {
-    color: #FF87B0
+  color: #7c76bb;
 }
 
 @media (min-width: 1200px) {

diff --git a/app/static/css/services.css b/app/static/css/services.css
@@ -1,54 +1,132 @@
 .dynamic-services {
+    margin-top: 30px;
     padding: 30px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-around;
+    /* align-items: center; */
+    font-family: 'Nunito Sans', sans-serif;
 }
 
-.dynamic-services .services-icons {
-    width: 100%;
-    height: 100%;
+.serviceCards{
     display: grid;
-    gap: 2rem;
-    justify-items: center;
+    row-gap: 24px;
+    -moz-column-gap: 16px;
+    column-gap: 16px;
+    align-items: flex-start;
+    grid-template-columns: 1fr;
+    align-items: center;
 }
 
-.dynamic-services .services-icons .service-icon {
-    width: 150px;
-    height: 150px;
-    /* border-radius: 50%; */
+.serviceCard{
+    position: relative;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    /* border: 4px solid #7c76BB; */
-    border: none;
+    align-self: stretch;
+    flex-direction: column;
     cursor: pointer;
+    transition: transform 300ms cubic-bezier(0.52,0,0,1);
+    max-width: 250px;
+    min-height: 280px;
+    justify-self: center;
+}
+
+.serviceCard__shadow {
+    position: absolute;
+    display: block;
+    inset: 0;
     overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 13px 27px -12px rgba(50,50,93,.25098039215686274);
+    transition: transform 300ms cubic-bezier(0.52,0,0,1), 
+                box-shadow 300ms cubic-bezier(0.52,0,0,1);
+    background-color: #fff;
+    z-index: -1;
+}
+
+.serviceCard__shadow:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 8px;
+    background: var(--cardTopColor);
+    transition: transform 300ms cubic-bezier(0.52,0,0,1);
+    transform-origin: top center;
+}
+
+.serviceCard:hover {
+    z-index: 1;
+    box-shadow: 0 13px 27px -12px rgba(50,50,93,.33725490196078434);
+    transform: scale(1.01);
+}
+
+.serviceCard__shadow:hover{
+    box-shadow: 0 13px 27px -12px rgba(50,50,93,.33725490196078434);
+    transform: scale(1.03);
+}
+
+.serviceCard__container{
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.serviceCard__body{
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    flex-grow: 1;
+    padding: 16px 8px 16px;
+    gap: 16px;
+    width: 250px;
+    overflow: hidden;
+}
+
+.serviceCard__body__image {
+    max-width: 100%;
 }
 
-.dynamic-services .services-icons .service-icon img{
-    /* width: 100%;
-    height: 100%; */
+.serviceCard__body__image img{
+    width: 100%;
     object-fit: cover;
-    width: 120%;
-    height: auto;
 }
 
-.dynamic-services .services-icons .service-icon span{
-    position: absolute;
-    top: 80%;
-    left: 50%;    
-    transform: translateX(-50%); 
+.serviceCard__footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.serviceCard__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 8px;
+    height: 86px;
+    position: relative;
+}
+
+.serviceCard__header span {
     font-weight: 600;
-    color: #ff87B0;
-    text-wrap: wrap;  
+    color: rgba(0, 0, 0, .55);
 }
 
-.service-icon:hover {
-    scale: 1.1;
-    transition: all .5s ease;
+.serviceCard__header:after {
+    content: "";
+    display: block;
+    position: absolute;
+    background: #e7ecf1;
+    height: 1px;
+    width: 100%;
+    bottom: 0;
+    transition: transform 300ms cubic-bezier(0.52,0,0,1);
+
 }
 
 #animatedDiv {
@@ -58,7 +136,7 @@
     transition: height 0.5s ease-in-out;
     height: 0;
     border-radius: 1rem;
-    background-color: #f0f8ff;
+    /* background-color: #f0f8ff; */
 }
 
 #service-content {
@@ -69,20 +147,26 @@
 
 
 
-
 /* responsive */
 
 @media (min-width: 375px) {
-    .services-icons { grid-template-columns: repeat(2, 1fr); }
+    /* .services-icons { grid-template-columns: repeat(2, 1fr); } */
 }
 
 @media (min-width: 600px) {
-    .services-icons { grid-template-columns: repeat(3, 1fr); }
+    /* .services-icons { grid-template-columns: repeat(3, 1fr); } */
+    .serviceCards{
+        grid-template-columns: repeat(2, 1fr);
+        -moz-column-gap: 16px;
+        column-gap: 16px;
+    }
 }
 
-@media (min-width: 768px) {
-    .dynamic-services .services-icons{
-        gap: 5rem;
+@media (min-width: 900px) {
+    .serviceCards{
+        grid-template-columns: repeat(3, 1fr);
+        -moz-column-gap: 16px;
+        column-gap: 16px;
     }
 }
 
@@ -92,13 +176,15 @@
     }
   }
 
-
-.service-image {
-    max-width: 105%; /* Adjust the image width as needed */
-    margin-bottom: 30px; /* Add some spacing between the image and text */
+@media (min-width: 900px) {
+.dynamic-services .dynamic-content{
+    margin-top: 5rem;
+}
 }
 
-/* .textcolour{
-    top: 100%;
-}   */
-
+@media (min-width: 1024px) {
+    /* .dynamic-services .services-icons .service-icon{
+       width: 200px;
+       height: 200px;
+    } */
+}
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
@@ -201,7 +201,7 @@
 	margin: auto;
 	border-radius: 50%;
 	overflow: hidden;
-	border: 3px solid #3B270C;
+	border: 4px solid #7c76bb;
 	margin-top: 50px;
 }
 .person img {
@@ -227,7 +227,7 @@
 .carousel-indicators [data-bs-target] {
 	width: 60px;
 	height: 10px;
-	background-color: #ff87B0;
+	background-color: #7c76bb;
 }
 @media (min-width: 768px) and (max-width: 991px) {
 	.section-header p {
@@ -287,6 +287,11 @@ li{
   font-family: 'Nunito Sans', sans-serif;
 }
 
+.navimage{
+  font-family: 'Poppins', sans-serif;
+  color: #36454F !important;
+}
+
 
 
 .navbar .dropdown-toggle {

diff --git a/app/static/data/services.json b/app/static/data/services.json
@@ -1,24 +1,24 @@
 {
-    "ai": {
-        "title":"AI APIs",
-        "content":"AI APIs are essential for various AI functionalities. They empower applications with model selection, text and document translation, and speech-to-text transcription capabilities. Vachan-mt-nllb APIs use NLLB(No Language Left Behind) models, sourced from meta for text translation. These models offer evaluated, high-quality translations among 200 languages, including low-resource languages. We are actively fine-tuning these models to support our specific use-cases. The Model Selection API retrieves nllb model details, Text Translation API supports translation into 200 languages and Document Translation API translates lists of sentences. Vachan-st-xlsr APIs are used to transcribe speech into text using machine learning models using ST-XLSR(Streaming Transformer -Cross-lingual Speech Recognition) model. It has the Model Selection API retrieves Speech to text and Language model details and The Transcribe API converts audio to text, supporting multiple languages. Current STT models use xlsr, with plans to transition to MMS models supporting 1000+ languages."
+    "cms": {
+        "title":"Content Management",
+        "content":"Effective content management is crucial for VachanOnline.com and the VachanGo app, the leading Scripture Engagement platform in Indian Languages. With a streamlined content management system, administrators can organize and distribute diverse resources, including commentaries, videos, audio bibles, and reading plans. This system facilitates seamless integration of new content and ensures a wide range of offerings in multiple Indian languages. It also enables efficient management of user-generated content, fostering an interactive community of users. Content management plays a pivotal role in maintaining a dynamic and enriching Scripture Engagement experience for users."
     },
     "translation": {
         "title":"Translation APIs",
         "content":"Translation APIs are primarily designed for text translation but are now also being experimented with for sign language translation. These APIs typically rely on vocabulary-based translation techniques and token replacement methods. They excel in handling very low-resource languages and languages that are closely related. Additionally, these APIs offer translation memory and context-aware suggestion capabilities, enhancing the quality and accuracy of translations. Whether it's cloud-based projects or local projects, these translation APIs can seamlessly integrate and support various implementation scenarios. Their versatility and capabilities make them valuable tools for enabling effective language translation in a wide range of applications."
     },
-    "cms": {
-        "title":"Content Management",
-        "content":"Effective content management is crucial for VachanOnline.com and the VachanGo app, the leading Scripture Engagement platform in Indian Languages. With a streamlined content management system, administrators can organize and distribute diverse resources, including commentaries, videos, audio bibles, and reading plans. This system facilitates seamless integration of new content and ensures a wide range of offerings in multiple Indian languages. It also enables efficient management of user-generated content, fostering an interactive community of users. Content management plays a pivotal role in maintaining a dynamic and enriching Scripture Engagement experience for users."
-    },
-    "graphql": {
-        "title":"GraphQL",
-        "content":"GraphQL module for Vachan Engine is a specification for web APIs that offers a compelling alternative to REST. This module serves as a middle layer between client applications and data sources. With its powerful query language, GraphQL enables declarative data fetching, eliminating the need for over-fetching or under-fetching. Initially implemented using Graphene, we are now migrating to the Strawberry library, ensuring access to the latest GraphQL advancements. It is hosted alongside our REST API services, this integration allows you to leverage the best of both worlds. While REST provides familiar GET, PUT, and POST endpoints, GraphQL empowers you with flexible and precise data retrieval."
+    "ai": {
+        "title":"AI APIs",
+        "content":"AI APIs are essential for various AI functionalities. They empower applications with model selection, text and document translation, and speech-to-text transcription capabilities. Vachan-mt-nllb APIs use NLLB(No Language Left Behind) models, sourced from meta for text translation. These models offer evaluated, high-quality translations among 200 languages, including low-resource languages. We are actively fine-tuning these models to support our specific use-cases. The Model Selection API retrieves nllb model details, Text Translation API supports translation into 200 languages and Document Translation API translates lists of sentences. Vachan-st-xlsr APIs are used to transcribe speech into text using machine learning models using ST-XLSR(Streaming Transformer -Cross-lingual Speech Recognition) model. It has the Model Selection API retrieves Speech to text and Language model details and The Transcribe API converts audio to text, supporting multiple languages. Current STT models use xlsr, with plans to transition to MMS models supporting 1000+ languages."
     },
     "auth": {
         "title":"Auth & Access Management",
         "content":"Access Restriction is implemented for all the endpoints in different levels based on the API’s content priority. User level, Content level, Application level-based security is added to each endpoint. Some of the endpoints are open accessible and others are restricted to user-roles only. User with specific role permission can only access those APIs. Access to endpoints can be done with the help of authorized token. The security implemented for the Vachan Engine contents are based on Role Based Access Control (RBAC) Auwhich restricts the access based on user's role, access-tags etc."
     },
+    "graphql": {
+        "title":"GraphQL",
+        "content":"GraphQL module for Vachan Engine is a specification for web APIs that offers a compelling alternative to REST. This module serves as a middle layer between client applications and data sources. With its powerful query language, GraphQL enables declarative data fetching, eliminating the need for over-fetching or under-fetching. Initially implemented using Graphene, we are now migrating to the Strawberry library, ensuring access to the latest GraphQL advancements. It is hosted alongside our REST API services, this integration allows you to leverage the best of both worlds. While REST provides familiar GET, PUT, and POST endpoints, GraphQL empowers you with flexible and precise data retrieval."
+    },
     "microservices": {
         "title":"Micro Services",
         "content":"Vachan Engine microservices architecture is broken down into a set ofi ndependently functioning services, each serving a specific business capability. These services communicate with each other through well-defined APIs, typically using lightweight protocols such as HTTP or messaging systems."

diff --git a/app/static/data/testimonial.json b/app/static/data/testimonial.json
@@ -0,0 +1,16 @@
+[
+    {
+        "name":"Samuel Anthrayose",
+        "app":"",
+        "designation":"Project Manager",
+        "image":"/static/images/testimonials/samuel.png",
+        "comment":"We've been using VachanEngine CMS for our front-end applications, and it has truly served our need for varied resources in South Asian languages in different formats. The user-friendly documentation and their excellent development team makes it a breeze to organize and use the content. I highly recommend VachanEngine CMS to anyone looking for a powerful and intuitive content management solution."
+    },
+    {
+        "name":"Revant Cherian Idikulay",
+        "app":"",
+        "designation":"Software Engineer",
+        "image":"/static/images/testimonials/revant.png",
+        "comment":"Vachan engine is comprehensive and easy to use. It has detailed documentation. The ability to try out the API on the documentation page itself is very useful. Making an UI application with it was a breeze."
+    }
+]
diff --git a/app/static/images/Banner (Gear Wheels).svg b/app/static/images/Banner (Gear Wheels).svg
diff --git a/app/static/images/Banners (Rotating Gears Animation).svg b/app/static/images/Banners (Rotating Gears Animation).svg
diff --git a/app/static/images/Logo.svg b/app/static/images/Logo.svg
diff --git a/app/static/scripts/client.js b/app/static/scripts/client.js
@@ -0,0 +1,33 @@
+let testimonials;
+
+const carouselContent = document.getElementById('carousel-content')
+const corouselNavWrapper = document.getElementById('carousel-indicator-wrapper')
+
+// load cleint json on initial load
+async function loadTestimonials() {
+    const req = await fetch('/static/data/testimonial.json')
+    const res = await req.json()
+    testimonials = res;
+
+    // set all data in the section
+    let carouselStr = '' , carouselIndicators = '';
+    testimonials.forEach((element, index) => {
+        carouselStr += `<div class="carousel-item ${index === 0 ? 'active' : ''}">
+            <div class="content text-center" id="carousel-content">
+                <div class="person"><img alt="" src="${element.image}"></div>
+                    <h5>${element.name}</h5>
+                    ${element?.app && '<h6>'+element.app+'</h6>'}
+                    <h6>${element.designation}</h6>
+                    <p>${element.comment}</p>
+                </div>
+        </div>`
+        carouselIndicators += `
+        <button aria-label="Slide ${index+1}" class="${index ===0 ? 'active' : ''}" data-bs-slide-to="${index}" data-bs-target="#carouselExampleIndicators" type="button"></button>
+        `
+    });
+    carouselContent.innerHTML = carouselStr;
+    corouselNavWrapper.innerHTML = carouselIndicators;
+
+}
+
+window.onload = loadTestimonials();
diff --git a/app/static/scripts/services.js b/app/static/scripts/services.js
@@ -6,6 +6,14 @@ const dynamicContentWrapper = document.getElementById('animatedDiv')
 const serviceHeader = document.getElementById('service-content-head')
 const serviceBody = document.getElementById('service-content-body')
 
+const contentBodyColors = [
+    "rgba(153, 102 ,255,0.2)",
+    "rgba(255, 179, 199,0.2)",
+    "rgba(51, 221, 179, 0.2)",
+    "rgba(158, 23, 145, 0.2)",
+    "rgba(40, 193, 1, 0.2)",
+    "rgba(0, 196, 196,0.2)"
+]
 
 let serviceContent;
 
@@ -23,7 +31,6 @@ const delay = ms => new Promise(res => setTimeout(res, ms));
 async function setServiceContent(serviceName) {
     await loadSeriveData();
     const currentData = serviceContent[serviceName]
-    console.log({currentData});
     if (currentData){
         serviceHeader.innerText = currentData.title;
         serviceBody.innerText = currentData.content;
@@ -36,7 +43,8 @@ async function setServiceContent(serviceName) {
 let lastClickedSection;
 
 async function handleServiceClicked(serviceName) {
-    console.log({serviceName, serviceContent});
+    const currentIndex = Object.keys(serviceContent).indexOf(serviceName);
+    animatedDiv.style.backgroundColor = contentBodyColors[currentIndex];
     // accordian action
     if (animatedDiv.clientHeight === 0) {
         await setServiceContent(serviceName);
@@ -62,9 +70,9 @@ async function handleServiceClicked(serviceName) {
 
 }
 
-const servicesBtn = document.querySelectorAll('.service-icon-btn');
+const serviceCard = document.querySelectorAll('.serviceCard');
 
-servicesBtn.forEach(div => {
+serviceCard.forEach(div => {
     div.addEventListener('click', function() {
       const name = this.getAttribute('name');
       handleServiceClicked(name)