updated tailwind build

.nvmrc

@@ -0,0 +1 @@
+20

CONTRIBUTING.md

@@ -0,0 +1,12 @@
+## Contributing
+
+Currently if you find bugs or typos, I request you to create an issue first, instead of a Pull request. 
+That is the best way to contribute to this repo in it's current state.
+
+I may not get time to review every pull request, unless you are bringing in significant improvement that would have probably taken me weeks to do it myself, I may not be able to take time out of development to review it and don't take closing pull request personally. It's just that I currently don't have time.
+
+Thank you for understanding.
+
+## Other ways to contribute.
+1. Creating tutorials and helping others on [discord server](https://discord.gg/dHXjrrCA7G)
+2. Sharing the tool with others.

README.md

@@ -27,7 +27,7 @@ Build Python GUI's with ease of Drag and drop builders.
 
 https://github.com/user-attachments/assets/ac91aa98-843d-4578-b646-88e66bc113de
 
-<sub>**Don't like background music? fell free to mute it**</sub>
+<sub>**Don't like background music? feel free to mute it**</sub>
 
 ## Try PyUIBuilder
 Try [PyUIBuilder](https://pyuibuilder.com)
@@ -51,6 +51,9 @@ Try [PyUIBuilder](https://pyuibuilder.com)
 - [Author](#author)
 
 
+## Tutorials
+1. Youtube - [PyUibuilder playlist](https://youtube.com/playlist?list=PL0VamwghCfX-KXtGKGLak-C_-Jcx_eOiK&si=vnVr8vdU_JkIEL2f)
+2. [Creating sign up form Blog](https://medium.com/python-in-plain-english/create-tkinter-guis-using-tkinter-gui-builder-pyuibuilder-a7422489c55e)
 
 ## Docs - Getting started
 Read the docs on the [Docs page](https://docs.pyuibuilder.com/)
@@ -123,7 +126,6 @@ While there are a lot of features, here are few you need to know.
 
 ## Roadmap
 Here are some of the upcoming features.
-* Treeview on the sidebar
 * Support for Event Handlers
 * Kivy Framework support
 * Pyqt/PySide Support
@@ -131,13 +133,13 @@ Here are some of the upcoming features.
 
 To learn more/ see upcoming features visit [roadmap](./roadmap.md)
  
-To stay in loop, subscribe to the free [newsletter](https://paulfreeman.substack.com/subscribe?utm_source=Github-Pybuilder)
+To stay in loop, subscribe to the free [newsletter](https://tally.so/r/mVDY7N)
 
 ## License - Fund the development
 
-Help fund open-source work and development of this and upcoming projects by purchasing a one-time license.
+Help fund development of this and upcoming projects by purchasing a one-time license.
 
-Purchasing License will allow me to focus on development of this tool and provide you access to more advance features, early access and more.
+Purchasing License will give you discounted price and provide you access to more advance features, early access and more.
 
 The discount's will be available for limited time only on pre-orders.
 
@@ -148,6 +150,7 @@ The discount's will be available for limited time only on pre-orders.
 | **Lifetime license** (one-time  purchase)                         | 👍️                 | ✅                                                        | ✅                                                          |
 | **Early access** to upcoming features                             | ❌                 | ✅                                                        | ✅                                                          |
 | **Downloadable Electron App** (upcoming)                          | ❌                 | ✅                                                        | ✅                                                          |
+| **Premium widgets**(tabbed widget, scroll widget etc) (upcoming)                          | ❌                 | ✅                                                        | ✅                                                          |
 | **Run Preview live**(upcoming)                                    | ❌                 | ✅                                                        | ✅                                                          |
 | **Save and Load UI files** (upcoming)                             | ❌                 | ✅                                                        | ✅                                                          |
 | **Load 3rd party plugins locally**                                | ❌                 | ✅                                                        | ✅                                                          |

landingpages/landingpage/css/index.css

@@ -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;
@@ -181,7 +181,7 @@ header > .collapsible-header{
 }
 
 .footer-link:hover{
-    color: #fff;
+    color: #0b0b0b;
 }
 
 /* Navigation dots styling */

landingpages/landingpage/index.html

@@ -7,7 +7,7 @@
         <meta name="description" content="A Drag and Drop builder for Python GUIs, including Tkinter, Custom Tkinter and more" />
         <link
             rel="shortcut icon"
-            href="./assets/logo/icon48.png"
+            href="./assets/logo/logo.png"
             type="image/x-icon"
         />
 
@@ -15,12 +15,12 @@
         <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="" />
 
-        <link rel="stylesheet" href="../tailwind/tailwind-runtime.css" />
-        <!-- <link rel="stylesheet" href="./css/tailwind-build.css"> -->
+        <!-- <link rel="stylesheet" href="../tailwind/tailwind-runtime.css" /> -->
+        <link rel="stylesheet" href="./css/tailwind-build.css">
         <link rel="stylesheet" href="css/index.css" />
 
         <link
@@ -66,14 +66,17 @@
                     <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"
                 >
                     <a
-                        href="#pricing"
+                        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]
@@ -130,11 +133,11 @@
                     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] 
+                        class="tw-text-center tw-text-6xl tw-font-semibold tw-uppercase tw-leading-[90px] 
                                 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>
@@ -146,7 +149,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
@@ -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>
@@ -183,14 +188,152 @@
                 <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"
+            id="features"
+            >
+            
+            <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-[#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" 
+                                    alt="Drag and drop" 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 tw-overflow-clip">
+                                Easily drag and drop desired widgets from sidebar and create beautiful Python GUI's 
+                            </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-[#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" 
+                                    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 tw-overflow-clip">
+                                We currently support multiple UI libraries such as Tkinter, CustomTk and soon will offer support for PySide and 
+                                kivy.
+                            </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-[#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" 
+                                    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 tw-overflow-clip">
+                                Our editor includes pre-defined widgets like Buttons and Labels, compatible with Pack/Flex, Grid, and absolute layouts.
+                            </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-[#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" 
+                                    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">
+                                Our editor doesn't just let you drag and drop, but also lets you generate clean pyhon code in 
+                                library of your choice
+                            </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-[#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" 
+                                    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">
+                                We support your favorite 3rd party widgets such as video player, Map viewer and more. 
+                            </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-[#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" 
+                                    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">
+                                Adding images and logos is important while developing GUIs so we support asset uploads. 
+                                The best part is nothing is sent to server.
+                            </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 +357,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 +434,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-check-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>
@@ -338,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>
@@ -365,6 +516,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-check-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,25 +638,82 @@
                     <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
+                    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"
@@ -549,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>
 
@@ -557,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"

landingpages/tailwind/tailwind-runtime.css

@@ -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;
 }
@@ -643,6 +657,10 @@ video {
   margin-top: 1.25rem;
 }
 
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
+
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -651,14 +669,14 @@ video {
   margin-top: auto;
 }
 
-.\!tw-mt-auto {
-  margin-top: auto !important;
-}
-
 .tw-flex {
   display: flex;
 }
 
+.tw-grid {
+  display: grid;
+}
+
 .\!tw-hidden {
   display: none !important;
 }
@@ -683,10 +701,18 @@ video {
   height: 150px;
 }
 
+.tw-h-\[200px\] {
+  height: 200px;
+}
+
 .tw-h-\[40px\] {
   height: 40px;
 }
 
+.tw-h-\[500px\] {
+  height: 500px;
+}
+
 .tw-h-\[50px\] {
   height: 50px;
 }
@@ -707,6 +733,14 @@ video {
   height: 100%;
 }
 
+.tw-h-\[230px\] {
+  height: 230px;
+}
+
+.tw-h-\[360px\] {
+  height: 360px;
+}
+
 .tw-max-h-\[120px\] {
   max-height: 120px;
 }
@@ -727,6 +761,10 @@ video {
   min-height: 100vh;
 }
 
+.tw-min-h-\[200px\] {
+  min-height: 200px;
+}
+
 .tw-min-h-\[300px\] {
   min-height: 300px;
 }
@@ -739,22 +777,18 @@ video {
   min-height: 550px;
 }
 
-.tw-min-h-\[60vh\] {
-  min-height: 60vh;
-}
-
 .tw-min-h-\[70vh\] {
   min-height: 70vh;
 }
 
-.tw-min-h-full {
-  min-height: 100%;
-}
-
 .tw-min-h-\[80vh\] {
   min-height: 80vh;
 }
 
+.tw-min-h-full {
+  min-height: 100%;
+}
+
 .tw-w-8 {
   width: 2rem;
 }
@@ -767,6 +801,10 @@ video {
   width: 250px;
 }
 
+.tw-w-\[350px\] {
+  width: 350px;
+}
+
 .tw-w-\[380px\] {
   width: 380px;
 }
@@ -791,10 +829,18 @@ video {
   min-width: 100%;
 }
 
+.tw-min-w-\[350px\] {
+  min-width: 350px;
+}
+
 .tw-max-w-\[100vw\] {
   max-width: 100vw;
 }
 
+.tw-max-w-\[1150px\] {
+  max-width: 1150px;
+}
+
 .tw-max-w-\[120px\] {
   max-width: 120px;
 }
@@ -803,6 +849,10 @@ video {
   max-width: 450px;
 }
 
+.tw-max-w-\[650px\] {
+  max-width: 650px;
+}
+
 .tw-max-w-\[80vw\] {
   max-width: 80vw;
 }
@@ -811,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));
@@ -856,6 +910,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;
 }
@@ -920,6 +982,10 @@ video {
   gap: 20px;
 }
 
+.tw-gap-\[5\%\] {
+  gap: 5%;
+}
+
 .tw-overflow-hidden {
   overflow: hidden;
 }
@@ -940,6 +1006,10 @@ video {
   text-wrap: wrap;
 }
 
+.tw-rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .tw-rounded-full {
   border-radius: 9999px;
 }
@@ -968,10 +1038,6 @@ video {
   border-width: 1px;
 }
 
-.tw-border-4 {
-  border-width: 4px;
-}
-
 .tw-border-\[3px\] {
   border-width: 3px;
 }
@@ -984,65 +1050,65 @@ 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-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(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-\[\#eeeeee\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
+}
+
 .tw-bg-\[\#f0f0f0ef\] {
   background-color: #f0f0f0ef;
 }
@@ -1053,49 +1119,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-\[\#f2f2f2\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(15 23 39 / var(--tw-bg-opacity));
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
 }
 
-.\!tw-bg-\[\#\#0F1727\] {
-  background-color: ##0F1727 !important;
-}
-
-.tw-bg-\[\#\#0F1727\] {
-  background-color: ##0F1727;
+.tw-bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
 
 .tw-bg-opacity-0 {
@@ -1110,6 +1164,10 @@ video {
   padding: 0.25rem;
 }
 
+.tw-p-10 {
+  padding: 2.5rem;
+}
+
 .tw-p-2 {
   padding: 0.5rem;
 }
@@ -1118,6 +1176,10 @@ video {
   padding: 0.75rem;
 }
 
+.tw-p-4 {
+  padding: 1rem;
+}
+
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1138,6 +1200,10 @@ video {
   padding: 5%;
 }
 
+.tw-p-\[3\%\] {
+  padding: 3%;
+}
+
 .tw-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1167,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;
@@ -1216,6 +1286,11 @@ video {
   line-height: 1.75rem;
 }
 
+.tw-text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .tw-text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1233,10 +1308,6 @@ video {
   font-weight: 600;
 }
 
-.\!tw-font-medium {
-  font-weight: 500 !important;
-}
-
 .tw-uppercase {
   text-transform: uppercase;
 }
@@ -1250,84 +1321,73 @@ video {
   line-height: 90px;
 }
 
-.\!tw-text-black {
-  --tw-text-opacity: 1 !important;
-  color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
-}
-
-.\!tw-text-blue-500 {
-  --tw-text-opacity: 1 !important;
-  color: rgb(59 130 246 / var(--tw-text-opacity)) !important;
-}
-
-.\!tw-text-white {
-  --tw-text-opacity: 1 !important;
-  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
-}
-
-.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-underline {
@@ -1364,16 +1424,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 +1453,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,9 +1465,8 @@ 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));
+.tw-duration-75 {
+  transition-duration: 75ms;
 }
 
 .hover\:tw-translate-x-2:hover {
@@ -1432,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));
@@ -1439,47 +1505,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 +1529,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 +1544,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 +1574,10 @@ video {
     height: auto;
   }
 
+  .max-lg\:tw-h-fit {
+    height: fit-content;
+  }
+
   .max-lg\:tw-min-h-\[250px\] {
     min-height: 250px;
   }
@@ -1528,10 +1586,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 +1610,10 @@ video {
     flex-direction: column;
   }
 
+  .max-lg\:tw-place-content-center {
+    place-content: center;
+  }
+
   .max-lg\:tw-place-items-end {
     place-items: end;
   }

package.json

@@ -5,6 +5,10 @@
   "engines": {
     "node": ">=18"
   },
+  "overrides": {
+    "picomatch": "^3.0.0",
+    "postcss-selector-parser": "7.1.0"
+  },
   "dependencies": {
     "@ant-design/icons": "^5.4.0",
     "@dnd-kit/core": "^6.1.0",
@@ -36,8 +40,8 @@
   },
   "scripts": {
     "start": "env-cmd -e development cross-env NODE_ENV=development webpack serve",
-    "build": "env-cmd -e production cross-env NODE_ENV=production webpack",
-    "build:local": "GENERATE_SOURCEMAP=false env-cmd -e production react-scripts build",
+    "build": "NODE_ENV=production webpack",
+    "build:local": "env-cmd -e production cross-env NODE_ENV=production webpack",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "start:tailwind": "cross-env NODE_ENV=development tailwindcss --postcss -i ./landingpages/tailwind/tailwind.css -o ./landingpages/tailwind/tailwind-runtime.css -w",
@@ -67,7 +71,8 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@svgr/webpack": "^8.1.0",
-    "ajv": "^7.2.4",
+    "@types/react": "^18.3.20",
+    "ajv": "^8.17.1",
     "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^13.0.0",

src/frameworks/tkinter/widgets/input.js

@@ -41,7 +41,7 @@ export class Input extends TkinterWidgetBase{
         const config = convertObjectToKeyValueString(this.getConfigCode())
 
         return [
-                `${variableName} = tk.Entry(master=${parent}, text="${placeHolderText}")`,
+                `${variableName} = tk.Entry(master=${parent})`,
                 `${variableName}.config(${config})`,
                 `${variableName}.${this.getLayoutCode()}`
             ]

webpack.config.js

@@ -11,9 +11,14 @@ const fs = require('fs');
 
 const isProduction = process.env.NODE_ENV === "production";
 
-// Load .env-cmdrc.json based on NODE_ENV
-const envFile = `.env-cmdrc.json`;
-const envConfig = JSON.parse(fs.readFileSync(envFile, 'utf8'))[process.env.NODE_ENV] || {};
+// Load environment variables
+let envConfig = {};
+if (!isProduction && fs.existsSync(".env-cmdrc.json")) {
+  const envFile = JSON.parse(fs.readFileSync(".env-cmdrc.json", "utf8"));
+  envConfig = envFile[process.env.NODE_ENV] || {};
+} else {
+  envConfig = Object.fromEntries(Object.entries(process.env));
+}
 
 // Convert JSON to a format Webpack understands
 const envKeys = Object.keys(envConfig).reduce((prev, next) => {
@@ -33,7 +38,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, "dist"),
     filename: isProduction ? "js/[name].[contenthash].js" : "js/[name].js",
-    publicPath: "/",
+    publicPath: "./",
   },
 
   module: {
@@ -86,11 +91,6 @@ module.exports = {
           { from: 'public', to: '', noErrorOnMissing: true, globOptions: { ignore: ['**/index.html'] }}, // Copies everything else from public to dist
         ],
     }),
-
-    new webpack.EnvironmentPlugin({
-      REACT_APP_ANALYTICS_SCRIPT_ID: process.env.REACT_APP_ANALYTICS_SCRIPT_ID || '', // Default empty value
-      API_URL: 'https://default.api.com'
-    })
   
   ],