feat: add lightbox + landing for case-study (#35)

* Power Digital Case Study Landing * lightbox * Add cookie script + move to global * fix: correct wording * update lightbox igm --------- Co-authored-by: kristopherray <kris@kristopherray.com> Co-authored-by: yangci <yangciouou@gmail.com>
masterpointio · Nov 7, 2024 · 44a6ea2 · 44a6ea2
1 parent 13fb6f1
commit 44a6ea2
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 2 deletions.
diff --git a/assets/css/custom.scss b/assets/css/custom.scss
@@ -1094,7 +1094,7 @@ footer {
 }
 
 .mfp-bg {
-  background: $default;
+  background: darken($pine,10%);
 }
 
 //* {
@@ -2533,6 +2533,10 @@ footer {
     }
   }
 
+  main {
+    padding:0;
+  }
+
   &.noBannerImg {
     #banner {
       &:before {
@@ -2561,3 +2565,21 @@ footer {
     }
   }
 }
+
+.landing-banner {
+  #banner h1, #banner h2 {
+    text-transform: none;
+    font-size:80px;
+  }
+
+  #banner {
+    .bannerTxtBx {
+      max-width: none;
+    }
+  }
+
+}
+
+.mfp-close-btn-in .mfp-close {
+  color:#fff;
+}
diff --git a/content/landing/power-digital-case-study.md b/content/landing/power-digital-case-study.md
@@ -0,0 +1,21 @@
+---
+title: Subscribe for Updates
+banner_tagline: "How Masterpoint Helped Power Digital"
+banner_title: "<span class='text-gradient'>Achieve 10x Reduction in Infrastructure Automation Costs</span>"
+banner_text: "Download the case study PDF to learn more!"
+description: "Download the case study PDF to learn more!"
+signupCTA: "Signup for MasterPoint Notes:"
+banner_image: /img/landing/power-digital-case-study.png
+sitemap:
+  priority: 0
+id: landing
+url: power-digital-case-study
+banner_button: /download/power-digital-case-study.pdf
+banner_button_text: Download Our PDF Case Study
+---
+
+[Power Digital Marketing](https://powerdigital.com), a rapidly growing digital marketing agency, faced scalability challenges with their existing Terraform Cloud infrastructure. With a complex setup supporting numerous clients and a growing number of resources, they needed a far more stable, cost-effective solution. Masterpoint stepped in, leveraging their deep Terraform expertise to migrate Power Digital from Terraform Cloud to Spacelift, a more flexible and cost-effective platform. Through careful planning and execution, Masterpoint successfully migrated over 43,000 resources, optimized the infrastructure, and implemented automation to support Power Digital Marketing’s future growth.
+
+> The result was a **10x reduction** in infrastructure automation costs, **significantly faster** plan and apply cycles, and a **more resilient**, scalable infrastructure that can easily onboard new clients.
+
+<a href="/download/power-digital-case-study.pdf" class="button">Download Our PDF Case Study &rsaquo;</a>
diff --git a/content/thank-you/download.md b/content/thank-you/download.md
@@ -0,0 +1,5 @@
+---
+title: Thanks!
+description: >-
+   Thank you for downloading our case study! We're excited to share our experience and results with the development community and clients alike! If you have any questions feel free to reach out via <a href="mailto:hello@masterpoint.io">hello@masterpoint.io</a>
+---
diff --git a/layouts/index.html b/layouts/index.html
@@ -81,13 +81,15 @@ <h3>
 
 </main>
 
+
 {{ partial "schedule-assessment.html" . }}
 
 {{ partial "signup-section.html" .}}
 
 {{ partial "footer.html" . }}
 
 {{ partial "scripts.html" . }}
+<!-- On Load Lightbox -->
 
 <script>
     if (window.netlifyIdentity) {

diff --git a/layouts/landing/list.html b/layouts/landing/list.html
diff --git a/layouts/landing/single.html b/layouts/landing/single.html
@@ -0,0 +1,69 @@
+{{ partial "head.html" . }}
+<body {{ if .Params.id }}id='{{ .Params.id }}' {{end}}
+    class="page-default sections-template {{if .Params.banner_image}} withBannerImg{{else}}noBannerImg {{end}} landing-single landing-banner">
+    {{ partial "header.html" . }}
+    <section id="banner">
+        {{if .Params.banner_image}} <div class="banner-image bg-image"><img src="{{.Params.banner_image}}" /></div>
+        {{end}}
+        <div class="container">
+            <div class="row">
+                <div class="col col-12 {{if .Params.banner_image}}col-md-9{{else}} text-center{{end}}">
+                    <div class="bannerTxtBx aos-item" data-aos="fade-right">
+                        {{if .Params.banner_tagline}}
+                        <div class="bannerTagline">
+                            {{.Params.banner_tagline | safeHTML}}
+                        </div>
+                        {{end}}
+
+                        <h2>
+                            {{if .Params.banner_title}}
+                            {{.Params.banner_title|safeHTML}}
+                            {{ else}}
+                            {{ .Title | safeHTML }}
+                            {{end}}
+                        </h2>
+                        {{if .Params.banner_text}}
+                        <div class="bannerTxt">{{ .Params.banner_text|safeHTML}}</div>
+                        {{end}}
+
+                        {{  if .Params.banner_button }}
+                        <a href="{{ .Params.banner_button }}" class="button mt-3">{{ .Params.banner_button_text }} &rsaquo;</a>
+                        {{end}}
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="video-wrapper"><iframe src="https://player.vimeo.com/video/821330736?background=1&muted=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script></div>
+    </section>
+
+    <main>
+        <div class="container">
+
+            <div class="row">
+                <div class="col col-12">
+                    <div class="entry">
+                        <div class="singleContent">
+                            {{.Content}}
+
+                            {{ if .Params.callout }}
+                            <div id="callout">
+                                {{ .Params.callout | safeHTML }}
+                            </div>
+                            {{end}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+{{ partial "signup-section.html" . }}
+
+{{ partial "footer.html" . }}
+
+{{ partial "scripts.html" . }}
+
+</body>
+</html>
diff --git a/layouts/partials/lightbox.html b/layouts/partials/lightbox.html
@@ -0,0 +1,32 @@
+<div id="popup" class="mfp-hide">
+    <a href="/power-digital-case-study/"><img src="/img/lightbox.png" target="_blank" alt="Read Our Case Study"></a>
+</div>
+
+<script>
+// Function to get the value of a specific cookie by name
+function getCookie(name) {
+    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+    return match ? match[2] : null;
+}
+
+// Function to set a cookie with a specified name, value, and expiration in days
+function setCookie(name, value, days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // Convert days to milliseconds
+    document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
+}
+
+// Check if the 'popupShown' cookie is set
+if (!getCookie("popupShown")) {
+    // If the cookie is not set, show the popup and then set the cookie
+    $.magnificPopup.open({
+        items: {
+            src: '#popup',
+            type: 'inline'
+        }
+    });
+
+    // Set the 'popupShown' cookie with a 7-day expiration
+    setCookie("popupShown", "true", 7);
+}
+</script>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -9,4 +9,6 @@
 <script>
     deferimg('img[data-src],picture,video,audio')
     Defer.dom('img.lazy', 200, 'loaded');
-</script>
+</script>
+
+{{ partial "lightbox.html" .}}
diff --git a/static/download/power-digital-case-study.pdf b/static/download/power-digital-case-study.pdf
diff --git a/static/img/landing/power-digital-case-study.png b/static/img/landing/power-digital-case-study.png
diff --git a/static/img/lightbox.png b/static/img/lightbox.png