infraspecdev · ashwinimanoj · Apr 3, 2025 · Apr 3, 2025 · May 26, 2025 · May 26, 2025
diff --git a/assets/scss/components/_testimonial.scss b/assets/scss/components/_testimonial.scss
@@ -0,0 +1,71 @@
+.sticky-note {
+    max-width: 600px;
+    margin: 0 auto;
+    height: 100%;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+    position: relative;
+    font-family: "Noto Sans", sans-serif;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+.sticky-description {
+    font-style: italic;
+    height: 560 px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    padding: 2rem;
+    padding-top: 3rem;
+}
+
+.sticky-description::before {
+    content: "“";
+    position: absolute;
+    top: 0.5rem;
+    left: 1rem;
+    font-size: 4rem;
+    line-height: 1;
+    font-family: Georgia, serif;
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.sticky-quote-end {
+  position: absolute;
+  bottom: -2rem;
+  right: 1rem;
+  font-size: 4rem;
+  font-family: Georgia, serif;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.sticky-author {
+    font-size: 18px;
+    font-family: 'Inter', sans-serif;
+    font-weight: bold;
+    text-align: center;
+    color: $black;
+}
+
+.sticky-header {
+    background-color: #f6b60b;
+    padding: 5px;
+    border-radius: 5px 5px 0 0;
+}
+
+.sticky-title {
+    font-weight: bold;
+    color: white;
+    font-size: 16px;
+}
+
+.sticky-content {
+    flex-grow: 1;
+    padding: 10px;
+    overflow-y: auto;
+}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -53,6 +53,7 @@ $sub-footer-text-color: $white;
 @import 'components/feature';
 @import 'components/social';
 @import 'components/blog-carousel';
+@import 'components/testimonial';
 
 // Pages
 @import 'pages/home';

diff --git a/data/testimonial.json b/data/testimonial.json
@@ -0,0 +1,18 @@
+[
+    {
+        "author": "Ranjan Sakalley",
+        "company": "Vedantu",
+        "image": "images/company/vedantu_1748248129492.png",
+        "url": "https://www.vedantu.com/",
+        "designation": "Head of Engineering",
+        "description": "Working with the Infraspec team has been a very satisfying experience! They were completely dedicated to our mission and our product. Their commitment and dedication to our efforts felt like they are a part of our core team rather than being external consultants. <br><br> They are a high quality technical team. They were able to take on and deliver projects with both familiar and unfamiliar technologies. Their commitment to writing clean code and good automated tests helped our team level up our own coding skills."
+    },
+    {
+        "author": "Karthik Chandrasekariah",
+        "company": "Zinc Learning Labs",
+        "image": "images/company/zinc_learning_labs.png",
+        "url": "https://www.zinclearninglabs.com/",
+        "designation": "CTO",
+        "description": "Infraspec helped us improve operational efficiency by completely owning and building important products that our operations team needed. They owned multiple initiatives in the organization including continuous delivery audit for teams, helped in setting up processes for change management, securing & improving resilience of public APIs.<br><br>They go the extra mile to understand the requirements at depth and utilize that knowledge to make appropriate technology choices. They constantly challenged the status quo and pushed for technical excellence. They were always aligned with our culture and values."
+    }
+]
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta property="og:image" content="https://www.infraspec.dev/images/logo/infraspec-logo-mobile-medium.svg" />
   <meta name="keywords" content="{{ .Site.Params.seo.meta_keywords }}">
   <title>{{ block "title" . }}{{ .Params.meta_title | default (printf "%s - %s" .Title .Site.Title) }}{{ end }}</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -16,6 +17,7 @@
 
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300..700&display=swap">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
 
   <!-- CSS-->
   {{ $css_options := dict "targetPath" "css/style.css" "enableSourceMap" (not hugo.IsProduction) }}

diff --git a/layouts/index.html b/layouts/index.html
@@ -7,12 +7,15 @@
       <div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
         {{ .Content }}
         {{ if .Site.Params.homepage.show_contact_box }}
-          {{ partialCached "call.html" (dict "site" .Site "context" . "show_button" .Site.Params.homepage.show_contact_button) }}
+        {{ partialCached "call.html" (dict "site" .Site "context" . "show_button"
+        .Site.Params.homepage.show_contact_button) }}
         {{ end }}
       </div>
       {{ if .Params.intro_image }}
       <div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
-        <img alt={{ .Title }} class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}" src="{{ .Params.intro_image | relURL }}" />
+        <img alt={{ .Title }}
+          class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}"
+          src="{{ .Params.intro_image | relURL }}" />
       </div>
       {{ end }}
     </div>
@@ -33,7 +36,7 @@
     {{ if .Site.Params.homepage.show_services_button }}
     <div class="row justify-content-center">
       <div class="col-auto">
-        <a class="button button-primary" href="{{ "services/" | relURL }}">View All Services</a>
+        <a class="button button-primary" href="{{ " services/" | relURL }}">View All Services</a>
       </div>
     </div>
     {{ end }}
@@ -49,7 +52,8 @@
       <div class="col-12 col-md-6 col-lg-4 mb-2">
         <div class="feature">
           {{ if .image }}
-          <div class="feature-image"><img width="100" height="100" alt="{{ .Title }} logo" src="{{ .image | relURL }}" /></div>
+          <div class="feature-image"><img width="100" height="100" alt="{{ .Title }} logo"
+              src="{{ .image | relURL }}" /></div>
           {{ end }}
           <h2 class="feature-title">{{ .title }}</h2>
           <div class="feature-content">
@@ -63,34 +67,24 @@ <h2 class="feature-title">{{ .title }}</h2>
 </div>
 {{end}}
 
+
 <div class="strip">
   <div class="container pt-6 pb-6 pt-md-10 pb-md-10">
-    <div class="d-flex flex-column justify-content-center testimonials">
-      <div class="testimonial">
-        <h2 class="mb-3">Testimonials</h2>
-        <p class="testimonial-heading">Ranjan Sakalley - Head of Engineering at Vedantu</p>
-
-        <div class="testimonial-body">
-          <p><b>“</b>Infraspec helped us improve operational efficiency by completely owning and building important products that our operations team needed. They owned multiple initiatives in the organization including continuous delivery audit for teams, helped in setting up processes for change management, securing & improving resilience of public APIs.</p>
-
-          <p>They go the extra mile to understand the requirements at depth and utilize that knowledge to make appropriate technology choices. They constantly challenged the status quo and pushed for technical excellence. They were always aligned with our culture and values.<b>"</b></p>
-        </div>
-      </div>
-      <div class="testimonial mt-4">
-        <p class="testimonial-heading">Karthik Chandrasekariah - CTO at Zinc Learning Labs</p>
-
-        <div class="testimonial-body">
-          <p><b>“</b>Working with the Infraspec team has been a very satisfying experience! They were completely dedicated to our mission and our product. Their commitment and dedication to our efforts felt like they are a part of our core team rather than being external consultants. They are a high quality technical team. They were able to take on and deliver projects with both familiar and unfamiliar technologies. Their commitment to writing clean code and good automated tests helped our team level up our own coding skills.<b>"</b></p>
-        </div>
+    <div class="row justify-content-between align-items-stretch g-5">
+      {{ range .Site.Data.testimonial }}
+      <div class="col-12 col-md-5 d-flex">
+        {{ partial "testimonial.html" . }}
       </div>
+      {{ end }}
     </div>
   </div>
 </div>
 
 <div class="strip strip-grey">
   <div class="container-fluid py-5 m-0">
     <div class="row g-0">
-      <div class="col-12 col-md-2 rounded-left roun p-0 d-flex align-items-center justify-content-center blog-carousel-title">
+      <div
+        class="col-12 col-md-2 rounded-left roun p-0 d-flex align-items-center justify-content-center blog-carousel-title">
         <h2 class="text-center">Our Latest <br> Posts</h2>
       </div>
       <div class="col-12 col-md-10 rounded-right p-0">
@@ -105,4 +99,4 @@ <h2 class="text-center">Our Latest <br> Posts</h2>
 {{ end }}
 
 {{ define "footer_js" }}
-{{ end }}
+{{ end }}
diff --git a/layouts/partials/testimonial.html b/layouts/partials/testimonial.html
@@ -0,0 +1,19 @@
+<div class="sticky-note">
+  <div class="sticky-content">
+    <div class="sticky-description"> 
+      {{ .description | safeHTML }} 
+      <span class="sticky-quote-end">”</span>
+    </div>
+    <hr>
+    <div class="sticky-author">
+      <br> {{ .author }} - {{ .designation }} at {{ .company}}
+      <br>
+      <br> <div class="feature-image">
+              <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
+                <img width="100" alt="{{ .company }} logo" 
+                src="{{ .image | relURL }}" />
+              </a>
+           </div>
+    </div>
+  </div>
+</div>
diff --git a/static/images/company/vedantu_1748248129492.png b/static/images/company/vedantu_1748248129492.png
diff --git a/static/images/company/zinc_learning_labs.png b/static/images/company/zinc_learning_labs.png