..

components/unsorted/casper-all-AWRMLitU.html

@@ -0,0 +1,17 @@
+<div><section class="py-24 bg-black relative">
+    <div>
+      <img class="absolute top-0 left-0 w-64 object-contain" src="pstls-assets/images/call-to-action/little-shadow.png" alt="">
+      <img class="absolute bottom-0 right-0 w-64 object-contain" src="pstls-assets/images/call-to-action/little-shadow.png" alt="">
+      <div class="max-w-6xl mx-auto py-12 p-6 md:p-12 relative" style="background-image: url('pstls-assets/images/call-to-action/banner-color.png'); background-size: cover; background-repeat: no-repeat; background-position: center;">
+        <div class="flex flex-wrap -mx-4 items-center">
+          <div class="w-full md:w-1/2 lg:w-4/12 px-4 mb-6 md:mb-10 lg:mb-0">
+            <h2 class="text-3xl sm:text-4xl font-heading">Expand your brand with this excellent extension tool.</h2>
+          </div>
+          <div class="w-full md:w-1/2 lg:w-5/12 px-4 mb-6 md:mb-10 lg:mb-0">
+            <p class="leading-8">A short message that will bring your customers into the world of your imagination. And will allow them to become more familiar with your brand.</p>
+          </div>
+          <div class="w-full lg:w-3/12 px-4 text-center lg:text-right"><a class="inline-block w-full md:w-auto py-3 px-8 text-center text-black font-bold bg-indigo-200 hover:bg-indigo-300 transition duration-200" href="#">Activate Demo</a></div>
+        </div>
+      </div>
+    </div>
+  </section> </div>

components/unsorted/casper-all-BNKiXuGm.html

@@ -0,0 +1,79 @@
+<div><section class="overflow-hidden relative">
+    <nav class="py-10" data-config-="">
+      <div class="container px-4 mx-auto">
+        <div class="flex items-center justify-between relative">
+          <a class="inline-block mr-14" href="#">
+            <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
+          </a>
+          <button class="lg:hidden navbar-burger">
+            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
+            </svg>
+          </button>
+          <div class="hidden lg:block">
+            <ul class="inline-flex">
+              <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" aria-current="page" href="#">Home</a></li>
+              <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#">Products</a></li>
+              <li><a class="inline-block font-bold hover:text-gray-900" href="#">Pricing</a></li>
+            </ul>
+          </div>
+          <div class="hidden lg:block ml-auto"><a class="inline-block mr-8 font-bold hover:text-gray-900" href="#">Log In</a><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900" href="#">Sign Up</a></div>
+        </div>
+      </div>
+    </nav>
+    <div class="container px-4 mx-auto mt-12">
+      <div class="flex flex-wrap -mx-4">
+        <div class="w-full lg:w-1/2 px-4">
+          <div class="lg:pt-20 lg:max-w-md">
+            <h1 class="text-5xl lg:text-6xl font-heading mb-6">
+              <span>Lorem ipsum dolor sit amet</span>
+              <span class="text-indigo-200">consectut</span>
+              <span>domor at elis</span>
+            </h1>
+            <p class="leading-8 mb-6">Pstls. Kit uses attractive colors and modern typography to make you look good, no matter what business you’re in.</p>
+            <a class="inline-block w-full md:w-auto text-center px-8 py-3 text-white font-bold bg-black hover:bg-gray-900" href="#" style="font-size:16px;">Details</a>
+          </div>
+        </div>
+        <div class="w-full lg:w-1/2 mt-20 lg:mt-0">
+          <div class="flex justify-center lg:justify-end">
+            <div class="mr-4 lg:mr-8">
+              <div class="hidden xl:flex w-full justify-center">
+                <div class="bg-indigo-100 w-64 h-64 absolute top-0 -mt-32"></div>
+              </div>
+              <img class="block mx-auto mb-8" src="pstls-assets/images/headers/header-5-building.jpg" alt="">
+              <img class="block mx-auto mb-8" src="pstls-assets/images/headers/header-5-building-2.jpg" alt="">
+              <div class="hidden xl:block bg-blue-100 w-64 h-12"></div>
+            </div>
+            <div>
+              <img class="block mx-auto mb-8" src="pstls-assets/images/headers/header-5-building-3.jpg" alt="">
+              <img class="block mx-auto mb-8" src="pstls-assets/images/headers/header-5-building-4.jpg" alt="">
+              <div class="hidden xl:block bg-red-100 w-64 h-12"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 max-w-xs z-50" data-config-="">
+      <div class="navbar-backdrop fixed inset-0 bg-black bg-opacity-75"></div>
+      <nav class="relative flex flex-col h-full p-8 bg-white">
+        <div class="flex items-center justify-between mb-12">
+          <a class="items-center" href="#">
+            <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="102">
+          </a>
+          <button class="inline-block navbar-close focus:outline-none" type="button" aria-label="Close">
+            <img src="pstls-assets/images/navigations/x2.svg" alt="">
+          </button>
+        </div>
+        <div>
+          <ul>
+            <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#">Home</a></li>
+            <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#">Products</a></li>
+            <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#">Resources</a></li>
+          </ul>
+        </div>
+        <div class="mt-auto">
+          <div><a class="block py-3 text-center font-bold" href="#">Log In</a><a class="block px-8 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#">Sign Up</a></div>
+        </div>
+      </nav>
+    </div>
+  </section> </div>

