LandingPage : adding link on accordian

app/static/css/hugo-styles.css

@@ -11483,13 +11483,13 @@ textarea.form-control-lg {
     }
 }
 
-@font-face {
+/* @font-face {
     font-family: 'SF Pro Display';
     src: url("http://localhost:1313//fonts/SF-Pro-Display-Regular.otf") format("opentype");
     font-weight: normal
-}
+} */
 
-@font-face {
+/* @font-face {
     font-family: 'SF Pro Display';
     src: url("http://localhost:1313//fonts/SF-Pro-Display-Semibold.otf") format("opentype");
     font-weight: 600
@@ -11499,7 +11499,7 @@ textarea.form-control-lg {
     font-family: 'SF Pro Display';
     src: url("http://localhost:1313//fonts/SF-Pro-Display-Bold.otf") format("opentype");
     font-weight: bold
-}
+} */
 
 .fw-semibold {
     font-weight: 600

app/static/data/services.json

@@ -1,26 +1,80 @@
 {
     "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."
+        "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.",
+        "links":[
+            {
+                "link1":"https://vachanonline.com/",
+                "linkname1":"Vachan Online",
+                "button":"false"
+            },
+
+            {
+                "link2":"https://play.google.com/store/apps/details?id=com.bridgeconn.vachango&pli=1",
+                "linkname2":"Vachan Go",
+                "button":"false"
+            }
+        ]
     },
     "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."
+        "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.",
+        "links":[
+            {
+                "link1":"https://isl.bridgeconn.com/",
+                "linkname1":"IntelliSign",
+                "button":false
+
+            }
+        ]
     },
     "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."
+        "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.",
+        "links":[
+            {
+                "link1":"https://github.com/Bridgeconn/vachan-api/blob/version-2/docs/AccessManagement-RBAC.md",
+                "linkname1":"Access Management",
+                "button":"false"
+            },
+
+            {
+                "link2":"https://github.com/Bridgeconn/vachan-api/blob/version-2/app/auth/api-permissions.csv",
+                "linkname2":"API Permissions",
+                "button":"false"
+            },
+
+            {
+                "link3":"https://github.com/Bridgeconn/vachan-api/blob/version-2/app/auth/access_rules.json",
+                "linkname3":"Access Rules",
+                "button":"false"
+            }
+        ]
     },
     "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."
+        "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.",
+        "links":[
+            {
+                "link1":"",
+                "linkname1":"GraphQL",
+                "button":"false"
+            }
+        ]
     },
     "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."
+        "content":"Vachan Engine microservices architecture is broken down into a set of independently 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.",
+        "links":[
+            {
+                "link1":"",
+                "linkname1":"Microservices",
+                "button":"false"
+            }
+        ]
     }
 }

app/static/scripts/services.js

@@ -30,16 +30,45 @@ const delay = ms => new Promise(res => setTimeout(res, ms));
 
 async function setServiceContent(serviceName) {
     await loadSeriveData();
-    const currentData = serviceContent[serviceName]
-    if (currentData){
+    const currentData = serviceContent[serviceName];
+    if (currentData) {
         serviceHeader.innerText = currentData.title;
         serviceBody.innerText = currentData.content;
-    } else{
+
+        // Check if links exist in the JSON data
+        if (currentData.links && currentData.links.length > 0) {
+            const linkContainer = document.createElement('div');
+            linkContainer.classList.add('service-link-container');
+
+            // Iterate through the links and create anchor elements
+            currentData.links.forEach((linkData, index) => {
+                const linkElement = document.createElement('a');
+                linkElement.href = linkData[`link${index + 1}`]; // Access link1, link2, etc.
+                linkElement.target = "_blank"; // Opens link in a new tab
+                linkElement.innerText = linkData[`linkname${index + 1}`] || 'Learn More'; // Use linkname or default text
+                linkContainer.appendChild(linkElement);
+
+
+                if (index < currentData.links.length - 1) {
+                    const separator = document.createElement('span');
+                    separator.innerText = ' | ';
+                    linkContainer.appendChild(separator);
+                }
+            });
+
+            linkContainer.style.marginTop = '10px'; // Adjust the value as needed
+
+
+            // Append the link container to the service card's body
+            serviceBody.appendChild(linkContainer);
+        }
+    } else {
         // failed to get data
-        serviceBody.innerText = 'something went wrong! Failed to load data';
+        serviceBody.innerText = 'Something went wrong! Failed to load data.';
     }
 }
 
+
 let lastClickedSection;
 
 async function handleServiceClicked(serviceName) {

app/templates/landing_page.html

@@ -52,7 +52,6 @@
 
 
   <link rel="mask-icon" href="http://localhost:1313/favicon.svg" color="">
-  <link rel="manifest" href="http://localhost:1313/site.webmanifest">
 
 
 
@@ -105,6 +104,7 @@
 </head>
 
 <body>
+  <!-- Navigation Bar -->
   <nav class="navbar sticky-top navbar-expand-xl navbar-light bg-light py-2" style="box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);">
     <div class="container-fluid">
       <a class="navbar-brand d-flex align-items-center" href="#About">
@@ -154,8 +154,6 @@
   </nav>
 
 
-
-
   <!-- Top Banner -->
   <a id="About"></a>
   <section class="section hero py-5">