diff --git a/landingpages/buildinpublic/assets/images/background/dots.svg b/landingpages/buildinpublic/assets/images/background/dots.svg new file mode 100644 index 0000000..77e70ba --- /dev/null +++ b/landingpages/buildinpublic/assets/images/background/dots.svg @@ -0,0 +1,9622 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/landingpages/buildinpublic/assets/images/home/open-source.png b/landingpages/buildinpublic/assets/images/home/open-source.png new file mode 100644 index 0000000..0965477 Binary files /dev/null and b/landingpages/buildinpublic/assets/images/home/open-source.png differ diff --git a/landingpages/buildinpublic/assets/logo/logo.png b/landingpages/buildinpublic/assets/logo/logo.png new file mode 100644 index 0000000..68e0fc3 Binary files /dev/null and b/landingpages/buildinpublic/assets/logo/logo.png differ diff --git a/landingpages/buildinpublic/css/index.css b/landingpages/buildinpublic/css/index.css new file mode 100644 index 0000000..ed4cb15 --- /dev/null +++ b/landingpages/buildinpublic/css/index.css @@ -0,0 +1,239 @@ +/* @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'); */ + +:root{ + + --bg-color: #fff; + + --btn-color: #fdfdfd;/* button color*/ + --btn-bg: #000;/* button bg color*/ + + --primary-text-color: #000; + --header-link-hover: #000; + --input-hover-bd-color: #000; +} + + +html { + scroll-behavior: smooth; + /* font-family: "Ubuntu", sans-serif; */ +} + +header{ + /* background-color: #fff; + color: #000; */ + color: #4b4b4b; +} + + +header > .collapsible-header{ + display: flex; + gap: 1rem; + width: 100%; + background-color: inherit; + place-content: center; + overflow: hidden; + transition: width 0.3s ease; +} + +.animated-collapse{ + transition: width 0.3s ease; +} + + +.header-links { + display: flex; + align-items: center; + min-width: fit-content; + border-radius: 5px; + padding: 5px 10px; + transition: background-color 0.5s, color 0.5s; +} + + +.header-links:hover { + color: #000000; + /* background-color: var(--header-link-hover); */ +} + +.primary-text-color{ + color: var(--primary-text-color); +} + +#buildinpublic{ + /* height : 140px; */ + -webkit-text-fill-color: white; /* Will override color (regardless of order) */ + -webkit-text-stroke: 3px black; +} + + +.opacity-0{ + opacity: 0 !important; +} + +.opacity-100{ + opacity: 100 !important; +} + +.btn{ + padding: 10px 15px; + width: max-content; + border-radius: 5px; + color: var(--btn-color); + background-color: var(--btn-bg); + justify-content: center; + align-items: center; + display: flex; + cursor: pointer; +} + +.btn:hover{ + +} + +.btn:disabled{ + cursor: default; +} + +.input{ + padding: 10px; + background-color: transparent; + border-radius: 5px; + /* outline: none; */ + min-width: 100px; + border: 1px solid #818080; + /* transition: border 0.3s; */ +} + +.input:active, .input:focus, .input:focus-within{ + border: 1px solid var(--input-hover-bd-color) !important; +} + +.carousel-container { + overflow: hidden; + white-space: nowrap; + width: 100%; + max-width: 800px; +} + +.carousel { + display: inline-block; + animation: scroll 10s linear infinite; +} + +.carousel-img { + display: inline-block; + margin: 0 20px; +} + +@keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +.footer-link{ + color: #434242; + transition: color 0.3s; +} + +.footer-link:hover{ + color: #0b0b0b; +} + +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -22px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + z-index: 10; +} + +/* Position the "next button" to the right */ +.next { + right: 0px; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + + + +/* Style for the collapsible content such as faq commonly known as: accordion */ + +.faq{ + background-color: #fff; + color: #000000; + border: 1px solid #000; +} + +.faq-accordion { + background-color: inherit; + color: #000000; + cursor: pointer; + padding: 15px 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + transition: height 0.4s; +} + +.faq .content { + padding: 0px 18px; + color: #232323; + height: max-content; + overflow: hidden; + background-color: transparent; + text-align: justify; + max-height: 0px; + transition: max-height 0.4s, padding 0.4s; +} + +.faq-accordion .active, +.faq-accordion:hover { + /* background-color: #2e2c2c; */ +} + +@media not all and (min-width: 1024px) { + header .collapsible-header { + position: fixed; + right: 0px; + flex-direction: column; + opacity: 0; + height: 100vh; + min-height: 100vh; + height: 100dvh; + width: 0vw; + justify-content: space-between; + padding: 5px; + padding-top: 5%; + padding-bottom: 5%; + place-items: end; + background-color: #040404; + color: #ffffff; + overflow-y: auto; + box-shadow: 3px 0px 3px 2px #9f9f9f; + } + + .header-links{ + color: rgb(255, 255, 255); + } + +} \ No newline at end of file diff --git a/landingpages/buildinpublic/css/tailwind-build.css b/landingpages/buildinpublic/css/tailwind-build.css new file mode 100644 index 0000000..9e42045 --- /dev/null +++ b/landingpages/buildinpublic/css/tailwind-build.css @@ -0,0 +1 @@ +/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-bottom-10{bottom:2.5rem}.tw-left-0{left:0}.tw-left-\[50\%\]{left:50%}.tw-right-3{right:.75rem}.tw-top-0{top:0}.tw-top-20{top:5rem}.tw-top-3{top:.75rem}.tw-top-\[50\%\]{top:50%}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-50{z-index:50}.tw-mx-4{margin-left:1rem;margin-right:1rem}.tw-ml-auto{margin-left:auto}.tw-mt-10{margin-top:2.5rem}.tw-mt-2{margin-top:.5rem}.tw-mt-20{margin-top:5rem}.tw-mt-3{margin-top:.75rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-6{margin-top:1.5rem}.tw-mt-7{margin-top:1.75rem}.tw-mt-8{margin-top:2rem}.tw-mt-\[2\%\]{margin-top:2%}.tw-mt-\[5\%\]{margin-top:5%}.tw-mt-auto{margin-top:auto}.tw-flex{display:flex}.\!tw-hidden{display:none!important}.\!tw-h-\[450px\]{height:450px!important}.tw-h-\[250px\]{height:250px}.tw-h-\[30px\]{height:30px}.tw-h-\[400px\]{height:400px}.tw-h-\[40px\]{height:40px}.tw-h-\[50px\]{height:50px}.tw-h-\[550px\]{height:550px}.tw-h-\[60px\]{height:60px}.tw-h-\[80px\]{height:80px}.tw-h-fit{height:-moz-fit-content;height:fit-content}.tw-h-full{height:100%}.tw-max-h-\[100vh\]{max-height:100vh}.tw-max-h-\[350px\]{max-height:350px}.tw-max-h-\[550px\]{max-height:550px}.tw-max-h-\[650px\]{max-height:650px}.tw-max-h-\[800px\]{max-height:800px}.tw-max-h-\[90\%\]{max-height:90%}.tw-min-h-\[100vh\]{min-height:100vh}.tw-min-h-\[20vh\]{min-height:20vh}.tw-min-h-\[300px\]{min-height:300px}.tw-min-h-\[30vh\]{min-height:30vh}.tw-min-h-\[550px\]{min-height:550px}.tw-min-h-\[60vh\]{min-height:60vh}.tw-min-h-\[80px\]{min-height:80px}.tw-min-h-\[80vh\]{min-height:80vh}.tw-min-h-full{min-height:100%}.tw-w-\[1000px\]{width:1000px}.tw-w-\[150px\]{width:150px}.tw-w-\[250px\]{width:250px}.tw-w-\[400px\]{width:400px}.tw-w-\[40px\]{width:40px}.tw-w-\[50px\]{width:50px}.tw-w-\[80px\]{width:80px}.tw-w-full{width:100%}.tw-w-max{width:-moz-max-content;width:max-content}.tw-min-w-\[80px\]{min-width:80px}.tw-min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.tw-min-w-full{min-width:100%}.tw-max-w-\[100vw\]{max-width:100vw}.tw-max-w-\[120px\]{max-width:120px}.tw-max-w-\[150px\]{max-width:150px}.tw-max-w-\[30\%\]{max-width:30%}.tw-max-w-\[350px\]{max-width:350px}.tw-max-w-\[450px\]{max-width:450px}.tw-max-w-\[50\%\]{max-width:50%}.tw-max-w-\[60\%\]{max-width:60%}.tw-max-w-\[750px\]{max-width:750px}.tw-max-w-\[80\%\]{max-width:80%}.tw-max-w-\[850px\]{max-width:850px}.tw--translate-x-\[50\%\]{--tw-translate-x:-50%}.tw--translate-x-\[50\%\],.tw--translate-y-\[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))}.tw--translate-y-\[50\%\]{--tw-translate-y:-50%}.tw-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-flex-col{flex-direction:column}.tw-flex-wrap{flex-wrap:wrap}.tw-place-content-center{place-content:center}.tw-place-content-end{place-content:end}.tw-place-content-around{place-content:space-around}.tw-place-items-start{place-items:start}.tw-place-items-center{place-items:center}.tw-items-center{align-items:center}.tw-gap-1{gap:.25rem}.tw-gap-10{gap:2.5rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-4{gap:1rem}.tw-gap-5{gap:1.25rem}.tw-gap-6{gap:1.5rem}.tw-gap-8{gap:2rem}.tw-gap-\[10\%\]{gap:10%}.tw-gap-\[200px\]{gap:200px}.tw-gap-\[20px\]{gap:20px}.tw-overflow-hidden{overflow:hidden}.tw-overflow-clip{overflow:clip}.\!tw-rounded-full{border-radius:9999px!important}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-md{border-radius:.375rem}.tw-rounded-xl{border-radius:.75rem}.\!tw-border-\[1px\]{border-width:1px!important}.tw-border-\[1px\]{border-width:1px}.\!tw-border-solid{border-style:solid!important}.tw-border-solid{border-style:solid}.\!tw-border-black{--tw-border-opacity:1!important;border-color:rgb(0 0 0/var(--tw-border-opacity))!important}.\!tw-border-gray-600{--tw-border-opacity:1!important;border-color:rgb(75 85 99/var(--tw-border-opacity))!important}.\!tw-border-gray-800{--tw-border-opacity:1!important;border-color:rgb(31 41 55/var(--tw-border-opacity))!important}.tw-border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.\!tw-bg-black{--tw-bg-opacity:1!important;background-color:rgb(0 0 0/var(--tw-bg-opacity))!important}.\!tw-bg-transparent{background-color:initial!important}.tw-bg-\[\#7e22ce85\]{background-color:#7e22ce85}.tw-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.tw-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.tw-bg-transparent{background-color:initial}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.tw-bg-opacity-0{--tw-bg-opacity:0}.tw-object-contain{-o-object-fit:contain;object-fit:contain}.tw-object-cover{-o-object-fit:cover;object-fit:cover}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-5{padding:1.25rem}.tw-p-6{padding:1.5rem}.tw-p-8{padding:2rem}.tw-p-\[2\%\]{padding:2%}.tw-p-\[4px\]{padding:4px}.tw-p-\[5\%\]{padding:5%}.tw-px-3{padding-left:.75rem;padding-right:.75rem}.tw-px-\[10\%\]{padding-left:10%;padding-right:10%}.tw-px-\[5\%\]{padding-left:5%;padding-right:5%}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.tw-text-center{text-align:center}.tw-text-2xl{font-size:1.5rem;line-height:2rem}.tw-text-3xl{font-size:1.875rem;line-height:2.25rem}.tw-text-4xl{font-size:2.25rem;line-height:2.5rem}.tw-text-5xl{font-size:3rem;line-height:1}.tw-text-6xl{font-size:3.75rem;line-height:1}.tw-text-base{font-size:1rem;line-height:1.5rem}.tw-text-lg{font-size:1.125rem;line-height:1.75rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-font-medium{font-weight:500}.tw-font-semibold{font-weight:600}.tw-uppercase{text-transform:uppercase}.tw-leading-\[80px\]{line-height:80px}.\!tw-text-black{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important}.\!tw-text-gray-800{--tw-text-opacity:1!important;color:rgb(31 41 55/var(--tw-text-opacity))!important}.tw-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.tw-text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.tw-text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.tw-underline{text-decoration-line:underline}.tw-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-primary{--tw-shadow-color:#fff;--tw-shadow:var(--tw-shadow-colored)}.tw-outline-none{outline:2px solid #0000;outline-offset:2px}.tw-grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tw-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-duration-\[0\.3s\]{transition-duration:.3s}.hover\:tw-scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:tw-scale-105:hover,.hover\:tw-scale-\[1\.04\]:hover{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\.04\]:hover{--tw-scale-x:1.04;--tw-scale-y:1.04}.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))}.hover\:\!tw-bg-white:hover{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.hover\:tw-bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.hover\:\!tw-text-black:hover{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important}.hover\:tw-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:tw-grayscale-0:hover{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media not all and (min-width:1280px){.max-xl\:tw-flex-col{flex-direction:column}.max-xl\:tw-place-items-center{place-items:center}}@media not all and (min-width:1024px){.max-lg\:tw-fixed{position:fixed}.max-lg\:\!tw-mt-10{margin-top:2.5rem!important}.max-lg\:tw-mt-\[30px\]{margin-top:30px}.max-lg\:tw-h-\[60px\]{height:60px}.max-lg\:tw-h-auto{height:auto}.max-lg\:tw-h-full{height:100%}.max-lg\:tw-max-h-\[260px\]{max-height:260px}.max-lg\:tw-max-h-fit{max-height:-moz-fit-content;max-height:fit-content}.max-lg\:tw-min-h-\[250px\]{min-height:250px}.max-lg\:tw-min-h-\[60px\]{min-height:60px}.max-lg\:tw-w-\[300px\]{width:300px}.max-lg\:tw-w-\[60px\]{width:60px}.max-lg\:tw-w-full{width:100%}.max-lg\:tw-min-w-\[320px\]{min-width:320px}.max-lg\:tw-min-w-\[60px\]{min-width:60px}.max-lg\:tw-max-w-\[300px\]{max-width:300px}.max-lg\:tw-max-w-\[320px\]{max-width:320px}.max-lg\:tw-max-w-full{max-width:100%}.max-lg\:tw-flex-col{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}.max-lg\:tw-p-3{padding:.75rem}.max-lg\:tw-p-4{padding:1rem}.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 #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media not all and (min-width:768px){.max-md\:tw-mt-8{margin-top:2rem}.max-md\:tw-mt-\[50px\]{margin-top:50px}.max-md\:tw-w-full{width:100%}.max-md\:tw-max-w-full{max-width:100%}.max-md\:tw-flex-col{flex-direction:column}.max-md\:tw-place-content-center{place-content:center}.max-md\:tw-gap-2{gap:.5rem}.max-md\:tw-px-2{padding-left:.5rem;padding-right:.5rem}.max-md\:tw-text-2xl{font-size:1.5rem;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}.max-md\:tw-text-sm{font-size:.875rem;line-height:1.25rem}.max-md\:tw-text-xl{font-size:1.25rem;line-height:1.75rem}.max-md\:tw-leading-snug{line-height:1.375}.max-md\:tw-opacity-0{opacity:0}}@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}.lg\:tw-hidden{display:none}.lg\:tw-place-items-center{place-items:center}.lg\:tw-justify-around{justify-content:space-around}.lg\:tw-p-6{padding:1.5rem}} \ No newline at end of file diff --git a/landingpages/buildinpublic/index.html b/landingpages/buildinpublic/index.html new file mode 100644 index 0000000..c50a377 --- /dev/null +++ b/landingpages/buildinpublic/index.html @@ -0,0 +1,360 @@ + + + + + + Font Tester - Test and pick from over 1000+ fonts + + + + + + + + + + + + + + + + + + + + + + +
+ + logo + +
+
+ About + License + Features + Github +
+
+ + Open PyUiBuilder + + +
+
+ +
+ +
+ +
+ #BuildInPublic +
+ +
+ Documented journey of me building PyUIBuilder +
+ + + View on Twitter + + +
+ + +
+ ... +
+ I stopped working on this after making the base because I ran out of funds, was looking for clients... +
+
+ ... +
+ After working on the clients project client refused to pay up :(. I took some time off to build another small tool... +
+ ... +
+ + ... +
+
+ The client refused to Pay up, so I tried raising funds, but no luck :( +
+ ... +
+ + ... +
+
+ Again not luck. So I decided to go all in with the little money left... +
+ ... +
+ + ... +
+
+ No more money raised after this point... +
+ ... +
+ + + + ... +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ... +
+
+ That's it for now 😅. For more updates Follow me +
+ +
+ + +
+

+ Faq +

+
+
+
+ Is the source code available? + +
+
+ Yes, this is an open-source project, you can visit the + source code on + Github +
+
+ +
+
+ Can I try the PyUIbuilder for free? + +
+
+ Yes, the PyUIbuilder is free to use forever, however to support + open-source development, some features are only available to premium users. +
+
+ +
+
+ What frameworks and UI libraries are supported? + +
+
+ For now Tkinter and CustomTk are supported soon there will be support for Kivy and Pyside +
+
+ +
+
+ Where can I find the upcoming features? + +
+
+ You can find the upcoming features on the + Roadmap +
+
+
+ +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/landingpages/buildinpublic/index.js b/landingpages/buildinpublic/index.js new file mode 100644 index 0000000..c2f0356 --- /dev/null +++ b/landingpages/buildinpublic/index.js @@ -0,0 +1,97 @@ +// initialization + +const RESPONSIVE_WIDTH = 1024 + +let headerWhiteBg = false +let isHeaderCollapsed = window.innerWidth < RESPONSIVE_WIDTH +const collapseBtn = document.getElementById("collapse-btn") +const collapseHeaderItems = document.getElementById("collapsed-header-items") + + + +function onHeaderClickOutside(e) { + + if (!collapseHeaderItems.contains(e.target)) { + toggleHeader() + } + +} + + +function toggleHeader() { + if (isHeaderCollapsed) { + // collapseHeaderItems.classList.remove("max-md:tw-opacity-0") + collapseHeaderItems.classList.add("opacity-100",) + collapseHeaderItems.style.width = "60vw" + collapseBtn.classList.remove("bi-list") + collapseBtn.classList.add("bi-x", "max-lg:tw-fixed") + isHeaderCollapsed = false + + setTimeout(() => window.addEventListener("click", onHeaderClickOutside), 1) + + } else { + collapseHeaderItems.classList.remove("opacity-100") + collapseHeaderItems.style.width = "0vw" + collapseBtn.classList.remove("bi-x", "max-lg:tw-fixed") + collapseBtn.classList.add("bi-list") + isHeaderCollapsed = true + window.removeEventListener("click", onHeaderClickOutside) + + } +} + +function responsive() { + if (window.innerWidth > RESPONSIVE_WIDTH) { + collapseHeaderItems.style.width = "" + + } else { + isHeaderCollapsed = true + } +} + +window.addEventListener("resize", responsive) + + +/** + * Animations + */ + +gsap.registerPlugin(ScrollTrigger) + + +gsap.to(".reveal-up", { + opacity: 0, + y: "100%", +}) + + +gsap.fromTo(".slide-in", { + y: "100%" +}, { + y: "0%", + duration: 1, +}) + + + +const faqAccordion = document.querySelectorAll('.faq-accordion') + +faqAccordion.forEach(function (btn) { + btn.addEventListener('click', function () { + this.classList.toggle('active') + + // Toggle 'rotate' class to rotate the arrow + let content = this.nextElementSibling + + // content.classList.toggle('!tw-hidden') + if (content.style.maxHeight === '200px') { + content.style.maxHeight = '0px' + content.style.padding = '0px 18px' + + } else { + content.style.maxHeight = '200px' + content.style.padding = '20px 18px' + } + }) +}) + diff --git a/landingpages/buildinpublic/package.json b/landingpages/buildinpublic/package.json new file mode 100644 index 0000000..c229c3c --- /dev/null +++ b/landingpages/buildinpublic/package.json @@ -0,0 +1,28 @@ +{ + "name": "landing-pages", + "version": "1.0.0", + "description": "beautiful landing pages", + "main": "index.js", + "scripts": { + "start:tailwind": "cross-env NODE_ENV=development tailwindcss --postcss -i tailwind.css -o tailwind-runtime.css -w", + "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i tailwind.css -o tailwind-build.css --minify", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "landing", + "pages", + "motion", + "design", + "websites" + ], + "author": "Paul", + "license": "MIT", + "devDependencies": { + "tailwindcss": "^3.4.1" + }, + "dependencies": { + "postcss": "^8.4.33", + "postcss-simple-vars": "^7.0.1" + } + } + \ No newline at end of file diff --git a/landingpages/buildinpublic/readme.md b/landingpages/buildinpublic/readme.md new file mode 100644 index 0000000..24d1a5d --- /dev/null +++ b/landingpages/buildinpublic/readme.md @@ -0,0 +1,28 @@ + +**Github**: https://github.com/PaulleDemon/awesome-landing-pages + +## Usage + +* This template uses tailwind css every tailwind class are prefixed with `tw-`, to help differentiate + between tailwind classes and other classes + +During development add the following to head tag + +```html + +``` +During production use + +```html + +``` + +To start Tailwind during development use +```html +npm run start:tailwind +``` + +To create a build file use +```html +npm run build:tailwind +``` \ No newline at end of file diff --git a/landingpages/buildinpublic/scripts/utils.js b/landingpages/buildinpublic/scripts/utils.js new file mode 100644 index 0000000..e69de29 diff --git a/landingpages/tailwind.config.js b/landingpages/tailwind.config.js new file mode 100644 index 0000000..3d6e0ba --- /dev/null +++ b/landingpages/tailwind.config.js @@ -0,0 +1,21 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + prefix: 'tw-', + important: false, + content: [ + "landingpages/**/*.{html, jsx, js}", + "landingpages/**/*.js", + "landingpages/**/*.html", + ], + darkMode: 'class', + theme: { + extend: { + colors: { + primary: '#fff', + secondary: "#000", + } + }, + }, + plugins: [], +} + diff --git a/landingpages/tailwind/tailwind-runtime.css b/landingpages/tailwind/tailwind-runtime.css new file mode 100644 index 0000000..1cd32b4 --- /dev/null +++ b/landingpages/tailwind/tailwind-runtime.css @@ -0,0 +1,1751 @@ +/* +! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + /* 3 */ + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +.tw-fixed { + position: fixed; +} + +.tw-absolute { + position: absolute; +} + +.tw-relative { + position: relative; +} + +.tw-bottom-10 { + bottom: 2.5rem; +} + +.tw-left-0 { + left: 0px; +} + +.tw-left-\[50\%\] { + left: 50%; +} + +.tw-right-3 { + right: 0.75rem; +} + +.tw-top-0 { + top: 0px; +} + +.tw-top-20 { + top: 5rem; +} + +.tw-top-3 { + top: 0.75rem; +} + +.tw-top-\[50\%\] { + top: 50%; +} + +.tw-left-1\/2 { + left: 50%; +} + +.tw-z-10 { + z-index: 10; +} + +.tw-z-20 { + z-index: 20; +} + +.tw-z-50 { + z-index: 50; +} + +.tw-mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + +.tw-ml-auto { + margin-left: auto; +} + +.tw-mt-10 { + margin-top: 2.5rem; +} + +.tw-mt-2 { + margin-top: 0.5rem; +} + +.tw-mt-20 { + margin-top: 5rem; +} + +.tw-mt-3 { + margin-top: 0.75rem; +} + +.tw-mt-5 { + margin-top: 1.25rem; +} + +.tw-mt-6 { + margin-top: 1.5rem; +} + +.tw-mt-7 { + margin-top: 1.75rem; +} + +.tw-mt-8 { + margin-top: 2rem; +} + +.tw-mt-\[2\%\] { + margin-top: 2%; +} + +.tw-mt-\[5\%\] { + margin-top: 5%; +} + +.tw-mt-auto { + margin-top: auto; +} + +.tw-mt-4 { + margin-top: 1rem; +} + +.tw-flex { + display: flex; +} + +.\!tw-hidden { + display: none !important; +} + +.\!tw-h-\[450px\] { + height: 450px !important; +} + +.tw-h-\[250px\] { + height: 250px; +} + +.tw-h-\[30px\] { + height: 30px; +} + +.tw-h-\[400px\] { + height: 400px; +} + +.tw-h-\[40px\] { + height: 40px; +} + +.tw-h-\[50px\] { + height: 50px; +} + +.tw-h-\[550px\] { + height: 550px; +} + +.tw-h-\[60px\] { + height: 60px; +} + +.tw-h-\[80px\] { + height: 80px; +} + +.tw-h-fit { + height: fit-content; +} + +.tw-h-full { + height: 100%; +} + +.tw-h-\[90vh\] { + height: 90vh; +} + +.tw-h-auto { + height: auto; +} + +.tw-max-h-\[100vh\] { + max-height: 100vh; +} + +.tw-max-h-\[350px\] { + max-height: 350px; +} + +.tw-max-h-\[550px\] { + max-height: 550px; +} + +.tw-max-h-\[650px\] { + max-height: 650px; +} + +.tw-max-h-\[800px\] { + max-height: 800px; +} + +.tw-max-h-\[90\%\] { + max-height: 90%; +} + +.tw-max-h-full { + max-height: 100%; +} + +.tw-min-h-\[100vh\] { + min-height: 100vh; +} + +.tw-min-h-\[20vh\] { + min-height: 20vh; +} + +.tw-min-h-\[300px\] { + min-height: 300px; +} + +.tw-min-h-\[30vh\] { + min-height: 30vh; +} + +.tw-min-h-\[550px\] { + min-height: 550px; +} + +.tw-min-h-\[60vh\] { + min-height: 60vh; +} + +.tw-min-h-\[80px\] { + min-height: 80px; +} + +.tw-min-h-\[80vh\] { + min-height: 80vh; +} + +.tw-min-h-full { + min-height: 100%; +} + +.tw-min-h-\[50vh\] { + min-height: 50vh; +} + +.tw-min-h-\[70vh\] { + min-height: 70vh; +} + +.tw-w-\[1000px\] { + width: 1000px; +} + +.tw-w-\[150px\] { + width: 150px; +} + +.tw-w-\[250px\] { + width: 250px; +} + +.tw-w-\[400px\] { + width: 400px; +} + +.tw-w-\[40px\] { + width: 40px; +} + +.tw-w-\[50px\] { + width: 50px; +} + +.tw-w-\[80px\] { + width: 80px; +} + +.tw-w-full { + width: 100%; +} + +.tw-w-max { + width: max-content; +} + +.\!tw-w-full { + width: 100% !important; +} + +.tw-w-\[380px\] { + width: 380px; +} + +.tw-min-w-\[80px\] { + min-width: 80px; +} + +.tw-min-w-fit { + min-width: fit-content; +} + +.tw-min-w-full { + min-width: 100%; +} + +.tw-max-w-\[100vw\] { + max-width: 100vw; +} + +.tw-max-w-\[120px\] { + max-width: 120px; +} + +.tw-max-w-\[150px\] { + max-width: 150px; +} + +.tw-max-w-\[30\%\] { + max-width: 30%; +} + +.tw-max-w-\[350px\] { + max-width: 350px; +} + +.tw-max-w-\[450px\] { + max-width: 450px; +} + +.tw-max-w-\[50\%\] { + max-width: 50%; +} + +.tw-max-w-\[60\%\] { + max-width: 60%; +} + +.tw-max-w-\[750px\] { + max-width: 750px; +} + +.tw-max-w-\[80\%\] { + max-width: 80%; +} + +.tw-max-w-\[850px\] { + max-width: 850px; +} + +.tw-max-w-\[80vw\] { + max-width: 80vw; +} + +.tw-max-w-\[550px\] { + max-width: 550px; +} + +.tw--translate-x-\[50\%\] { + --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)); +} + +.tw--translate-y-\[50\%\] { + --tw-translate-y: -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)); +} + +.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)); +} + +.tw-scale-0 { + --tw-scale-x: 0; + --tw-scale-y: 0; + 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-select-none { + -webkit-user-select: none; + user-select: none; +} + +.tw-flex-col { + flex-direction: column; +} + +.tw-flex-wrap { + flex-wrap: wrap; +} + +.tw-place-content-center { + place-content: center; +} + +.tw-place-content-end { + place-content: end; +} + +.tw-place-content-around { + place-content: space-around; +} + +.tw-place-items-start { + place-items: start; +} + +.tw-place-items-center { + place-items: center; +} + +.tw-items-center { + align-items: center; +} + +.tw-gap-1 { + gap: 0.25rem; +} + +.tw-gap-10 { + gap: 2.5rem; +} + +.tw-gap-2 { + gap: 0.5rem; +} + +.tw-gap-3 { + gap: 0.75rem; +} + +.tw-gap-4 { + gap: 1rem; +} + +.tw-gap-5 { + gap: 1.25rem; +} + +.tw-gap-6 { + gap: 1.5rem; +} + +.tw-gap-8 { + gap: 2rem; +} + +.tw-gap-\[10\%\] { + gap: 10%; +} + +.tw-gap-\[200px\] { + gap: 200px; +} + +.tw-gap-\[20px\] { + gap: 20px; +} + +.tw-space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + +.tw-overflow-hidden { + overflow: hidden; +} + +.tw-overflow-clip { + overflow: clip; +} + +.\!tw-rounded-full { + border-radius: 9999px !important; +} + +.tw-rounded-lg { + border-radius: 0.5rem; +} + +.tw-rounded-md { + border-radius: 0.375rem; +} + +.tw-rounded-xl { + border-radius: 0.75rem; +} + +.tw-rounded-full { + border-radius: 9999px; +} + +.\!tw-border-\[1px\] { + border-width: 1px !important; +} + +.tw-border-\[1px\] { + border-width: 1px; +} + +.tw-border-2 { + border-width: 2px; +} + +.\!tw-border-solid { + border-style: solid !important; +} + +.tw-border-solid { + border-style: solid; +} + +.\!tw-border-black { + --tw-border-opacity: 1 !important; + border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important; +} + +.\!tw-border-gray-600 { + --tw-border-opacity: 1 !important; + border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important; +} + +.\!tw-border-gray-800 { + --tw-border-opacity: 1 !important; + border-color: rgb(31 41 55 / 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-bg-black { + --tw-bg-opacity: 1 !important; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important; +} + +.\!tw-bg-transparent { + background-color: transparent !important; +} + +.tw-bg-\[\#7e22ce85\] { + background-color: #7e22ce85; +} + +.tw-bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.tw-bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.tw-bg-transparent { + background-color: transparent; +} + +.tw-bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.tw-bg-\[\#000000af\] { + background-color: #000000af; +} + +.tw-bg-\[\#ffe27a\] { + --tw-bg-opacity: 1; + background-color: rgb(255 226 122 / var(--tw-bg-opacity)); +} + +.tw-bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + +.tw-bg-opacity-0 { + --tw-bg-opacity: 0; +} + +.tw-object-contain { + object-fit: contain; +} + +.tw-object-cover { + object-fit: cover; +} + +.tw-p-2 { + padding: 0.5rem; +} + +.tw-p-4 { + padding: 1rem; +} + +.tw-p-5 { + padding: 1.25rem; +} + +.tw-p-6 { + padding: 1.5rem; +} + +.tw-p-8 { + padding: 2rem; +} + +.tw-p-\[2\%\] { + padding: 2%; +} + +.tw-p-\[4px\] { + padding: 4px; +} + +.tw-p-\[5\%\] { + padding: 5%; +} + +.tw-p-1 { + padding: 0.25rem; +} + +.tw-px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.tw-px-\[10\%\] { + padding-left: 10%; + padding-right: 10%; +} + +.tw-px-\[5\%\] { + padding-left: 5%; + padding-right: 5%; +} + +.tw-py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.tw-text-center { + text-align: center; +} + +.tw-text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.tw-text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.tw-text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.tw-text-5xl { + font-size: 3rem; + line-height: 1; +} + +.tw-text-6xl { + font-size: 3.75rem; + line-height: 1; +} + +.tw-text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.tw-text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.tw-text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.tw-text-8xl { + font-size: 6rem; + line-height: 1; +} + +.tw-font-medium { + font-weight: 500; +} + +.tw-font-semibold { + font-weight: 600; +} + +.tw-uppercase { + text-transform: uppercase; +} + +.tw-italic { + font-style: italic; +} + +.tw-leading-\[80px\] { + line-height: 80px; +} + +.tw-leading-relaxed { + line-height: 1.625; +} + +.\!tw-text-black { + --tw-text-opacity: 1 !important; + color: rgb(0 0 0 / var(--tw-text-opacity)) !important; +} + +.\!tw-text-gray-800 { + --tw-text-opacity: 1 !important; + color: rgb(31 41 55 / var(--tw-text-opacity)) !important; +} + +.tw-text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.tw-text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.tw-text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + +.tw-text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.tw-text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.tw-text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity)); +} + +.tw-text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); +} + +.tw-text-yellow-400 { + --tw-text-opacity: 1; + color: rgb(250 204 21 / var(--tw-text-opacity)); +} + +.tw-text-blue-400 { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity)); +} + +.tw-text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + +.tw-underline { + text-decoration-line: underline; +} + +.tw-opacity-0 { + opacity: 0; +} + +.tw-shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.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); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.tw-shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.tw-shadow-primary { + --tw-shadow-color: #fff; + --tw-shadow: var(--tw-shadow-colored); +} + +.tw-outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.tw-grayscale { + --tw-grayscale: grayscale(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.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); + transition-duration: 150ms; +} + +.tw-transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.tw-transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.tw-duration-\[0\.3s\] { + transition-duration: 0.3s; +} + +.tw-duration-300 { + transition-duration: 300ms; +} + +.tw-duration-500 { + transition-duration: 500ms; +} + +.hover\:tw-scale-105: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\.04\]:hover { + --tw-scale-x: 1.04; + --tw-scale-y: 1.04; + 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)); +} + +.hover\:tw-scale-x-\[1\.02\]:hover { + --tw-scale-x: 1.02; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:\!tw-bg-white:hover { + --tw-bg-opacity: 1 !important; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; +} + +.hover\:tw-bg-black:hover { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.hover\:\!tw-text-black:hover { + --tw-text-opacity: 1 !important; + color: rgb(0 0 0 / var(--tw-text-opacity)) !important; +} + +.hover\:tw-text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.hover\:tw-grayscale-0:hover { + --tw-grayscale: grayscale(0); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.dark\:tw-bg-\[\#16171A\]:is(.tw-dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 23 26 / var(--tw-bg-opacity)); +} + +.dark\:tw-bg-\[\#80808085\]:is(.tw-dark *) { + background-color: #80808085; +} + +@media not all and (min-width: 1280px) { + .max-xl\:tw-flex-col { + flex-direction: column; + } + + .max-xl\:tw-place-items-center { + place-items: center; + } +} + +@media not all and (min-width: 1024px) { + .max-lg\:tw-fixed { + position: fixed; + } + + .max-lg\:\!tw-mt-10 { + margin-top: 2.5rem !important; + } + + .max-lg\:tw-mt-\[30px\] { + margin-top: 30px; + } + + .max-lg\:tw-mt-10 { + margin-top: 2.5rem; + } + + .max-lg\:tw-hidden { + display: none; + } + + .max-lg\:tw-h-\[60px\] { + height: 60px; + } + + .max-lg\:tw-h-auto { + height: auto; + } + + .max-lg\:tw-h-full { + height: 100%; + } + + .max-lg\:tw-h-\[80px\] { + height: 80px; + } + + .max-lg\:tw-max-h-\[260px\] { + max-height: 260px; + } + + .max-lg\:tw-max-h-fit { + max-height: fit-content; + } + + .max-lg\:tw-min-h-\[250px\] { + min-height: 250px; + } + + .max-lg\:tw-min-h-\[60px\] { + min-height: 60px; + } + + .max-lg\:tw-min-h-\[400px\] { + min-height: 400px; + } + + .max-lg\:tw-min-h-\[60vh\] { + min-height: 60vh; + } + + .max-lg\:tw-w-\[300px\] { + width: 300px; + } + + .max-lg\:tw-w-\[60px\] { + width: 60px; + } + + .max-lg\:tw-w-full { + width: 100%; + } + + .max-lg\:tw-w-\[340px\] { + width: 340px; + } + + .max-lg\:tw-w-\[80px\] { + width: 80px; + } + + .max-lg\:tw-min-w-\[320px\] { + min-width: 320px; + } + + .max-lg\:tw-min-w-\[60px\] { + min-width: 60px; + } + + .max-lg\:tw-max-w-\[300px\] { + max-width: 300px; + } + + .max-lg\:tw-max-w-\[320px\] { + max-width: 320px; + } + + .max-lg\:tw-max-w-full { + max-width: 100%; + } + + .max-lg\:tw-flex-col { + 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; + } + + .max-lg\:tw-p-3 { + padding: 0.75rem; + } + + .max-lg\:tw-p-4 { + padding: 1rem; + } + + .max-lg\:tw-p-2 { + padding: 0.5rem; + } + + .max-lg\:tw-px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + + .max-lg\:tw-px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .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-text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .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); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } +} + +@media not all and (min-width: 768px) { + .max-md\:tw-mt-8 { + margin-top: 2rem; + } + + .max-md\:tw-mt-\[50px\] { + margin-top: 50px; + } + + .max-md\:tw-w-full { + width: 100%; + } + + .max-md\:tw-max-w-full { + max-width: 100%; + } + + .max-md\:tw-max-w-\[100vw\] { + max-width: 100vw; + } + + .max-md\:tw-flex-col { + flex-direction: column; + } + + .max-md\:tw-place-content-center { + place-content: center; + } + + .max-md\:tw-gap-2 { + gap: 0.5rem; + } + + .max-md\:tw-px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .max-md\:tw-text-2xl { + font-size: 1.5rem; + 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; + } + + .max-md\:tw-text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } + + .max-md\:tw-text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + + .max-md\:tw-leading-snug { + line-height: 1.375; + } + + .max-md\:tw-opacity-0 { + opacity: 0; + } +} + +@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; + } + + .lg\:tw-hidden { + display: none; + } + + .lg\:tw-place-items-center { + place-items: center; + } + + .lg\:tw-justify-around { + justify-content: space-around; + } + + .lg\:tw-p-6 { + padding: 1.5rem; + } +} + + \ No newline at end of file diff --git a/landingpages/tailwind/tailwind.css b/landingpages/tailwind/tailwind.css new file mode 100644 index 0000000..386002c --- /dev/null +++ b/landingpages/tailwind/tailwind.css @@ -0,0 +1,11 @@ +@config "../tailwind.config.js"; + + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components{ +} + + \ No newline at end of file diff --git a/package.json b/package.json index 4a6d1ad..4d46a43 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,10 @@ "start": "react-scripts start", "build": "GENERATE_SOURCEMAP=false env-cmd -e production react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "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", + "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./landingpages/tailwind/tailwind.css -o ./landingpages/tailwind/tailwind-build.css --minify" }, "eslintConfig": { "extends": [