RubyGems - appscms-tools-theme - Versions diffs - 4.5.9 → 4.6.0 - Mend

appscms-tools-theme 4.5.9 → 4.6.0

Files changed (131) hide show

checksums.yaml +4 -4
data/_data/about/en/about.json +16 -16
data/_data/blog/nav.json +14 -14
data/_data/feature/en/batch-conversion.json +192 -192
data/_data/feature/en/compress-pdf.json +305 -305
data/_data/feature/en/devtools.json +321 -321
data/_data/feature/en/face-detection.json +156 -156
data/_data/feature/en/split-pdf.json +221 -221
data/_data/feature/en/theframe.json +160 -160
data/_data/footer/en/data.json +2 -2
data/_data/header/en/data.json +412 -412
data/_data/home/en/en.json +324 -324
data/_data/home/en/posters.json +322 -322
data/_includes/alternates/alternates.html +46 -43
data/_includes/appscms/customblog/contenttool-recent-posts.html +94 -94
data/_includes/appscms/customblog/pageRelatedPosts.html +62 -62
data/_includes/appscms/customblog/recentposts.html +67 -67
data/_includes/appscms/customblog/relatedBlogs.html +82 -82
data/_includes/appscms/customblog/relatedposts.html +193 -193
data/_includes/appscms/extras/appscms-postbox.html +57 -57
data/_includes/appscms/featurePageAuthors/featurePageAuthors.html +85 -85
data/_includes/appscms/head/bloghead.html +128 -128
data/_includes/appscms/head/head.html +3 -2
data/_includes/appscms/headings/contenttool-headings.html +33 -33
data/_includes/appscms/headings/devtool-headings.html +38 -38
data/_includes/appscms/home/contenttool-feature-boxes.html +19 -19
data/_includes/appscms/home/devtool-feature-boxes.html +70 -70
data/_includes/appscms/infographics/infographics.html +166 -166
data/_includes/appscms/loaders/loader.html +4 -4
data/_includes/appscms/navbars/devtool-navbar.html +50 -50
data/_includes/appscms/navbars/devtool-toolbar.html +100 -100
data/_includes/appscms/recent-posts/recent_posts.html +90 -90
data/_includes/appscms/recent-posts/related_categories_post.html +194 -194
data/_includes/appscms/searchbar/devtool-searchbar.html +63 -63
data/_includes/appscms/usp/usp.html +90 -90
data/_includes/author_bio.html +41 -41
data/_includes/authorpagehead/index.html +47 -47
data/_includes/authors/authors.html +39 -39
data/_includes/batch-conversion.html +141 -141
data/_includes/bookmark.html +6 -6
data/_includes/cssfile/links.html +54 -54
data/_includes/custom-head.html +138 -138
data/_includes/customCode.html +1 -1
data/_includes/customScripts.html +1 -1
data/_includes/customblog/pageRelatedPosts.html +87 -87
data/_includes/customblog/recentposts.html +67 -67
data/_includes/customblog/relatedBlogs.html +86 -86
data/_includes/customblog/relatedposts.html +201 -201
data/_includes/dropdown/langdropdown.html +32 -32
data/_includes/feature.html +39 -39
data/_includes/featurePageAuthors/featurePageAuthors.html +101 -101
data/_includes/footer/index.html +537 -537
data/_includes/google-analytics.html +32 -32
data/_includes/head/index.html +623 -623
data/_includes/header/blogHeader.html +34 -34
data/_includes/header/index.html +192 -192
data/_includes/infographics/infographics.html +241 -241
data/_includes/paginationBlogPage.html +70 -70
data/_includes/postbox.html +65 -65
data/_includes/script.html +493 -493
data/_includes/section/count.html +32 -32
data/_includes/section/recent_posts.html +94 -94
data/_includes/section/related_categories_post.html +196 -196
data/_includes/share/socialshare.html +21 -21
data/_includes/userTracking.html +14 -14
data/_layouts/aboutUs.html +175 -175
data/_layouts/allAuthors.html +131 -131
data/_layouts/appscms-about.html +163 -163
data/_layouts/appscms-audio.html +33 -33
data/_layouts/appscms-author.html +436 -436
data/_layouts/appscms-authors.html +145 -145
data/_layouts/appscms-batch.html +141 -141
data/_layouts/appscms-calculator.html +93 -93
data/_layouts/appscms-categories.html +26 -26
data/_layouts/appscms-contact.html +132 -132
data/_layouts/appscms-disclaimer.html +124 -124
data/_layouts/appscms-download.html +289 -289
data/_layouts/appscms-feature-result.html +96 -96
data/_layouts/appscms-help.html +25 -25
data/_layouts/appscms-imagekit.html +96 -96
data/_layouts/appscms-post.html +243 -243
data/_layouts/appscms-privacy-policy.html +781 -781
data/_layouts/appscms-terms-and-conditions.html +646 -646
data/_layouts/appscms-video.html +33 -33
data/_layouts/audio.html +33 -33
data/_layouts/author.html +409 -409
data/_layouts/batch.html +177 -177
data/_layouts/blog-1.html +116 -116
data/_layouts/blog.html +131 -131
data/_layouts/calculator.html +99 -99
data/_layouts/contenttool-feature.html +45 -45
data/_layouts/contenttool-home.html +53 -53
data/_layouts/devtool-blog.html +132 -132
data/_layouts/devtool-feature.html +54 -54
data/_layouts/devtool-home.html +53 -53
data/_layouts/devtools.html +57 -57
data/_layouts/feature-1.html +406 -406
data/_layouts/feature.html +351 -351
data/_layouts/featureResultPage.html +82 -82
data/_layouts/frame.html +222 -222
data/_layouts/home.html +281 -281
data/_layouts/homeResultPage.html +32 -32
data/_layouts/imagekit.html +308 -308
data/_layouts/photo-effects-home.html +190 -190
data/_layouts/post.html +233 -233
data/assets/app.js +75 -75
data/assets/css/appscms-blog.css +505 -505
data/assets/css/appscms-contenttool.css +1384 -1384
data/assets/css/appscms-home.css +5 -5
data/assets/css/appscms-imagekit.css +855 -855
data/assets/css/appscms-variables.css +19 -19
data/assets/css/blog.css +510 -510
data/assets/css/calculators.css +46 -46
data/assets/css/devtool-main.css +1350 -1350
data/assets/css/devtools.css +105 -105
data/assets/css/feature-1.css +293 -293
data/assets/css/imagekit copy.css +848 -848
data/assets/css/imagekit.css +848 -848
data/assets/css/tools.css +1847 -1847
data/assets/images/close-button.svg +31 -31
data/assets/images/digipaint.svg +6 -6
data/assets/images/logo.svg +2 -2
data/assets/images/manthink.svg +3552 -3552
data/assets/images/search-icon.svg +2 -2
data/assets/js/batch.js +219 -219
data/assets/js/devtools.js +81 -81
data/assets/js/sharePage.js +65 -65
data/assets/js/usageTracking.js +143 -143
data/assets/js/usageTrackingEvents.js +6 -6
data/assets/js/webvitals.js +4 -4
metadata +3 -3

