-
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
5 changed files
with
230 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,33 @@ | ||
| <section class="overflow-hidden bg-white py-24"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mx-auto mb-20 max-w-xl text-center"> | ||
| <h2 class="font-heading mb-5 text-6xl tracking-tighter">Master your workflow with Basko's productivity tools</h2> | ||
| <p class="text-xl tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p> | ||
| </div> | ||
| <div class="-m-7 mb-14 flex flex-wrap"> | ||
| <div class="w-full p-7 md:w-1/3"> | ||
| <div class="max-w-xs"> | ||
| <img class="mb-10" src="https://shuffle.dev/basko-assets/images/how-it-works/tool.svg" alt="" /> | ||
| <h3 class="mb-4 text-xl font-semibold tracking-tight">Choose the right tool</h3> | ||
| <p class="tracking-tight text-gray-600">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p> | ||
| </div> | ||
| </div> | ||
| <div class="w-full p-7 md:w-1/3"> | ||
| <div class="max-w-xs"> | ||
| <img class="mb-10" src="https://shuffle.dev/basko-assets/images/how-it-works/account.svg" alt="" /> | ||
| <h3 class="mb-4 text-xl font-semibold tracking-tight">Set up your account</h3> | ||
| <p class="tracking-tight text-gray-600">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p> | ||
| </div> | ||
| </div> | ||
| <div class="w-full p-7 md:w-1/3"> | ||
| <div class="max-w-xs"> | ||
| <img class="mb-10" src="https://shuffle.dev/basko-assets/images/how-it-works/start.svg" alt="" /> | ||
| <h3 class="mb-4 text-xl font-semibold tracking-tight">Start using Basko</h3> | ||
| <p class="tracking-tight text-gray-600">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-row justify-center"><a class="mx-auto 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-300" href="#">Try 14 Days Free Trial</a></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,57 @@ | ||
| <section class="py-24 lg:py-32 bg-black overflow-hidden"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="max-w-2xl text-center mx-auto mb-20"> | ||
| <h2 class="font-heading text-6xl text-white tracking-tighter">Boost your team's productivity with Basko's collaboration tools</h2> | ||
| </div> | ||
| <div class="flex flex-wrap lg:items-center -m-8"> | ||
| <div class="w-full md:w-1/2 p-8"> | ||
| <div class="md:max-w-lg"> | ||
| <div class="flex flex-wrap -m-8"> | ||
| <div class="w-full p-8"> | ||
| <div class="flex flex-wrap -m-8"> | ||
| <div class="w-24 p-8"> | ||
| <h3 class="font-heading text-7xl md:text-7xl text-gray-600 tracking-tighter">1</h3> | ||
| </div> | ||
| <div class="flex-1 p-8"> | ||
| <div class="md:max-w-md"> | ||
| <h3 class="mb-4 text-xl text-white font-semibold tracking-tight">Secured Payments</h3> | ||
| <p class="text-xl text-gray-400 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full p-8"> | ||
| <div class="flex flex-wrap -m-8"> | ||
| <div class="w-24 p-8"> | ||
| <h3 class="font-heading text-7xl md:text-7xl text-gray-600 tracking-tighter">2</h3> | ||
| </div> | ||
| <div class="flex-1 p-8"> | ||
| <div class="md:max-w-md"> | ||
| <h3 class="mb-4 text-xl text-white font-semibold tracking-tight">Set up your account</h3> | ||
| <p class="text-xl text-gray-400 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full p-8"> | ||
| <div class="flex flex-wrap -m-8"> | ||
| <div class="w-24 p-8"> | ||
| <h3 class="font-heading text-7xl md:text-7xl text-gray-600 tracking-tighter">3</h3> | ||
| </div> | ||
| <div class="flex-1 p-8"> | ||
| <div class="md:max-w-md"> | ||
| <h3 class="mb-4 text-xl text-white font-semibold tracking-tight">Start using Basko</h3> | ||
| <p class="text-xl text-gray-400 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full md:w-1/2 p-8"> | ||
| <img class="mx-auto rounded-2xl transform hover:-translate-y-1 transition duration-500" src="https://shuffle.dev/basko-assets/images/how-it-works/woman.jpg" alt=""> | ||
| </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,47 @@ | ||
| <section class="overflow-hidden bg-white py-24 lg:py-32"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="-m-8 flex flex-wrap xl:items-center"> | ||
| <div class="w-full p-8 md:w-1/2"> | ||
| <img class="mx-auto transform rounded-2xl transition duration-500 hover:-translate-y-1" src="https://shuffle.dev/basko-assets/images/how-it-works/workflow.jpg" alt="" /> | ||
| </div> | ||
| <div class="w-full p-8 md:w-1/2"> | ||
| <div class="max-w-xl"> | ||
| <h2 class="font-heading mb-24 text-6xl tracking-tighter">How to streamline your workflow with Basko</h2> | ||
| <div class="-m-6 flex flex-wrap"> | ||
| <div class="w-full p-6"> | ||
| <div class="-m-2 flex flex-wrap"> | ||
| <div class="w-auto p-2"> | ||
| <div class="flex h-14 w-14 items-center justify-center rounded-full bg-indigo-500 text-3xl font-semibold text-white" style="letter-spacing: -0.5px;">1</div> | ||
| </div> | ||
| <div class="flex-1 p-2"> | ||
| <p class="text-xl tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full p-6"> | ||
| <div class="-m-2 flex flex-wrap"> | ||
| <div class="w-auto p-2"> | ||
| <div class="flex h-14 w-14 items-center justify-center rounded-full bg-indigo-500 text-3xl font-semibold text-white" style="letter-spacing: -0.5px;">2</div> | ||
| </div> | ||
| <div class="flex-1 p-2"> | ||
| <p class="text-xl tracking-tight">Once you have chosen your productivity SaaS tool, you will need to set up your account.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full p-6"> | ||
| <div class="-m-2 flex flex-wrap"> | ||
| <div class="w-auto p-2"> | ||
| <div class="flex h-14 w-14 items-center justify-center rounded-full bg-indigo-500 text-3xl font-semibold text-white" style="letter-spacing: -0.5px;">3</div> | ||
| </div> | ||
| <div class="flex-1 p-2"> | ||
| <p class="text-xl tracking-tight">With your account set up, it's time to start using the productivity SaaS tool.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </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,70 @@ | ||
| <section class="pt-12 md:pt-24 pb-24 lg:py-32 bg-white overflow-hidden"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="flex flex-wrap"> | ||
| <div class="w-full md:w-1/2 p-8"> | ||
| <div class="md:max-w-xl"> | ||
| <div class="flex flex-wrap mb-10 md:mb-48"> | ||
| <div class="w-full"> | ||
| <a class="group block" href="#"> | ||
| <div class="flex flex-wrap py-6 -m-1.5"> | ||
| <div class="w-7 p-1.5"> | ||
| <span class="inline-block text-xl text-gray-300 font-semibold tracking-tight">1.</span> | ||
| </div> | ||
| <div class="flex-1 p-1.5"> | ||
| <h3 class="text-xl font-medium tracking-tight">Choose the right tool</h3> | ||
| </div> | ||
| </div> | ||
| <div class="relative h-px bg-gray-200"> | ||
| <div class="absolute top-0 left-0 w-0 group-hover:w-full h-px bg-indigo-500 transition-width duration-500"></div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full"> | ||
| <a class="group block" href="#"> | ||
| <div class="flex flex-wrap py-6 -m-1.5"> | ||
| <div class="w-7 p-1.5"> | ||
| <span class="inline-block text-xl text-gray-300 font-semibold tracking-tight">2.</span> | ||
| </div> | ||
| <div class="flex-1 p-1.5"> | ||
| <h3 class="text-xl font-medium tracking-tight">Set up your account</h3> | ||
| </div> | ||
| </div> | ||
| <div class="relative h-px bg-gray-200"> | ||
| <div class="absolute top-0 left-0 w-0 group-hover:w-full h-px bg-indigo-500 transition-width duration-500"></div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full"> | ||
| <a class="group block" href="#"> | ||
| <div class="flex flex-wrap py-6 -m-1.5"> | ||
| <div class="w-7 p-1.5"> | ||
| <span class="inline-block text-xl text-gray-300 font-semibold tracking-tight">3.</span> | ||
| </div> | ||
| <div class="flex-1 p-1.5"> | ||
| <h3 class="text-xl font-medium tracking-tight">Start using Basko</h3> | ||
| </div> | ||
| </div> | ||
| <div class="relative h-px bg-gray-200"> | ||
| <div class="absolute top-0 left-0 w-0 group-hover:w-full h-px bg-indigo-500 transition-width duration-500"></div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="md:max-w-md"> | ||
| <div class="flex flex-wrap -m-2"> | ||
| <div class="w-auto p-2"> | ||
| <img src="https://shuffle.dev/basko-assets/images/how-it-works/avatar.png" alt=""> | ||
| </div> | ||
| <div class="flex-1 p-2"> | ||
| <p class="tracking-tight">“I was skeptical at first, but after just a few days of using Basko, I was hooked. It's saved me so much time and effort, and I love how customizable it is.”</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full md:w-1/2 p-8"> | ||
| <img class="mx-auto md:mr-0 rounded-2xl transform hover:-translate-y-1 transition duration-500" src="https://shuffle.dev/basko-assets/images/how-it-works/woman3.jpg" alt=""> | ||
| </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,23 @@ | ||
| <section class="overflow-hidden bg-black py-24 lg:pb-40 lg:pt-32"> | ||
| <div class="container mx-auto px-4"> | ||
| <h2 class="font-heading mb-12 text-6xl tracking-tighter text-white lg:mb-24">How to streamline your workflow</h2> | ||
| <div class="-m-5 flex flex-wrap"> | ||
| <div class="w-full p-5 md:w-1/3"> | ||
| <h3 class="mb-4 text-xl font-semibold tracking-tight text-white">Add A Product</h3> | ||
| <p class="mb-12 text-xl tracking-tight text-gray-400">Manage your entire moving business from one of the simple, reliable CRM for it.</p> | ||
| <img class="w-full transform rounded-lg transition duration-500 hover:translate-y-3" src="https://shuffle.dev/basko-assets/images/how-it-works/device.jpg" alt="" /> | ||
| </div> | ||
| <div class="w-full p-5 md:w-1/3"> | ||
| <h3 class="mb-4 text-xl font-semibold tracking-tight text-white">Improve Quality</h3> | ||
| <p class="mb-12 text-xl tracking-tight text-gray-400">Manage your entire moving business from one of the simple, reliable CRM for it.</p> | ||
| <img class="w-full transform rounded-lg transition duration-500 hover:translate-y-3" src="https://shuffle.dev/basko-assets/images/how-it-works/woman4.jpg" alt="" /> | ||
| </div> | ||
| <div class="w-full p-5 md:w-1/3"> | ||
| <h3 class="mb-4 text-xl font-semibold tracking-tight text-white">Launch Your Brand</h3> | ||
| <p class="mb-12 text-xl tracking-tight text-gray-400">Manage your entire moving business from one of the simple, reliable CRM for it.</p> | ||
| <img class="w-full transform rounded-lg transition duration-500 hover:translate-y-3" src="https://shuffle.dev/basko-assets/images/how-it-works/stock.jpg" alt="" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|