From 058a10fdc944e8d2eb25d88f3459b86b21fc3811 Mon Sep 17 00:00:00 2001
From: mi1468 <mahdi1468@gmail.com>
Date: Sun, 11 May 2025 13:59:22 +0330
Subject: [PATCH] added header component and redesign index dashboard

---
 xroom-dashboard/src/assets/img/exitIcon.png   | Bin 0 -> 455 bytes
 xroom-dashboard/src/assets/img/shopIcon.png   | Bin 0 -> 307 bytes
 xroom-dashboard/src/components/Header.vue     | 464 +++++++++--
 xroom-dashboard/src/pages/dashboard/index.vue | 761 ++++++------------
 4 files changed, 636 insertions(+), 589 deletions(-)
 create mode 100644 xroom-dashboard/src/assets/img/exitIcon.png
 create mode 100644 xroom-dashboard/src/assets/img/shopIcon.png

diff --git a/xroom-dashboard/src/assets/img/exitIcon.png b/xroom-dashboard/src/assets/img/exitIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f89191e5640dc943a282a19af5584ff5f1b6d8bc
GIT binary patch
literal 455
zcmV;&0XY7NP)<h;3K|Lk000e1NJLTq000yK000#T1^@s6M%B)!00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0bEH$K~#7F?UTVx
z!!Q(vpQ99|rAT1{GD6s(OaLSFkW@XU6A&h7dTo3t8?XWG1Z0E41Vo}$BN5xYSCOhM
zvB`lO{Uygv{Oi-R-yeW~Csr+1Vdz@`V+G)8yt&0#(w<Hq;WyxWzwe&4T1#BM;>a{!
zpN3TG=7RIN4rp&5woPUiD~#G{x~Ma5hC@#Zv1CeJfk77hu^I!5qR4T|6k~7nz6yfq
zBM9PSpA8LlIhzsi`k)%d?hy)jr*R`7bzUju*6m>$GCbb=7;2kf7=ahYn9f4bU8U%M
z>ZWO?1=8jw40~XZ1Q_9T3rfXZ&NE|$Bwd6^>%kyK&=z*i`9t-+aZ|p-|BS&NQLvSi
z^yfq!&L{i6#z4n$Tnx5f1sji;)cFo_C^a1=2_dw5KPoKCGQ;EK%(9Yo7~a(xvDY4T
x^;3w23AoDyW~qmFGRCEAFejZfoxn-^`U2*}gLuNTIv4-|002ovPDHLkV1l~ay#4?H

literal 0
HcmV?d00001

