-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
523 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <section class="overflow-hidden"> | ||
| <div class="bg-black"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="flex items-center justify-between py-5"> | ||
| <div class="w-auto"> | ||
| <div class="flex flex-wrap items-center"> | ||
| <div class="w-auto pr-2"> | ||
| <a href="#"> | ||
| <img src="https://shuffle.dev/basko-assets/logos/basko-logo-light.png" alt="" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-auto"> | ||
| <div class="flex flex-wrap items-center"> | ||
| <div class="hidden w-auto lg:block"> | ||
| <ul class="mr-8 flex items-center"> | ||
| <li class="mr-14 font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Features</a></li> | ||
| <li class="mr-14 font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Pricing</a></li> | ||
| <li class="mr-8 border-r border-gray-700 pr-8 font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Automation</a></li> | ||
| <li class="font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Customer Login</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="hidden w-auto lg:block"> | ||
| <div class="inline-block"><a class="inline-block rounded-lg bg-indigo-500 px-5 py-3 text-center font-semibold tracking-tight text-white transition duration-200 hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-300" href="#">Try 14 Days Free Trial</a></div> | ||
| </div> | ||
| <div class="w-auto lg:hidden"> | ||
| <a href="#"> | ||
| <svg class="navbar-burger text-indigo-600" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect width="56" height="56" rx="28" fill="currentColor"></rect> | ||
| <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-4/6 sm:max-w-xs"> | ||
| <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div> | ||
| <nav class="relative z-10 h-full overflow-y-auto bg-black px-9 pt-8"> | ||
| <div class="flex h-full flex-wrap justify-between"> | ||
| <div class="w-full"> | ||
| <div class="-m-2 flex items-center justify-between"> | ||
| <div class="w-auto p-2"> | ||
| <a class="inline-block" href="#"> | ||
| <img src="https://shuffle.dev/basko-assets/logos/basko-logo-light.png" alt="" /> | ||
| </a> | ||
| </div> | ||
| <div class="w-auto p-2"> | ||
| <a class="navbar-burger text-white" href="#"> | ||
| <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex w-full flex-col justify-center py-16"> | ||
| <ul> | ||
| <li class="mb-12 font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Features</a></li> | ||
| <li class="mb-12 font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Pricing</a></li> | ||
| <li class="mb-12 font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Automation</a></li> | ||
| <li class="font-medium tracking-tight text-white hover:text-gray-200"><a href="#">Customer Login</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="flex w-full flex-col justify-end pb-8"><a class="inline-block rounded-lg bg-indigo-500 px-5 py-3 text-center font-semibold tracking-tight text-white transition duration-200 hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-300" href="#">Try 14 Days Free Trial</a></div> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| <div class="overflow-hidden bg-black pb-24 pt-16 lg:pb-52 lg:pt-32"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="-m-8 flex flex-wrap"> | ||
| <div class="w-full p-8 md:w-1/2"> | ||
| <div class="md:max-w-lg"> | ||
| <span class="mb-8 inline-block rounded-full bg-gray-600 px-3 py-1 font-semibold text-white">#1 Brand Building Tool</span> | ||
| <h1 class="font-heading mb-12 text-6xl tracking-tighter text-white md:text-7xl">Boost brand's visibility and reach fast.</h1> | ||
| <div class="-m-2 mb-14 flex flex-wrap"> | ||
| <div class="w-auto p-2"><a class="inline-block rounded-lg bg-indigo-500 px-5 py-4 font-semibold tracking-tight text-white transition duration-200 hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-400" href="#">Try 14 Days Free Trial</a></div> | ||
| <div class="w-auto p-2"> | ||
| <a class="inline-flex items-center rounded-lg border border-gray-600 bg-transparent px-5 py-4 transition duration-200 hover:border-indigo-600 hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-300" href="#"> | ||
| <div class="inline-block"> | ||
| <svg class="mr-2.5" width="18" height="19" viewbox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M3 12.5L3 13.25C3 14.4926 4.00736 15.5 5.25 15.5L12.75 15.5C13.9926 15.5 15 14.4926 15 13.25L15 12.5M12 9.5L9 12.5M9 12.5L6 9.5M9 12.5L9 3.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </div> | ||
| <span class="font-semibold tracking-tight text-white">Download IOS App</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="max-w-md"> | ||
| <div class="-m-1.5 flex flex-wrap"> | ||
| <div class="w-auto p-1.5"> | ||
| <div class="flex flex-wrap"> | ||
| <div class="w-auto"> | ||
| <img src="https://shuffle.dev/basko-assets/images/headers/avatar.png" alt="" /> | ||
| </div> | ||
| <div class="-ml-5 w-auto"> | ||
| <img src="https://shuffle.dev/basko-assets/images/headers/avatar2.png" alt="" /> | ||
| </div> | ||
| <div class="-ml-5 w-auto"> | ||
| <img src="https://shuffle.dev/basko-assets/images/headers/avatar3.png" alt="" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex-1 p-1.5"> | ||
| <p class="tracking-tight text-white">Join other 12k+ Marketers and start building brands reputation now.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full p-8 md:w-1/2"> | ||
| <img class="transform transition duration-500 hover:-translate-y-2" src="https://shuffle.dev/basko-assets/images/headers/dashboard.png" alt="" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| <section class="overflow-hidden"> | ||
| <div class="bg-white"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="flex items-center justify-between py-5"> | ||
| <div class="w-auto"> | ||
| <div class="flex flex-wrap items-center"> | ||
| <div class="w-auto pr-2"> | ||
| <a href="#"> | ||
| <img src="https://shuffle.dev/basko-assets/logos/basko-logo-dark.png" alt=""> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-auto"> | ||
| <div class="flex flex-wrap items-center"> | ||
| <div class="w-auto hidden lg:block"> | ||
| <ul class="flex items-center mr-8"> | ||
| <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Features</a></li> | ||
| <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Pricing</a></li> | ||
| <li class="mr-8 font-medium hover:text-gray-900 tracking-tight border-r pr-8"><a href="#">Automation</a></li> | ||
| <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Customer Login</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="w-auto hidden lg:block"> | ||
| <div class="inline-block"><a class="inline-block px-5 py-3 text-white font-semibold text-center 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 class="w-auto lg:hidden"> | ||
| <a href="#"> | ||
| <svg class="navbar-burger text-indigo-600" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect width="56" height="56" rx="28" fill="currentColor"></rect> | ||
| <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50"> | ||
| <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div> | ||
| <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto"> | ||
| <div class="flex flex-wrap justify-between h-full"> | ||
| <div class="w-full"> | ||
| <div class="flex items-center justify-between -m-2"> | ||
| <div class="w-auto p-2"> | ||
| <a class="inline-block" href="#"> | ||
| <img src="https://shuffle.dev/basko-assets/logos/basko-logo-dark.png" alt=""> | ||
| </a> | ||
| </div> | ||
| <div class="w-auto p-2"> | ||
| <a class="navbar-burger" href="#"> | ||
| <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-col justify-center py-16 w-full"> | ||
| <ul> | ||
| <li class="mb-12 font-medium hover:text-gray-900 tracking-tight"><a href="#">Features</a></li> | ||
| <li class="mb-12 font-medium hover:text-gray-900 tracking-tight"><a href="#">Pricing</a></li> | ||
| <li class="mb-12 font-medium hover:text-gray-900 tracking-tight"><a href="#">Automation</a></li> | ||
| <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Customer Login</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-5 py-3 text-white font-semibold text-center 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> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| <div class="pt-16 pb-28 bg-white overflow-hidden"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="max-w-2xl mx-auto text-center"> | ||
| <h1 class="font-heading mb-4 text-6xl md:text-7xl tracking-tighter">Boost brand's visibility and reach fast.</h1> | ||
| <p class="mb-10 max-w-md mx-auto">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p> | ||
| <a class="inline-block mb-6 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> | ||
| <p class="mb-20 text-gray-600 text-sm tracking-tight">No Credit Card Required / Cancel Anytime</p> | ||
| </div> | ||
| <div class="max-w-6xl mx-auto"> | ||
| <div class="flex items-center justify-center"> | ||
| <div class="relative z-10 flex-1"> | ||
| <div class="rounded-full" style="background: url('basko-assets/images/headers/bg-garadient.jpg'); background-repeat: no-repeat; background-size: cover;"> | ||
| <div class="flex flex-wrap items-center justify-between"> | ||
| <div class="w-auto mx-auto"> | ||
| <div class="relative py-8 w-56 text-center"> | ||
| <h2 class="mb-3 text-7xl font-semibold text-white tracking-tighter">168%</h2> | ||
| <h3 class="mb-3 text-2xl font-semibold text-white">Monthly Revenue</h3> | ||
| <p class="text-white font-medium">Average result customers sees after using Subba</p> | ||
| <svg class="absolute top-0 -right-16" width="48" height="29" viewbox="0 0 48 29" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M46.9768 3.48213C41.8293 0.969009 36.4787 0.900369 35.2041 1.6363C32.1879 3.37769 31.3644 5.04466 29.5283 8.4754C28.4845 10.4255 27.5211 14.1488 26.0573 15.56C23.9487 17.5928 22.6869 18.5625 19.5593 18.5658C16.5467 18.569 10.9507 15.639 7.3183 17.7362C3.6859 19.8333 3.38771 26.3985 1.76915 27.333" stroke="white" stroke-width="2" stroke-linecap="round"></path> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| <div class="w-auto mx-auto xl:-mr-px"> | ||
| <img class="relative -right-px transform hover:translate-x-5 trannsition duration-500" src="https://shuffle.dev/basko-assets/images/headers/revenue.png" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-auto -ml-8"> | ||
| <img class="rounded-full" src="https://shuffle.dev/basko-assets/images/headers/avatar4.jpg" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
Oops, something went wrong.