Fix css of sticky note

Author: ashwinimanoj

assets/scss/components/_sticky-note.scss renamed to assets/scss/components/_testimonial.scss

@@ -2,16 +2,32 @@
 .sticky-note {
     width: 100%;
     height: 100%;
-    background-color: $white-offset;
+    background-color: $white;
     border-radius: 10px;
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
     position: relative;
-    font-family: 'Caveat', cursive;
+    font-family: "Noto Sans", sans-serif;
     padding: 10px;
     display: flex;
     flex-direction: column;
 }
 
+.sticky-description {
+    font-style: italic;
+    height: 420px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    display: flex;
+    align-items: flex-start;
+}
+
+.sticky-author {
+    font-family: 'Inter', sans-serif;
+    font-weight: bold;
+    text-align: center;
+    color: $black;
+}
+
 /* Header of the sticky note */
 .sticky-header {
     background-color: #f6b60b;
@@ -32,17 +48,9 @@
     overflow-y: auto;
 }
 
-/* Make the sticky note text look more like handwriting */
-.sticky-content p {
-    font-size: 14px;
-    line-height: 1.5;
-    color: #333;
-    margin: 0;
-}
-
 /* Optional hover effect */
 .sticky-note:hover {
     box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4);
     transform: scale(1.05);
-    transition: all 0.3s ease;
-}
+    transition: all 0.5s ease;
+}

assets/scss/style.scss

@@ -53,7 +53,7 @@ $sub-footer-text-color: $white;
 @import 'components/feature';
 @import 'components/social';
 @import 'components/blog-carousel';
-@import 'components/sticky-note';
+@import 'components/testimonial';
 
 // Pages
 @import 'pages/home';

data/testimonial.json

@@ -1,14 +1,14 @@
 [
+       {
+        "author": "Ranjan Sakalley",
+        "company": "Vedantu",
+        "designation": "Head of Engineering",
+        "description": "<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. <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.</b>\"</b>"
+    },
     {
         "author": "Karthik Chandrasekariah",
         "company": "Zinc Learning Labs",
         "designation": "CTO",
-        "description": "<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.<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 technicalexcellence. They were always aligned with our culture and values.<b>\"</b>"
-    },
-    {
-        "author": "Ranjan Sakalley",
-        "company": "Vedantu",
-        "designation": "Head of Engineering",
-        "description": "<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. <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.<b>\"</b>"
+        "description": "<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.<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 technicalexcellence. They were always aligned with our culture and values.</b>\"</b>"
     }
 ]

layouts/_default/baseof.html

@@ -16,6 +16,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) }}

layouts/index.html

@@ -100,19 +100,19 @@ <h2 class="mb-3">Testimonials</h2>
   </div>
 </div>
 
-<div class="strip">
-  <div class="container-fluid py-5 m-0">
+<div class="strip strip-grey">
+  <div class="container pt-6 pb-6 pt-md-10 pb-md-10">
     <div class="row">
       {{ range .Site.Data.testimonial }}
-      <div class="col-8 col-md-4">
-        {{ partial "sticky-note.html" . }}
+      <div class="col-12 col-md-4">
+        {{ partial "testimonial.html" . }}
       </div>
       {{ end }}
     </div>
   </div>
 </div>
 
-<div class="strip strip-grey">
+<div class="strip">
   <div class="container-fluid py-5 m-0">
     <div class="row g-0">
       <div

layouts/partials/sticky-note.html

@@ -0,0 +1,9 @@
+<div class="sticky-note">
+  <div class="sticky-content">
+    <div class="sticky-description"> {{ .description | safeHTML }} </div>
+    <hr>
+    <div class="sticky-author">
+      <br> {{ .author }} - {{ .designation }} at {{ .company}}
+    </div>
+  </div>
+</div>