components/unsorted/casper-all-BaPzRCME.html

@@ -0,0 +1,52 @@
+<div> <section class="relative py-24 bg-black">
+    <img class="absolute top-0 left-0 w-full" src="pstls-assets/images/how-it-works/shadows2.png" alt="">
+    <div class="container px-4 mx-auto relative">
+      <div class="max-w-2xl mx-auto mb-24 text-center">
+        <h1 class="text-5xl lg:text-6xl font-heading mb-6 text-white">Build and launch without problems</h1>
+        <p class="leading-8 text-white">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
+      </div>
+      <div class="container px-4 mx-auto">
+        <div class="flex flex-wrap -mx-4 relative">
+          <div class="w-full sm:w-1/2 xl:w-3/12 mb-14 xl:mb-0 relative">
+            <div class="text-center max-w-xs md:px-6 mx-auto">
+              <div class="relative inline-flex items-center justify-center w-16 h-16 bg-black rounded-full">
+                <h5 class="text-xl font-bold text-indigo-200 font-heading">1</h5>
+              </div>
+              <h2 class="mt-5 mb-4 text-3xl font-heading text-white">Register account</h2>
+              <p class="text-gray-400 leading-8 text-white">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
+            </div>
+            <img class="hidden xl:block w-40 absolute right-0 top-0 mt-8 -mr-20" src="pstls-assets/images/how-it-works/how-it-works-6-line.png" alt="">
+          </div>
+          <div class="w-full sm:w-1/2 xl:w-3/12 mb-14 xl:mb-0 relative">
+            <div class="text-center max-w-xs md:px-6 mx-auto">
+              <div class="relative inline-flex items-center justify-center w-16 h-16 bg-black rounded-full">
+                <h5 class="text-xl font-bold text-pink-200 font-heading">2</h5>
+              </div>
+              <h2 class="mt-5 mb-4 text-3xl font-heading text-white">Customize tools</h2>
+              <p class="text-gray-400 leading-8 text-white">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
+            </div>
+            <img class="hidden xl:block w-40 absolute right-0 top-0 mt-8 -mr-20" src="pstls-assets/images/how-it-works/how-it-works-6-line.png" alt="">
+          </div>
+          <div class="w-full sm:w-1/2 xl:w-3/12 mb-14 xl:mb-0 relative">
+            <div class="text-center max-w-xs md:px-6 mx-auto">
+              <div class="relative inline-flex items-center justify-center w-16 h-16 bg-black rounded-full">
+                <h5 class="text-xl font-bold text-orange-200 font-heading">3</h5>
+              </div>
+              <h2 class="mt-5 mb-4 text-3xl font-heading text-white">Work with your team</h2>
+              <p class="text-gray-400 leading-8 text-white">The time, this accumsan augue, posuere posuere elit lorem. Consectutar at elis.</p>
+            </div>
+            <img class="hidden xl:block w-40 absolute right-0 top-0 mt-8 -mr-20" src="pstls-assets/images/how-it-works/how-it-works-6-line.png" alt="">
+          </div>
+          <div class="w-full sm:w-1/2 xl:w-3/12 mb-14 xl:mb-0">
+            <div class="text-center max-w-xs md:px-6 mx-auto">
+              <div class="relative inline-flex items-center justify-center w-16 h-16 bg-black rounded-full">
+                <h5 class="text-xl font-bold text-lime-200 font-heading">4</h5>
+              </div>
+              <h2 class="mt-5 mb-4 text-3xl font-heading text-white">Register account</h2>
+              <p class="text-gray-400 leading-8 text-white">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section></div>