data/_layouts/allAuthors.html CHANGED Viewed

@@ -1,131 +1,131 @@
-<!DOCTYPE html>
-<html lang="en">
-  {% include authorpagehead/index.html %}
-  <style>
-    body {
-      font-family: "Font Awesome 5 Free" !important;
-    }
-    .authors-heading {
-      font-size: 50px;
-      font-weight: 900;
-    }
-    .authors-info {
-      padding: 32px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
-      width: 100%;
-    }
-    .authors-info .authors-image img {
-      display: inline-block;
-      width: 200px;
-      height: 200px;
-      padding: 8px;
-      border: 5px solid #eee;
-      border-radius: 50%;
-      object-fit: cover;
-      user-select: none;
-    }
-    .authors-info .authors-name {
-      margin: 1rem;
-      font-size: 28px;
-      color: #000;
-      font-weight: 900;
-    }
-    .authors-info .authors-bio {
-      color: #121315;
-      font-size: 16px;
-    }
-    .authors-posts-count {
-      font-size: 24px;
-      font-weight: 400;
-      color: #000 !important;
-      text-decoration: underline !important;
-    }
-  </style>
-  <body>
-    {%- include header/blogHeader.html -%}
-    <section class="authors-list" style="margin-top: 100px">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <h1 class="mb-4 text-center authors-heading">Our Authors</h1>
-            <div class="row">
-              {% assign minCommonAuthor = 1 %} {% assign sameAuthorCount = 0 %}
-              {% assign posts = site.posts | where_exp:"post","post.url !=
-              page.url" %} {% assign seen_authors = '' %} {% for post in
-              site.posts %} {% unless seen_authors contains post.author %} {%
-              assign seen_authors = seen_authors | append: post.author | append:
-              ',' %}
-              <!-- Render your author here -->
-              {%- include /authors/authors.html -%} {%- if authorName contains
-              authorName -%}
-              <div class="col-md-4 mb-4">
-                <div class="authors-info">
-                  <a
-                    class="authors-image"
-                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
-                  >
-                    <img
-                      loading="lazy"
-                      src="{{image}}"
-                      alt="{{ authorName }}"
-                    />
-                  </a>
-                  <a
-                    class="authors-name"
-                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
-                    >{{authorName | capitalize }}</a
-                  >
-                  <a href="/blog/" class="authors-posts-count"
-                    >{{ site.posts | where: 'author', post.author | size }}
-                    Posts</a
-                  >
-                  <p class="authors-bio mt-3">{{bio}}</p>
-                </div>
-              </div>
-              {%- endif -%} {% endunless %} {% endfor %} {% for post in posts %}
-              {%- include /authors/authors.html -%} {%- if post.author contains
-              authorName -%}
-              <div class="d-none col-md-4 mb-4">
-                <div class="authors-info">
-                  <a
-                    class="authors-image"
-                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
-                  >
-                    <img
-                      loading="lazy"
-                      src="{{image}}"
-                      alt="{{ authorName }}"
-                    />
-                  </a>
-                  <a
-                    class="authors-name"
-                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
-                    >{{authorName | capitalize }}</a
-                  >
-                  <a href="/blog/" class="authors-posts-count"
-                    >{{ site.posts | where: 'author', post.author | size }}
-                    Posts</a
-                  >
-                  <p class="authors-bio mt-3">{{bio}}</p>
-                </div>
-              </div>
-              {%- endif -%} {% endfor %}
-            </div>
-          </div>
-        </div>
-      </div>
-      {% include section/count.html %}
-    </section>
-    {% include script.html %}
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  {% include authorpagehead/index.html %}
+  <style>
+    body {
+      font-family: "Font Awesome 5 Free" !important;
+    }
+    .authors-heading {
+      font-size: 50px;
+      font-weight: 900;
+    }
+    .authors-info {
+      padding: 32px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      width: 100%;
+    }
+    .authors-info .authors-image img {
+      display: inline-block;
+      width: 200px;
+      height: 200px;
+      padding: 8px;
+      border: 5px solid #eee;
+      border-radius: 50%;
+      object-fit: cover;
+      user-select: none;
+    }
+    .authors-info .authors-name {
+      margin: 1rem;
+      font-size: 28px;
+      color: #000;
+      font-weight: 900;
+    }
+    .authors-info .authors-bio {
+      color: #121315;
+      font-size: 16px;
+    }
+    .authors-posts-count {
+      font-size: 24px;
+      font-weight: 400;
+      color: #000 !important;
+      text-decoration: underline !important;
+    }
+  </style>
+  <body>
+    {%- include header/blogHeader.html -%}
+    <section class="authors-list" style="margin-top: 100px">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12">
+            <h1 class="mb-4 text-center authors-heading">Our Authors</h1>
+            <div class="row">
+              {% assign minCommonAuthor = 1 %} {% assign sameAuthorCount = 0 %}
+              {% assign posts = site.posts | where_exp:"post","post.url !=
+              page.url" %} {% assign seen_authors = '' %} {% for post in
+              site.posts %} {% unless seen_authors contains post.author %} {%
+              assign seen_authors = seen_authors | append: post.author | append:
+              ',' %}
+              <!-- Render your author here -->
+              {%- include /authors/authors.html -%} {%- if authorName contains
+              authorName -%}
+              <div class="col-md-4 mb-4">
+                <div class="authors-info">
+                  <a
+                    class="authors-image"
+                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
+                  >
+                    <img
+                      loading="lazy"
+                      src="{{image}}"
+                      alt="{{ authorName }}"
+                    />
+                  </a>
+                  <a
+                    class="authors-name"
+                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
+                    >{{authorName | capitalize }}</a
+                  >
+                  <a href="/blog/" class="authors-posts-count"
+                    >{{ site.posts | where: 'author', post.author | size }}
+                    Posts</a
+                  >
+                  <p class="authors-bio mt-3">{{bio}}</p>
+                </div>
+              </div>
+              {%- endif -%} {% endunless %} {% endfor %} {% for post in posts %}
+              {%- include /authors/authors.html -%} {%- if post.author contains
+              authorName -%}
+              <div class="d-none col-md-4 mb-4">
+                <div class="authors-info">
+                  <a
+                    class="authors-image"
+                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
+                  >
+                    <img
+                      loading="lazy"
+                      src="{{image}}"
+                      alt="{{ authorName }}"
+                    />
+                  </a>
+                  <a
+                    class="authors-name"
+                    href="/authors/{{authorName | downcase  | replace: ' ' , '-' }}"
+                    >{{authorName | capitalize }}</a
+                  >
+                  <a href="/blog/" class="authors-posts-count"
+                    >{{ site.posts | where: 'author', post.author | size }}
+                    Posts</a
+                  >
+                  <p class="authors-bio mt-3">{{bio}}</p>
+                </div>
+              </div>
+              {%- endif -%} {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      {% include section/count.html %}
+    </section>
+    {% include script.html %}
+  </body>
+</html>

data/_layouts/appscms-about.html CHANGED Viewed

@@ -1,163 +1,163 @@
-{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
-= page.folderName %} {% assign aboutData = site.data[folder][lang][file] %}
-<!DOCTYPE html>
-<html lang="{{aboutData.htmlLangAtt}}">
-  {%- include appscms/head/head.html -%}
-  <body>
-    {%- include appscms/navbars/navbar.html -%} {%- include
-    appscms/navbars/toolbar.html -%}
-    <div class="container py-4 about_layout">
-      {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
-      <div class="row">
-        <div class="col-md-9 mx-auto">
-          {%- endif -%}
-          <h1 class="about-h1 py-2">About us</h1>
-          <h2 class="about-h2">Welcome to {{ page.companyName}}</h2>
-          <p class="about-para pt-4 text-left">
-            We are here to help you. Ping us your queries at care@{{
-            page.companyName}}.{{page.domain}}
-          </p>
-          <div>{{content}}</div>
-          {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
-        </div>
-      </div>
-      {%- endif -%}
-    </div>
-    {% assign posts = site.posts | where_exp:"post","post.url != page.url" %} {%
-    assign authors = "" | split: "," %} {% for post in site.posts %} {% if
-    post.author %} {% unless authors contains post.author %} {% assign authors =
-    authors | push: post.author %} {% endunless %} {% endif %} {% endfor %}
-    <div class="container mt-4 mb-5">
-      <div class="row px-0">
-        <div class="col-md-4 my-4">
-          <img
-            class="feature-card-img"
-            src="/assets/images/lightbulb.svg"
-            loading="lazy"
-            height="48px"
-            width="48px"
-            alt="{{data.header}}"
-            {%-
-            if
-            site.crossorigin
-            -%}
-            crossorigin
-            {%-
-            endif
-            -%}
-          />
-          <div class="feature-card-title">Features</div>
-          <div class="feature-card-desc">
-            Our website currently has
-            <a class="highlight_style" href="{{site.url}}/sitemap.xml"
-              >{{ site.pages | size }} features</a
-            >
-          </div>
-        </div>
-        {%- if site.internationalizationall -%}
-        <div class="col-md-4 my-4">
-          <img
-            class="feature-card-img"
-            src="/assets/images/lightbulb.svg"
-            loading="lazy"
-            height="48px"
-            width="48px"
-            alt="{{data.header}}"
-            {%-
-            if
-            site.crossorigin
-            -%}
-            crossorigin
-            {%-
-            endif
-            -%}
-          />
-          <div class="feature-card-title">Languages Supported</div>
-          <div class="feature-card-desc">
-            Our website currently supports 22 languages.
-          </div>
-        </div>
-        {%- endif -%}
-        <div class="col-md-4 my-4">
-          <img
-            class="feature-card-img"
-            src="/assets/images/lightbulb.svg"
-            loading="lazy"
-            height="48px"
-            width="48px"
-            alt="{{data.header}}"
-            {%-
-            if
-            site.crossorigin
-            -%}
-            crossorigin
-            {%-
-            endif
-            -%}
-          />
-          <div class="feature-card-title">Blog Posts</div>
-          <div class="feature-card-desc">
-            We currently have
-            <a class="highlight_style" href="/blog/"
-              >{{ site.posts | size }} blog posts</a
-            >
-            on our website.
-          </div>
-        </div>
-        <div class="col-md-4 my-4">
-          <img
-            class="feature-card-img"
-            src="/assets/images/lightbulb.svg"
-            loading="lazy"
-            height="48px"
-            width="48px"
-            alt="{{data.header}}"
-            {%-
-            if
-            site.crossorigin
-            -%}
-            crossorigin
-            {%-
-            endif
-            -%}
-          />
-          <div class="feature-card-title">Authors</div>
-          <div class="feature-card-desc">
-            We have
-            <a class="highlight_style" href="/authors">
-              {{ authors.size }} authors
-            </a>
-            on our website
-          </div>
-        </div>
-        <div class="col-md-4 my-4">
-          <img
-            class="feature-card-img"
-            src="/assets/images/lightbulb.svg"
-            loading="lazy"
-            height="48px"
-            width="48px"
-            alt="{{data.header}}"
-            {%-
-            if
-            site.crossorigin
-            -%}
-            crossorigin
-            {%-
-            endif
-            -%}
-          />
-          <div class="feature-card-title">Total Visitors</div>
-          <div id="visits" class="feature-card-desc">
-            {{site.totalVisitors}}
-          </div>
-        </div>
-      </div>
-    </div>
-    {% include appscms/footer/static-footer.html %} {% include script.html %}
-  </body>
-</html>
+{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
+= page.folderName %} {% assign aboutData = site.data[folder][lang][file] %}
+<!DOCTYPE html>
+<html lang="{{aboutData.htmlLangAtt}}">
+  {%- include appscms/head/head.html -%}
+  <body>
+    {%- include appscms/navbars/navbar.html -%} {%- include
+    appscms/navbars/toolbar.html -%}
+    <div class="container py-4 about_layout">
+      {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
+      <div class="row">
+        <div class="col-md-9 mx-auto">
+          {%- endif -%}
+          <h1 class="about-h1 py-2">About us</h1>
+          <h2 class="about-h2">Welcome to {{ page.companyName}}</h2>
+          <p class="about-para pt-4 text-left">
+            We are here to help you. Ping us your queries at care@{{
+            page.companyName}}.{{page.domain}}
+          </p>
+          <div>{{content}}</div>
+          {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
+        </div>
+      </div>
+      {%- endif -%}
+    </div>
+    {% assign posts = site.posts | where_exp:"post","post.url != page.url" %} {%
+    assign authors = "" | split: "," %} {% for post in site.posts %} {% if
+    post.author %} {% unless authors contains post.author %} {% assign authors =
+    authors | push: post.author %} {% endunless %} {% endif %} {% endfor %}
+    <div class="container mt-4 mb-5">
+      <div class="row px-0">
+        <div class="col-md-4 my-4">
+          <img
+            class="feature-card-img"
+            src="/assets/images/lightbulb.svg"
+            loading="lazy"
+            height="48px"
+            width="48px"
+            alt="{{data.header}}"
+            {%-
+            if
+            site.crossorigin
+            -%}
+            crossorigin
+            {%-
+            endif
+            -%}
+          />
+          <div class="feature-card-title">Features</div>
+          <div class="feature-card-desc">
+            Our website currently has
+            <a class="highlight_style" href="{{site.url}}/sitemap.xml"
+              >{{ site.pages | size }} features</a
+            >
+          </div>
+        </div>
+        {%- if site.internationalizationall -%}
+        <div class="col-md-4 my-4">
+          <img
+            class="feature-card-img"
+            src="/assets/images/lightbulb.svg"
+            loading="lazy"
+            height="48px"
+            width="48px"
+            alt="{{data.header}}"
+            {%-
+            if
+            site.crossorigin
+            -%}
+            crossorigin
+            {%-
+            endif
+            -%}
+          />
+          <div class="feature-card-title">Languages Supported</div>
+          <div class="feature-card-desc">
+            Our website currently supports 22 languages.
+          </div>
+        </div>
+        {%- endif -%}
+        <div class="col-md-4 my-4">
+          <img
+            class="feature-card-img"
+            src="/assets/images/lightbulb.svg"
+            loading="lazy"
+            height="48px"
+            width="48px"
+            alt="{{data.header}}"
+            {%-
+            if
+            site.crossorigin
+            -%}
+            crossorigin
+            {%-
+            endif
+            -%}
+          />
+          <div class="feature-card-title">Blog Posts</div>
+          <div class="feature-card-desc">
+            We currently have
+            <a class="highlight_style" href="/blog/"
+              >{{ site.posts | size }} blog posts</a
+            >
+            on our website.
+          </div>
+        </div>
+        <div class="col-md-4 my-4">
+          <img
+            class="feature-card-img"
+            src="/assets/images/lightbulb.svg"
+            loading="lazy"
+            height="48px"
+            width="48px"
+            alt="{{data.header}}"
+            {%-
+            if
+            site.crossorigin
+            -%}
+            crossorigin
+            {%-
+            endif
+            -%}
+          />
+          <div class="feature-card-title">Authors</div>
+          <div class="feature-card-desc">
+            We have
+            <a class="highlight_style" href="/authors">
+              {{ authors.size }} authors
+            </a>
+            on our website
+          </div>
+        </div>
+        <div class="col-md-4 my-4">
+          <img
+            class="feature-card-img"
+            src="/assets/images/lightbulb.svg"
+            loading="lazy"
+            height="48px"
+            width="48px"
+            alt="{{data.header}}"
+            {%-
+            if
+            site.crossorigin
+            -%}
+            crossorigin
+            {%-
+            endif
+            -%}
+          />
+          <div class="feature-card-title">Total Visitors</div>
+          <div id="visits" class="feature-card-desc">
+            {{site.totalVisitors}}
+          </div>
+        </div>
+      </div>
+    </div>
+    {% include appscms/footer/static-footer.html %} {% include script.html %}
+  </body>
+</html>

data/_layouts/appscms-audio.html CHANGED Viewed

@@ -1,33 +1,33 @@
----
-layout: appscms-feature
----
-{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
-<div class="container pt-5 mt-5">
-  <div class="row">
-    <div class="col-md-6 mb-5" id="left-section" data-format="{{page.format}}">
-      <div>
-        {%- assign h1 = fileData.H1 | replace: "$variable", page.value -%}
-        <h1 class="audio-h1">
-          {%- for word in h1-%} {%- if forloop.first == true -%} {{word |
-          capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-        </h1>
-      </div>
-      {%- assign h2 = fileData.H2 | replace: "$variable", page.value -%}
-      <div>
-        <h2 class="audio-h2">
-          {%- for word in h2 -%} {%- if forloop.first == true -%} {{word |
-          capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-        </h2>
-      </div>
-      <div class="d-flex justify-content-left mt-4">
-        <button class="upload-redirect">Upload Your Audio</button>
-      </div>
-    </div>
-    <div class="col-md-6">
-      <div class="right-section mb-5">
-        <img src="/assets/images/audio-upload.svg" alt="alt" />
-      </div>
-    </div>
-  </div>
-</div>
+---
+layout: appscms-feature
+---
+{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
+<div class="container pt-5 mt-5">
+  <div class="row">
+    <div class="col-md-6 mb-5" id="left-section" data-format="{{page.format}}">
+      <div>
+        {%- assign h1 = fileData.H1 | replace: "$variable", page.value -%}
+        <h1 class="audio-h1">
+          {%- for word in h1-%} {%- if forloop.first == true -%} {{word |
+          capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
+        </h1>
+      </div>
+      {%- assign h2 = fileData.H2 | replace: "$variable", page.value -%}
+      <div>
+        <h2 class="audio-h2">
+          {%- for word in h2 -%} {%- if forloop.first == true -%} {{word |
+          capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
+        </h2>
+      </div>
+      <div class="d-flex justify-content-left mt-4">
+        <button class="upload-redirect">Upload Your Audio</button>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="right-section mb-5">
+        <img src="/assets/images/audio-upload.svg" alt="alt" />
+      </div>
+    </div>
+  </div>
+</div>