From 4ffb7d84e50df8643148b9bfb3258a11bf3074a1 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Thu, 3 Oct 2024 22:19:28 +0530
Subject: [PATCH] working on landing page

---
 landingpages/buildinpublic/index.html      |   2 +-
 landingpages/landingpage/css/index.css     |  74 +----
 landingpages/landingpage/index.html        | 365 +++++++--------------
 landingpages/landingpage/index.js          |   6 +-
 landingpages/tailwind/tailwind-runtime.css | 196 +++++------
 5 files changed, 209 insertions(+), 434 deletions(-)

diff --git a/landingpages/buildinpublic/index.html b/landingpages/buildinpublic/index.html
index a74882c..3ea3ba5 100644
--- a/landingpages/buildinpublic/index.html
+++ b/landingpages/buildinpublic/index.html
@@ -225,7 +225,7 @@
                         <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                     </div>
                     <div class="content">
-                        Yes, this is an open-source project, you can visit the 
+                        Yes, this is an source code is available project, you can visit the 
                         source code on 
                         <a  target="_blank"
                             rel="noopener noreferrer"
diff --git a/landingpages/landingpage/css/index.css b/landingpages/landingpage/css/index.css
index d462104..4a92161 100644
--- a/landingpages/landingpage/css/index.css
+++ b/landingpages/landingpage/css/index.css
@@ -1,19 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Fondamento&family=chivo&family=Bellota&family=Battambang&family=Archivo+Black&family=Didact+Gothic&family=Sedgwick+Ave&family=Rowdies');
-/* @import url('https://fonts.googleapis.com/css2?family=Chivo');
-@import url('https://fonts.googleapis.com/css2?family=Bellota');
-@import url('https://fonts.googleapis.com/css2?family=Battambang');
-@import url('https://fonts.googleapis.com/css2?family=Archivo+Black'); 
-@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic');
-@import url('https://fonts.googleapis.com/css2?family=Rowdies'); */
 