diff --git a/xroom-dashboard/src/assets/img/shopIcon.png b/xroom-dashboard/src/assets/img/shopIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c52edcc8133de8e1bea8ed1b3388f3c7661809c2
GIT binary patch
literal 307
zcmeAS@N?(olHy`uVBq!ia0vp^LO?9c!3HGfPKx~mq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{Tf&3GmE{-7;jBBSf@*YwUaJA=U-qG0efaC6g
zyalsgu=QOKeZ^wMbhkn94NJxH88IAJE`1W>dKnvMxj^InUd9WLx<kDp*EG7M>mP`!
zaJ%AnMK0Q9mRI2w>!K}A_X5kK*B#t^lEo`6ZH25t+QsS9#HO{rELEyFSmg79eJ)2_
z;JF(K)-~T^L<Q}$I@+QZZEQQy#>}gF|I)ShfyZ1HiSs{tJKye`z!^vRJE@<4{1=+;
zV6N=>?4+qx+A+hEHk!NAj~V{|yyIK^-{K{o?zyWr=YC$=w*u%V22WQ%mvv4FO#rQL
BcyIs!

literal 0
HcmV?d00001

diff --git a/xroom-dashboard/src/components/Header.vue b/xroom-dashboard/src/components/Header.vue
index b714b96..1b795df 100644
--- a/xroom-dashboard/src/components/Header.vue
+++ b/xroom-dashboard/src/components/Header.vue
@@ -1,96 +1,384 @@
 <template>
-    <header class="header-container">
-      <img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
-      <p class="welcome-message">از این داشبورد، کار با XRoom را آغاز کنید.</p>
-      <div class="user-info-container">
-        <div class="user-name-container">
-          <img class="user-icon" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
-          <div class="user-name">{{ fullName }}</div>
-        </div>
+  <header class="header-container">
+    <img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
+    <div class="welcome-container">
+      <p class="welcome-message">{{ pageTitle }} </p>
+    </div>
+    <div class="user-info-container"  @click.stop="toggleDropdown">
+      <div class="user-name-container" ref="userContainer">
         <div class="avatar-wrapper">
-          <img class="user-avatar" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
+          <img class="user-avatar" :src="profileIcon"   />
         </div>
-      </div>
-    </header>
-  </template>
-  
-  <script>
-  export default {
-    name: 'AppHeader',
-    computed: {
-      fullName() {
-        // Get user data from localStorage
-        const user = JSON.parse(localStorage.getItem('user') || '{}');
+        <div class="user-name">{{ fullName }}</div>
+        <img class="user-icon"  src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg"   />
         
-        // Return formatted name or default if not available
-        if (user.first_name && user.last_name) {
-          return `${user.first_name} ${user.last_name}`;
-        }
-        return 'کاربر مهمان';
+        <!-- Dropdown positioned relative to user-info-container -->
+        <div v-if="showDropdown" class="dropdown-menu">
+          <router-link to="/dashboard/team" class="dropdown-item">
+  <span class="dropdown-label">نام تیم</span>
+  <span class="team-name">Dadechin</span>
+  <img src="https://cdn-icons-png.flaticon.com/512/1077/1077063.png" class="dropdown-icon" alt="team" />
+</router-link>
+
+<router-link to="/dashboard/edit-profile" class="dropdown-item">
+  <span class="dropdown-label">حساب کاربری</span>
+  <img src="https://cdn-icons-png.flaticon.com/512/3524/3524637.png" class="dropdown-icon" alt="account" />
+</router-link>
+
+  <div class="dropdown-item logout" @click="logout">
+    <span class="dropdown-label">خروج</span>
+    <img :src="require('@/assets/img/exitIcon.png')" alt="logout" class="dropdown-icon" />
+  </div>
+</div>
+      </div>
+    </div>
+
+    <button class="green-button">
+      <img :src="require('@/assets/img/shopIcon.png')" alt="Icon" class="button-icon" />
+      <span>خرید اشتراک </span>
+    </button>
+  </header>
+</template>
+
+
+<script>
+export default {
+  name: 'AppHeader',
+  props: {
+    pageTitle: {
+      type: String,
+      default: 'از این داشبورد، کار با XRoom را آغاز کنید.'
+    }
+  },
+  data() {
+    return {
+      showDropdown: false
+    }
+  },
+  computed: {
+    fullName() {
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      if (user.first_name && user.last_name) {
+        return `${user.first_name} ${user.last_name}`;
+      }
+      return 'کاربر مهمان';
+    },
+    
+    profileIcon() {
+      const customer = JSON.parse(localStorage.getItem('customer') || '{}');
+      if (customer.profile_img  ) {
+        return `${customer.profile_img}`;
+      }
+      
+      return 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg';
+    }
+  },
+  methods: {
+    toggleDropdown() {
+      console.log("Dropdown toggled"); // This should now appear in console
+      this.showDropdown = !this.showDropdown;
+    },
+    logout() {
+      localStorage.removeItem('user');
+      localStorage.removeItem('token');
+      window.location.href = '/login';
+    },
+    closeDropdown(event) {
+      if (!this.$el.contains(event.target)) {
+        this.showDropdown = false;
       }
     }
+  },
+  mounted() {
+    console.log("Component mounted"); // Check if this appears
+    document.addEventListener('click', this.closeDropdown);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.closeDropdown);
   }
-  </script>
+}
+</script>
+<style scoped>
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #eaeaea;
+  position: relative;
+}
+
+/* New green button styles */
+.green-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: #48BB78; /* Green color */
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.green-button:hover {
+  background-color: #3e8e41; /* Darker green on hover */
+}
+
+.button-icon {
+  width: 16px;
+  height: 16px;
+  filter: brightness(0) invert(1); /* Make icon white */
+}
+
+.welcome-container {
+  flex: 1;
+  text-align: right;
+  padding-right: 20px;
+}
+
+.welcome-message {
+  font-size: 14px;
+  color: #666666;
+  margin: 0;
+}
+
+.user-info-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-left: 25px;
+}
+
+.user-name-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-icon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333333;
+}
+
+.avatar-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  position: relative;
+  cursor: pointer;
+}
+
+.user-avatar {
+  width: 100%;
   
-  <style scoped>
-  .header-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px;
-    background-color: #ffffff;
-    border-bottom: 1px solid #eaeaea;
-  }
-  
-  .welcome-message {
-    font-size: 14px;
-    color: #666666;
-    margin: 0 15px;
-  }
-  
-  .user-info-container {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-  
-  .user-name-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .user-icon {
-    width: 16px;
-    height: 16px;
-  }
-  
-  .user-name {
-    font-size: 14px;
-    font-weight: 500;
-    color: #333333;
-  }
-  
-  .avatar-wrapper {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #f5f5f5;
-  }
-  
-  .user-avatar {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .line {
-    height: 40px;
-    width: 1px;
-    background-color: #eaeaea;
-  }
-  </style>
\ No newline at end of file
+  height: 55px;
+  object-fit: cover;
+}
+
+.line {
+  height: 40px;
+  width: 1px;
+  background-color: #eaeaea;
+}
+
+.dropdown-menu {
+  /* position: absolute; */
+  top: 50px;
+  right: 0;
+  background-color: white;
+  border: 1px solid #eaeaea;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  min-width: 150px;
+  overflow: hidden;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
+
+.logout-icon {
+  width: 16px;
+  height: 16px;
+}
+
+
+.user-info-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-left: 25px;
+  position: relative; /* Add this for dropdown positioning */
+}
+
+.user-name-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative; /* Important for dropdown positioning */
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%; /* Position below the user info */
+  right: 0;
+  background-color: white;
+  border: 1px solid #eaeaea;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000; /* Higher z-index to ensure it's above other elements */
+  min-width: 150px;
+  margin-top: 5px; /* Small gap from the user info */
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
+
+.logout-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Ensure header has proper z-index */
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #eaeaea;
+  position: relative;
+  z-index: 100; /* Lower than dropdown but higher than page content */
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: white;
+  border: 1px solid #eaeaea;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 200px;
+  padding: 10px 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
+
+.dropdown-label {
+  font-size: 14px;
+  color: #333;
+}
+
+.team-name {
+  font-size: 14px;
+  color: #3b82f6; /* Tailwind blue-500 */
+  text-decoration: none;
+  margin-left: 8px;
+}
+
+.dropdown-icon {
+  width: 18px;
+  height: 18px;
+  margin-left: 8px;
+}
+
+.logout {
+  color: #f56565; /* Tailwind red-500 */
+}
+
+.logout .dropdown-label {
+  color: #f56565;
+}
+
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/index.vue b/xroom-dashboard/src/pages/dashboard/index.vue
index 1e101ec..8d623e4 100644
--- a/xroom-dashboard/src/pages/dashboard/index.vue
+++ b/xroom-dashboard/src/pages/dashboard/index.vue
@@ -1,577 +1,336 @@
-<!-- DashboardPage.vue -->
 <template>
-    <SidebarMenu />
+  <SidebarMenu />
+  <div class="dashboard-page">
+    <div class="content">
+      <!-- <AppHeader /> -->
+      <AppHeader pageTitle="از این داشبورد، کار با XRoom را آغاز کنید." />
 
-<div class="dashboard-page">
-  <div class="content">
-
-
-
-    <AppHeader />
+      <div class="dashboard-grid">
+        
+        <!-- Right Section -->
+        <div class="right-section">
+          <h2 class="section-title">راهنمای شروع</h2>
+          <div class="tutorial-grid">
+            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
+            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
+            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
+            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
+          </div>
+        </div>
+        
+        <!-- Left Section -->
+        <div class="left-section">
+          <h2 class="section-title">جلسات</h2>
+          <p class="section-description">
+            فقط یک ایده با جلسه شگفت‌انگیز بعدی‌تان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
+          </p>
+          
+          <button class="create-meeting-btn">
+            <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
+            <span>ایجاد جلسه جدید</span>
+          </button>
 
+          
+        </div>
+        
+        <!-- Meetings Section -->
+        <div class="meetings-section">
+          <div class="files-header">
+            <h1 style="    font-size: 24px;">آخرین فایل ها</h1>
+            <div class="file-buttons">
+              <button class="white-button">بارگذاری فایل</button>
+              <button class="white-button">مدیریت فایل‌ها</button>
+            </div>
+          </div>
+          
+          <div class="meetings-scroll">
+            <div class="meeting-cards">
+              <div class="meeting-card">
+                <div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png)"></div>
+                <div class="card-content">
+                  <h3>Pico Control</h3>
+                  <div class="meeting-date">
+                    <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
+                    <span>24 تیر 1403</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="meeting-card">
+                <div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png)"></div>
+                <div class="card-content">
+                  <h3>Fakor Sanat Tehran</h3>
+                  <div class="meeting-date">
+                    <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
+                    <span>24 تیر 1403</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="meeting-card">
+                <div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png)"></div>
+                <div class="card-content">
+                  <h3>Design Artist</h3>
+                  <div class="meeting-date">
+                    <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
+                    <span>24 تیر 1403</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="meeting-card">
+                <div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png)"></div>
+                <div class="card-content">
+                  <h3>Flash Back</h3>
+                  <div class="meeting-date">
+                    <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
+                    <span>24 تیر 1403</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     
     
