add first card

taskncoffee-app/src/App.jsx

@@ -5,7 +5,7 @@ import { AuthLayout } from './layouts/AuthLayout'
 import { Routes, Route, Navigate } from 'react-router'
 import Dashboard from './pages/Dashboard'
 import RootRedirect from './pages/RootRedirect'
-
+import CardComponent from './components/Card'
 
 function App() {
 
@@ -23,6 +23,9 @@ function App() {
       <Route path="/dashboard" element={
         <Dashboard />
       } />
+      <Route path="/card" element={
+        <CardComponent />
+      } />
       <Route path="*" element={<Navigate to="/auth/login" replace />} />
     </Routes>
   )

taskncoffee-app/src/components/Calendar.jsx

@@ -63,7 +63,7 @@ export default function Calendar() {
 
 
     const daysOfWeek = [
-        'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
+        'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
     ].map((name, index) => {
         const date = new Date(currentDate);
         date.setDate(currentDate.getDate() + index);

taskncoffee-app/src/components/Card.jsx

@@ -0,0 +1,18 @@
+import styles from '@/lib/styles'
+import { cn } from '@/lib/utils'
+
+export default function CardComponent() {
+    return (
+        <div className={cn(styles.card.filled, "flex flex-col gap-2 min-sm:w-1/3 p-4 h-fit")}>
+            <h1 className={styles.text.h1}>Card</h1>
+            <div className="flex items-center gap-2">
+                <span className={styles.badge.low}>Low</span>
+                <span className={styles.badge.medium}>Medium</span>
+                <span className={styles.badge.high}>High</span>
+                <span className={styles.badge.critical}>Critical</span>
+            </div>
+            <p className={styles.text.smallMuted}>Card description</p>
+            <button className={cn(styles.button.primaryNeon, "w-1/4")}><span className={styles.text.neonBlue}>Complete</span></button>
+        </div>
+    )
+}