upgrade project to taiwlind v4

app/app.css

@@ -1,10 +1,87 @@
-@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Outfit:wght@100..900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Jersey+10&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Outfit:wght@100..900&display=swap')
+layer(base);
+@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap')
+layer(base);
+@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap')
+layer(base);
+
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+
+@theme {
+  --color-brand-gray: #6a6966;
+  --color-brand-aqua: #bad9d8;
+  --color-brand-yellow: #ecd66e;
+  --color-brand-red: #aa4958;
+  --color-brand-grass: #96b894;
+  --color-brand-pink: #ffafa3;
+
+  --color-brand-100: #f3f0f5;
+  --color-brand-500: #9870ed;
+
+  --color-green-grass: #a6eb9a;
+  --color-lavander: #6772e5;
+  --color-gray-light: #f9f9f9;
+  --color-marengo: #6a6966;
+  --color-tale: #a19e9e;
+  --color-onix: #181818;
+  --color-iron: #323232;
+  --color-metal: #8391a1;
+  --color-sky: #b2dad8;
+  --color-linen: #f3d7b8;
+  --color-rose: #f4b7ec;
+  --color-lime: #c8f9ab;
+  --color-berry: #e299a4;
+  --color-munsell: #daa23d;
+  --color-sea: #83d0e4;
+  --color-emerald: #9addaa;
+  --color-maya: #75baf9;
+
+  --color-status-success: #3b4730;
+  --color-status-success-overlay: #dae8cf;
+
+  --background-image-pattern: url('/dash/pattern.svg');
+  --background-image-pattern-dark: url('/dash/pattern-dark.svg');
+  --background-image-cover-suscription: url('/home/cover-yellow.svg');
+  --background-image-cover-info: url('/home/info.svg');
+  --background-image-cover-success: url('/images/cover-success.svg');
+  --background-image-cover-success-mobile: url('/images/cover-success-mobile.svg');
+
+  --font-jersey: Jersey 10;
+  --font-sans:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --animate-moving: moving 1s linear infinite;
+
+  @keyframes moving {
+    0%,
+    100% {
+      transform: translateX(0px);
+    }
+    50% {
+      transform: translateX(10px);
+    }
+  }
+}
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 @font-face {
   font-family: "Satoshi";

app/components/DashLayout/SideBar.tsx

@@ -31,7 +31,7 @@ export const SideBar = () => {
 const SideBarWeb = () => {
   const location = useLocation();
   return (
-    <section className="w-20  h-full hidden md:flex bg-black border-r-[2px] border-black fixed z-40 py-2 flex-col gap-4">
+    <section className="w-20  h-full hidden md:flex bg-black border-r-2 border-black fixed z-40 py-2 flex-col gap-4">
       <SideBarItem isLogo />
       <ul className="flex flex-col gap-3 pt-2 pb-0 items-center">
         {ITEMS.navItems.map((item, key) => (
@@ -49,7 +49,7 @@ const SideBarWeb = () => {
           />
         ))}
       </ul>
-      <hr className="bg-white opacity-20 h-[1px] w-full" />
+      <hr className="bg-white opacity-20 h-px w-full" />
       <ul className="flex flex-col gap-3 py-0 items-center">
         {ITEMS.sectionItems.map((item, key) => (
           <SideBarItem key={key} {...item} />
@@ -117,7 +117,7 @@ const SideBarItem = ({
         {isLogo ? null : (
           <button
             ref={scope}
-            className=" bg-white border scale-0 border-gray-200 absolute left-14 top-[6px] w-fit h-8 flex items-center rounded text-black px-2 opacity-0 "
+            className=" bg-white border scale-0 border-gray-200 absolute left-14 top-[6px] w-fit h-8 flex items-center rounded-sm text-black px-2 opacity-0 "
           >
             <span className="whitespace-nowrap ">{title}</span>
           </button>

app/components/ai/BittorChat.tsx

@@ -330,14 +330,14 @@ export function BittorChat({
                       </p>
                                   {/* Mostrar información de la herramienta usada  @TODO: make a component to better reuse */}
                                   {message.toolInUse && message.role === 'assistant' && (
-                        <div className="w-max px-2 rounded">
-                          <div className={`flex items-center gap-1 px-1 text-xs shadow-sm ${message.toolInUse.status === 'completed' ? 'text-green-600 border border-green-100 bg-green-50' : 'text-orange-500 border border-orange-100 bg-orange-50'}`}>
+                        <div className="w-max px-2 rounded-sm">
+                          <div className={`flex items-center gap-1 px-1 text-xs shadow-xs ${message.toolInUse.status === 'completed' ? 'text-green-600 border border-green-100 bg-green-50' : 'text-orange-500 border border-orange-100 bg-orange-50'}`}>
                             {message.toolInUse.status === 'completed' ? (
-                              <svg className="w-3 h-3 flex-shrink-0 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                              <svg className="w-3 h-3 shrink-0 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                               </svg>
                             ) : (
-                              <svg className="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                              <svg className="w-3 h-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                               </svg>
                             )}
@@ -371,7 +371,7 @@ export function BittorChat({
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
               placeholder={placeholder}
-              className="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
               disabled={isLoading}
             />
             <button

app/components/ai/FloatingChat.tsx

@@ -103,7 +103,7 @@ export function FloatingChat({ className, chatClassName }: FloatingChatProps) {
             id="chatbot-button"
             src="/icons/chatbot.svg"
             alt="chat"
-            className="!w-9 !h-9"
+            className="w-9! h-9!"
           />
         </BrutalButton>
       </motion.div>

app/components/common/Badge.tsx

@@ -14,7 +14,7 @@ export const Badge = ({
   return (
     <div
       className={cn(
-        "mt-3 text-[11px] flex w-full items-center gap-2 rounded bg-status-success-overlay text-status-success pl-2 py-1",
+        "mt-3 text-[11px] flex w-full items-center gap-2 rounded-sm bg-status-success-overlay text-status-success pl-2 py-1",
         {
           hidden: mode === "hidden",
         }

app/components/common/Banner.tsx

@@ -108,7 +108,7 @@ const AnimatedBanner = ({
       <motion.div
         ref={ref}
         style={{ x }}
-        className=" text-black font-normal font-cabin flex items-center h-full  lg:text-4xl text-2xl md:text-3xl gap-10 whitespace-nowrap font-sans translate-x-[-100%]"
+        className=" text-black font-normal font-cabin flex items-center h-full  lg:text-4xl text-2xl md:text-3xl gap-10 whitespace-nowrap font-sans -translate-x-full"
       >
         {children}
       </motion.div>

app/components/common/BrutalButton.tsx

@@ -48,7 +48,7 @@ export const BrutalButton = ({
           "grid place-content-center",
           "block", // así podemos usar translate
           "text-lg font-semibold",
-          "rounded-xl border-[2px] border-black bg-brand-500",
+          "rounded-xl border-2 border-black bg-brand-500",
           "transition-all ",
           className,
           {

app/components/common/BrutalButtonClose.tsx

@@ -25,7 +25,7 @@ export const BrutalButtonClose = ({
       )}
       {...props}
     >
-      <span className="block group-hover:-translate-x-1 group-hover:-translate-y-1 bg-white rounded-full border border-black transition-all active:group-hover:translate-x-0 active:group-hover:translate-y-0">
+      <span className="block group-hover:-translate-x-1 group-hover:-translate-y-1 bg-white rounded-full border border-black transition-all group-hover:active:translate-x-0 group-hover:active:translate-y-0">
     {
       isLoading ? <Spinner /> : <IoIosClose />
     }

app/components/common/Button.tsx

@@ -48,7 +48,7 @@ export const Button = ({
             "w-full h-12": mode === "large",
             "px-4": mode === "default",
             "bg-brand-500 h-12 px-4": mode === "primary",
-            "opacity-50 cursor-not-allowed !bg-gray-400 border-gray-300 text-gray-500":
+            "opacity-50 cursor-not-allowed bg-gray-400! border-gray-300 text-gray-500":
               isDisabled,
             "cursor-pointer group-hover:-translate-x-1 group-hover:-translate-y-1":
               !isDisabled,

app/components/common/Copy.tsx

@@ -37,7 +37,7 @@ export const Copy = ({
       onClick={trigger}
       className={cn(
         "w-max h-max",
-        "hover:shadow",
+        "hover:shadow-sm",
         "transition-all",
         "p-1 rounded-lg border absolute right-2 top-6 bg-white",
         "active:scale-95 active:shadow-inner",

app/components/common/Footer.tsx

@@ -10,12 +10,12 @@ export const Footer = () => {
   const [hover, setHover] = useState(false);
   return (
     <section className="bg-black">
-      <div className="border-b-[1px] border-b-white/20 h-10 md:h-20 mx-4 md:mx-[5%] xl:mx-0">
-        <div className="h-full max-w-7xl border-x-[1px] border-x-white/20 mx-auto"></div>
+      <div className="border-b border-b-white/20 h-10 md:h-20 mx-4 md:mx-[5%] xl:mx-0">
+        <div className="h-full max-w-7xl border-x border-x-white/20 mx-auto"></div>
       </div>
-      <div className="border-y-[1px] border-y-white/20 h-20 md:h-40 w-full  ">
+      <div className="border-y border-y-white/20 h-20 md:h-40 w-full  ">
         <Link to="/login">
-          <div className="h-full max-w-7xl border-x-[1px] border-x-white/20 mx-auto px-4 md:px-[5%] xl:px-0">
+          <div className="h-full max-w-7xl border-x border-x-white/20 mx-auto px-4 md:px-[5%] xl:px-0">
             <motion.button
               initial={{ borderRadius: "0px" }}
               whileHover={{ borderRadius: "199px" }}
@@ -29,8 +29,8 @@ export const Footer = () => {
           </div>
         </Link>
       </div>
-      <div className="border-b-[1px] border-b-white/20 h-20 md:h-40 px-4 md:px-[5%] xl:px-0">
-        <div className="h-full max-w-7xl border-x-[1px] border-x-white/20 mx-auto flex">
+      <div className="border-b border-b-white/20 h-20 md:h-40 px-4 md:px-[5%] xl:px-0">
+        <div className="h-full max-w-7xl border-x border-x-white/20 mx-auto flex">
           <a
             href="https://calendly.com/brenda-formmy/easybits-demo"
             target="_blank"
@@ -43,7 +43,7 @@ export const Footer = () => {
               whileHover={{ borderRadius: "199px", borderColor: "white" }}
               whileTap={{ borderRadius: "199px", borderColor: "white" }}
               transition={{ type: "tween" }}
-              className="flex gap-4 items-center justify-center bg-transparent text-white border-[1px]  h-full  text-2xl font-light "
+              className="flex gap-4 items-center justify-center bg-transparent text-white border  h-full  text-2xl font-light "
             >
               {" "}
               <img src="/home/demo.svg" className="w-12 md:w-16" alt="demo" />
@@ -61,7 +61,7 @@ export const Footer = () => {
               whileHover={{ borderRadius: "199px", borderColor: "white" }}
               whileTap={{ borderRadius: "199px", borderColor: "white" }}
               transition={{ type: "tween" }}
-              className=" flex gap-4 items-center group justify-center bg-transparent text-white w-full border-[1px] border-white/20 h-full text-2xl font-light "
+              className=" flex gap-4 items-center group justify-center bg-transparent text-white w-full border border-white/20 h-full text-2xl font-light "
             >
               <img
                 src="/home/plans.svg"
@@ -78,11 +78,11 @@ export const Footer = () => {
           </Link>
         </div>
       </div>
-      <div className="border-b-[1px] border-b-white/20 h-10 md:h-20 px-4 md:px-[5%] xl:px-0">
-        <div className="h-full max-w-7xl border-x-[1px] border-x-white/20 mx-auto"></div>
+      <div className="border-b border-b-white/20 h-10 md:h-20 px-4 md:px-[5%] xl:px-0">
+        <div className="h-full max-w-7xl border-x border-x-white/20 mx-auto"></div>
       </div>
-      <div className="border-b-[1px] border-b-white/20 h-fit px-4 md:px-[5%] xl:px-0  ">
-        <div className="h-full max-w-7xl gap-y-10 md:gap-y-0 border-x-[1px] border-x-white/20 mx-aut py-12 md:py-20 px-4 mx-auto grid grid-cols-12">
+      <div className="border-b border-b-white/20 h-fit px-4 md:px-[5%] xl:px-0  ">
+        <div className="h-full max-w-7xl gap-y-10 md:gap-y-0 border-x border-x-white/20 mx-aut py-12 md:py-20 px-4 mx-auto grid grid-cols-12">
           <div className="col-span-12 md:col-span-6">
             <h2 className="flex flex-wrap items-center text-2xl md:text-3xl text-white">
               <span> Suscríbete&nbsp; </span>{" "}

app/components/common/Input.tsx

@@ -54,7 +54,7 @@ export const Input = ({
           defaultValue={defaultValue}
           className={cn(
             "rounded-xl p-4 text-lg h-12 w-full placeholder:text-tale placeholder:font-light  border border-black  bg-white text-black",
-            "focus:border-brand-500 focus:outline-none focus:ring-brand-500",
+            "focus:border-brand-500 focus:outline-hidden focus:ring-brand-500",
             {
               "pr-24": !!copy,
               "ring-2 ring-red-500 transition-all border-none": isError,

app/components/common/Modal.tsx

@@ -109,7 +109,7 @@ export const Modal = ({
       {isOpen ? (
         <article
           className={cn(
-            "z-[90] relative", // try to not go further than 30
+            "z-90 relative", // try to not go further than 30
             "grid place-content-center px-4 md:px-[5%] xl:px-0",
             "fixed overflow-hidden",
 

app/components/common/ModalProvider.tsx

@@ -113,7 +113,7 @@ export const ModalProvider = ({
       {isOpen ? (
         <article
           className={cn(
-            "z-[90] relative", // try to not go further than 30
+            "z-90 relative", // try to not go further than 30
             "grid place-content-center min-h-svh h-fit px-4",
             "fixed overflow-hidden",
             {

app/components/common/Tag.tsx

@@ -16,7 +16,7 @@ export const Tag = ({
         "capitalize",
         "h-8 rounded-full px-3 text-sm flex items-center text-white bg-black",
         {
-          "bg-white text-black border-[2px] border-black":
+          "bg-white text-black border-2 border-black":
             variant === "outline",
         },
         {

app/components/common/Tooltip.tsx

@@ -1,6 +1,6 @@
 export const Tooltip = ({ tooltip }: { tooltip: string }) => {
   return (
-    <div className="bg-black rounded pt-2 box-border pb-4 w-[118px] h-fit px-2 text-white tooltip absolute -left-12 flex items-center justify-center -top-14">
+    <div className="bg-black rounded-sm pt-2 box-border pb-4 w-[118px] h-fit px-2 text-white tooltip absolute -left-12 flex items-center justify-center -top-14">
       <span className="text-xs text-center"> {tooltip}</span>
     </div>
   );

app/components/experimental/CamStreamer.tsx

@@ -29,7 +29,7 @@ export const CamStreamer = () => {
       {" "}
       <button
         onClick={requestPermission}
-        className="py-3 px-8 rounded-full bg-fuchsia-500 text-white font-bold text-2xl my-8 enabled:hover:bg-fuchsia-600 enabled:active:bg-fuchsia-700 shadow"
+        className="py-3 px-8 rounded-full bg-fuchsia-500 text-white font-bold text-2xl my-8 enabled:hover:bg-fuchsia-600 enabled:active:bg-fuchsia-700 shadow-sm"
       >
         Comenzar transmisión en vivo
       </button>

app/components/forms/AIDescriptionGenerator.tsx

@@ -305,13 +305,13 @@ RESPUESTA INCORRECTA: "El curso tiene un precio de $99 USD y está disponible en
           {/* Removed Excel preview section */}
 
           {excelError && (
-            <div className="mt-2 text-xs text-red-600 bg-red-50 border border-red-200 rounded p-2">
+            <div className="mt-2 text-xs text-red-600 bg-red-50 border border-red-200 rounded-sm p-2">
               Error: {excelError}
             </div>
           )}
 
           {aiError && (
-            <div className="mt-2 text-xs text-red-600 bg-red-50 border border-red-200 rounded p-2">
+            <div className="mt-2 text-xs text-red-600 bg-red-50 border border-red-200 rounded-sm p-2">
               <strong>Error de IA:</strong> {aiError}
             </div>
           )}
@@ -380,7 +380,7 @@ RESPUESTA INCORRECTA: "El curso tiene un precio de $99 USD y está disponible en
               handleGenerateDescription();
             }
           }}
-          className="flex-1 rounded-lg text-black border border-black bg-white px-3 py-2 text-sm  focus:ring-1 focus:border-munsell focus:ring-munsell outline-none transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+          className="flex-1 rounded-lg text-black border border-black bg-white px-3 py-2 text-sm  focus:ring-1 focus:border-munsell focus:ring-munsell outline-hidden transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           placeholder="Escribe aquí tu prompt para la IA"
           aria-label="Prompt para IA"
         />

app/components/forms/FileInput.tsx

@@ -66,7 +66,7 @@ export const FileInput = ({
         ref={ref}
         type="button"
         className={cn(
-          "py-4 pl-12 border-iron border-[1px] my-6 border-dashed rounded-xl flex items-center justify-center gap-6",
+          "py-4 pl-12 border-iron border my-6 border-dashed rounded-xl flex items-center justify-center gap-6",
           "hover:scale-[0.95] active:scale-100",
           "transition-all w-full",
           buttonClassName

app/components/forms/FooterSubscription.tsx

@@ -20,7 +20,7 @@ export const FooterSuscription = ({
     <Form
       id={(asset.price || 0) === 0 ? "mobile-free-purchase-button" : "mobile-purchase-button"}
       onSubmit={onSubmit}
-      className={cn("border-t-[2px] border-black fixed bottom-0 bg-black w-full h-16 flex justify-between items-center","md:hidden")}
+      className={cn("border-t-2 border-black fixed bottom-0 bg-black w-full h-16 flex justify-between items-center","md:hidden")}
     >
       <p className="text-white font-bold whitespace-pre px-4">
         {getPriceString()}

app/components/forms/Input.tsx

@@ -12,7 +12,7 @@ export const Input = ({
   sufix,
   ...props
 }: {
-  onChange?: React.InputHTMLAttributes<HTMLInputElement>['onChange'];
+  onChange?: React.InputHTMLAttributes<HTMLInputElement>["onChange"];
   copyText?: string;
   type?: "number" | "text";
   error?: string;
@@ -38,7 +38,7 @@ export const Input = ({
           {...props}
           type={type}
           className={cn(
-            "border-1 rounded-xl border-black px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-all",
+            "border rounded-xl border-black px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-all",
             "h-12 w-full",
             {
               "w-28": type === "number",