-
-
-
-
-    <div class="group-2">
-      <div class="text-wrapper-6">راهنمای شروع</div>
-      <img class="tutorials" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
-      <img class="frame-6" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
-      <img class="frame-7" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
-      <img class="frame-8" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
-    </div>
-    <p class="text-wrapper-7">
-      فقط یک ایده با جلسه شگفت‌انگیز بعدی‌تان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
-    </p>
-    <div class="text-wrapper-8">جلسات</div>
-    <div class="group-3">
-      <div class="text-wrapper-9">آخرین فایل‌ها</div>
-      <div class="frame-9">
-        <img class="BTN-2" src="https://c.animaapp.com/m9nvumalUMfQbN/img/btn-1.svg" />
-        <img class="BTN-2" src="https://c.animaapp.com/m9nvumalUMfQbN/img/btn.svg" />
-      </div>
-      <div class="frame-10">
-        <div class="card">
-          <div class="frame-11"></div>
-          <div class="frame-12">
-            <div class="text-wrapper-10">Pico Control</div>
-            <div class="history">
-              <img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
-              <div class="text-wrapper-11">24 تیر 1403</div>
-            </div>
-          </div>
-        </div>
-        <div class="frame-14">
-          <div class="frame-15"></div>
-          <div class="frame-12">
-            <div class="text-wrapper-10">Fakor Sanat Tehran</div>
-            <div class="history">
-              <img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
-              <div class="text-wrapper-11">24 تیر 1403</div>
-            </div>
-          </div>
-        </div>
-        <div class="frame-16">
-          <div class="frame-17"></div>
-          <div class="frame-12">
-            <div class="text-wrapper-10">Design Artist</div>
-            <div class="history">
-              <img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
-              <div class="text-wrapper-11">24 تیر 1403</div>
-            </div>
-          </div>
-        </div>
-        <div class="frame-18">
-          <div class="frame-19"></div>
-          <div class="frame-12">
-            <div class="text-wrapper-10">Flash Back</div>
-            <div class="history">
-              <img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
-              <div class="text-wrapper-11">24 تیر 1403</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="BTN-icon">
-      <img class="frame-20" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
-      <div class="text-wrapper-12">ایجاد جلسه جدید</div>
-    </div>
-    <div class="buy-a-subscription">
-      <img class="frame-21" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-6.svg" />
-      <div class="text-wrapper-12">خرید اشتراک</div>
-    </div>
   </div>
