From 1a142ae3d88aef39a13b1c4c805d6361cb429262 Mon Sep 17 00:00:00 2001
From: ishavyas9 <ishav@lambdatest.com>
Date: Wed, 18 Dec 2024 17:15:32 +0530
Subject: [PATCH] storylane demo added

---
 docs/smartui-pdf-comparison.md | 17 +++++++++++++++++
 src/css/custom.css             |  4 +++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/docs/smartui-pdf-comparison.md b/docs/smartui-pdf-comparison.md
index 982b3562d..3265f6ac2 100644
--- a/docs/smartui-pdf-comparison.md
+++ b/docs/smartui-pdf-comparison.md
@@ -54,6 +54,23 @@ This functionality is exclusive to our enterprise plan subscribers on SmartUI. F
 
 In the following section, we will walk you through the process of conducting your first Visual Regression test using LambdaTest's SmartUI platform.
 
+<div className="ytframe"> 
+<div className="youtube" data-embed="H91z4j5_JvQ">
+    <div className="play-button"></div>
+</div>
+</div>
+
+## Getting Started with PDF Comparison
+
+
+
+<div className="storylane-iframe">
+  <script async src="https://js.storylane.io/js/v2/storylane.js"></script>
+  <div className="sl-embed">
+    <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/czorj4fbzohf?embed=inline" name="sl-embed" allow="fullscreen" allowfullscreen></iframe>
+  </div>
+</div>
+
 ## Step 1: Establishing a SmartUI Project
 
 To initiate a SmartUI PDF Comparison Project, adhere to the following instructions:
diff --git a/src/css/custom.css b/src/css/custom.css
index 93d83c54a..bc2127166 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1878,4 +1878,6 @@ h6[id]::before {
 
 
 .support_container{display: flex;gap:100px}
-.docusaurus-theme-github-codeblock .theme-code-block{max-height: 500px;overflow: auto;}
\ No newline at end of file
+.docusaurus-theme-github-codeblock .theme-code-block{max-height: 500px;overflow: auto;}
+.storylane-iframe{position:relative;padding-bottom:calc(45.26% + 25px);width:100%;height:0;transform:scale(1)}
+.storylane-iframe .sl-demo{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:1px solid rgba(63,95,172,0.35);box-shadow: 0px 0px 18px rgba(26, 19, 72, 0.15);border-radius:10px;box-sizing:border-box;}