-	
 :root{
 
     --bg-color: #fff;
 
-    --btn-color: #fdfdfd;/* button color*/
-    --btn-bg: #000;/* button bg color*/
+    --btn-color: #141313;/* button color*/
+    --btn-bg: #f1efef;/* button bg color*/
 
     --primary-text-color: #000;
     --header-link-hover: #000;
@@ -27,54 +18,19 @@ html {
 }
 
 
-.fondamento-family{
-    font-family: "Fondamento", handwriting;
-    font-weight: 700;
+.gradient-text{
+    background: rgb(215,215,215);
+    background: linear-gradient(90deg, rgba(215,215,215,1) 18%, rgba(136,136,136,1) 71%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.chivo-family{
-    font-family: "Chivo", sans-serif;
-}
-
-
-.bellota-family{
-    font-family: "Bellota", system-ui;
-    font-weight: 600;
-}
-
-.battambang-family{
-    font-family: "Battambang", system-ui;
-    font-weight: 500;
-}
-
-.archivo-black-family{
-    font-family: "Archivo Black", sans-serif;
-    font-weight: 400;
-    line-height: 1.3;
-}
-
-.didact-gothic-family{
-    font-family: "Didact Gothic", sans-serif;
-    text-decoration: underline;
-    font-style: italic;
-}
-
-.sedgwick-ave-family{
-    font-family: "Sedgwick Ave", handwriting;
-    font-weight: 500;
-    line-height: 1.5;
-}
-
-.rowdies-family{
-    font-family: "Rowdies", system-ui;
-    font-weight: 400;
-}
 
 
 header{
     /* background-color: #fff;
     color: #000; */
-    color: #4b4b4b;
+    color: #c0c0c0;
 }
 
 
@@ -104,7 +60,7 @@ header > .collapsible-header{
 
 
 .header-links:hover {
-    color: #000000;
+    color: #fff;
     /* background-color: var(--header-link-hover); */
 }
 
@@ -225,7 +181,7 @@ header > .collapsible-header{
 }
 
 .footer-link:hover{
-    color: #0b0b0b;
+    color: #fff;
 }
 
 /* Navigation dots styling */
@@ -284,14 +240,14 @@ header > .collapsible-header{
 /* Style for the collapsible content such as faq commonly known as: accordion */
 
 .faq{
-    background-color: #fff;
-    color: #000000;
-    border: 1px solid #000;
+    background-color: #000000;
+    color: #fff8f8;
+    border: 1px solid #f5f3f3;
 }
 
 .faq-accordion {
     background-color: inherit;
-    color: #000000;
+    color: #eeeaea;
     cursor: pointer;
     padding: 15px 18px;
     width: 100%;
@@ -303,7 +259,7 @@ header > .collapsible-header{
 
 .faq .content {
     padding: 0px 18px;
-    color: #232323;
+    color: #e6e5e5;
     height: max-content;
     overflow: hidden;
     background-color: transparent;
diff --git a/landingpages/landingpage/index.html b/landingpages/landingpage/index.html
index 33bac57..00c0187 100644
--- a/landingpages/landingpage/index.html
+++ b/landingpages/landingpage/index.html
@@ -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/font-tester-chrome" />
+        <meta property="og:url" content="https://github.com/PaulleDemon/PyUIBuilder" />
         <!--Replace with the current website url-->
         <meta property="og:image" content="" />
 
@@ -42,7 +42,7 @@
         </script>
     </head>
     <body
-        class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-white tw-text-black"
+        class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-black tw-text-white"
     >
         <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"
@@ -64,7 +64,7 @@
                     <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/font-tester-chrome"> Github </a>
+                    <a class="header-links" 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"
@@ -72,17 +72,17 @@
                     <a
                         target="_blank"
                         rel="noopener noreferrer"
-                        href="https://chromewebstore.google.com/detail/font-tester/deachoodakeofjlfikfkohihnpcgiaim"
+                        href="https://pyuibuilder.pages.dev"
                         aria-label="signup"
-                        class="tw-rounded-md tw-border-[1px] tw-border-black tw-bg-transparent tw-px-3 tw-py-2 tw-text-black tw-transition-colors tw-duration-[0.3s] hover:tw-bg-black hover:tw-text-white"
+                        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"
                     >
-                        <span>Download</span>
-                        <i class="bi bi-download"></i>
+                        <span>Try free</span>
+                        <i class="bi bi-arrow-up-right"></i>
                     </a>
                 </div>
             </div>
             <button
-                class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-3xl tw-text-black lg:tw-hidden"
+                class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-3xl tw-text-white lg:tw-hidden"
                 onclick="toggleHeader()"
                 aria-label="menu"
                 id="collapse-btn"
@@ -95,7 +95,7 @@
         >   
 
             <!-- video container -->
-            <div class="tw-fixed tw-bg-[#000000af] dark:tw-bg-[#80808085] tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-z-20 tw-transition-opacity
+            <div class="tw-fixed tw-bg-[#fdfdfdaf] dark:tw-bg-[#80808085] tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-z-20 tw-transition-opacity
                 tw-duration-300 tw-scale-0 tw-opacity-0 tw-p-2
                 tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center" id="video-container-bg">
 
@@ -125,19 +125,21 @@
                     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-[80px] max-lg:tw-text-4xl max-md:tw-leading-snug"
+                        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-md:tw-leading-snug"
                     >
                         <span class=""> Build Python UI's using <span class="tw-px-3 t"></span>
                            </span>
                         <br />
-                        <span class="tw-bg-[#ffe27a] tw-px-3"> Drag and Drop editor </span>
+                        <span class=" tw-px-3 tw-text-5xl"> Drag and Drop editor </span>
                     </div>
                     
                 </div>
 
                 <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-700 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-200 max-lg:tw-max-w-full"
                     >
                         Tired of writing code to build you python GUIs, well now you can easily 
                     </div>
@@ -146,13 +148,13 @@
                         class="reveal-up tw-mt-10 tw-flex tw-place-items-center tw-gap-4"
                     >
                         <a
-                            class="btn tw-bg-[#7e22ce85] tw-shadow-lg tw-shadow-primary tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03]"
+                            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]"
                             href="#pricing"
                         >
                             Start for free
                         </a>
                         <button
-                            class="btn tw-flex tw-gap-2 !tw-border-solid !tw-border-[1px] !tw-border-black !tw-text-black !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-white !tw-text-white !tw-bg-transparent tw-transition-colors tw-duration-[0.3s] hover:!tw-bg-white hover:!tw-text-black"
                             onclick="openVideo()"
                             
                         >
@@ -182,241 +184,129 @@
             </div>
         </section>
 
-        <section
-            id="features"
-            class="tw-relative tw-mt-10 tw-flex tw-min-h-[100vh] tw-p-1 tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-items-center lg:tw-p-6"
-        >
-
-            <h2 class="rowdies-family tw-text-5xl tw-leading-relaxed tw-font-semibold max-md:tw-text-3xl tw-text-center">
-                Add personality to your <br class="lg:tw-hidden"> website
-                <br class="max-lg:tw-hidden">
-                with fonts
-            </h2>
-            
-            <div
-                class="reveal-up tw-mt-[5%] tw-flex tw-h-full tw-w-full tw-place-content-center tw-gap-8 tw-p-4 max-lg:tw-max-w-full max-lg:tw-flex-col"
-            >
-                <div
-                    class="tw-flex tw-flex-col tw-gap-[200px] tw-h-full tw-max-w-[50%] max-lg:tw-max-w-full tw-px-[10%] max-lg:tw-px-4 max-lg:tw-gap-16 max-lg:tw-w-full lg:tw-top-[20%]"
-                >   
-                    <div class="tw-flex tw-gap-6">
-                        <div class="tw-w-[80px] tw-h-[80px] tw-min-w-[80px] 
-                                    tw-min-h-[80px] tw-text-5xl
-                                    max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
-                            <!-- <img src="./assets/images/icons/unlock.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
-                            <i class="bi bi-fonts"></i>
-                        </div>
-                        <h3
-                            class="tw-text-4xl chivo-family max-lg:tw-text-2xl max-lg:tw-font-normal"
-                        >
-                            Pick and test 1000+ google fonts
-                        </h3>
-                    </div>
-
-                    <div class="tw-flex tw-gap-6">
-                        <div class="tw-w-[80px] tw-h-[80px] tw-text-5xl tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
-                            <!-- <img src="./assets/images/icons/lighting.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
-                            <i class="bi bi-layout-text-window-reverse"></i>
-                        </div>
-                        <h3
-                            class="tw-text-4xl bellota-family max-lg:tw-text-2xl max-lg:tw-font-normal"
-                        >
-                            Test on any website or landing page
-                        </h3>
-                    </div>
-
-                    <div class="tw-flex tw-gap-6">
-                        <div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
-                            <!-- <img src="./assets/images/icons/credit-card.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
-                            <i class="bi bi-highlighter"></i>
-                        </div>
-                        <h3
-                            class="tw-text-4xl battambang-family max-lg:tw-text-2xl max-lg:tw-font-normal"
-                        >
-                            Easily change specific text fonts with the highlighter feature
-                        </h3>
-                    </div>
-
-                    <div class="tw-flex tw-gap-6">
-                        <div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
-                            <!-- <img src="./assets/images/icons/music.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
-                            <i class="bi bi-distribute-vertical"></i>
-                        </div>
-                        <h3
-                            class="tw-text-4xl archivo-black-family max-lg:tw-text-2xl max-lg:tw-font-normal"
-                        >
-                            Set font weight and line height
-                        </h3>
-                    </div>
-
-                    <div class="tw-flex tw-gap-6">
-                        <div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
-                            <!-- <img src="./assets/images/icons/unlock.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
-                            <i class="bi bi-type-italic"></i>
-                        </div>
-                        <h3
-                            class="tw-text-4xl didact-gothic-family max-lg:tw-text-2xl max-lg:tw-font-normal"
-                        >
-                            set Italics, underline and more
-                        </h3>
-                    </div>
-
-                    <div class="tw-flex tw-gap-6">
-                        <div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
-                            <!-- <img src="./assets/images/icons/lighting.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
-                            <i class="bi bi-clipboard2-check"></i>
-                        </div>
-                        <h3
-                            class="tw-text-4xl max-lg:tw-text-2xl max-lg:tw-font-normal"
-                        >
-                            Easily copy the code for the fonts
-                        </h3>
-                    </div>
-
-                </div>
-
-                <div
-                    class="tw-relative tw-flex tw-max-w-[30%] max-lg:tw-max-w-full tw-flex-col tw-place-items-start tw-gap-4  tw-p-2 max-lg:tw-place-items-center max-lg:tw-place-content-center max-lg:tw-w-full"
-                >
-                    <div
-                        class="tw-top-20 lg:tw-sticky tw-shadow-md tw-max-h-[800px] tw-h-fit tw-max-w-[850px] max-lg:tw-max-h-fit max-lg:tw-max-w-[320px] tw-overflow-hidden tw-rounded-lg"
-                    >
-                        <!-- <img
-                            src="./assets/images/home/font-selector.png"
-                            alt="phone"
-                            class="tw-h-full tw-w-full tw-object-contain"
-                        /> -->
-                        <div id="font-selector-widget"></div>
-
-                    </div>
-                </div>
-            </div>
-        </section>
-        
-      
-
-        <section className="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 className="tw-text-2xl tw-font-medium max-md:tw-text-2xl">Choose your plan</h3>
-            <div className="tw-mt-10 tw-flex tw-place-content-center tw-gap-8 max-lg:tw-flex-col">
-                <div className="tw-flex tw-w-[380px] tw-border-[1px] tw-border-gray-500 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]">
+        <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>
+            <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 className="tw-text-5xl tw-font-semibold">$0</span>
+                        <span class="tw-text-5xl tw-font-semibold">$0</span>
                     </h3>
-                    <p className="tw-mt-3 tw-text-base tw-text-center tw-text-gray-600">
+                    <p class="tw-mt-3 tw-text-base tw-text-center tw-text-gray-400">
                         Free to use forever, but for added features and to support open-source development, consider buying a lifetime license.
                     </p>
                     <hr />
-                    <ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                    <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
+                        <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>Access to web-based editor</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Commercial use</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Downloadable UI builder exe for local development</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Preview live</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Save and load files</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Load plugins locally</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Load local UI templates</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Dark theme</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Priority support</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Early access to new features</span>
                         </li>
                         
                     </ul>
                 </div>
 
-                <div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
+                <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]">
-                    <div className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
+                    <div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
                         Limited time offer
                     </div>
-                    <div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
+                    <div class="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
                         Hobby
                     </div>
                     <h3>
-                        <span className="tw-text-5xl tw-font-semibold">
-                            <s className="tw-font-medium tw-text-4xl">$129</s>
+                        <span class="tw-text-5xl tw-font-semibold">
+                            <s class="tw-font-medium tw-text-4xl">$129</s>
                             <span>$29</span>
                         </span>
-                        <span className="tw-text-2xl tw-text-gray-600">Forever</span>
+                        <span class="tw-text-2xl tw-text-gray-600">Forever</span>
                     </h3>
-                    <p className="tw-mt-3 tw-text-center tw-text-gray-600">
+                    <p class="tw-mt-3 tw-text-center tw-text-gray-600">
                         Support open-source development 🚀. Plus, get added benefits.
                     </p>
                     <hr />
-                    <ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                    <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
+                        <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>Access to web-based editor</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Downloadable UI builder exe for local development</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Save and load files</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Load plugins locally</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Load local UI templates</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Dark theme</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Priority support</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Early access to new features</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                        <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>Commercial use</span>
                         </li>
                         
@@ -426,76 +316,75 @@
                         href="https://ko-fi.com/s/4a3dffb3b9"
                         target="_blank"
                         rel="noreferrer noopener"
-                        className="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-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"
                     >
                         <span>Buy License</span>
-                        <CrownFilled />
+                        <!-- <CrownFilled /> -->
                     </a>
                 </div>
 
-                {/* Paid Plan */}
-                <div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-3 tw-border-solid
+                <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 className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
+                    <div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
                         Limited time offer
                     </div>
-                    <div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
+                    <div class="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
                         Commercial
                     </div>
                     <h3>
-                        <span className="tw-text-5xl tw-font-semibold">
-                            <s className="tw-font-medium tw-text-4xl">$180</s>
+                        <span class="tw-text-5xl tw-font-semibold">
+                            <s class="tw-font-medium tw-text-4xl">$180</s>
                             <span>$49</span>
                         </span>
-                        <span className="tw-text-2xl tw-text-gray-600">Forever</span>
+                        <span class="tw-text-2xl tw-text-gray-600">Forever</span>
                     </h3>
-                    <p className="tw-mt-3 tw-text-center tw-text-gray-600">
+                    <p class="tw-mt-3 tw-text-center tw-text-gray-600">
                         Support open-source development 🚀. Plus, get added benefits.
                     </p>
                     <hr />
-                    <ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                    <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
+                        <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>Access to web-based editor</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Downloadable UI builder exe for local development</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Save and load files</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Load plugins locally</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Load local UI templates</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Dark theme</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Priority support</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Early access to new features</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Support for PySlide/PyQt</span>
                         </li>
-                        <li className="tw-flex tw-place-items-center tw-gap-2">
-                            <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                        <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>Commercial use</span>
                         </li>
                         
@@ -505,7 +394,7 @@
                         href="https://ko-fi.com/s/560a3b6b05"
                         target="_blank"
                         rel="noreferrer noopener"
-                        className="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-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"
                     >
                         <span>Buy License</span>
                         <CrownFilled />
@@ -518,7 +407,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-800 max-md:tw-text-2xl"
+                class="tw-text-4xl tw-font-medium tw-text-gray-300 max-md:tw-text-2xl"
             >
                 Faq
             </h3>
@@ -535,11 +424,10 @@
                         <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                     </div>
                     <div class="content">
-                        Yes, this is an open-source project, you can visit the 
-                        source code on 
+                        Yes, source code is available at 
                         <a  target="_blank"
                             rel="noopener noreferrer"
-                            href="https://github.com/PaulleDemon/font-tester-chrome" 
+                            href="https://github.com/PaulleDemon/PyUIBuilder" 
                             class="tw-underline">Github</a>
                     </div>
                 </div>
@@ -550,11 +438,11 @@
                     <div
                         class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
                     >
-                        <span>Can I try the extension for free?</span>
+                        <span>Can I try the PyUIBuilder for free?</span>
                         <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                     </div>
                     <div class="content">
-                        Yes, the chrome extension is free to use forever, however to support 
+                        Yes, PyUIBuilder is free to use forever, however to support 
                         open-source development, some features are only available to premium users.
                     </div>
                 </div>
@@ -607,7 +495,7 @@
                 class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-place-items-center tw-gap-6 max-md:tw-w-full"
             >
                 <img
-                    src="./assets/logo/logo.svg"
+                    src="./assets/logo/logo.png"
                     alt="logo"
                     srcset=""
                     class="tw-max-w-[120px]"
@@ -707,28 +595,5 @@
         }
     </style>
 
-    <script>
-        const swiper = new Swiper('.swiper', {
-            // Optional parameters
-            direction: 'horizontal',
-            loop: true,
-            centeredSlides: true,
-
-            // If we need pagination
-            pagination: {
-                el: '.pagination-container',
-                clickable: true,
-                renderBullet: function (index, className) {
-                    return `<span class="${className}"></span>`
-                },
-            },
-            // Navigation arrows
-            navigation: {
-                nextEl: '.testmonial-next',
-                prevEl: '.testmonial-prev',
-            },
-        })
-    </script>
-    <script src="https://gumroad.com/js/gumroad.js"></script>
 
 </html>
diff --git a/landingpages/landingpage/index.js b/landingpages/landingpage/index.js
index 9eb6501..99bc643 100644
--- a/landingpages/landingpage/index.js
+++ b/landingpages/landingpage/index.js
@@ -64,7 +64,7 @@ gsap.to(".reveal-up", {
     y: "100%",
 })
 
-const slideShowContainer = document.querySelector("#slideshow")
+// const slideShowContainer = document.querySelector("#slideshow")
 
 gsap.fromTo(".slide-in", {
     y: "100%"
@@ -150,6 +150,6 @@ sections.forEach((sec) => {
 
 
 
-const reviewContainer = document.querySelector(".review-container")
-const reviewSlideShow = new SlideShow(reviewContainer, true, 10000)
+// const reviewContainer = document.querySelector(".review-container")
+// const reviewSlideShow = new SlideShow(reviewContainer, true, 10000)
 
diff --git a/landingpages/tailwind/tailwind-runtime.css b/landingpages/tailwind/tailwind-runtime.css
index 5043e91..6e94061 100644
--- a/landingpages/tailwind/tailwind-runtime.css
+++ b/landingpages/tailwind/tailwind-runtime.css
@@ -585,10 +585,6 @@ video {
   top: 0.5rem;
 }
 
-.tw-top-20 {
-  top: 5rem;
-}
-
 .tw-top-3 {
   top: 0.75rem;
 }
@@ -651,10 +647,6 @@ video {
   margin-top: 2rem;
 }
 
-.tw-mt-\[5\%\] {
-  margin-top: 5%;
-}
-
 .tw-mt-auto {
   margin-top: auto;
 }
@@ -699,10 +691,6 @@ video {
   height: 60px;
 }
 
-.tw-h-\[80px\] {
-  height: 80px;
-}
-
 .tw-h-\[90vh\] {
   height: 90vh;
 }
@@ -719,10 +707,6 @@ video {
   max-height: 120px;
 }
 
-.tw-max-h-\[800px\] {
-  max-height: 800px;
-}
-
 .tw-max-h-\[90\%\] {
   max-height: 90%;
 }
@@ -759,10 +743,6 @@ video {
   min-height: 70vh;
 }
 
-.tw-min-h-\[80px\] {
-  min-height: 80px;
-}
-
 .tw-min-h-full {
   min-height: 100%;
 }
@@ -791,10 +771,6 @@ video {
   width: 50px;
 }
 
-.tw-w-\[80px\] {
-  width: 80px;
-}
-
 .tw-w-full {
   width: 100%;
 }
@@ -803,10 +779,6 @@ video {
   width: max-content;
 }
 
-.tw-min-w-\[80px\] {
-  min-width: 80px;
-}
-
 .tw-min-w-full {
   min-width: 100%;
 }
@@ -819,18 +791,10 @@ video {
   max-width: 120px;
 }
 
-.tw-max-w-\[30\%\] {
-  max-width: 30%;
-}
-
 .tw-max-w-\[450px\] {
   max-width: 450px;
 }
 
-.tw-max-w-\[50\%\] {
-  max-width: 50%;
-}
-
 .tw-max-w-\[80vw\] {
   max-width: 80vw;
 }
@@ -900,10 +864,6 @@ video {
   place-content: space-around;
 }
 
-.tw-place-items-start {
-  place-items: start;
-}
-
 .tw-place-items-center {
   place-items: center;
 }
@@ -948,10 +908,6 @@ video {
   gap: 10%;
 }
 
-.tw-gap-\[200px\] {
-  gap: 200px;
-}
-
 .tw-gap-\[20px\] {
   gap: 20px;
 }
@@ -1037,6 +993,21 @@ 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-bg-gray-100 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
@@ -1097,6 +1068,30 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.tw-bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.tw-bg-\[\#fdfdfdaf\] {
+  background-color: #fdfdfdaf;
+}
+
+.\!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-opacity-0 {
   --tw-bg-opacity: 0;
 }
@@ -1117,10 +1112,6 @@ video {
   padding: 0.75rem;
 }
 
-.tw-p-4 {
-  padding: 1rem;
-}
-
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1249,8 +1240,12 @@ video {
   line-height: 80px;
 }
 
-.tw-leading-relaxed {
-  line-height: 1.625;
+.tw-leading-\[100px\] {
+  line-height: 100px;
+}
+
+.tw-leading-\[90px\] {
+  line-height: 90px;
 }
 
 .\!tw-text-black {
@@ -1308,6 +1303,21 @@ 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-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.tw-text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .tw-underline {
   text-decoration-line: underline;
 }
@@ -1347,6 +1357,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.tw-shadow-\[\#7E22CE\] {
+  --tw-shadow-color: #7E22CE;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .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);
@@ -1402,6 +1417,11 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.hover\:tw-bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .hover\:\!tw-text-black:hover {
   --tw-text-opacity: 1 !important;
   color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
@@ -1412,6 +1432,11 @@ video {
   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));
+}
+
 .dark\:tw-bg-\[\#16171A\]:is(.tw-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(22 23 26 / var(--tw-bg-opacity));
@@ -1440,22 +1465,10 @@ video {
     margin-top: 30px;
   }
 
-  .max-lg\:tw-hidden {
-    display: none;
-  }
-
-  .max-lg\:tw-h-\[60px\] {
-    height: 60px;
-  }
-
   .max-lg\:tw-h-auto {
     height: auto;
   }
 
-  .max-lg\:tw-max-h-fit {
-    max-height: fit-content;
-  }
-
   .max-lg\:tw-min-h-\[250px\] {
     min-height: 250px;
   }
@@ -1464,10 +1477,6 @@ video {
     min-height: 400px;
   }
 
-  .max-lg\:tw-min-h-\[60px\] {
-    min-height: 60px;
-  }
-
   .max-lg\:tw-min-h-\[60vh\] {
     min-height: 60vh;
   }
@@ -1476,10 +1485,6 @@ video {
     width: 340px;
   }
 
-  .max-lg\:tw-w-\[60px\] {
-    width: 60px;
-  }
-
   .max-lg\:tw-w-full {
     width: 100%;
   }
@@ -1488,14 +1493,6 @@ video {
     min-width: 320px;
   }
 
-  .max-lg\:tw-min-w-\[60px\] {
-    min-width: 60px;
-  }
-
-  .max-lg\:tw-max-w-\[320px\] {
-    max-width: 320px;
-  }
-
   .max-lg\:tw-max-w-full {
     max-width: 100%;
   }
@@ -1504,22 +1501,10 @@ video {
     flex-direction: column;
   }
 
-  .max-lg\:tw-place-content-center {
-    place-content: center;
-  }
-
   .max-lg\:tw-place-items-end {
     place-items: end;
   }
 
-  .max-lg\:tw-place-items-center {
-    place-items: center;
-  }
-
-  .max-lg\:tw-gap-16 {
-    gap: 4rem;
-  }
-
   .max-lg\:tw-gap-5 {
     gap: 1.25rem;
   }
@@ -1537,25 +1522,11 @@ video {
     padding-right: 0.5rem;
   }
 
-  .max-lg\:tw-px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .max-lg\:tw-text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
   .max-lg\:tw-text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
 
-  .max-lg\:tw-font-normal {
-    font-weight: 400;
-  }
-
   .max-lg\:tw-shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1590,11 +1561,6 @@ video {
     line-height: 2rem;
   }
 
-  .max-md\:tw-text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .max-md\:tw-text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
@@ -1620,14 +1586,6 @@ video {
 }
 
 @media (min-width: 1024px) {
-  .lg\:tw-sticky {
-    position: sticky;
-  }
-
-  .lg\:tw-top-\[20\%\] {
-    top: 20%;
-  }
-
   .lg\:tw-mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -1644,10 +1602,6 @@ video {
   .lg\:tw-justify-around {
     justify-content: space-around;
   }
-
-  .lg\:tw-p-6 {
-    padding: 1.5rem;
-  }
 }
 
   
\ No newline at end of file