components/unsorted/casper-all-CcMPMVCq.html

@@ -0,0 +1,90 @@
+<div> <section class="py-24">
+    <div class="container px-4 mx-auto">
+      <div class="flex flex-wrap -mx-4 mb-20 items-center">
+        <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
+          <h2 class="text-5xl md:text-6xl font-heading">Recent articles</h2>
+        </div>
+        <div class="w-full lg:w-1/2 px-4">
+          <p class="max-w-lg leading-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
+        </div>
+      </div>
+      <div class="flex flex-wrap -mx-4 mb-16">
+        <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
+          <div class="lg:max-w-sm lg:mx-auto">
+            <a class="inline-block mb-6 px-2 py-1 text-xs bg-indigo-200 text-dark uppercase" href="#">
+              <span>Category</span>
+            </a>
+            <a class="block mb-6" href="#">
+              <h2 class="text-4xl font-heading mb-4">Lorem ipsum random blog article</h2>
+              <div class="mb-4 text-indigo-200">
+                <span>6 min read</span>
+                <span class="mx-2">•</span>
+                <span>10 July 2022</span>
+              </div>
+              <p class="leading-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
+            </a>
+            <a class="inline-flex items-center" href="#">
+              <div class="mr-3">
+                <img src="pstls-assets/images/blog/men-avatar.png" alt="">
+              </div>
+              <div>
+                <p class="text-gray-400">Published by</p>
+                <p>John Doe</p>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
+          <div class="lg:max-w-sm lg:mx-auto">
+            <a class="inline-block mb-6 px-2 py-1 text-xs bg-pink-200 text-dark uppercase" href="#">
+              <span>Category</span>
+            </a>
+            <a class="block mb-6" href="#">
+              <h2 class="text-4xl font-heading mb-4">Lorem ipsum random blog article</h2>
+              <div class="mb-4 text-indigo-200">
+                <span>6 min read</span>
+                <span class="mx-2">•</span>
+                <span>10 July 2022</span>
+              </div>
+              <p class="leading-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
+            </a>
+            <a class="inline-flex items-center" href="#">
+              <div class="mr-3">
+                <img src="pstls-assets/images/blog/men-avatar.png" alt="">
+              </div>
+              <div>
+                <p class="text-gray-400">Published by</p>
+                <p>John Doe</p>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="w-full lg:w-1/3 px-4">
+          <div class="lg:max-w-sm lg:mx-auto">
+            <a class="inline-block mb-6 px-2 py-1 text-xs bg-orange-200 text-dark uppercase" href="#">
+              <span>Category</span>
+            </a>
+            <a class="block mb-6" href="#">
+              <h2 class="text-4xl font-heading mb-4">Lorem ipsum random blog article</h2>
+              <div class="mb-4 text-indigo-200">
+                <span>6 min read</span>
+                <span class="mx-2">•</span>
+                <span>10 July 2022</span>
+              </div>
+              <p class="leading-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
+            </a>
+            <a class="inline-flex items-center" href="#">
+              <div class="mr-3">
+                <img src="pstls-assets/images/blog/men-avatar.png" alt="">
+              </div>
+              <div>
+                <p class="text-gray-400">Published by</p>
+                <p>John Doe</p>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="text-center"><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transform duration-200" href="#">View more articles</a></div>
+    </div>
+  </section></div>

