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

added landing page

Browse Source
This commit is contained in:
paul
2024-10-04 18:32:13 +05:30
parent 4ffb7d84e5
commit 27f7a753eb
5 changed files with 186 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
landingpages/buildinpublic/css/index.css
View File

@@ -226,14 +226,14 @@ header > .collapsible-header{
padding-top: 5%;
padding-bottom: 5%;
place-items: end;
background-color: #040404;
color: #ffffff;
background-color: #eaeaea;
color: #1b1a1a;
overflow-y: auto;
box-shadow: 3px 0px 3px 2px #9f9f9f;
}
.header-links{
color: rgb(255, 255, 255);
color: #3a3838;
}
}

BIN
landingpages/landingpage/assets/images/home/promo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

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

@@ -3,7 +3,7 @@
--bg-color: #fff;
--btn-color: #141313;/* button color*/
--btn-color: #0F1727;/* button color*/
--btn-bg: #f1efef;/* button bg color*/
--primary-text-color: #000;
@@ -19,8 +19,8 @@ html {
.gradient-text{
background: rgb(215,215,215);
background: linear-gradient(90deg, rgba(215,215,215,1) 18%, rgba(136,136,136,1) 71%);
background: rgb(93, 92, 92);
background: linear-gradient(90deg, rgb(110, 109, 109) 18%, rgba(136,136,136,1) 71%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@@ -30,7 +30,7 @@ html {
header{
/* background-color: #fff;
color: #000; */
color: #c0c0c0;
color: #434242;
}
@@ -60,7 +60,7 @@ header > .collapsible-header{
.header-links:hover {
color: #fff;
color: #000;
/* background-color: var(--header-link-hover); */
}
@@ -240,14 +240,15 @@ header > .collapsible-header{
/* Style for the collapsible content such as faq commonly known as: accordion */
.faq{
background-color: #000000;
color: #fff8f8;
border: 1px solid #f5f3f3;
background-color: #fefefe;
color: #292828;
border: 1px solid #0F1727;
border-radius: 0px;
}
.faq-accordion {
background-color: inherit;
color: #eeeaea;
color: #222222;
cursor: pointer;
padding: 15px 18px;
width: 100%;
@@ -259,7 +260,7 @@ header > .collapsible-header{
.faq .content {
padding: 0px 18px;
color: #e6e5e5;
color: #222222;
height: max-content;
overflow: hidden;
background-color: transparent;

77
landingpages/landingpage/index.html
View File

@@ -42,7 +42,7 @@
</script>
</head>
<body
class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-black tw-text-white"
class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-white tw-text-black"
>
<header
class="tw-max-w-lg:tw-px-4 tw-max-w-lg:tw-mr-auto tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-bg-opacity-0 tw-px-[5%] lg:tw-justify-around"
@@ -59,7 +59,9 @@
id="collapsed-header-items"
>
<div
class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base max-lg:tw-mt-[30px] max-lg:tw-flex-col max-lg:tw-place-items-end max-lg:tw-gap-5 lg:tw-mx-auto lg:tw-place-items-center"
class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base
max-lg:tw-mt-[30px] max-lg:tw-flex-col max-lg:tw-place-items-end
max-lg:tw-gap-5 lg:tw-mx-auto lg:tw-place-items-center"
>
<a class="header-links" href=""> About </a>
<a class="header-links" href="#pricing"> Pricing </a>
@@ -70,14 +72,16 @@
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
target="_blank"
rel="noopener noreferrer"
href="https://pyuibuilder.pages.dev"
aria-label="signup"
class="tw-rounded-md tw-border-[1px] tw-border-white tw-bg-transparent tw-px-3 tw-py-2 tw-text-white tw-transition-colors tw-duration-[0.3s] hover:tw-bg-white hover:tw-text-black"
href="#pricing"
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
tw-duration-[0.3s]
tw-transition-all hover:tw-translate-x-2
"
>
<span>Try free</span>
<i class="bi bi-arrow-up-right"></i>
<span>Start free</span>
<i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
@@ -90,7 +94,8 @@
</header>
<section
class="hero-section tw-relative tw-flex tw-min-h-[60vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden max-md:tw-mt-[50px]"
class="hero-section tw-relative tw-flex tw-min-h-[80vh] tw-w-full tw-max-w-[100vw] tw-flex-col
tw-overflow-hidden max-md:tw-mt-[50px] tw-place-content-center tw-place-items-center"
id="hero-section"
>
@@ -111,7 +116,7 @@
<div class="tw-relative tw-bg-black tw-min-w-full tw-min-h-full tw-overflow-clip tw-rounded-md">
<!-- add your youtube video link here -->
<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&amp;controls=1&rel=1&showinfo=0&autoplay=0&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>
<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/CjwkUoGDX2g?si=gGG8Bs0Qc_J8ZF3a&amp;controls=1&rel=1&showinfo=0&autoplay=0&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>
</div>
</div>
@@ -119,14 +124,14 @@
</div>
<div
class="tw-flex tw-h-full max-lg:tw-mt-10 max-lg:tw-min-h-[60vh] tw-min-h-[70vh] tw-w-full tw-flex-col tw-place-content-center tw-gap-6 tw-p-[5%] max-xl:tw-place-items-center max-lg:tw-p-4"
class="tw-flex tw-h-full max-lg:tw-mt-10 max-lg:tw-min-h-[80vh] tw-min-h-[70vh] tw-w-full tw-flex-col tw-place-content-center tw-gap-6 tw-p-[5%] max-xl:tw-place-items-center max-lg:tw-p-4"
>
<div
class="tw-flex tw-flex-col tw-place-content-center tw-items-center"
>
<div
class="reveal-up tw-text-center tw-text-6xl tw-font-semibold tw-uppercase tw-leading-[90px]
max-lg:tw-text-4xl gradient-text
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>
@@ -139,7 +144,7 @@
<div class="tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center">
<div
class="reveal-up tw-mt-3 tw-max-w-[450px] tw-p-2 tw-text-center tw-text-gray-200 max-lg:tw-max-w-full"
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
</div>
@@ -148,13 +153,13 @@
class="reveal-up tw-mt-10 tw-flex tw-place-items-center tw-gap-4"
>
<a
class="btn !tw-bg-[#7E22CE] !tw-text-white tw-shadow-lg tw-shadow-[#7E22CE] tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03]"
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"
>
Start for free
</a>
<button
class="btn tw-flex tw-gap-2 !tw-border-solid !tw-border-[1px] !tw-border-white !tw-text-white !tw-bg-transparent tw-transition-colors tw-duration-[0.3s] hover:!tw-bg-white hover:!tw-text-black"
class="btn tw-flex tw-gap-2 !tw-border-solid !tw-border-[1px] !tw-border-[#0F1727] !tw-text-[#0F1727] !tw-bg-transparent tw-transition-colors tw-duration-[0.3s] hover:!tw-bg-white hover:!tw-text-black"
onclick="openVideo()"
>
@@ -176,23 +181,23 @@
<div class="reveal-up tw-flex tw-border-[1px] max-lg:tw-w-full tw-border-black tw-rounded-md tw-p-2 tw-max-w-[850px] tw-w-[1000px] tw-min-h-[550px] max-lg:tw-min-w-[320px] max-lg:tw-min-h-[250px] max-lg:tw-h-auto">
<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/fonttester.gif" > -->
<!-- <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" >
</div>
</div>
</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">Choose your plan</h3>
<h3 class="tw-text-2xl tw-font-medium max-md:tw-text-2xl">Pre-order your License</h3>
<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]">
<h3>
<span class="tw-text-5xl tw-font-semibold">$0</span>
</h3>
<p class="tw-mt-3 tw-text-base tw-text-center tw-text-gray-400">
<p class="tw-mt-3 tw-text-base tw-text-center tw-text-gray-800">
Free to use forever, but for added features and to support open-source development, consider buying a lifetime license.
</p>
<hr />
@@ -243,10 +248,19 @@
</li>
</ul>
<a
href="https://pyuibuilder.pages.dev/"
target="_blank"
rel="noreferrer noopener"
class=" !tw-bg-[#0F1727] tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.01] !tw-mt-auto !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
>
<span>Get Started</span>
<!-- <CrownFilled /> -->
</a>
</div>
<div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
tw-border-blue-500 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
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>
@@ -316,15 +330,15 @@
href="https://ko-fi.com/s/4a3dffb3b9"
target="_blank"
rel="noreferrer noopener"
class="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
class="tw-mt-8 tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.01] !tw-bg-[#0F1727] !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
>
<span>Buy License</span>
<!-- <CrownFilled /> -->
</a>
</div>
<div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-3 tw-border-solid
tw-border-green-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
<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]">
<div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
Limited time offer
</div>
@@ -394,10 +408,11 @@
href="https://ko-fi.com/s/560a3b6b05"
target="_blank"
rel="noreferrer noopener"
class="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
class="tw-mt-8 !tw-bg-[#0F1727] tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.02] !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md
tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
>
<span>Buy License</span>
<CrownFilled />
<!-- <i class="bi bi-crown"></i> -->
</a>
</div>
</div>
@@ -407,7 +422,7 @@
class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-p-[5%] tw-px-[10%]"
>
<h3
class="tw-text-4xl tw-font-medium tw-text-gray-300 max-md:tw-text-2xl"
class="tw-text-4xl tw-font-medium tw-text-gray-800 max-md:tw-text-2xl"
>
Faq
</h3>
@@ -453,12 +468,12 @@
<div
class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
>
<span>Is Safari, Edge and Firefox addons available?</span>
<span>How can I save and load UI files?</span>
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
</div>
<div class="content">
The Safari, Edge and firefox addons will be available for premium users when released.
If you purchase a license, you'll be notified when its released.
Saving and loading UI Files will be made available to premium users, when it becomes available.
If you hold a premium license you'll be notified of the release.
</div>
</div>

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

@@ -651,6 +651,10 @@ video {
margin-top: auto;
}
.\!tw-mt-auto {
margin-top: auto !important;
}
.tw-flex {
display: flex;
}
@@ -747,6 +751,10 @@ video {
min-height: 100%;
}
.tw-min-h-\[80vh\] {
min-height: 80vh;
}
.tw-w-8 {
width: 2rem;
}
@@ -960,6 +968,14 @@ video {
border-width: 1px;
}
.tw-border-4 {
border-width: 4px;
}
.tw-border-\[3px\] {
border-width: 3px;
}
.\!tw-border-solid {
border-style: solid !important;
}
@@ -968,9 +984,9 @@ video {
border-style: solid;
}
.\!tw-border-black {
.\!tw-border-white {
--tw-border-opacity: 1 !important;
border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
}
.tw-border-black {
@@ -983,9 +999,9 @@ video {
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.tw-border-gray-500 {
.tw-border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.tw-border-green-600 {
@@ -993,21 +1009,26 @@ video {
border-color: rgb(22 163 74 / var(--tw-border-opacity));
}
.\!tw-border-white {
--tw-border-opacity: 1 !important;
border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
}
.tw-border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / 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;
}
.\!tw-border-green-600 {
--tw-border-opacity: 1 !important;
border-color: rgb(22 163 74 / var(--tw-border-opacity)) !important;
}
.\!tw-bg-\[\#7E22CE\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(126 34 206 / var(--tw-bg-opacity)) !important;
}
.\!tw-bg-gray-100 {
--tw-bg-opacity: 1 !important;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
@@ -1022,21 +1043,12 @@ video {
background-color: transparent !important;
}
.tw-bg-\[\#000000af\] {
background-color: #000000af;
}
.tw-bg-\[\#7e22ce85\] {
background-color: #7e22ce85;
}
.tw-bg-\[\#f0f0f0ef\] {
background-color: #f0f0f0ef;
}
.tw-bg-\[\#ffe27a\] {
--tw-bg-opacity: 1;
background-color: rgb(255 226 122 / var(--tw-bg-opacity));
.tw-bg-\[\#fdfdfdaf\] {
background-color: #fdfdfdaf;
}
.tw-bg-black {
@@ -1068,28 +1080,22 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.tw-bg-red-300 {
.\!tw-bg-\[\#0F1727\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(15 23 39 / var(--tw-bg-opacity)) !important;
}
.tw-bg-\[\#0F1727\] {
--tw-bg-opacity: 1;
background-color: rgb(252 165 165 / var(--tw-bg-opacity));
background-color: rgb(15 23 39 / var(--tw-bg-opacity));
}
.tw-bg-\[\#fdfdfdaf\] {
background-color: #fdfdfdaf;
.\!tw-bg-\[\#\#0F1727\] {
background-color: ##0F1727 !important;
}
.\!tw-bg-\[\#155EEF\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(21 94 239 / var(--tw-bg-opacity)) !important;
}
.\!tw-bg-\[\#73a2ff\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(115 162 255 / var(--tw-bg-opacity)) !important;
}
.\!tw-bg-\[\#7E22CE\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(126 34 206 / var(--tw-bg-opacity)) !important;
.tw-bg-\[\#\#0F1727\] {
background-color: ##0F1727;
}
.tw-bg-opacity-0 {
@@ -1227,6 +1233,10 @@ video {
font-weight: 600;
}
.\!tw-font-medium {
font-weight: 500 !important;
}
.tw-uppercase {
text-transform: uppercase;
}
@@ -1236,14 +1246,6 @@ video {
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tw-leading-\[80px\] {
line-height: 80px;
}
.tw-leading-\[100px\] {
line-height: 100px;
}
.tw-leading-\[90px\] {
line-height: 90px;
}
@@ -1268,6 +1270,21 @@ video {
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));
@@ -1278,11 +1295,6 @@ video {
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.tw-text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.tw-text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -1303,19 +1315,19 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.tw-text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
.\!tw-text-\[\#0F1727\] {
--tw-text-opacity: 1 !important;
color: rgb(15 23 39 / var(--tw-text-opacity)) !important;
}
.tw-text-gray-300 {
.tw-text-\[\#0F1727\] {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
color: rgb(15 23 39 / var(--tw-text-opacity));
}
.tw-text-gray-200 {
.tw-text-gray-800 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.tw-underline {
@@ -1352,13 +1364,13 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.tw-shadow-primary {
--tw-shadow-color: #fff;
.tw-shadow-\[\#7E22CE\] {
--tw-shadow-color: #7E22CE;
--tw-shadow: var(--tw-shadow-colored);
}
.tw-shadow-\[\#7E22CE\] {
--tw-shadow-color: #7E22CE;
.tw-shadow-\[\#4d395e\] {
--tw-shadow-color: #4d395e;
--tw-shadow: var(--tw-shadow-colored);
}
@@ -1380,6 +1392,12 @@ 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;
}
@@ -1392,6 +1410,28 @@ 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));
}
.hover\:tw-scale-\[1\.01\]:hover {
--tw-scale-x: 1.01;
--tw-scale-y: 1.01;
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\.02\]:hover {
--tw-scale-x: 1.02;
--tw-scale-y: 1.02;
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));
@@ -1412,14 +1452,19 @@ video {
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-white:hover {
.hover\:tw-bg-\[\#0F1727\]:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
background-color: rgb(15 23 39 / var(--tw-bg-opacity));
}
.hover\:\!tw-text-black:hover {
@@ -1427,14 +1472,20 @@ video {
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));
}
.hover\:tw-text-black:hover {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
.hover\:tw-transition-transform:hover {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.dark\:tw-bg-\[\#16171A\]:is(.tw-dark *) {
@@ -1481,6 +1532,10 @@ video {
min-height: 60vh;
}
.max-lg\:tw-min-h-\[80vh\] {
min-height: 80vh;
}
.max-lg\:tw-w-\[340px\] {
width: 340px;
}