Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on landing page

Browse Source
This commit is contained in:
paul
2025-04-03 19:13:51 +05:30
parent 1f709a10be
commit 5211faf140
3 changed files with 387 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
landingpages/landingpage/css/index.css
View File

@@ -3,8 +3,8 @@
--bg-color: #fff;
--btn-color: #0F1727;/* button color*/
--btn-bg: #f1efef;/* button bg color*/
--btn-color: #ffffff;/* button color*/
--btn-bg: #0F1727;/* button bg color*/
--primary-text-color: #000;
--header-link-hover: #000;

165
landingpages/landingpage/index.html
View File

@@ -15,7 +15,7 @@
<meta property="og:title" content="PyUIBuilder - A Drag and Drop builder for python GUIs" />
<meta property="og:description" content="A Drag and Drop builder for Python GUIs, including Tkinter, Custom Tkinter and more" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/PaulleDemon/PyUIBuilder" />
<meta property="og:url" content="https://about.pyuibuilder.com" />
<!--Replace with the current website url-->
<meta property="og:image" content="" />
@@ -72,7 +72,7 @@
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"
>
<a
href="#pricing"
href="https://pyuibuilder.com"
aria-label="start"
class="tw-rounded-md tw-border-[1px] tw-border-black
tw-bg-[#0F1727] tw-px-3 tw-py-2 tw-text-white
@@ -146,7 +146,7 @@
<div
class="reveal-up tw-mt-3 tw-max-w-[450px] tw-p-2 tw-text-center tw-text-gray-700 max-lg:tw-max-w-full"
>
Tired of writing code to build you python GUIs, well now you can easily
The most awaited python tool is here. Now you can use Drag and drop to build Tkinter and customTk GUIs. Soon wil be made available for kivy and PySide
</div>
<div
@@ -183,14 +183,148 @@
<div class="tw-relative tw-bg-black tw-min-w-full tw-min-h-full tw-overflow-clip tw-rounded-md">
<!-- <iframe class="tw-absolute tw-top-[50%] tw--translate-y-[50%] tw-left-[50%] tw--translate-x-[50%] tw-w-full tw-h-full" src="https://www.youtube.com/embed/aXq0A6iJoKU?si=dF3UZT2eTRDU8u7a?si=QOMSCki8Jl30_CkW&amp;controls=1&rel=0&showinfo=0&autoplay=1&loop=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> -->
<img class="tw-object-contain tw-w-full tw-h-full"
alt="font tester gif" src="./assets/images/home/promo.gif" >
alt="Pyui gif" src="./assets/images/home/promo.gif" >
</div>
</div>
</section>
<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"
>
<h2 class="tw-text-5xl tw-text-center tw-font-medium tw-uppercase">
Everything you need <br>
to perfect Python GUIs
</h2>
<div
class="tw-flex tw-flex-col tw-max-w-[1150px] max-lg:tw-max-w-full tw-h-full
tw-p-4 tw-mt-4 max-lg:tw-place-content-center tw-gap-8"
>
<div class="max-xl:tw-flex max-xl:tw-flex-col tw-place-items-center tw-grid tw-grid-cols-3 tw-gap-8
tw-place-content-center tw-auto-rows-auto">
<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
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.svg"
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
</div>
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Drag and Drop editor</h2>
<p class="tw-leading-normal tw-text-gray-800">
Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live.
</p>
</div>
</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
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.svg"
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
</div>
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Support for multiple UI libraries</h2>
<p class="tw-leading-normal tw-text-gray-800">
Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live.
</p>
</div>
</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
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.svg"
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
</div>
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Supports many UI Widgets</h2>
<p class="tw-leading-normal tw-text-gray-800">
Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live.
</p>
</div>
</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
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.svg"
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
</div>
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Generate clean Python code</h2>
<p class="tw-leading-normal tw-text-gray-800">
Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live.
</p>
</div>
</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
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.svg"
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
</div>
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">3rd Party Plugin support</h2>
<p class="tw-leading-normal tw-text-gray-800">
Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live.
</p>
</div>
</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
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.svg"
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
</div>
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Supports asset upload</h2>
<p class="tw-leading-normal tw-text-gray-800">
Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live.
</p>
</div>
</div>
</div>
</div>
<a
class="tw-mt-6 btn tw-my-6 tw-flex tw-gap-1 tw-bg-[#0F1727]
tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03] tw-group"
href="#pricing"
>
Make it yours
<i class="bi bi-arrow-right tw-transition-transform group-hover:tw-translate-x-1 tw-duration-300"></i>
</a>
</section>
<section class="tw-mt-1 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[2%] max-lg:tw-p-2" id="pricing">
<h3 class="tw-text-2xl tw-font-medium max-md:tw-text-2xl">Pre-order your License</h3>
<div class="tw-max-w-[650px] tw-my-2">
Pre-orders for PyUiBuilder premium features are open. Premium features will start rolling out
from mid of April phase wise. This is your last chance to get it before price increase from mid of April.
</div>
<div class="tw-mt-10 tw-flex tw-place-content-center tw-gap-8 max-lg:tw-flex-col">
<div class="tw-flex tw-w-[380px] tw-border-[1px] tw-border-gray-300 tw-border-solid tw-flex-col
tw-place-items-center tw-gap-2 tw-rounded-lg tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
@@ -214,6 +348,10 @@
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
</li>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Support for PySlide/PyQt</span>
@@ -287,6 +425,10 @@
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
</li>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Preview live</span>
@@ -365,6 +507,10 @@
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
</li>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Preview live</span>
@@ -483,18 +629,11 @@
<div
class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
>
<span>Where can I find the upcoming features?</span>
<span>When will premium features roll out</span>
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
</div>
<div class="content">
You can find the upcoming features on the
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/PaulleDemon/font-tester-chrome/blob/main/roadmap.md"
class="tw-underline"
>Roadmap</a
>
Premium features will start rolling out from mid of April in phase wise.
</div>
</div>
</div>

