Skip to content

Commit f1c8e68

Browse files
ashwinimanojashwinimanoj
committed
WIP | Sticky note for testimonials
1 parent 29f25c9 commit f1c8e68

File tree

5 files changed

+108
-9
lines changed

5 files changed

+108
-9
lines changed

‎assets/scss/components/_sticky-note.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* General styles for the sticky note */
2+
.sticky-note {
3+
width: 100%;
4+
height: 100%;
5+
background-color: $white-offset;
6+
border-radius: 10px;
7+
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
8+
position: relative;
9+
font-family: 'Caveat', cursive;
10+
padding: 10px;
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
15+
/* Header of the sticky note */
16+
.sticky-header {
17+
background-color: #f6b60b;
18+
padding: 5px;
19+
border-radius: 5px 5px 0 0;
20+
}
21+
22+
.sticky-title {
23+
font-weight: bold;
24+
color: white;
25+
font-size: 16px;
26+
}
27+
28+
/* Content area of the sticky note */
29+
.sticky-content {
30+
flex-grow: 1;
31+
padding: 10px;
32+
overflow-y: auto;
33+
}
34+
35+
/* Make the sticky note text look more like handwriting */
36+
.sticky-content p {
37+
font-size: 14px;
38+
line-height: 1.5;
39+
color: #333;
40+
margin: 0;
41+
}
42+
43+
/* Optional hover effect */
44+
.sticky-note:hover {
45+
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4);
46+
transform: scale(1.05);
47+
transition: all 0.3s ease;
48+
}

‎assets/scss/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ $sub-footer-text-color: $white;
5353
@import 'components/feature';
5454
@import 'components/social';
5555
@import 'components/blog-carousel';
56+
@import 'components/sticky-note';
5657

5758
// Pages
5859
@import 'pages/home';

‎data/testimonial.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[
2+
{
3+
"author": "Karthik Chandrasekariah",
4+
"company": "Zinc Learning Labs",
5+
"designation": "CTO",
6+
"description": "<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> <br><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 technicalexcellence. They were always aligned with our culture and values.<b>\"</b></p>"
7+
},
8+
{
9+
"author": "Ranjan Sakalley",
10+
"company": "Vedantu",
11+
"designation": "Head of Engineering",
12+
"description": "<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. <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></p>"
13+
}
14+
]

‎layouts/index.html

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@
77
<div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
88
{{ .Content }}
99
{{ if .Site.Params.homepage.show_contact_box }}
10-
{{ partialCached "call.html" (dict "site" .Site "context" . "show_button" .Site.Params.homepage.show_contact_button) }}
10+
{{ partialCached "call.html" (dict "site" .Site "context" . "show_button"
11+
.Site.Params.homepage.show_contact_button) }}
1112
{{ end }}
1213
</div>
1314
{{ if .Params.intro_image }}
1415
<div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
15-
<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 }}" />
16+
<img alt={{ .Title }}
17+
class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}"
18+
src="{{ .Params.intro_image | relURL }}" />
1619
</div>
1720
{{ end }}
1821
</div>
@@ -33,7 +36,7 @@
3336
{{ if .Site.Params.homepage.show_services_button }}
3437
<div class="row justify-content-center">
3538
<div class="col-auto">
36-
<a class="button button-primary" href="{{ "services/" | relURL }}">View All Services</a>
39+
<a class="button button-primary" href="{{ " services/" | relURL }}">View All Services</a>
3740
</div>
3841
</div>
3942
{{ end }}
@@ -49,7 +52,8 @@
4952
<div class="col-12 col-md-6 col-lg-4 mb-2">
5053
<div class="feature">
5154
{{ if .image }}
52-
<div class="feature-image"><img width="100" height="100" alt="{{ .Title }} logo" src="{{ .image | relURL }}" /></div>
55+
<div class="feature-image"><img width="100" height="100" alt="{{ .Title }} logo"
56+
src="{{ .image | relURL }}" /></div>
5357
{{ end }}
5458
<h2 class="feature-title">{{ .title }}</h2>
5559
<div class="feature-content">
@@ -71,26 +75,48 @@ <h2 class="mb-3">Testimonials</h2>
7175
<p class="testimonial-heading">Ranjan Sakalley - Head of Engineering at Vedantu</p>
7276

7377
<div class="testimonial-body">
74-
<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>
78+
<p><b>“</b>Infraspec helped us improve operational efficiency by completely owning and building important
79+
products that our operations team needed. They owned multiple initiatives in the organization including
80+
continuous delivery audit for teams, helped in setting up processes for change management, securing &
81+
improving resilience of public APIs.</p>
7582

76-
<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>
83+
<p>They go the extra mile to understand the requirements at depth and utilize that knowledge to make
84+
appropriate technology choices. They constantly challenged the status quo and pushed for technical
85+
excellence. They were always aligned with our culture and values.<b>"</b></p>
7786
</div>
7887
</div>
7988
<div class="testimonial mt-4">
8089
<p class="testimonial-heading">Karthik Chandrasekariah - CTO at Zinc Learning Labs</p>
8190

8291
<div class="testimonial-body">
83-
<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>
92+
<p><b>“</b>Working with the Infraspec team has been a very satisfying experience! They were completely
93+
dedicated to our mission and our product. Their commitment and dedication to our efforts felt like they are
94+
a part of our core team rather than being external consultants. They are a high quality technical team. They
95+
were able to take on and deliver projects with both familiar and unfamiliar technologies. Their commitment
96+
to writing clean code and good automated tests helped our team level up our own coding skills.<b>"</b></p>
8497
</div>
8598
</div>
8699
</div>
87100
</div>
88101
</div>
89102

103+
<div class="strip">
104+
<div class="container-fluid py-5 m-0">
105+
<div class="row">
106+
{{ range .Site.Data.testimonial }}
107+
<div class="col-8 col-md-4">
108+
{{ partial "sticky-note.html" . }}
109+
</div>
110+
{{ end }}
111+
</div>
112+
</div>
113+
</div>
114+
90115
<div class="strip strip-grey">
91116
<div class="container-fluid py-5 m-0">
92117
<div class="row g-0">
93-
<div class="col-12 col-md-2 rounded-left roun p-0 d-flex align-items-center justify-content-center blog-carousel-title">
118+
<div
119+
class="col-12 col-md-2 rounded-left roun p-0 d-flex align-items-center justify-content-center blog-carousel-title">
94120
<h2 class="text-center">Our Latest <br> Posts</h2>
95121
</div>
96122
<div class="col-12 col-md-10 rounded-right p-0">
@@ -105,4 +131,4 @@ <h2 class="text-center">Our Latest <br> Posts</h2>
105131
{{ end }}
106132

107133
{{ define "footer_js" }}
108-
{{ end }}
134+
{{ end }}

‎layouts/partials/sticky-note.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="sticky-note">
2+
<div class="sticky-content">
3+
{{ .description | safeHTML }}
4+
<div class="text-center">
5+
<br> - {{ .author }}
6+
<br>{{ .designation }}
7+
<br> {{ .company}}
8+
</div>
9+
</div>
10+
</div>

0 commit comments

Comments
 (0)