update action and clear archive

templates/shortcodes/grid_stats.html

@@ -12,7 +12,7 @@
     <div class="mx-auto max-w-7xl px-4 lg:px-8">
       <div class="mx-auto max-w-2xl lg:max-w-none">
         <div class="text-center">
-          <h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white ">{{ title_1 }}
+          <h2 class="fade-in">{{ title_1 }}
             <br>{{ title_2 }}</h2>
           <p class="mx-auto mt-6 max-w-3xl fade-in">{{ description_1 }}</p>
           <p class="mx-auto mt-6 max-w-3xl fade-in">{{ description_2 }}</p>

templates/shortcodes/hero_video.html

@@ -0,0 +1,118 @@
+{% set title = title | default(value="Built") %}
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+{% set description_1 = description_1 | default(value="") %}
+{% set description_2 = description_2 | default(value="") %}
+{% set video_link = video_link | default(value="") %}
+{% set button1_text = button1_text | default(value="") %}
+{% set button1_link = button1_link | default(value="") %}
+
+<div class="relative flex justify-center items-center isolate overflow-hidden lg:py-2 py-12 lg:h-screen">
+    <div class="mx-auto max-w-7xl text-center px-2 pt-12 lg:px-8">
+        <!-- Main Heading -->
+        <h1 class="fade-in">
+          {{ title }}
+        </h1>
+        
+        <!-- Subtext -->
+        <p class="mx-auto mt-8 max-w-3xl fade-in fade-in-delay">
+          {{ description_1 }}
+        <br>
+        <span class=" text-white font-semibold">{{ description_2 }}</span> 
+        </p>
+        
+        <!-- Embed YouTube Video -->
+        <div class="py-4 flex justify-center mx-auto" style="max-width: 550px; height: auto;">
+            <div class="responsive-iframe" >
+                <iframe src="{{ video_link }}" title="YouTube video player" 
+                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+                </iframe>
+            </div>
+        </div>
+        
+        <!-- Call to Action Button -->
+        <div class="mt-2 fade-in flex items-center justify-center gap-x-6">
+            <a href="{{ button1_link }}" target="_blank" 
+               class="rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">
+                {{ button1_text }}
+            </a>
+        </div>
+    </div>
+</div>
+
+<style>
+  /* Fade-in animation */
+  .fade-in {
+    opacity: 0;
+    animation: fadeIn 1s ease-out forwards;
+  }
+
+  /* Fade-in keyframe */
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Responsive iframe for YouTube video */
+  .responsive-iframe {
+    position: relative;
+    width: 100%;
+    max-width: 800px; /* Max width for large screens */
+    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+    height: 0;
+    overflow: hidden;
+  }
+  .responsive-iframe iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Ensure content aligns properly */
+  .flex.justify-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Responsive text and spacing */
+  .text-pretty {
+    word-wrap: break-word;
+  }
+  @media (max-width: 640px) {
+    .text-pretty {
+      padding: 0 1rem;
+    }
+  }
+
+  /* Style for the button */
+  .blinking-effect {
+    animation: blink 1.5s step-start infinite;
+  }
+
+  @keyframes blink {
+    50% {
+      opacity: 0.5;
+    }
+  }
+</style>
+
+<script>
+  // JavaScript to add 'visible' class after loading
+  window.addEventListener('DOMContentLoaded', () => {
+    const fadeInElements = document.querySelectorAll('.fade-in');
+
+    fadeInElements.forEach((element, index) => {
+      // Adding a delay for each fade-in effect (increasing delay with index)
+      setTimeout(() => {
+        element.classList.add('visible');
+      }, index * 1000); // 1000ms delay between each element
+    });
+  });
+</script>

templates/shortcodes/img_features.html

@@ -0,0 +1,69 @@
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+{% set title_1 = title_1 | default(value="") %}
+{% set title_2 = title_2 | default(value="") %}
+{% set title_3 = title_4 | default(value="") %}
+{% set title_4 = title_4 | default(value="") %}
+{% set description_1 = description_1 | default(value="") %}
+{% set description_2 = description_2 | default(value="") %}
+{% set description_3 = description_3 | default(value="") %}
+{% set description_4 = description_4 | default(value="") %}
+{% set button_text_1 = button_text_1 | default(value="") %}
+{% set button_link_1 = button_link_1 | default(value="") %}
+{% set button_text_2 = button_text_2 | default(value="") %}
+{% set button_link_2 = button_link_2 | default(value="") %}
+{% set button_text_3 = button_text_3 | default(value="") %}
+{% set button_link_3 = button_link_3 | default(value="") %}
+{% set button_text_4 = button_text_4 | default(value="") %}
+{% set button_link_4 = button_link_4 | default(value="") %}
+
+<div class="relative mt-10 mx-auto max-w-xl px-4 lg:max-w-7xl lg:px-8">
+    <div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
+        <!-- Image on the left and text on the right -->
+        <div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
+            <img class="blinking-effect relative mx-auto" width="490" src="{{ image_src }}" alt="{{ image_alt }}">
+        </div>
+
+        <!-- Text on the left -->
+        <div class="relative p-4"> <!-- Add padding here for all sides -->
+            <div class="gap-y-4">
+                <div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                    <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">{{ title_1 }}</dt>
+                    <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_1 }}</dd>
+                    <a href="{{ button_text_1 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_1 }} <span aria-hidden="true">→</span></a>
+                </div>
+                <div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                    <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">{{ title_2 }}</dt>
+                    <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_2 }}</dd>
+                    <a href="{{ button_text_2 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_2 }} <span aria-hidden="true">→</span></a>
+                </div>
+                <div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                    <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">{{ title_3 }}</dt>
+                    <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_3 }}</dd>
+                    <a href="{{ button_text_3 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_3 }} <span aria-hidden="true">→</span></a>
+                </div>
+                <div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                    <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">{{ title_4 }}</dt>
+                    <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_4 }}</dd>
+                    <a href="{{ button_text_4 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_4 }} <span aria-hidden="true">→</span></a>
+                </div>
+            </div>
+        </div>            
+    </div>
+</div>
+
+<style>
+ /* Apply the blinking animation to the link */
+.blinking-effect {
+animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+@keyframes fadeIn {
+0% {
+  opacity: 0;
+}
+100% {
+  opacity: 1;
+}
+}
+</style>

templates/shortcodes/left_text.html

@@ -5,7 +5,7 @@
 {% set button_link = button_link | default(value="") %}
 
     <div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
-      <h2 class="fade-in text-balance lg:text-5xl text-3xl leading-tight font-normal tracking-tight text-white">{{ title }}
+      <h2 class="fade-in">{{ title }}
       </h2>
       <p class="mx-auto mt-6 mb-6 max-w-3xl fade-in">{{ description_1 }}</p>
 

templates/shortcodes/portfolio.html

@@ -11,9 +11,11 @@
           </dt>
           <dd class="mt-4 flex flex-auto flex-col">
             <p class="flex-auto leading-normal font-light text-gray-200 text-md">{{ description }}</p>
+            {% if button_link %}
             <p class="mt-6">
               <a href="{{ button_link }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">{{ button_text }} <span aria-hidden="true">→</span></a>
             </p>
+            {% endif %}
           </dd>
         </div>