components/unsorted/casper-all-DDDYAyuL.html

@@ -0,0 +1,71 @@
+<div><section>
+    <div class="pt-24 pb-16 bg-black">
+      <div class="container px-4 mx-auto">
+        <div class="flex flex-wrap -mx-4 justify-between">
+          <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-10 lg:mb-0">
+            <a class="inline-block mb-6" href="#">
+              <img src="pstls-assets/logos/pstls-logo-normal-white.svg" alt="" width="87">
+            </a>
+            <p class="leading-8 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </div>
+          <div class="w-full md:w-1/2 lg:w-auto px-4 mb-10 lg:mb-0">
+            <h5 class="text-xl font-bold mb-5 text-white">Product</h5>
+            <ul>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Hello</a></li>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Story</a></li>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Pricing</a></li>
+              <li><a class="inline-block text-white hover:text-gray-200" href="#">Applications</a></li>
+            </ul>
+          </div>
+          <div class="w-full md:w-1/2 lg:w-auto px-4 mb-10 lg:mb-0">
+            <h5 class="text-xl font-bold mb-5 text-white">Resources</h5>
+            <ul>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">New account</a></li>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Log in</a></li>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Testimonials</a></li>
+              <li><a class="inline-block text-white hover:text-gray-200" href="#">Contact</a></li>
+            </ul>
+          </div>
+          <div class="w-full md:w-1/2 lg:w-1/4 px-4">
+            <h5 class="text-xl font-bold mb-5 text-white">Product</h5>
+            <ul>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Hello</a></li>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Story</a></li>
+              <li class="mb-2"><a class="inline-block text-white hover:text-gray-200" href="#">Pricing</a></li>
+              <li><a class="inline-block text-white hover:text-gray-200" href="#">Applications</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="py-16 bg-gray-900">
+      <div class="container px-4 mx-auto">
+        <div class="flex flex-wrap -mx-4 justify-between">
+          <div class="w-full lg:w-auto px-4 mb-6 lg:mb-0">
+            <p class="text-gray-300">© Pstls. 2022 All right reserved.</p>
+          </div>
+          <div class="w-full lg:w-auto px-4 mb-6 lg:mb-0">
+            <ul class="lg:flex justify-center">
+              <li class="mb-4 lg:mb-0 lg:mr-12"><a class="inline-block font-bold text-white hover:text-gray-200" href="#" style="font-size: 14px;">Hello</a></li>
+              <li class="mb-4 lg:mb-0 lg:mr-12"><a class="inline-block font-bold text-white hover:text-gray-200" href="#" style="font-size: 14px;">Story</a></li>
+              <li class="mb-4 lg:mb-0 lg:mr-12"><a class="inline-block font-bold text-white hover:text-gray-200" href="#" style="font-size: 14px;">About us</a></li>
+              <li><a class="inline-block font-bold text-white hover:text-gray-200" href="#" style="font-size: 14px;">Services</a></li>
+            </ul>
+          </div>
+          <div class="w-full lg:w-auto px-4">
+            <div class="flex items-center lg:justify-end">
+              <a class="inline-block mr-4" href="#">
+                <img src="pstls-assets/logos/twitter.svg" alt="">
+              </a>
+              <a class="inline-block mr-4" href="#">
+                <img src="pstls-assets/logos/google.svg" alt="">
+              </a>
+              <a class="inline-block" href="#">
+                <img src="pstls-assets/logos/facebook.svg" alt="">
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section> </div>