-  <div class="footer">
-    <div class="text-wrapper-13">All Rights Reserved ©Dadechin</div>
-    <div class="logo">
-      <div class="clip-path-group-wrapper">
-        <img class="clip-path-group" src="https://c.animaapp.com/m9nvumalUMfQbN/img/clip-path-group.png" />
-      </div>
-    </div>
-  </div>
-</div>
 </template>
 
 <script>
-
 import SidebarMenu from '@/components/SidebarMenu.vue'
 import AppHeader from '@/components/Header.vue';
 
-
 export default {
-name: 'DashboardPage',
-components: {
-  SidebarMenu,
-  AppHeader,
- }
-
+  name: 'DashboardPage',
+  components: {
+    SidebarMenu,
+    AppHeader,
+  }
 }
 </script>
 
 <style scoped>
 .dashboard-page {
-margin-right: 360px;
-padding: 20px;
-direction: rtl;
+  margin-right: 360px;
+  padding: 20px;
+  direction: rtl;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .content {
-width: 100%;
-height: 860px;
-background-color: #f8f9fa;
-border-radius: 20px;
-overflow: hidden;
-padding: 35px 80px;
-position: relative;
+  flex: 1;
+  background-color: #f8f9fa;
+  border-radius: 20px;
+  padding: 35px 80px;
+  display: flex;
+  flex-direction: column;
 }
 
-.line {
-position: absolute;
-width: calc(100% - 160px);
-height: 1px;
-top: 90px;
-right: 80px;
-object-fit: cover;
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  margin-top: 80px;
 }
 
-.p {
-position: absolute;
-height: 22px;
-top: 35px;
-right: 80px;
-font-family: "IRANSansXFaNum-Medium", Helvetica;
-font-weight: 500;
-color: #101010;
-font-size: 16px;
-letter-spacing: 0;
-line-height: 22.4px;
-white-space: nowrap;
+.left-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.frame-3 {
-display: inline-flex;
-height: 42px;
-align-items: center;
-gap: 8px;
-position: absolute;
-top: 35px;
-right: 605px;
+.right-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.frame-4 {
-display: inline-flex;
-align-items: center;
-gap: 4px;
-position: relative;
-flex: 0 0 auto;
+.section-title {
+  font-family: "IRANSansXFaNum-DemiBold", Helvetica;
+  font-weight: 700;
+  color: #101010;
+  font-size: 19px;
+  line-height: 26.6px;
+  margin: 0;
 }
 
-.text-wrapper-5 {
-position: relative;
-width: fit-content;
-font-family: "IRANSansXFaNum-Medium", Helvetica;
-font-weight: 500;
-color: #101010;
-font-size: 16px;
-text-align: right;
-line-height: 22.4px;
-white-space: nowrap;
-letter-spacing: 0;
+.section-description {
+  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  font-weight: 500;
+  color: #4f5a69;
+  font-size: 14px;
+  line-height: 26.6px;
+  margin: 0;
 }
 
-.frame-wrapper {
-position: relative;
-width: 42px;
-height: 42px;
-background-color: white;
-border-radius: 8px;
-overflow: hidden;
-border: 1px solid #e2dee9;
+.tutorial-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+ 
 }
 
-.frame-5 {
-position: absolute;
-width: 20px;
-height: 20px;
-top: 11px;
-right: 11px;
+.tutorial-item {
+  width: 300px;
+  height: auto;
+  border-radius: 8px;
+  margin: auto;
 }
 
-.group-2 {
-position: absolute;
-width: 522px;
-height: 270px;
-top: 112px;
-right: 80px;
+.create-meeting-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 24px;
+  border-radius: 8px;
+  background-color: #3a57e8;
+  color: white;
+  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  font-weight: 500;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  width: fit-content;
 }
 
-.text-wrapper-6 {
-position: absolute;
-height: 27px;
-top: 0;
-right: 0px;
-font-family: "IRANSansXFaNum-DemiBold", Helvetica;
-font-weight: 700;
-color: #101010;
-font-size: 19px;
-line-height: 26.6px;
-white-space: nowrap;
-letter-spacing: 0;
+.create-meeting-btn img {
+  width: 16px;
+  height: 16px;
 }
 
-.tutorials {
-position: absolute;
-width: 250px;
-height: 94px;
-top: 54px;
-right: 270px;
+.meetings-section {
+  grid-column: 1 / -1;
+  margin-top: 40px;
 }
 
-.frame-6 {
-position: absolute;
-width: 250px;
-height: 94px;
-top: 176px;
-right: 270px;
+.meeting-controls {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
 }
 
-.frame-7 {
-position: absolute;
-width: 250px;
-height: 94px;
-top: 54px;
-right: 0;
+.meeting-btn {
+  width: 130px;
+  cursor: pointer;
 }
 
-.frame-8 {
-position: absolute;
-width: 250px;
-height: 94px;
-top: 176px;
-right: 0;
+.meetings-scroll {
+  width: 100%;
+  overflow-x: auto;
+  padding-bottom: 20px;
 }
 
-.text-wrapper-7 {
-position: absolute;
-width: 292px;
-top: 148px;
-right: 687px;
-font-family: "IRANSansXFaNum-Medium", Helvetica;
-font-weight: 500;
-color: #4f5a69;
-font-size: 14px;
-line-height: 26.6px;
-letter-spacing: 0;
-text-align: right;
+.meetings-scroll::-webkit-scrollbar {
+  display: none;
 }
 
-.text-wrapper-8 {
-position: absolute;
-height: 27px;
-top: 112px;
-right: 689px;
-font-family: "IRANSansXFaNum-DemiBold", Helvetica;
-font-weight: 700;
-color: #101010;
-font-size: 19px;
-line-height: 26.6px;
-white-space: nowrap;
-letter-spacing: 0;
+.meeting-cards {
+  display: flex;
+  gap: 20px;
+  width: max-content;
 }
 
-.group-3 {
-position: absolute;
-width: calc(100% - 160px);
-height: 341px;
-top: 40px;
-right: 80px;
+.meeting-card {
+  width: 250px;
+  background-color: white;
+  border-radius: 16px;
+  border: 0.5px solid #b8c0cb;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
-.text-wrapper-9 {
-position: absolute;
-width: 116px;
-height: 29px;
-top: 4px;
-right: 784px;
-font-family: "IRANSansXFaNum-DemiBold", Helvetica;
-font-weight: 700;
-color: #101010;
-font-size: 19px;
-line-height: 26.6px;
-white-space: nowrap;
-letter-spacing: 0;
+.card-image {
+  width: 100%;
+  height: 172px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 14px;
 }
 
-.frame-9 {
-display: flex;
-width: 292px;
-align-items: center;
-justify-content: space-between;
-position: absolute;
-top: 450px;
-right: 600px;
+.card-content {
+  padding: 8px 16px 16px;
 }
 
-.BTN-2 {
-position: relative;
-width: 130px;
-cursor: pointer;
+.card-content h3 {
+  font-family: "IRANSansXFaNum-DemiBold", Helvetica;
+  font-weight: 700;
+  color: #444d5a;
+  font-size: 15px;
+  margin: 0 0 14px 0;
 }
 
-.frame-10 {
-position: absolute;
-width: 900px;
-height: 267px;
-top: 512px;
-right: 0;
-overflow: hidden;
-overflow-x: scroll;
+.meeting-date {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  font-weight: 500;
+  color: #7f8da1;
+  font-size: 13px;
 }
 
-.frame-10::-webkit-scrollbar {
-width: 0;
-display: none;
-}
-
-.card {
-display: flex;
-flex-direction: column;
-width: 250px;
-align-items: center;
-gap: 16px;
-padding: 8px 8px 16px;
-position: absolute;
-top: -2px;
-right: 650px;
-background-color: white;
-border-radius: 16px;
-border: 0.5px solid #b8c0cb;
-}
-
-.frame-11 {
-position: relative;
-align-self: stretch;
-width: 100%;
-height: 172px;
-border-radius: 14px;
-background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png) 50% 50% / cover;
-}
-
-.frame-12 {
-display: flex;
-flex-direction: column;
-width: 218px;
-align-items: flex-start;
-gap: 14px;
-position: relative;
-flex: 0 0 auto;
-}
-
-.text-wrapper-10 {
-position: relative;
-width: fit-content;
-margin-top: -1px;
-font-family: "IRANSansXFaNum-DemiBold", Helvetica;
-font-weight: 700;
-color: #444d5a;
-font-size: 15px;
-text-align: left;
-letter-spacing: 0;
-line-height: 21px;
-white-space: nowrap;
-}
-
-.history {
-display: inline-flex;
-align-items: center;
-justify-content: center;
-gap: 10px;
-position: relative;
-flex: 0 0 auto;
-}
-
-.text-wrapper-11 {
-position: relative;
-width: fit-content;
-font-family: "IRANSansXFaNum-Medium", Helvetica;
-font-weight: 500;
-color: #7f8da1;
-font-size: 13px;
-letter-spacing: 0;
-line-height: 18.2px;
-white-space: nowrap;
-}
-
-.frame-13 {
-position: relative;
-width: 20px;
-height: 20px;
-}
-
-.frame-14 {
-display: flex;
-flex-direction: column;
-width: 250px;
-align-items: center;
-gap: 16px;
-padding: 8px 8px 16px;
-position: absolute;
-top: -2px;
-right: 380px;
-background-color: white;
-border-radius: 16px;
-border: 0.5px solid #b8c0cb;
-}
-
-.frame-15 {
-background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png) 50% 50% / cover;
-position: relative;
-align-self: stretch;
-width: 100%;
-height: 172px;
-border-radius: 14px;
-}
-
-.frame-16 {
-display: flex;
-flex-direction: column;
-width: 250px;
-align-items: center;
-gap: 16px;
-padding: 8px 8px 16px;
-position: absolute;
-top: -2px;
-right: 110px;
-background-color: white;
-border-radius: 16px;
-border: 0.5px solid #b8c0cb;
-}
-
-.frame-17 {
-background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png) 50% 50% / cover;
-position: relative;
-align-self: stretch;
-width: 100%;
-height: 172px;
-border-radius: 14px;
-}
-
-.frame-18 {
-display: flex;
-flex-direction: column;
-width: 250px;
-align-items: center;
-gap: 16px;
-padding: 8px 8px 16px;
-position: absolute;
-top: -2px;
-right: -160px;
-background-color: white;
-border-radius: 16px;
-border: 0.5px solid #b8c0cb;
-}
-
-.frame-19 {
-background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png) 50% 50% / cover;
-position: relative;
-align-self: stretch;
-width: 100%;
-height: 172px;
-border-radius: 14px;
-}
-
-.BTN-icon {
-display: flex;
-width: 292px;
-align-items: center;
-justify-content: flex-start;
-gap: 10px;
-padding: 12px 24px;
-top: 250px;
-right: 687px;
-border-radius: 8px;
-position: absolute;
-background-color: #3a57e8;
-cursor: pointer;
-}
-
-.text-wrapper-12 {
-position: relative;
-width: fit-content;
-margin-top: -2px;
-font-family: "IRANSansXFaNum-Medium", Helvetica;
-font-weight: 500;
-color: white;
-font-size: 16px;
-text-align: right;
-line-height: 22.4px;
-white-space: nowrap;
-letter-spacing: 0;
-}
-
-.frame-20 {
-position: relative;
-width: 16px;
-height: 16px;
-}
-
-.buy-a-subscription {
-display: inline-flex;
-align-items: center;
-justify-content: flex-start;
-gap: 10px;
-padding: 10px;
-position: absolute;
-top: 35px;
-right: 858px;
-background-color: #48bb78;
-border-radius: 8px;
-cursor: pointer;
-}
-
-.frame-21 {
-position: relative;
-width: 20px;
-height: 20px;
+.meeting-date img {
+  width: 20px;
+  height: 20px;
 }
 
 .footer {
-margin-top: 20px;
-text-align: center;
-position: relative;
+  text-align: center;
+  margin-top: 20px;
 }
 
-.text-wrapper-13 {
-width: 100%;
-height: 18px;
-font-family: "IRANSansXFaNum-Medium", Helvetica;
-font-weight: 500;
-color: white;
-font-size: 13px;
-text-align: center;
-letter-spacing: 0;
-line-height: 18.2px;
+.footer-text {
+  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  font-weight: 500;
+  color: white;
+  font-size: 13px;
+  line-height: 18.2px;
 }
 
-.logo {
-width: 360px;
-height: 45px;
-margin: 30px auto;
+.footer-logo {
+  width: 150px;
+  margin: 30px auto;
 }
 
-.clip-path-group-wrapper {
-position: relative;
-height: 45px;
+.footer-logo img {
+  width: 100%;
+  height: auto;
 }
 
-.clip-path-group {
-position: absolute;
-width: 150px;
-height: 40px;
-top: 5px;
-right: 105px;
+
+
+
+
+.files-header {
+  display: flex;
+  align-items: center;
+   
+  margin-bottom: 20px;
 }
+
+.file-buttons {
+  display: flex;
+  gap: 30px;
+  margin-right: 40px;
+}
+
+.white-button {
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.white-button:hover {
+  background-color: #f5f5f5;
+}
+
 </style>
\ No newline at end of file