forked from themesberg/flowbite
-
Notifications
You must be signed in to change notification settings - Fork 0
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
1 parent
9435724
commit cecbba5
Showing
88 changed files
with
25,152 additions
and
10,575 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
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
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,15 @@ | ||
| <section class="bg-white pt-16 pb-0 lg:py-24"> | ||
| <div class="container px-4 lg:px-12 mx-auto"> | ||
| <h2 class="text-3xl lg:text-6xl font-bold text-gray-900 mb-6">Auto Layout</h2> | ||
| <p class="text-gray-600 text-xl lg:text-2xl mb-10">The structure of the pages available in FlowBite are set up using the auto layout feature from Figma, so that changing the order and width of columns and rows will be easy to do so.</p> | ||
| <div class="lg:py-12 xl:py-28 2xl:py-48 relative"> | ||
| <picture> | ||
| <source media="(min-width: 1024px)" srcSet="" /> | ||
| <source media="(min-width: 640px)" srcSet="" /> | ||
| <source srcSet="" /> | ||
| <img src="" class="lg:absolute lg:top-1/2 lg:transform lg:-translate-y-1/2 lg:z-20 lg:left-1/2 lg:-translate-x-1/2 lg:px-8" alt="Tailwind Figma Auto-Layout" /> | ||
| </picture> | ||
| <div class="hidden lg:block bg-gray-100 rounded-3xl w-full h-80 z-0"></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,11 @@ | ||
| <section class="bg-white py-16 lg:py-24" id="changelog"> | ||
| <div class="container px-4 lg:px-12 mx-auto"> | ||
| <h2 class="text-3xl lg:text-6xl font-bold text-gray-900 mb-6">Changelog</h2> | ||
| <p class="text-gray-600 text-xl lg:text-2xl mb-16">We keep the changelog public to show you that FlowBite is a well updated and maintained product. Read through the timeline of updates by browsing the changelog below.</p> | ||
| <div class="bg-gray-800 w-full rounded-3xl"> | ||
| <div class="pl-8"> | ||
|
|
||
| </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,38 @@ | ||
| <section class="bg-white pt-16 lg:py-24"> | ||
| <div class="container px-4 lg:px-12 mx-auto"> | ||
| <h2 class="text-3xl xl:text-6xl font-bold text-gray-900 mb-6">Built for all devices</h2> | ||
| <p class="text-gray-600 text-xl lg:text-2xl mb-6">Responsive design is an important requirement to build accessible user interfaces and provide a high quality experience for your users. That is why we built all of the desktop, tablet, and mobile screen examples for the devices from FlowBite.</p> | ||
| <p class="text-gray-600 text-xl lg:text-2xl mb-10"><span class="text-gray-900 font-semibold">Mobile</span> vs <span class="text-gray-900 font-semibold">Desktop</span> vs <span class="text-gray-900 font-semibold">Tablet</span> Market Share:</p> | ||
|
|
||
| <div class="flex flex-col lg:flex-row mb-16"> | ||
| <div class="flex items-center mr-8 mb-8 lg:mb-0"> | ||
| <div class="h-10 w-10 lg:h-12 lg:w-12 rounded-full bg-blue-100 flex justify-center items-center mr-4"> | ||
| <svg class="w-5 h-5 lg:w-6 lg:h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd"></path></svg> | ||
| </div> | ||
| <span class="text-gray-600 font-medium text-xl lg:text-2xl">Mobile: <span class="text-gray-900">54.25%</span></span> | ||
| </div> | ||
| <div class="flex items-center mr-8 mb-8 lg:mb-0"> | ||
| <div class="h-10 w-10 lg:h-12 lg:w-12 rounded-full bg-indigo-100 flex justify-center items-center mr-4"> | ||
| <svg class="w-5 h-5 lg:w-6 lg:h-6 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clipRule="evenodd"></path></svg> | ||
| </div> | ||
| <span class="text-gray-600 font-medium text-xl lg:text-2xl">Desktop: <span class="text-gray-900">42.9%</span></span> | ||
| </div> | ||
| <div class="flex items-center mr-8"> | ||
| <div class="h-10 w-10 lg:h-12 lg:w-12 rounded-full bg-green-100 flex justify-center items-center mr-4"> | ||
| <svg class="w-5 h-5 lg:w-6 lg:h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm4 14a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd"></path></svg> | ||
| </div> | ||
| <span class="text-gray-600 font-medium text-xl lg:text-2xl">Tablet: <span class="text-gray-900">2.85%</span></span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="relative"> | ||
| <picture> | ||
| <source media="(min-width: 1024px)" srcSet="" /> | ||
| <source media="(min-width: 640px)" srcSet="" /> | ||
| <source srcSet="" /> | ||
| <img src="" alt="Tailwind Figma Devices" /> | ||
| </picture> | ||
| </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,105 @@ | ||
| <section class="pt-16 lg:pt-24 pb-28 lg:pb-48 bg-gray-50" id="faq"> | ||
| <div class="container px-4 lg:px-12 mx-auto"> | ||
| <h2 class="text-3xl lg:text-5xl font-bold lg:text-center text-gray-900 mb-4">Frequently asked questions</h2> | ||
| <p class="text-gray-500 text-lg lg:text-center">Search for the questions that are frequently asked about FlowBite</p> | ||
| <hr class="bg-gray-200 my-12" /> | ||
| <div class="grid lg:grid-cols-3 gap-8"> | ||
| <div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">What do you mean by "Figma assets"?</h3> | ||
| <p class="text-gray-600">You will have access to download the full Figma project including all of the pages, the components, responsive pages, and also the icons, illustrations, and images included in the screens.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">What does "lifetime access" exactly mean?</h3> | ||
| <p class="text-gray-600 mb-4">Once you have purchased either the design, code, or both packages, you will have access to all of the future updates based on the roadmap, free of charge.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">How does support work?</h3> | ||
| <p class="text-gray-600 mb-4">We're aware of the importance of well qualified support, that is why we decided that support will only be provided by the authors that actually worked on this project.</p> | ||
| <p class="text-gray-600 mb-4">Feel free to <a href="https://themesberg.com/contact" class="text-blue-600 font-medium underline hover:no-underline" target="_blank" rel="noreferrer">contact us</a> and we'll help you out as soon as we can.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">I want to build more than one project with FlowBite. Is that allowed?</h3> | ||
| <p class="text-gray-600 mb-4">You can use FlowBite for an unlimited amount of projects, whether it's a personal website, a SaaS app, or a website for a client. As long as you don't build a product that will directly compete with FlowBite either as a UI kit, theme, or template, it's fine.</p> | ||
| <p class="text-gray-600 mb-4">Find out more information by <Link to="/license" class="text-blue-600 font-medium underline hover:no-underline">reading the license</Link>.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">What does "free updates" include?</h3> | ||
| <p class="text-gray-600 mb-4">The free updates that will be provided is based on the <a href="#roadmap" class="text-blue-600 font-medium underline hover:no-underline">roadmap</a> that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">What does the free version include?</h3> | ||
| <p class="text-gray-600 mb-4">The <a href="#" class="text-blue-600 font-medium underline hover:no-underline">free version</a> of FlowBite includes a minimal style guidelines, component variants, and a dashboard page with the mobile version alongside it.</p> | ||
| <p class="text-gray-600 mb-4">You can use this version for any purposes, because it is open-source under the MIT license.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">What is the difference between FlowBite and Tailwind UI?</h3> | ||
| <p class="text-gray-600 mb-4">Although both FlowBite and Tailwind UI are built for integration with Tailwind CSS, the main difference is in the design, the pages, the extra components and UI elements that FlowBite includes.</p> | ||
| <p class="text-gray-600 mb-4">Additionally, FlowBite is a project that is still in development, and later it will include both the application, marketing, and e-commerce UI interfaces.</p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">How do I purchase a license for my entire team?</h3> | ||
| <p class="text-gray-600 mb-4">You can purchase a license that you can share with your entire team here:</p> | ||
| <ul class="mb-4 list-disc pl-4"> | ||
| <li class="text-gray-600 mb-2"><span class="text-blue-600 font-medium hover:underline cursor-pointer">Figma Files - Buy a team license for $299 USD</span></li> | ||
| <li class="text-gray-600 mb-2"><span class="text-blue-600 font-medium hover:underline cursor-pointer">Figma Files + Tailwind CSS code pre-order - Buy a team license for <del>$699</del> $559 USD</span></li> | ||
| <li class="text-gray-600 mb-4"><span class="text-blue-600 font-medium hover:underline cursor-pointer">Tailwind CSS code pre-order - Buy a team license for <del>$399</del> $319 USD</span></li> | ||
| </ul> | ||
| <p class="text-gray-600 mb-4">Please use a single account to share with your team to access the download files.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">Can I build/sell templates or themes using FlowBite?</h3> | ||
| <p class="text-gray-600 mb-4">It is not allowed to use FlowBite or parts of the project to build themes, templates, UI kits, or page builders.</p> | ||
| <p class="text-gray-600 mb-4">Find out more information by <Link to="/license" class="text-blue-600 font-medium underline hover:no-underline">reading the license</Link>.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">Can I use FlowBite in open-source projects?</h3> | ||
| <p class="text-gray-600 mb-4">Generally, it is accepted to use FlowBite in open-source projects, as long as it is not a UI library, a theme, a template, a page-builder that would be considered as an alternative to FlowBite itself.</p> | ||
| <p class="text-gray-600 mb-4">With that being said, feel free to use this design kit for your open-source projects.</p> | ||
| <p class="text-gray-600 mb-4">Find out more information by <Link to="/license" class="text-blue-600 font-medium underline hover:no-underline">reading the license</Link>.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">Can I use FlowBite for commercial purposes?</h3> | ||
| <p class="text-gray-600 mb-4">Absolutely! You can use this design kit to build any type of commercial business, whether it's a SaaS, an e-commerce app, an application UI.</p> | ||
| <p class="text-gray-600 mb-4">As long as it is not a design resource that you will re-sell, it is alright to use it for commercial purposes.</p> | ||
| <p class="text-gray-600 mb-4">Find out more information by <Link to="/license" class="text-blue-600 font-medium underline hover:no-underline">reading the license</Link>.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">Can I get an invoice?</h3> | ||
| <p class="text-gray-600 mb-4">After opening the checkout process, you will be able to add all of your personal or company information that you want to be available on the invoice. After the purchase, you will get an email with the invoice.</p> | ||
| <p class="text-gray-600 mb-4">If you forgot to complete the information, or you didn't get the invoice by email, feel free to <a href="https://themesberg.com/contact" class="text-blue-600 font-medium underline hover:no-underline" target="_blank" rel="noreferrer">contact us</a> and help you out with the invoice.</p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">When will I get access to the Tailwind CSS code if I pre-ordered it?</h3> | ||
| <p class="text-gray-600 mb-4">The official date that we have set out to release the code version of FlowBite is the <span class="font-medium text-gray-900">25th of September, 2021</span>. We are already working on the integration and if you have a pre-order, you will also get frequent updates about the progress.</p> | ||
| <p class="text-gray-600 mb-4">You'll be one of the first to know when it will be available.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">What is your refund policy?</h3> | ||
| <p class="text-gray-600 mb-4">If you are unhappy with your purchase, just <a href="https://themesberg.com/contact" class="text-blue-600 font-medium underline hover:no-underline" target="_blank" rel="noreferrer">contact us</a> within 30 days and we'll issue a full refund.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">Is it allowed to use the design assets, such as the fonts, icons, and illustrations?</h3> | ||
| <p class="text-gray-600 mb-4">What you see is what you get. Which means that all icons, fonts, and illustrations can be used based on the licensing that we researched or purchased. For example, we purchased rights to use the illustrations in Flowbite.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">Where can I access my download files?</h3> | ||
| <p class="text-gray-600 mb-4">After you purchased one of the plans, you will get two emails: one for the invoice, and another one with the download files.</p> | ||
| <p class="text-gray-600 mb-4">Soon we will create a way that you will be able to access the download files from the FlowBite dashboard from this website.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">I have a company registered for VAT. Where can I add the VAT for the invoice?</h3> | ||
| <p class="text-gray-600 mb-4">After initializing the checkout process from Paddle, you will be able to see a text "Add VAT code". Click on that, and add the VAT code for your company. This will also remove the extra VAT tax from the purchase.</p> | ||
| </div> | ||
| <div class="mb-10"> | ||
| <h3 class="text-gray-900 text-lg mb-4 font-medium">Why would I pre-order the Tailwind CSS code?</h3> | ||
| <p class="text-gray-600 mb-4">If you decide to pre-order the Tailwind CSS code, which will arrive on the 25th of September 2021, you can get a base 20% price reduction and purchase it only for $119, instead of $149.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
Oops, something went wrong.