From 1e34c9acb7666e070ab170f1a980b5ff47a1f8c1 Mon Sep 17 00:00:00 2001
From: sogav21 <sogav@hotmail.com>
Date: Mon, 11 May 2026 16:58:10 +0300
Subject: [PATCH] Update Available Courses to Tailwind UI

---
 .../Dashboard/AvailableCourses/index.jsx      |   6 +-
 .../CourseCard/CourseCard.module.css          | 158 ------------------
 .../src/views/Dashboard/CourseCard/index.jsx  |  71 +++++---
 3 files changed, 47 insertions(+), 188 deletions(-)
 delete mode 100644 frontend/src/views/Dashboard/CourseCard/CourseCard.module.css

diff --git a/frontend/src/views/Dashboard/AvailableCourses/index.jsx b/frontend/src/views/Dashboard/AvailableCourses/index.jsx
index 636fea2..f883881 100644
--- a/frontend/src/views/Dashboard/AvailableCourses/index.jsx
+++ b/frontend/src/views/Dashboard/AvailableCourses/index.jsx
@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import axios from 'axios';
 import { useSelector, useDispatch } from 'react-redux';
-//styles
-import Styles from './../Grid.module.css';
 //actions
 import { logOut } from './../../../redux/actions/auth';
 //components
@@ -31,10 +29,10 @@ const AvailableCourses = () => {
     return (
         <>
             <Outlet />
-            <div className={Styles[`main`]}>
+            <div className="grid w-full grid-cols-1 gap-6 pb-6 pt-[30px] md:grid-cols-2 md:pb-2.5 md:pt-[45px] xl:grid-cols-3">
                 {listCourses.map((course) => {
                     return (
-                        <div key={course.id} className={Styles[`course`]}>
+                        <div key={course.id} className="min-w-0">
                             <CourseCard
                                 data={course}
                                 text="Aplica"
diff --git a/frontend/src/views/Dashboard/CourseCard/CourseCard.module.css b/frontend/src/views/Dashboard/CourseCard/CourseCard.module.css
deleted file mode 100644
index 09b3f38..0000000
--- a/frontend/src/views/Dashboard/CourseCard/CourseCard.module.css
+++ /dev/null
@@ -1,158 +0,0 @@
-.details {
-    width: calc(100% - 34px);
-    background-color: #f5f9fb;
-    border: 1px solid #d1e0e7;
-    border-bottom: 0px;
-    border-radius: 4px 4px 0px 0px;
-    padding: 24px 16px;
-}
-.bookings-0 {
-    width: calc(100% - 22px);
-    background-color: #ebf3f7;
-    border: 1px solid #d1e0e7;
-    border-top: 0px;
-    border-radius: 0px 0px 4px 4px;
-    padding: 10px;
-}
-.bookings-1 {
-    width: calc(100% - 22px);
-    background-color: #fee6da;
-    border: 1px solid #d1e0e7;
-    color: #d83341;
-    border-top: 0px;
-    border-radius: 0px 0px 4px 4px;
-    padding: 7px 10px;
-    display: flex;
-    align-items: center;
-}
-.title {
-    color: #0d1e38;
-    font-family: 'Rubik-Bold', serif;
-    font-size: 20px;
-}
-.title2 {
-    color: #0d1e38;
-    font-family: 'Rubik-Regular', serif;
-    font-size: 20px;
-    margin-bottom: 12px;
-}
-.items {
-    display: flex;
-    margin-bottom: 24px;
-}
-.items p {
-    background-color: #cadbe3;
-    margin-right: 4px;
-    border-radius: 100px;
-    padding: 6px 12px;
-    color: #335065;
-    font-family: 'SourceSansPro-Regular', serif;
-    font-size: 14px;
-}
-.texts {
-    display: flex;
-    flex-direction: column;
-    row-gap: 8px;
-    height: 90px;
-}
-.text {
-    color: #335065;
-    font-family: 'SourceSansPro-Regular', serif;
-    font-size: 14px;
-}
-.text strong {
-    font-family: 'SourceSansPro-Bold', serif;
-}
-.text2 {
-    font-family: 'SourceSansPro-Bold', serif;
-    font-size: 14px;
-}
-.icon-alert {
-    width: 20px;
-    height: 20px;
-    margin-right: 10px;
-    margin-top: 4px;
-}
-.buttons {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-}
-.button-details {
-    margin-top: 16px;
-    border-radius: 4px;
-    border: 1px solid #6254ff;
-    color: #ffffff;
-    padding: 12px 24px;
-    background-color: #6254ff;
-    margin-left: 12px;
-    font-family: 'SourceSansPro-SemiBold', serif;
-    font-size: 18px;
-}
-.button-details:disabled {
-    margin-top: 16px;
-    border-radius: 4px;
-    border: 1px solid #9f98ee;
-    color: #ffffff;
-    padding: 12px 24px;
-    background-color: #9f98ee;
-    margin-left: 12px;
-    font-family: 'SourceSansPro-SemiBold', serif;
-    font-size: 18px;
-}
-.button-details:enabled:hover {
-    cursor: pointer;
-}
-.button-details2 {
-    margin-top: 16px;
-    border-radius: 4px;
-    border: 1px solid #6254ff;
-    color: #6254ff;
-    padding: 12px 24px;
-    background-color: #00000000;
-    margin-left: 12px;
-    font-family: 'SourceSansPro-SemiBold', serif;
-    font-size: 18px;
-}
-.button-details2:hover {
-    cursor: pointer;
-}
-@media only screen and (max-width: 1440px) and (min-width: 1281px) {
-    .texts {
-        display: flex;
-        flex-direction: column;
-        row-gap: 8px;
-        height: 90px;
-    }
-    .title {
-        font-size: 19px;
-    }
-    .title2 {
-        font-size: 19px;
-    }
-}
-@media only screen and (max-width: 1280px) and (min-width: 801px) {
-    .texts {
-        display: flex;
-        flex-direction: column;
-        row-gap: 8px;
-        height: 100px;
-    }
-    .title {
-        font-size: 18.4px;
-    }
-    .title2 {
-        font-size: 18.4px;
-    }
-    .details {
-        width: calc(100% - 30px);
-        background-color: #f5f9fb;
-        border: 1px solid #d1e0e7;
-        border-bottom: 0px;
-        border-radius: 4px 4px 0px 0px;
-        padding: 24px 14px;
-    }
-}
-@media only screen and (max-width: 800px) {
-}
diff --git a/frontend/src/views/Dashboard/CourseCard/index.jsx b/frontend/src/views/Dashboard/CourseCard/index.jsx
index a916c51..5fc6e3a 100644
--- a/frontend/src/views/Dashboard/CourseCard/index.jsx
+++ b/frontend/src/views/Dashboard/CourseCard/index.jsx
@@ -1,39 +1,55 @@
 import React from 'react';
-//styles
-import Styles from './CourseCard.module.css';
 import { useNavigate } from 'react-router-dom';
 //icons
 import { TbAlertTriangle } from 'react-icons/tb';
 
 const CourseCard = ({ data, text, url, text2, url2, subscribed = true }) => {
     const navigate = useNavigate();
+    const bookingClassName = data.extra_alert
+        ? 'border-[#d1e0e7] bg-[#fee6da] py-[7px] text-[#d83341]'
+        : 'border-[#d1e0e7] bg-[#ebf3f7] py-2.5 text-[#335065]';
+
     return (
-        <>
-            <div className={Styles[`details`]}>
-                <p className={Styles[`title`]}>{data.title}</p>
-                <p className={Styles[`title`]}>{data.title_second}</p>
-                <p className={Styles[`title2`]}>{data.title_extra}</p>
-                <div className={Styles[`items`]}>
-                    <p>{data.type}</p>
-                    <p>{data.duration}</p>
-                    <p>Nivel {data.level}</p>
+        <article className="flex h-full flex-col">
+            <div className="flex flex-1 flex-col rounded-t border border-b-0 border-[#d1e0e7] bg-[#f5f9fb] px-4 py-6 md:px-3.5 xl:px-4">
+                <p className="font-['Rubik-Bold'] text-lg text-[#0d1e38] min-[1281px]:text-[19px] min-[1441px]:text-xl">
+                    {data.title}
+                </p>
+                <p className="font-['Rubik-Bold'] text-lg text-[#0d1e38] min-[1281px]:text-[19px] min-[1441px]:text-xl">
+                    {data.title_second}
+                </p>
+                <p className="mb-3 font-['Rubik-Regular'] text-lg text-[#0d1e38] min-[1281px]:text-[19px] min-[1441px]:text-xl">
+                    {data.title_extra}
+                </p>
+                <div className="mb-6 flex flex-wrap gap-1">
+                    <p className="rounded-full bg-[#cadbe3] px-3 py-1.5 font-['SourceSansPro-Regular'] text-sm text-[#335065]">
+                        {data.type}
+                    </p>
+                    <p className="rounded-full bg-[#cadbe3] px-3 py-1.5 font-['SourceSansPro-Regular'] text-sm text-[#335065]">
+                        {data.duration}
+                    </p>
+                    <p className="rounded-full bg-[#cadbe3] px-3 py-1.5 font-['SourceSansPro-Regular'] text-sm text-[#335065]">
+                        Nivel {data.level}
+                    </p>
                 </div>
-                <div className={Styles[`texts`]}>
-                    <p className={Styles[`text`]}>
-                        <strong>Dominarás:</strong> {data.technologies}
+                <div className="flex min-h-[90px] flex-col gap-2 md:min-h-[100px] min-[1281px]:min-h-[90px]">
+                    <p className="font-['SourceSansPro-Regular'] text-sm text-[#335065]">
+                        <strong className="font-['SourceSansPro-Bold']">Dominarás:</strong>{' '}
+                        {data.technologies}
                     </p>
-                    <p className={Styles[`text`]}>
-                        <strong>Precio:</strong> {data.price}
+                    <p className="font-['SourceSansPro-Regular'] text-sm text-[#335065]">
+                        <strong className="font-['SourceSansPro-Bold']">Precio:</strong> {data.price}
                     </p>
-                    <p className={Styles[`text`]}>
-                        <strong>Inicia:</strong> Al llegar a {data.minimum} aplicaciones daremos
-                        fecha.
+                    <p className="font-['SourceSansPro-Regular'] text-sm text-[#335065]">
+                        <strong className="font-['SourceSansPro-Bold']">Inicia:</strong> Al llegar a{' '}
+                        {data.minimum} aplicaciones daremos fecha.
                     </p>
                 </div>
-                <div className={Styles[`buttons`]}>
+                <div className="mt-4 flex w-full flex-wrap justify-end gap-3">
                     {text2 && url2 && (
                         <button
-                            className={Styles[`button-details2`]}
+                            type="button"
+                            className="rounded border border-[#6254ff] bg-transparent px-6 py-3 font-['SourceSansPro-SemiBold'] text-lg text-[#6254ff] transition-colors hover:bg-[#f0efff]"
                             onClick={() => navigate(url2)}
                         >
                             {text2}
@@ -41,7 +57,8 @@ const CourseCard = ({ data, text, url, text2, url2, subscribed = true }) => {
                     )}
                     {text && url && (
                         <button
-                            className={Styles[`button-details`]}
+                            type="button"
+                            className="rounded border border-[#6254ff] bg-[#6254ff] px-6 py-3 font-['SourceSansPro-SemiBold'] text-lg text-white transition-colors hover:bg-[#5144e5] disabled:border-[#9f98ee] disabled:bg-[#9f98ee] disabled:hover:bg-[#9f98ee]"
                             onClick={() => navigate(url)}
                             disabled={!subscribed}
                         >
@@ -50,13 +67,15 @@ const CourseCard = ({ data, text, url, text2, url2, subscribed = true }) => {
                     )}
                 </div>
             </div>
-            <div className={Styles[`bookings-${data.extra_alert ? '1' : '0'}`]}>
-                {data.extra_alert && <TbAlertTriangle className={Styles[`icon-alert`]} />}
-                <p className={Styles[`text2`]}>{`${
+            <div
+                className={`flex items-center rounded-b border border-t-0 px-2.5 ${bookingClassName}`}
+            >
+                {data.extra_alert && <TbAlertTriangle className="mr-2.5 mt-1 h-5 w-5 shrink-0" />}
+                <p className="font-['SourceSansPro-Bold'] text-sm">{`${
                     data.extra_alert ? '¡Aplica ahora! ' : ''
                 }Reservas confirmadas: ${data.bookings}`}</p>
             </div>
-        </>
+        </article>
     );
 };