mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-17 15:17:02 +00:00
611 lines
39 KiB
HTML
611 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
|
|
<!-- swiper cdn for slider -->
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
|
|
<title>Template 28</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
|
|
<!-- header 21 start -->
|
|
|
|
<nav x-data="{mobile_nav_status:false}" class="w-full py-6 bg-white dark:bg-gray-800 ">
|
|
<div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
|
|
<section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
|
|
</svg>
|
|
<a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
|
|
</section>
|
|
|
|
<section>
|
|
<button @click="mobile_nav_status=!mobile_nav_status" class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<!-- :class="mobile_nav_status ? 'block ' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex' " -->
|
|
<ul :class="mobile_nav_status ? ' absolute w-full text-center flex flex-col bg-gray-800 -ml-60 rounded' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex'">
|
|
<li class="relative group py-2">
|
|
<a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
|
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
|
|
</li>
|
|
<li class="relative group py-2">
|
|
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
|
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
|
</li>
|
|
<li class="relative group py-2">
|
|
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
|
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
|
</li>
|
|
<li class="relative group py-2">
|
|
<a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- header 21 end -->
|
|
|
|
|
|
<!-- hero 15 start -->
|
|
<section class="dark:bg-gray-800 dark:text-gray-100">
|
|
<div class="container mx-auto flex flex-col items-center px-4 py-16 text-center md:py-32 md:px-10 lg:px-32 xl:max-w-3xl">
|
|
<h1 class="text-4xl font-bold leading-none sm:text-5xl">Quisquam necessita vel
|
|
<span class="dark:text-violet-400 text-red-400">laborum doloribus</span>delectus
|
|
</h1>
|
|
<p class="px-8 mt-8 mb-12 text-lg">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
|
|
<div class="flex flex-wrap justify-center">
|
|
<button class="px-8 py-3 m-2 text-lg font-semibold rounded bg-red-400 dark:bg-violet-400 dark:text-gray-900">Get started</button>
|
|
<button class="px-8 py-3 m-2 text-lg border rounded bg-gray-400 dark:bg-gray-800 dark:text-gray-50 dark:border-gray-700">Learn more</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- hero 15 end -->
|
|
|
|
|
|
<!-- start cta 11 -->
|
|
<section class="py-24 dark:bg-gray-900 dark:text-gray-50">
|
|
<div class="container mx-auto flex flex-col justify-around p-4 text-center md:p-10 lg:flex-row">
|
|
<div class="flex flex-col justify-center lg:text-left">
|
|
<p class="mb-1 text-sm font-medium tracking-widest uppercase dark:text-violet-400">Hic eligendi necessitatibus quod quia</p>
|
|
<h1 class="py-2 text-3xl font-medium leading-tight title-font">Master Cleanse Reliac Heirloom</h1>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center flex-shrink-0 mt-6 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:ml-4 lg:mt-0 lg:justify-end">
|
|
<button class="inline-flex items-center px-6 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current w-7 h-7 dark:text-coolGray-900">
|
|
<path d="M 5.4160156 2.328125 L 12.935547 10.158203 C 13.132547 10.363203 13.45925 10.363203 13.65625 10.158203 L 15.179688 8.5742188 C 15.405688 8.3392188 15.354312 7.956875 15.070312 7.796875 C 11.137313 5.571875 6.2620156 2.811125 5.4160156 2.328125 z M 3.140625 2.8476562 C 3.055625 3.0456562 3 3.2629063 3 3.5039062 L 3 20.591797 C 3 20.788797 3.044375 20.970625 3.109375 21.140625 L 11.576172 12.324219 C 11.762172 12.131219 11.762172 11.826813 11.576172 11.632812 L 3.140625 2.8476562 z M 17.443359 9.2578125 C 17.335484 9.2729375 17.233297 9.32375 17.154297 9.40625 L 15.015625 11.632812 C 14.829625 11.825812 14.829625 12.130219 15.015625 12.324219 L 17.134766 14.529297 C 17.292766 14.694297 17.546141 14.729188 17.744141 14.617188 C 19.227141 13.777188 20.226563 13.212891 20.226562 13.212891 C 20.725562 12.909891 21.007 12.443547 21 11.935547 C 20.992 11.439547 20.702609 10.981938 20.224609 10.710938 C 20.163609 10.676937 19.187672 10.124359 17.763672 9.3183594 C 17.664172 9.2623594 17.551234 9.2426875 17.443359 9.2578125 z M 13.296875 13.644531 C 13.165875 13.644531 13.034047 13.696328 12.935547 13.798828 L 5.4746094 21.566406 C 6.7566094 20.837406 11.328781 18.249578 15.050781 16.142578 C 15.334781 15.981578 15.386156 15.599281 15.160156 15.363281 L 13.65625 13.798828 C 13.55775 13.696328 13.427875 13.644531 13.296875 13.644531 z"></path>
|
|
</svg>
|
|
<span class="flex flex-col items-start ml-4 leading-none">
|
|
<span class="mb-1 text-xs">GET IT ON</span>
|
|
<span class="font-semibold title-font">Google Play</span>
|
|
</span>
|
|
</button>
|
|
<button class="inline-flex items-center px-5 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fill-current w-7 h-7 dark:text-coolGray-900">
|
|
<path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
|
|
</svg>
|
|
<span class="flex flex-col items-start ml-4 leading-none">
|
|
<span class="mb-1 text-xs">Download on the</span>
|
|
<span class="font-semibold title-font">App Store</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- end cta 11 -->
|
|
|
|
|
|
<!-- feature 12 start -->
|
|
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
|
<div class="container px-4 mx-auto space-y-1 text-center">
|
|
<span class="text-sm py-2 font-semibold tracking-wider uppercase dark:text-green-400">shortcut to your dream ui</span>
|
|
<h2 class="pb-3 text-3xl font-bold md:text-4xl">Create a stylish website in minutes</h2>
|
|
<p>Get a jumpstart to creating your new webpage! With our fully responsive and carefully styled components you can get the structure of your website done with just a couple of clicks.</p>
|
|
</div>
|
|
<div class="container grid justify-center gap-4 mx-auto lg:grid-cols-2 xl:grid-cols-4">
|
|
<div class="flex flex-col px-8 py-6">
|
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Components</h2>
|
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Individual components that can be re-used multiple times in your designs.</p>
|
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/components">
|
|
<span>Learn More</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="flex flex-col px-8 py-6 lg:border-none xl:border-solid">
|
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Sections</h2>
|
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Pre-made building blocks that you can stack on top of each other like Legos to build a website of your own in minutes.</p>
|
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/sections">
|
|
<span>Learn More</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="flex flex-col px-8 py-6">
|
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Templates</h2>
|
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Full pages that showcase pieces of what you can achieve with the building blocks that are in this UI kit.</p>
|
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/templates">
|
|
<span>Learn More</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="flex flex-col px-8 py-6">
|
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Customization</h2>
|
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Choose your primary color from any of the Tailwind CSS 2.0 colors. You can also view all of the components in our light and dark themes.</p>
|
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/docs">
|
|
<span>Learn More</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- feature 12 end -->
|
|
|
|
<!-- pricing 4 start -->
|
|
<div class="px-4 py-24 mx-auto dark:bg-gray-900">
|
|
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12 ">
|
|
<div>
|
|
<p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-400">
|
|
Our Pricing
|
|
</p>
|
|
</div>
|
|
<h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 dark:text-gray-300 sm:text-4xl md:mx-auto">
|
|
<span class="relative inline-block dark:text-emerald-300 ">
|
|
<svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
|
|
<defs>
|
|
<pattern id="7e5e8ff8-1960-4094-a63a-2a0c0f922d69" x="0" y="0" width=".135" height=".30">
|
|
<circle cx="1" cy="1" r=".7"></circle>
|
|
</pattern>
|
|
</defs>
|
|
<rect fill="url(#7e5e8ff8-1960-4094-a63a-2a0c0f922d69)" width="52" height="24"></rect>
|
|
</svg>
|
|
<span class="relative">Transparent</span>
|
|
</span>
|
|
pricing. Pay as you grow.
|
|
</h2>
|
|
<p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
|
|
</p>
|
|
</div>
|
|
<div class="grid max-w-md gap-10 row-gap-5 lg:max-w-screen-lg sm:row-gap-10 lg:grid-cols-3 xl:max-w-screen-lg sm:mx-auto">
|
|
<div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border-2 dark:border-emerald-200 rounded shadow-sm sm:items-center hover:shadow">
|
|
<div class="text-center dark:text-gray-300 ">
|
|
<div class="text-lg font-semibold">Start</div>
|
|
<div class="flex items-center justify-center mt-2">
|
|
<div class="mr-1 text-5xl font-bold">Free</div>
|
|
</div>
|
|
<div class="mt-2 space-y-3 ">
|
|
<div class="text-gray-700 dark:text-gray-400">10 deploys per day</div>
|
|
<div class="text-gray-700 dark:text-gray-400">10 GB of storage</div>
|
|
<div class="text-gray-700 dark:text-gray-400">20 domains</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 dark:bg-emerald-300 dark:hover:bg-emerald-500 dark:text-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
|
|
Start for free
|
|
</a>
|
|
<p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
|
|
Sed ut unde omnis iste natus accusantium doloremque.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border rounded shadow-sm sm:items-center hover:shadow border-purple-800">
|
|
<div class="absolute inset-x-0 top-0 flex justify-center -mt-3 ">
|
|
<div class="inline-block px-3 py-1 text-xs font-medium tracking-wider text-white uppercase rounded bg-purple-800">
|
|
Most Popular
|
|
</div>
|
|
</div>
|
|
<div class="text-center dark:text-gray-300">
|
|
<div class="text-lg font-semibold">Pro</div>
|
|
<div class="flex items-center justify-center mt-2">
|
|
<div class="mr-1 text-5xl font-bold">$38</div>
|
|
<div class="text-gray-700">/ mo</div>
|
|
</div>
|
|
<div class="mt-2 space-y-3">
|
|
<div class="text-gray-700 dark:text-gray-400 ">200 deploys per day</div>
|
|
<div class="text-gray-700 dark:text-gray-400 ">80 GB of storage</div>
|
|
<div class="text-gray-700 dark:text-gray-400 ">Global CDN</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
|
|
>
|
|
Buy Pro
|
|
</a>
|
|
<p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
|
|
Sed ut unde omnis iste natus accusantium doloremque.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border-2 dark:border-emerald-200 rounded shadow-sm sm:items-center hover:shadow">
|
|
<div class="text-center dark:text-gray-300">
|
|
<div class="text-lg font-semibold">Business</div>
|
|
<div class="flex items-center justify-center mt-2">
|
|
<div class="mr-1 text-5xl font-bold">$78</div>
|
|
<div class="text-gray-700">/ mo</div>
|
|
</div>
|
|
<div class="mt-2 space-y-3">
|
|
<div class="text-gray-700 dark:text-gray-400">500 GB of storage</div>
|
|
<div class="text-gray-700 dark:text-gray-400">Unlimited domains</div>
|
|
<div class="text-gray-700 dark:text-gray-400">24/7 Support</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 dark:bg-emerald-300 dark:hover:bg-emerald-500 dark:text-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
|
|
Buy Business
|
|
</a>
|
|
<p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
|
|
Sed ut unde omnis iste natus accusantium doloremque.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pricing 4 end -->
|
|
|
|
|
|
|
|
<!-- testimonial 9 start -->
|
|
|
|
<section class="bg-gray-100 dark:bg-gray-800">
|
|
<div class="px-4 py-24 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 max-w-[1340px]">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
|
|
<div class="max-w-xl space-y-8">
|
|
<h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
|
|
|
|
<p class="max-w-lg text-lg text-gray-500">
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
|
|
fugit a culpa sunt id!
|
|
</p>
|
|
|
|
<div class="hidden lg:flex">
|
|
<button
|
|
class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
|
aria-label="Previous slide"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5 transform -rotate-180"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
|
aria-label="Next slide"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="-mx-6 lg:col-span-2 lg:mx-0 ">
|
|
<div class="swiper-container overflow-hidden">
|
|
<div class="swiper-wrapper ">
|
|
<div class="swiper-slide">
|
|
<blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
|
|
<div>
|
|
<div class="flex space-x-0.5 text-green-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
|
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
|
|
quasi sunt necessitatibus dolorem ab laudantium vel.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
|
</blockquote>
|
|
</div>
|
|
|
|
<div class="swiper-slide">
|
|
<blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
|
|
<div>
|
|
<div class="flex space-x-0.5 text-green-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
|
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
|
|
quasi sunt necessitatibus dolorem ab laudantium vel.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8 lg:hidden">
|
|
<button
|
|
class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
|
aria-label="Previous slide"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5 transform -rotate-180"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
|
aria-label="next-slide"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
const swiper = new Swiper('.swiper-container', {
|
|
loop: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 32,
|
|
autoplay: {
|
|
delay: 2000,
|
|
},
|
|
navigation: {
|
|
nextEl: '.next-button',
|
|
prevEl: '.prev-button',
|
|
},
|
|
breakpoints: {
|
|
640: {
|
|
slidesPerView: 1.5,
|
|
centeredSlides: true,
|
|
},
|
|
1024: {
|
|
centeredSlides: false,
|
|
slidesPerView: 1.5,
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<!-- testimonial 9 end -->
|
|
|
|
|
|
<!-- start cta 12 -->
|
|
<div class="w-full dark:bg-gray-500 bg-[url('https://source.unsplash.com/random/640x480/?grayscale')] bg-center bg-blend-multiply bg-cover">
|
|
<div class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10">
|
|
<h1 class="text-5xl antialiased font-semibold leading-none text-center dark:text-gray-100">Get Our Updates</h1>
|
|
<p class="pt-2 pb-8 text-xl antialiased text-center dark:text-gray-100">Find out about events and other news</p>
|
|
<div class="flex flex-row">
|
|
<input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
|
|
<button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-gray-900">Subscribe</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- end cta 12 -->
|
|
|
|
|
|
<!-- footer 13 start -->
|
|
|
|
<section class="dark:bg-gray-800">
|
|
<footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
|
|
<div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div class="sm:col-span-2">
|
|
<a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
|
|
<svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
|
|
<rect x="3" y="1" width="7" height="12"></rect>
|
|
<rect x="3" y="17" width="7" height="6"></rect>
|
|
<rect x="14" y="1" width="7" height="6"></rect>
|
|
<rect x="14" y="11" width="7" height="12"></rect>
|
|
</svg>
|
|
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
|
|
</a>
|
|
<div class="mt-6 lg:max-w-sm">
|
|
<p class="text-sm text-gray-500 ">
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
|
|
</p>
|
|
<p class="mt-4 text-sm text-gray-500 ">
|
|
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2 text-sm">
|
|
<p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
|
|
<div class="flex">
|
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Phone:</p>
|
|
<a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
|
|
</div>
|
|
<div class="flex">
|
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Email:</p>
|
|
<a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">info@lorem.mail</a>
|
|
</div>
|
|
<div class="flex">
|
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Address:</p>
|
|
<a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
|
|
312 Lovely Street, NY
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
|
|
<div class="flex items-center mt-1 space-x-3">
|
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
|
<path
|
|
d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
|
<svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
|
|
<circle cx="15" cy="15" r="4"></circle>
|
|
<path
|
|
d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10 C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1 c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
|
<path
|
|
d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<p class="mt-4 text-sm text-gray-500">
|
|
Bacon ipsum dolor amet short ribs pig sausage prosciutto chicken spare ribs salami.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
|
|
<p class="text-sm text-gray-600">
|
|
© Copyright 2020 Lorem Inc. All rights reserved.
|
|
</p>
|
|
<ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
|
|
<li>
|
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
|
|
</li>
|
|
<li>
|
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
|
|
</li>
|
|
<li>
|
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms & Conditions</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
<!-- footer 13 end -->
|
|
|
|
|
|
|
|
<!-- start of script section -->
|
|
<script type="text/javascript">
|
|
let toogler = document.getElementById("dark_mood_toogler");
|
|
let doc_html_el = document.getElementsByTagName('html')[0];
|
|
|
|
doc_html_el.addEventListener('keyup',(e)=>{
|
|
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
|
if(e.ctrlKey && e.keyCode =='220'){
|
|
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
|
|
|
}
|
|
})
|
|
doc_html_el.addEventListener('keyup',(e)=>{
|
|
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
|
if(e.ctrlKey && e.keyCode =='191'){
|
|
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
|
|
|
}
|
|
})
|
|
toogler.addEventListener('click',()=>{
|
|
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
|
console.log(doc_html_el.className);
|
|
})
|
|
</script>
|
|
<!-- end of script section -->
|
|
|
|
|
|
</body>
|
|
</html> |