Skip to content

Commit

Permalink
added ctal
Browse files Browse the repository at this point in the history
  • Loading branch information
besoeasy authored Dec 6, 2023
1 parent 88e9560 commit cfeaeef
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 0 deletions.
38 changes: 38 additions & 0 deletions components/CTA/ctal1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<section class="py-24 lg:py-32 bg-gray-100 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="overflow-hidden rounded-xl">
<div class="flex flex-wrap">
<div class="w-full md:w-1/2">
<div class="relative h-full overflow-hidden">
<div class="absolute z-10 bottom-7 left-7 rounded-full">
<a class="group flex flex-wrap items-center -m-1" href="#">
<div class="w-auto p-1">
<svg width="99" height="99" viewbox="0 0 99 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="49.0879" cy="49.0874" r="30.9375" fill="white"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5004 89.0999C71.3709 89.0999 89.1004 71.3704 89.1004 49.4999C89.1004 27.6294 71.3709 9.8999 49.5004 9.8999C27.6299 9.8999 9.90039 27.6294 9.90039 49.4999C9.90039 71.3704 27.6299 89.0999 49.5004 89.0999ZM47.2962 35.4813C45.7772 34.4686 43.8242 34.3742 42.2147 35.2356C40.6052 36.097 39.6004 37.7744 39.6004 39.5999V59.3999C39.6004 61.2254 40.6052 62.9028 42.2147 63.7642C43.8242 64.6256 45.7772 64.5312 47.2962 63.5186L62.1462 53.6186C63.5232 52.7005 64.3504 51.155 64.3504 49.4999C64.3504 47.8449 63.5232 46.2993 62.1462 45.3813L47.2962 35.4813Z" fill="#171A1F"></path>
</svg>
</div>
<div class="w-auto p-1">
<h3 class="font-semibold text-3xl w-40 group-hover:underline" style="letter-spacing: -0.5px;">Watch this How to video</h3>
</div>
</a>
</div>
<img class="w-full h-full object-cover transform hover:scale-105 transition duration-500" src="https://shuffle.dev/basko-assets/images/cta/bg.jpg" alt="">
</div>
</div>
<div class="flex-1 md:w-1/2">
<div class="p-10 flex flex-col justify-between h-full bg-black">
<div class="mb-12">
<h2 class="font-heading mb-8 text-6xl text-white tracking-tighter">Get more traffic with customized marketing strategies.</h2>
<a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a>
</div>
<div>
<h3 class="mb-3 text-3xl font-semibold text-white" style="letter-spacing: -0.5px;">Start with a free trial - no credit card required.</h3>
<p class="text-gray-400 tracking-tight">We never share your data with third parties.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
15 changes: 15 additions & 0 deletions components/CTA/ctal2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<section class="py-24 bg-gray-100 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="max-w-xl mx-auto text-center">
<span class="inline-block max-w-max mb-8 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
<h2 class="font-heading mb-4 text-6xl text-gray-700 tracking-tighter">Upgrade your online marketing game today</h2>
<p class="mb-8 text-xl tracking-tight">Whereby is the super simple way to connect over video. No apps, downloads, or long meeting links.</p>
<div class="flex flex-wrap justify-center -m-1.5 mb-5">
<div class="w-auto p-1.5">
<input class="block w-full px-5 py-4 text-gray-700 bg-white outline-none placeholder-gray-700 border border-gray-300 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" type="text" placeholder="Enter your email address">
</div>
<div class="w-auto p-1.5"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
</div>
</div>
</div>
</section>
46 changes: 46 additions & 0 deletions components/CTA/ctal3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<section class="py-24 lg:py-32 bg-white overflow-hidden">
<div class="container px-4 mx-auto">
<div class="relative p-12 bg-black overflow-hidden rounded-2xl">
<img class="absolute top-0 right-0" src="https://shuffle.dev/basko-assets/images/cta/gradient.png" alt="">
<div class="relative">
<h2 class="font-heading mb-2 text-6xl text-white tracking-tighter">Get early access to Basko.</h2>
<h2 class="font-heading mb-8 text-6xl text-gray-400 tracking-tighter">Close your books faster and grow.</h2>
<a class="inline-block mb-32 lg:mb-48 px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
<ul class="flex flex-wrap -m-4">
<li class="p-4">
<a class="flex flex-wrap" href="#">
<svg class="mr-3" width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.25 13L11.75 15.5L16.75 10.5M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="text-white tracking-tight">Seamless Collaboration</span>
</a>
</li>
<li class="p-4">
<a class="flex flex-wrap" href="#">
<svg class="mr-3" width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.25 13L11.75 15.5L16.75 10.5M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="text-white tracking-tight">Customizable Workflows</span>
</a>
</li>
<li class="p-4">
<a class="flex flex-wrap" href="#">
<svg class="mr-3" width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.25 13L11.75 15.5L16.75 10.5M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="text-white tracking-tight">Comprehensive Reporting</span>
</a>
</li>
<li class="p-4">
<a class="flex flex-wrap" href="#">
<svg class="mr-3" width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.25 13L11.75 15.5L16.75 10.5M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="text-white tracking-tight">Intuitive Interface</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
20 changes: 20 additions & 0 deletions components/CTA/ctal4.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<section class="py-24 bg-black overflow-hidden">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap lg:items-center -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="max-w-xl">
<h2 class="font-heading mb-5 text-6xl text-white tracking-tighter">Give us a shot.</h2>
<p class="mb-9 text-xl text-white tracking-tight">Build with existing layouts or create your own using the flexible design system.</p>
<a class="inline-block px-5 py-4 font-semibold tracking-tight bg-white hover:bg-gray-100 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="md:max-w-xl md:ml-auto">
<h3 class="mb-7 text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">“Our visual designer lets you quickly and of drag and drop your way to customapps for both desktop, mobile & also tab because it just made it so simple to use.” Chelsea French Business Owner</h3>
<h4 class="mb-1 font-semibold text-white tracking-tight">Chelsea French</h4>
<span class="text-sm text-gray-300 font-medium">Business Owner</span>
</div>
</div>
</div>
</div>
</section>

0 comments on commit cfeaeef

Please sign in to comment.