add tutorials and discord invite
This commit is contained in:
paul
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.5 KiB |
@@ -181,7 +181,7 @@ header > .collapsible-header{
|
||||
}
|
||||
|
||||
.footer-link:hover{
|
||||
color: #fff;
|
||||
color: #0b0b0b;
|
||||
}
|
||||
|
||||
/* Navigation dots styling */
|
||||
|
||||
@@ -66,7 +66,8 @@
|
||||
<a class="header-links" href=""> About </a>
|
||||
<a class="header-links" href="#pricing"> Pricing </a>
|
||||
<a class="header-links" href="#features"> Features </a>
|
||||
<a class="header-links" href="https://github.com/PaulleDemon/PyUIBuilder"> Github </a>
|
||||
<a class="header-links" target="_blank" rel="noopener noreferrer" href="https://docs.pyuibuilder.com"> Docs </a>
|
||||
<a class="header-links" target="_blank" rel="noopener noreferrer" href="https://github.com/PaulleDemon/PyUIBuilder"> Github </a>
|
||||
</div>
|
||||
<div
|
||||
class="tw-mx-4 tw-flex tw-place-items-center tw-gap-[20px] tw-text-base max-md:tw-w-full max-md:tw-flex-col max-md:tw-place-content-center"
|
||||
@@ -74,6 +75,8 @@
|
||||
<a
|
||||
href="https://pyuibuilder.com"
|
||||
aria-label="start"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
class="tw-rounded-md tw-border-[1px] tw-border-black
|
||||
tw-bg-[#0F1727] tw-px-3 tw-py-2 tw-text-white
|
||||
tw-duration-[0.3s]
|
||||
@@ -134,7 +137,7 @@
|
||||
max-lg:tw-text-4xl tw-text-[#0F1727]
|
||||
max-md:tw-leading-snug"
|
||||
>
|
||||
<span class=""> Build Python UI's using <span class="tw-px-3 t"></span>
|
||||
<span class=""> Build Python UI's using <span class="tw-px-3"></span>
|
||||
</span>
|
||||
<br />
|
||||
<span class=" tw-px-3 tw-text-5xl"> Drag and Drop editor </span>
|
||||
@@ -154,7 +157,9 @@
|
||||
>
|
||||
<a
|
||||
class="btn !tw-bg-[#0F1727] !tw-text-white tw-shadow-lg tw-shadow-[#4d395e] tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03]"
|
||||
href="#pricing"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://pyuibuilder.com"
|
||||
>
|
||||
Start for free
|
||||
</a>
|
||||
@@ -191,7 +196,8 @@
|
||||
|
||||
<section
|
||||
class="tw-relative tw-flex tw-w-full tw-min-h-[100vh] tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-p-8"
|
||||
>
|
||||
id="features"
|
||||
>
|
||||
|
||||
<h2 class="tw-text-5xl tw-text-center tw-font-medium tw-uppercase">
|
||||
Everything you need <br>
|
||||
@@ -207,7 +213,7 @@
|
||||
|
||||
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
||||
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
hover:tw-scale-[1.02]">
|
||||
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
||||
<img src="./assets/images/home/benefits/1.png"
|
||||
@@ -223,7 +229,7 @@
|
||||
</div>
|
||||
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
||||
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
hover:tw-scale-[1.02]">
|
||||
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
||||
<img src="./assets/images/home/benefits/2.png"
|
||||
@@ -240,7 +246,7 @@
|
||||
</div>
|
||||
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
||||
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
hover:tw-scale-[1.02]">
|
||||
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
||||
<img src="./assets/images/home/benefits/3.png"
|
||||
@@ -257,7 +263,7 @@
|
||||
|
||||
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
||||
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
hover:tw-scale-[1.02]">
|
||||
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
||||
<img src="./assets/images/home/benefits/4.png"
|
||||
@@ -274,7 +280,7 @@
|
||||
</div>
|
||||
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
||||
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
hover:tw-scale-[1.02]">
|
||||
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
||||
<img src="./assets/images/home/benefits/5.png"
|
||||
@@ -290,7 +296,7 @@
|
||||
</div>
|
||||
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
||||
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl
|
||||
hover:tw-scale-[1.02]">
|
||||
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
||||
<img src="./assets/images/home/benefits/6.png"
|
||||
@@ -483,7 +489,7 @@
|
||||
</div>
|
||||
|
||||
<div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-[3px] tw-border-solid
|
||||
!tw-border-green-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
|
||||
!tw-border-blue-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
|
||||
<div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
|
||||
Limited time offer
|
||||
</div>
|
||||
@@ -639,11 +645,75 @@
|
||||
Premium features will start rolling out from mid of April in phase wise.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="faq tw-w-full"
|
||||
>
|
||||
<div
|
||||
class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
|
||||
>
|
||||
<span>Can I get a free license?</span>
|
||||
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
Yes, we have a program by which you can get a free license, <a href="https://tally.so/r/mJM22X">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tw-flex tw-flex-col tw-gap-2 tw-place-items-center tw-mt-4">
|
||||
<div class="tw-text-2xl">Want more help?</div>
|
||||
<a class="btn hover:tw-scale-[1.02] tw-duration-75" target="_blank" rel="noopener noreferrer"
|
||||
href="https://discord.gg/dHXjrrCA7G">Discord invite</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section
|
||||
class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[5%] tw-p-[3%] tw-px-[10%]"
|
||||
id="blog-section"
|
||||
>
|
||||
<h3 class="tw-text-4xl tw-font-medium tw-text-gray-800 max-md:tw-text-2xl">Blogs & Tutorials</h3>
|
||||
<div class="tw-mt-5 tw-flex tw-gap-8 tw-place-items-center max-lg:tw-flex-col
|
||||
tw-place-content-center tw-min-h-[300px] tw-w-full">
|
||||
<div class="tw-flex tw-gap-4" id="blogs">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<a href="https://youtu.be/MkeMv0X-w_4?si=qeutS58Js7Padd9m&t=49" target="_blank" rel="noopener noreferrer"
|
||||
class="tw-w-[350px] tw-min-w-[350px] tw-max-w-[350px] max-lg:tw-w-full tw-h-[360px] tw-shadow-xl tw-rounded-md tw-overflow-hidden">
|
||||
<div class="tw-h-[230px] tw-w-full tw-bg-gray-800 tw-flex tw-place-content-center">
|
||||
<img src="https://img.youtube.com/vi/MkeMv0X-w_4/hqdefault.jpg"
|
||||
alt="" class="tw-object-contain tw-w-full">
|
||||
</div>
|
||||
<div class="tw-flex tw-flex-col tw-gap-2 tw-p-3">
|
||||
<h3 class="tw-text-lg tw-font-medium">Introduction to PyUiBuilder - YouTube</h3>
|
||||
<p class="tw-text-bg-gray-500">Introduction to PyUIBuilder</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://youtu.be/4w3Oy17FE8U?si=-0V0cD5DQAEzCkKm" target="_blank" rel="noopener noreferrer"
|
||||
class="tw-w-[350px] tw-min-w-[350px] tw-max-w-[350px] max-lg:tw-w-full tw-h-[360px] tw-shadow-xl tw-rounded-md tw-overflow-hidden">
|
||||
<div class="tw-h-[230px] tw-w-full tw-bg-gray-800 tw-flex tw-place-content-center">
|
||||
<img src="https://img.youtube.com/vi/4w3Oy17FE8U/hqdefault.jpg"
|
||||
alt="" class="tw-object-contain tw-w-full">
|
||||
</div>
|
||||
<div class="tw-flex tw-flex-col tw-gap-2 tw-p-3">
|
||||
<h3 class="tw-text-lg tw-font-medium">Create Signup form using PyUIBuilder - YouTube</h3>
|
||||
<p class="tw-text-bg-gray-500">Learn how to use this tool, via practical example</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-2 tw-p-[3%] tw-px-[10%]"
|
||||
>
|
||||
<h3 class="tw-text-xl">Get updates right in your mailbox</h3>
|
||||
|
||||
<button class="btn hover:tw-scale-[1.05] tw-duration-75" data-tally-open="mVDY7N" data-tally-layout="modal" data-tally-hide-title="1" data-tally-emoji-text="👋" data-tally-emoji-animation="wave" data-tally-auto-close="0">
|
||||
Get updates
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<footer
|
||||
class="tw-mt-auto tw-flex tw-w-full tw-place-content-around tw-gap-3 tw-p-[5%] tw-px-[10%] tw-text-black max-md:tw-flex-col"
|
||||
@@ -691,7 +761,7 @@
|
||||
<div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
|
||||
<a href="#features" class="footer-link">Features</a>
|
||||
<a href="#pricing" class="footer-link">Pricing</a>
|
||||
<a href="https://github.com/PaulleDemon/font-tester-chrome/blob/main/roadmap.md" class="footer-link">Roadmap</a>
|
||||
<a href="https://github.com/PaulleDemon/PyUIBuilder/blob/main/roadmap.md" class="footer-link">Roadmap</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -699,12 +769,43 @@
|
||||
<div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
|
||||
<a href="" class="footer-link">About</a>
|
||||
<a href="#faq" class="footer-link">FAQ</a>
|
||||
<a href="https://github.com/PaulleDemon/font-tester-chrome" class="footer-link">Github</a>
|
||||
<a href="https://github.com/PaulleDemon/font-tester-chrome" class="footer-link">Report issue</a>
|
||||
<a href="https://github.com/PaulleDemon/PyUIBuilder" class="footer-link">Github</a>
|
||||
<a href="https://github.com/PaulleDemon/PyUIBuilder/issues" class="footer-link">Report issue</a>
|
||||
<a href="https://discord.gg/dHXjrrCA7G" class="footer-link">Discord invite</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
<script async src="https://tally.so/widgets/embed.js"></script>
|
||||
<script>
|
||||
|
||||
const blogsList = [
|
||||
{
|
||||
"title": "How to create Signup form - Blog",
|
||||
"description": "If your starting out with tkinter, it can be overwhelming without prior understanding of GUIs....",
|
||||
"url": "https://medium.com/python-in-plain-english/create-tkinter-guis-using-tkinter-gui-builder-pyuibuilder-a7422489c55e",
|
||||
"image_url": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*BaSis1UO3_zJeQtCnOe3Qg.png"
|
||||
},
|
||||
]
|
||||
|
||||
const blogContainer = document.getElementById('blogs');
|
||||
blogContainer.innerHTML = blogsList.map(blog => {
|
||||
return (`
|
||||
<a href="${blog.url}" target="_blank" rel="noopener noreferrer"
|
||||
class="tw-w-[350px] tw-h-[360px] tw-shadow-xl tw-rounded-md tw-overflow-hidden">
|
||||
|
||||
<div class="tw-h-[230px] tw-w-full tw-bg-gray-800 tw-flex tw-place-content-center">
|
||||
<img src="${blog.image_url}" alt="${blog.title}" class="tw-object-contain tw-w-full">
|
||||
</div>
|
||||
<div class="tw-flex tw-flex-col tw-gap-2 tw-p-3">
|
||||
<h3 class="tw-text-lg tw-font-medium">${blog.title}</h3>
|
||||
<p class="tw-text-bg-gray-500">${blog.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
`)
|
||||
}).join('')
|
||||
|
||||
</script>
|
||||
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"
|
||||
|
||||
@@ -733,6 +733,14 @@ video {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tw-h-\[230px\] {
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.tw-h-\[360px\] {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.tw-max-h-\[120px\] {
|
||||
max-height: 120px;
|
||||
}
|
||||
@@ -821,6 +829,10 @@ video {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tw-min-w-\[350px\] {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.tw-max-w-\[100vw\] {
|
||||
max-width: 100vw;
|
||||
}
|
||||
@@ -849,6 +861,10 @@ video {
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
.tw-max-w-\[350px\] {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.tw--translate-x-1\/2 {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -966,6 +982,10 @@ video {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tw-gap-\[5\%\] {
|
||||
gap: 5%;
|
||||
}
|
||||
|
||||
.tw-overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1055,6 +1075,11 @@ video {
|
||||
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.\!tw-border-blue-600 {
|
||||
--tw-border-opacity: 1 !important;
|
||||
border-color: rgb(37 99 235 / var(--tw-border-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.\!tw-bg-\[\#0F1727\] {
|
||||
--tw-bg-opacity: 1 !important;
|
||||
background-color: rgb(15 23 39 / var(--tw-bg-opacity, 1)) !important;
|
||||
@@ -1117,6 +1142,16 @@ video {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.tw-bg-\[\#f2f2f2\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.tw-bg-gray-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.tw-bg-opacity-0 {
|
||||
--tw-bg-opacity: 0;
|
||||
}
|
||||
@@ -1165,6 +1200,10 @@ video {
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
.tw-p-\[3\%\] {
|
||||
padding: 3%;
|
||||
}
|
||||
|
||||
.tw-px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
@@ -1194,6 +1233,10 @@ video {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tw-align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.\!tw-text-4xl {
|
||||
font-size: 2.25rem !important;
|
||||
line-height: 2.5rem !important;
|
||||
@@ -1422,6 +1465,10 @@ video {
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.tw-duration-75 {
|
||||
transition-duration: 75ms;
|
||||
}
|
||||
|
||||
.hover\:tw-translate-x-2:hover {
|
||||
--tw-translate-x: 0.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -1439,6 +1486,18 @@ video {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:tw-scale-\[1\.05\]:hover {
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:tw-scale-\[1\.1\]:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:tw-scale-x-\[1\.03\]:hover {
|
||||
--tw-scale-x: 1.03;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
||||
Reference in New Issue
Block a user