419
landingpages/tailwind/tailwind-runtime.css
View File

@@ -107,7 +107,7 @@
}
/*
! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/
/*
@@ -541,7 +541,7 @@ video {
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
@@ -619,6 +619,20 @@ video {
margin-right: 1rem;
}
.tw-my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.tw-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.\!tw-mt-auto {
margin-top: auto !important;
}
.tw-ml-auto {
margin-left: auto;
}
@@ -651,14 +665,22 @@ video {
margin-top: auto;
}
.\!tw-mt-auto {
margin-top: auto !important;
.tw-mt-6 {
margin-top: 1.5rem;
}
.tw-mt-2 {
margin-top: 0.5rem;
}
.tw-flex {
display: flex;
}
.tw-grid {
display: grid;
}
.\!tw-hidden {
display: none !important;
}
@@ -707,6 +729,14 @@ video {
height: 100%;
}
.tw-h-\[200px\] {
height: 200px;
}
.tw-h-\[500px\] {
height: 500px;
}
.tw-max-h-\[120px\] {
max-height: 120px;
}
@@ -739,20 +769,20 @@ video {
min-height: 550px;
}
.tw-min-h-\[60vh\] {
min-height: 60vh;
}
.tw-min-h-\[70vh\] {
min-height: 70vh;
}
.tw-min-h-\[80vh\] {
min-height: 80vh;
}
.tw-min-h-full {
min-height: 100%;
}
.tw-min-h-\[80vh\] {
min-height: 80vh;
.tw-min-h-\[200px\] {
min-height: 200px;
}
.tw-w-8 {
@@ -787,6 +817,10 @@ video {
width: max-content;
}
.tw-w-\[350px\] {
width: 350px;
}
.tw-min-w-full {
min-width: 100%;
}
@@ -811,6 +845,22 @@ video {
max-width: 850px;
}
.tw-max-w-\[650px\] {
max-width: 650px;
}
.tw-max-w-\[750px\] {
max-width: 750px;
}
.tw-max-w-\[1150px\] {
max-width: 1150px;
}
.tw-max-w-\[400px\] {
max-width: 400px;
}
.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));
@@ -856,6 +906,14 @@ video {
user-select: none;
}
.tw-auto-rows-auto {
grid-auto-rows: auto;
}
.tw-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tw-flex-col {
flex-direction: column;
}
@@ -956,6 +1014,10 @@ video {
border-radius: 0.75rem;
}
.tw-rounded-3xl {
border-radius: 1.5rem;
}
.\!tw-border-\[1px\] {
border-width: 1px !important;
}
@@ -968,10 +1030,6 @@ video {
border-width: 1px;
}
.tw-border-4 {
border-width: 4px;
}
.tw-border-\[3px\] {
border-width: 3px;
}
@@ -984,65 +1042,55 @@ video {
border-style: solid;
}
.\!tw-border-white {
--tw-border-opacity: 1 !important;
border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
}
.tw-border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.tw-border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.tw-border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.tw-border-green-600 {
--tw-border-opacity: 1;
border-color: rgb(22 163 74 / var(--tw-border-opacity));
}
.tw-border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.\!tw-border-\[\#0F1727\] {
--tw-border-opacity: 1 !important;
border-color: rgb(15 23 39 / var(--tw-border-opacity)) !important;
border-color: rgb(15 23 39 / var(--tw-border-opacity, 1)) !important;
}
.\!tw-border-green-600 {
--tw-border-opacity: 1 !important;
border-color: rgb(22 163 74 / var(--tw-border-opacity)) !important;
border-color: rgb(22 163 74 / var(--tw-border-opacity, 1)) !important;
}
.\!tw-bg-\[\#7E22CE\] {
.tw-border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.tw-border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.tw-border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.\!tw-bg-\[\#0F1727\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(126 34 206 / var(--tw-bg-opacity)) !important;
background-color: rgb(15 23 39 / var(--tw-bg-opacity, 1)) !important;
}
.\!tw-bg-gray-100 {
--tw-bg-opacity: 1 !important;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
}
.\!tw-bg-purple-500 {
--tw-bg-opacity: 1 !important;
background-color: rgb(168 85 247 / var(--tw-bg-opacity)) !important;
background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1)) !important;
}
.\!tw-bg-transparent {
background-color: transparent !important;
}
.tw-bg-\[\#0F1727\] {
--tw-bg-opacity: 1;
background-color: rgb(15 23 39 / var(--tw-bg-opacity, 1));
}
.tw-bg-\[\#f0f0f0ef\] {
background-color: #f0f0f0ef;
}
@@ -1053,49 +1101,37 @@ video {
.tw-bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.tw-bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.tw-bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.tw-bg-green-700 {
--tw-bg-opacity: 1;
background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}
.tw-bg-transparent {
background-color: transparent;
background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.tw-bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.\!tw-bg-\[\#0F1727\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(15 23 39 / var(--tw-bg-opacity)) !important;
}
.tw-bg-\[\#0F1727\] {
.tw-bg-\[\#171717\] {
--tw-bg-opacity: 1;
background-color: rgb(15 23 39 / var(--tw-bg-opacity));
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.\!tw-bg-\[\#\#0F1727\] {
background-color: ##0F1727 !important;
}
.tw-bg-\[\#\#0F1727\] {
background-color: ##0F1727;
.tw-bg-\[\#eeeeee\] {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}
.tw-bg-opacity-0 {
@@ -1138,6 +1174,14 @@ video {
padding: 5%;
}
.tw-p-10 {
padding: 2.5rem;
}
.tw-p-4 {
padding: 1rem;
}
.tw-px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@@ -1221,6 +1265,11 @@ video {
line-height: 1.75rem;
}
.tw-text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.\!tw-font-semibold {
font-weight: 600 !important;
}
@@ -1233,10 +1282,6 @@ video {
font-weight: 600;
}
.\!tw-font-medium {
font-weight: 500 !important;
}
.tw-uppercase {
text-transform: uppercase;
}
@@ -1250,84 +1295,90 @@ video {
line-height: 90px;
}
.\!tw-text-black {
--tw-text-opacity: 1 !important;
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
.tw-leading-8 {
line-height: 2rem;
}
.\!tw-text-blue-500 {
--tw-text-opacity: 1 !important;
color: rgb(59 130 246 / var(--tw-text-opacity)) !important;
.tw-leading-relaxed {
line-height: 1.625;
}
.\!tw-text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
.tw-leading-\[5px\] {
line-height: 5px;
}
.tw-text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.tw-text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.tw-text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.tw-text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.tw-text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.tw-text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.tw-text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.tw-text-purple-500 {
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity));
}
.tw-text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
}
.tw-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
.tw-leading-normal {
line-height: 1.5;
}
.\!tw-text-\[\#0F1727\] {
--tw-text-opacity: 1 !important;
color: rgb(15 23 39 / var(--tw-text-opacity)) !important;
color: rgb(15 23 39 / var(--tw-text-opacity, 1)) !important;
}
.\!tw-text-black {
--tw-text-opacity: 1 !important;
color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}
.\!tw-text-blue-500 {
--tw-text-opacity: 1 !important;
color: rgb(59 130 246 / var(--tw-text-opacity, 1)) !important;
}
.\!tw-text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.tw-text-\[\#0F1727\] {
--tw-text-opacity: 1;
color: rgb(15 23 39 / var(--tw-text-opacity));
color: rgb(15 23 39 / var(--tw-text-opacity, 1));
}
.tw-text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.tw-text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.tw-text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.tw-text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.tw-text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.tw-text-purple-500 {
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.tw-text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.tw-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.tw-text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.tw-underline {
@@ -1364,16 +1415,17 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.tw-shadow-\[\#7E22CE\] {
--tw-shadow-color: #7E22CE;
--tw-shadow: var(--tw-shadow-colored);
}
.tw-shadow-\[\#4d395e\] {
--tw-shadow-color: #4d395e;
--tw-shadow: var(--tw-shadow-colored);
}
.tw-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.tw-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1392,12 +1444,6 @@ video {
transition-duration: 150ms;
}
.tw-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.tw-duration-300 {
transition-duration: 300ms;
}
@@ -1410,11 +1456,6 @@ video {
transition-duration: 0.3s;
}
.hover\:tw-translate-x-1:hover {
--tw-translate-x: 0.25rem;
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-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,47 +1480,22 @@ video {
.hover\:\!tw-bg-gray-100:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
}
.hover\:\!tw-bg-gray-300:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important;
}
.hover\:\!tw-bg-white:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}
.hover\:tw-bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:tw-bg-black:hover {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.hover\:tw-bg-\[\#0F1727\]:hover {
--tw-bg-opacity: 1;
background-color: rgb(15 23 39 / var(--tw-bg-opacity));
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.hover\:\!tw-text-black:hover {
--tw-text-opacity: 1 !important;
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
}
.hover\:tw-text-black:hover {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.hover\:tw-text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}
.hover\:tw-transition-transform:hover {
@@ -1488,9 +1504,14 @@ video {
transition-duration: 150ms;
}
.tw-group:hover .group-hover\:tw-translate-x-1 {
--tw-translate-x: 0.25rem;
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));
}
.dark\:tw-bg-\[\#16171A\]:is(.tw-dark *) {
--tw-bg-opacity: 1;
background-color: rgb(22 23 26 / var(--tw-bg-opacity));
background-color: rgb(22 23 26 / var(--tw-bg-opacity, 1));
}
.dark\:tw-bg-\[\#80808085\]:is(.tw-dark *) {
@@ -1498,6 +1519,14 @@ video {
}
@media not all and (min-width: 1280px) {
.max-xl\:tw-flex {
display: flex;
}
.max-xl\:tw-flex-col {
flex-direction: column;
}
.max-xl\:tw-place-items-center {
place-items: center;
}
@@ -1520,6 +1549,10 @@ video {
height: auto;
}
.max-lg\:tw-h-fit {
height: fit-content;
}
.max-lg\:tw-min-h-\[250px\] {
min-height: 250px;
}
@@ -1528,10 +1561,6 @@ video {
min-height: 400px;
}
.max-lg\:tw-min-h-\[60vh\] {
min-height: 60vh;
}
.max-lg\:tw-min-h-\[80vh\] {
min-height: 80vh;
}
@@ -1556,6 +1585,10 @@ video {
flex-direction: column;
}
.max-lg\:tw-place-content-center {
place-content: center;
}
.max-lg\:tw-place-items-end {
place-items: end;
}
@@ -1594,6 +1627,14 @@ video {
margin-top: 50px;
}
.max-md\:tw-h-\[180px\] {
height: 180px;
}
.max-md\:tw-min-h-\[350px\] {
min-height: 350px;
}
.max-md\:tw-w-full {
width: 100%;
}
@@ -1640,6 +1681,12 @@ video {
}
}
@media (min-width: 768px) {
.md\:tw-h-\[350px\] {
height: 350px;
}
}
@media (min-width: 1024px) {
.lg\:tw-mx-auto {
margin-left: auto;