feat: about page (#238)

- Add a new about page - Update header and footer based on new design - Readme updated
inlivedev · Jul 3, 2024 · fa9b349 · fa9b349
1 parent a218782
commit fa9b349
Show file tree

Hide file tree

Showing 11 changed files with 346 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -42,24 +42,7 @@ This is a step by step for creating a new documentation content inside the `docs
 
 3. The last step is to ensure if the page is properly configured. You may check if the page link is already visible inside the sidebar menu on the left side, if the order of the page (when accessing from next and previous link) is the same as the order of the sidebar menu, and ensure if the page is actually a level 1 page (parent page) or a level 2 page (child page).
 
-<!-- ### Additional file for deployment on Kubernetes cluster
-We added some YAML file in folder k8s/development such as below:
-1. ingress-nginx.yaml is YAML deployment file to deploy ingres-nginx on our K8s cluster and only need to run once in each K8s cluster.
-2. ingress-service.yaml is YAML deployment file to deploy mapping of subdomain into ingress-nginx which is already deploy before, we need to make some adjustment if there is a changes in subdomain pointing.
-3. inlive-website is YAML deployment file to deploy each time there is push to dev branch by Cloud Build and deploy into our existing Kubernetes cluster.
-
-Also we added cloudbuild.yaml in root folder of the repository and this file used for Cloud Build after triggered by push to dev branch. And also we added Dockerfile in root folder of the repository and this file used for Cloud Build to build Docker image. -->
-
-
-### Testing
-We used [CodeceptJS](https://codecept.io/quickstart/) Playwright for testing end to end page to determine the flows of opening the pages are correct. Kindly see this [documentation](https://codecept.io/playwright/) for more information.
-1. `codecept.conf.js` file is for configuring the testing environment such as the url testing as we use localhost:1313 and the browser as chromium.
-2. `_test.js` file consists with a scenario of user's action taken on a page.
-3. To run the test, type `npm run codeceptjs` on your terminal and hit enter.
-
 ### URL
 
-- Dev [https://dev.inlive-website.pages.dev/](https://dev.inlive-website.pages.dev/)
+- Test [https://inlive-web.pages.dev/](https://inlive-web.pages.dev/)
 - Prod [https://inlive.app/](https://inlive.app/)
-
-
diff --git a/content/about/index.md b/content/about/index.md
@@ -0,0 +1,6 @@
+---
+title : "About"
+description: "Learn more about inLive"
+layout: "about"
+ogimage: /images/general/og-image.png
+---
diff --git a/themes/inlive/layouts/page/about.html b/themes/inlive/layouts/page/about.html
diff --git a/themes/inlive/layouts/partials/docs/sidebar.html b/themes/inlive/layouts/partials/docs/sidebar.html
@@ -1,5 +1,5 @@
 <section
-  class="h-14 w-full sticky top-16 lg:hidden bg-white px-4 py-3 flex items-center justify-between z-10 border-b border-b-gray-300">
+  class="h-14 w-full sticky top-16 lg:hidden backdrop-blur-sm bg-white bg-opacity-[85%] px-4 py-3 flex items-center justify-between z-10 border-b border-b-gray-300">
   <strong class="font-semibold text-sm leading-8 text-gray-600">Developer Portal</strong>
   <div class="grid grid-cols-1 items-center gap-x-4">
     <button type="button" class="p-1 text-gray-500" aria-label="open sidebar navigation menu"

diff --git a/themes/inlive/layouts/partials/footer/footer.html b/themes/inlive/layouts/partials/footer/footer.html
@@ -1,63 +1,68 @@
 {{ $inliveStudioOrigin := getenv "_HUGO_INLIVE_STUDIO_ORIGIN" }}
 {{ $inliveEmail := getenv "_HUGO_INLIVE_EMAIL" }}
-<footer class="bg-gray-50 ">
-  <div class="mx-auto max-w-7xl py-8 lg:pb-16 px-4 lg:px-8 flex flex-col lg:flex-row gap-16 lg:gap-8">
+<footer class="bg-gradient-to-b from-[#0F172A] to-[#020617]">
+  <div class="mx-auto max-w-7xl pt-12 lg:pt-16 pb-16 lg:pb-32 px-4 lg:px-8 flex flex-col lg:flex-row gap-16 lg:gap-8">
     <div class="lg:order-2 flex-1 flex flex-col sm:flex-row gap-y-6 gap-x-4 lg:gap-8">
       <nav class="flex-1">
-        <b class="block mb-3 text-sm leading-6 font-semibold text-gray-900">Products</b>
+        <b class="block mb-3 text-sm leading-6 font-semibold text-slate-400">Products</b>
         <ul class="flex flex-row sm:flex-col gap-4 sm:gap-2">
           <li class="text-sm leading-6">
-            <a href="/room/" class="text-gray-500">inLive Room App</a>
+            <a href="/room/" class="text-slate-100">inLive Room App</a>
           </li>
           <li class="text-sm leading-6">
-            <a href="/api/" class="text-gray-500">inLive APIs</a>
+            <a href="/api/" class="text-slate-100">inLive APIs</a>
           </li>
         </ul>
       </nav>
       <nav class="flex-1">
-        <b class="block mb-3 text-sm leading-6 font-semibold text-gray-900">Inside inLive</b>
+        <b class="block mb-3 text-sm leading-6 font-semibold text-slate-400">Inside inLive</b>
         <ul class="flex flex-row sm:flex-col gap-4 sm:gap-2">
           <li class="text-sm leading-6">
-            <a href="mailto:{{ $inliveEmail }}" target="_blank" rel="noopener noreferrer" class="text-gray-500"
+            <a href="mailto:{{ $inliveEmail }}" target="_blank" rel="noopener noreferrer" class="text-slate-100"
               data-tracking-event="open-link" data-tracking-label="Contact link on the footer">Contact</a>
           </li>
           <li class="text-sm leading-6">
-            <a href="/pricing" class="text-gray-500" data-tracking-event="open-link"
+            <a href="/pricing" class="text-slate-100" data-tracking-event="open-link"
               data-tracking-label="Pricing navigation link on the footer">Pricing</a>
           </li>
           <li class="text-sm leading-6">
-            <a href="{{ $inliveStudioOrigin }}/login" class="text-gray-500" data-tracking-event="open-link"
+            <a href="{{ $inliveStudioOrigin }}/login" class="text-slate-100" data-tracking-event="open-link"
               data-tracking-label="InLive studio login navigation link on the footer">inLive Studio</a>
           </li>
         </ul>
       </nav>
       <nav class="flex-1">
-        <b class="block mb-3 text-sm leading-6 font-semibold text-gray-900">Resources</b>
+        <b class="block mb-3 text-sm leading-6 font-semibold text-slate-400">Resources</b>
         <ul class="flex flex-row sm:flex-col gap-4 sm:gap-2">
           <li class="text-sm leading-6">
-            <a href="/docs/introduction/" class="text-gray-500" data-tracking-event="open-link"
+            <a href="/docs/introduction/" class="text-slate-100" data-tracking-event="open-link"
               data-tracking-label="Docs navigation link on the footer">Docs</a>
           </li>
           <li class="text-sm leading-6">
-            <a href="https://github.com/orgs/inlivedev/discussions" class="text-gray-500"
+            <a href="https://github.com/orgs/inlivedev/discussions" class="text-slate-100"
               data-tracking-event="open-link" data-tracking-label="Discussion navigation link on the footer"
               target="_blank" rel="noopener noreferrer">Discussion</a>
           </li>
           <li class="text-sm leading-6">
-            <a href="https://api.inlive.app/apidocs" class="text-gray-500" data-tracking-event="open-link"
+            <a href="https://api.inlive.app/apidocs" class="text-slate-100" data-tracking-event="open-link"
               data-tracking-label="API References navigation link on the footer" target="_blank"
               rel="noopener noreferrer">API References</a>
           </li>
         </ul>
       </nav>
       <nav class="flex-1">
-        <b class="block mb-3 text-sm leading-6 font-semibold text-gray-900">Social Networks</b>
+        <b class="block mb-3 text-sm leading-6 font-semibold text-slate-400">Social Networks</b>
         <ul class="flex flex-row sm:flex-col gap-4 sm:gap-2">
           <li class="text-sm leading-6">
-            <a href="https://twitter.com/inliveapp" class="text-gray-500" data-tracking-event="open-link"
+            <a href="https://twitter.com/inliveapp" class="text-slate-100" data-tracking-event="open-link"
               data-tracking-label="Twitter navigation link on the footer" target="_blank"
               rel="noopener noreferrer">Twitter</a>
           </li>
+          <li class="text-sm leading-6">
+            <a href="https://www.linkedin.com/company/inliveapp" class="text-slate-100" data-tracking-event="open-link"
+              data-tracking-label="LinkedIn navigation link on the footer" target="_blank"
+              rel="noopener noreferrer">LinkedIn</a>
+          </li>
         </ul>
       </nav>
     </div>
@@ -66,35 +71,25 @@
         <a href="/" class="inline-block text-gray-700 text-5xl font-extrabold tracking-wide"
           aria-label="InLive footer logo">
           <svg width="160" height="48" viewBox="0 0 160 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g opacity="0.5" clip-path="url(#clip0_1995_1676)">
-              <path d="M30.707 16.8057H39.4109V44.6573H30.707V16.8057Z" fill="#121212" />
-              <path
-                d="M41.6173 16.8057H50.3212V20.8311H50.43C51.8986 18.2742 54.6194 15.935 59.5692 15.935C64.9544 15.935 68.5996 19.4714 68.5996 25.8361V44.6587H59.8957V28.6092C59.8957 24.4198 58.4272 23.0064 55.5438 23.0064C52.2251 23.0064 50.3212 24.6926 50.3212 28.5555V44.6573H41.6173V16.8057Z"
-                fill="#121212" />
-              <path d="M81.5989 17.0516V36.6601H91.2145V44.6573H71.8067V17.0516H81.5989Z" fill="#121212" />
-              <path d="M93.9607 16.8057H102.665V44.6573H93.9607V16.8057Z" fill="#121212" />
-              <path
-                d="M112.716 16.8057L118.373 35.193H118.482L124.14 16.8057H132.735L123.107 44.6573H113.532L103.904 16.8057H112.716Z"
-                fill="#121212" />
-              <path
-                d="M130.981 30.7308C130.981 22.571 136.095 15.8799 145.452 15.8799C154.918 15.8799 159.705 21.4827 159.705 31.764V33.07H139.687C139.74 36.9329 142.406 39.0544 145.671 39.0544C148.772 39.0544 150.077 37.6396 150.621 36.2262H159.487C157.91 41.8841 153.285 45.5831 145.452 45.5831C136.42 45.5816 130.981 39.4347 130.981 30.7308ZM139.739 27.6848H150.944C150.944 24.0947 148.823 22.1908 145.45 22.1908C142.133 22.1908 139.957 24.0947 139.739 27.6848Z"
-                fill="#121212" />
-              <path
-                d="M13.2614 25.6226C18.3214 25.6226 22.4233 21.5207 22.4233 16.4608C22.4233 11.4008 18.3214 7.29895 13.2614 7.29895C8.2015 7.29895 4.09961 11.4008 4.09961 16.4608C4.09961 21.5207 8.2015 25.6226 13.2614 25.6226Z"
-                fill="#121212" />
-              <path
-                d="M13.2608 29.7215C20.5845 29.7215 26.5216 23.7845 26.5216 16.4607C26.5216 9.137 20.5845 3.19995 13.2608 3.19995C5.93705 3.19995 0 9.137 0 16.4607C0 23.7845 5.93705 29.7215 13.2608 29.7215Z"
-                stroke="#121212" stroke-width="0.265018" stroke-miterlimit="10" />
+            <g clip-path="url(#clip0_1405_2645)">
+            <path d="M30.7068 16.8057H39.4107V44.6573H30.7068V16.8057Z" fill="#93A2B7"/>
+            <path d="M41.6171 16.8057H50.321V20.8311H50.4298C51.8984 18.2742 54.6192 15.935 59.569 15.935C64.9542 15.935 68.5994 19.4714 68.5994 25.8361V44.6587H59.8955V28.6092C59.8955 24.4198 58.427 23.0064 55.5436 23.0064C52.2249 23.0064 50.321 24.6926 50.321 28.5555V44.6573H41.6171V16.8057Z" fill="#93A2B7"/>
+            <path d="M81.5987 17.0516V36.6601H91.2143V44.6573H71.8065V17.0516H81.5987Z" fill="#93A2B7"/>
+            <path d="M93.9606 16.8057H102.664V44.6573H93.9606V16.8057Z" fill="#93A2B7"/>
+            <path d="M112.715 16.8057L118.373 35.193H118.482L124.14 16.8057H132.735L123.107 44.6573H113.532L103.904 16.8057H112.715Z" fill="#93A2B7"/>
+            <path d="M130.981 30.7308C130.981 22.571 136.095 15.8799 145.452 15.8799C154.917 15.8799 159.705 21.4827 159.705 31.764V33.07H139.686C139.74 36.9329 142.406 39.0544 145.671 39.0544C148.772 39.0544 150.076 37.6396 150.621 36.2262H159.487C157.91 41.8841 153.285 45.5831 145.452 45.5831C136.42 45.5816 130.981 39.4347 130.981 30.7308ZM139.739 27.6848H150.944C150.944 24.0947 148.823 22.1908 145.45 22.1908C142.133 22.1908 139.956 24.0947 139.739 27.6848Z" fill="#93A2B7"/>
+            <path d="M13.2608 25.6225C18.3208 25.6225 22.4227 21.5206 22.4227 16.4607C22.4227 11.4007 18.3208 7.29883 13.2608 7.29883C8.20089 7.29883 4.099 11.4007 4.099 16.4607C4.099 21.5206 8.20089 25.6225 13.2608 25.6225Z" fill="#93A2B7"/>
+            <path d="M13.2608 29.7217C20.5845 29.7217 26.5216 23.7847 26.5216 16.461C26.5216 9.13725 20.5845 3.2002 13.2608 3.2002C5.93705 3.2002 0 9.13725 0 16.461C0 23.7847 5.93705 29.7217 13.2608 29.7217Z" stroke="#93A2B7" stroke-width="0.265018" stroke-miterlimit="10"/>
             </g>
             <defs>
-              <clipPath id="clip0_1995_1676">
-                <rect width="160" height="48" fill="white" />
-              </clipPath>
+            <clipPath id="clip0_1405_2645">
+            <rect width="160" height="48" fill="white"/>
+            </clipPath>
             </defs>
           </svg>
         </a>
       </div>
-      <p class="mt-6 lg:mt-8 text-sm leading-6 text-gray-500">&copy; {{ now.Year }}, inLive. All rights reserved</p>
+      <p class="mt-6 text-sm leading-6 text-slate-400">&copy; {{ now.Year }}, inLive</p>
     </div>
   </div>
 </footer>
diff --git a/themes/inlive/layouts/partials/header/header.html b/themes/inlive/layouts/partials/header/header.html
@@ -1,4 +1,4 @@
-<header class="w-full sticky top-0 z-10 bg-white">
+<header class="w-full sticky top-0 z-10 backdrop-blur-sm bg-white bg-opacity-[85%]">
   <div class="max-w-7xl mx-auto">
     <div class="p-4 xl:px-8 xl:py-5 flex items-center justify-between">
       <div class="flex items-center">

diff --git a/themes/inlive/layouts/partials/header/home.html b/themes/inlive/layouts/partials/header/home.html
@@ -4,7 +4,7 @@
   }
 </style>
 
-<header class="w-full sticky top-0 z-10 bg-white header-content">
+<header class="w-full sticky top-0 z-10 backdrop-blur-sm bg-white bg-opacity-[85%] header-content">
   <div class="max-w-7xl mx-auto">
     <div class="p-4 xl:px-8 xl:py-5 flex items-center justify-between">
       <div class="flex items-center">

diff --git a/themes/inlive/layouts/partials/navbar/mobile-navbar.html b/themes/inlive/layouts/partials/navbar/mobile-navbar.html
@@ -21,6 +21,9 @@
         <li class="mb-6 font-semibold text-base flex items-center justify-between relative">
           <a href="/#use-case" class="text-slate-700">Use Case</a>
         </li>
+        <li class="mb-6">
+          <a href="/about/" class="font-semibold text-base text-slate-700">About</a>
+        </li>
         <li class="mb-6">
           <a class="font-semibold text-base text-slate-700 pointer-events-none mb-3 block" aria-disabled="true">
             Products

diff --git a/themes/inlive/layouts/partials/navbar/navbar.html b/themes/inlive/layouts/partials/navbar/navbar.html
@@ -13,6 +13,10 @@
         Use Case
       </a>
     </li>
+    <li>
+      <a href="/about/"
+        class="py-2 px-5 font-semibold text-sm leading-6 inline-flex items-center text-slate-700 rounded-md hover:text-rose-700 hover:bg-rose-50">About</a>
+    </li>
     <li>
       <div id="products-nav-dropdown" class="relative group" aria-controls="products-nav-dropdown-body"
         aria-expanded="false">

diff --git a/themes/inlive/static/images/about/using-inlive.png b/themes/inlive/static/images/about/using-inlive.png
diff --git a/themes/inlive/static/images/about/webrtc-is-complex.png b/themes/inlive/static/images/about/webrtc-is-complex.png