responsive index

xroom-dashboard/src/App.vue

@@ -117,6 +117,7 @@ router-view {
 
   .content {
     padding: 5px 15px !important;
+    gap: 0;
   }
 }
 
@@ -127,7 +128,9 @@ router-view {
   }
 
   .content {
-    padding: 35px 15px !important;
+    padding: 0px 15px !important;
+    padding-bottom: 45px !important;
+    gap: 0;
   }
 }
 
@@ -140,10 +143,35 @@ router-view {
 
   .content {
     padding: 15px 45px 45px 0 !important;
+    gap: 0;
   }
 }
 
-@media (min-width: 1025px) {
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .dashboard-page {
+    margin-right: 20rem;
+    padding: 20px;
+    direction: rtl;
+  }
+
+  .content {
+    padding: 35px 45px !important;
+  }
+}
+
+@media (min-width: 1280px) and (max-width : 1440px){
+  .dashboard-page {
+    margin-right: 20rem;
+    padding: 20px;
+    direction: rtl;
+  }
+
+  .content {
+    padding: 35px 45px !important;
+  }
+}
+
+@media (min-width: 1440px){
   .dashboard-page {
     margin-right: 20rem;
     padding: 20px;
@@ -154,5 +182,4 @@ router-view {
     padding: 35px 80px !important;
   }
 }
-
 </style>

xroom-dashboard/src/pages/dashboard/index.vue

@@ -1,162 +1,230 @@
 <template>
-    <div>
+  <div class="dashboard">
-      <!-- <AppHeader /> -->
+    <div class="dashboard-grid">
-      <div class="dashboard-grid">
+      <!-- Right Section -->
-        
+      <div class="right-section">
-        <!-- Right Section -->
+        <h2 class="section-title">راهنمای شروع</h2>
-        <div class="right-section">
+        <swiper
-          <h2 class="section-title">راهنمای شروع</h2>
+          :slides-per-view="1.5"
-          <div class="tutorial-grid">
+          :space-between="10"
+          :loop="true"
+          :pagination="{ clickable: true }"
+          :modules="modules"
+          class="my-swiper"
+        >
+          <swiper-slide>
             <img
-              class="tutorial-item"
-              @click="tutorialShowModal = true;"
               src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg"
-              style="cursor: pointer;"
+              alt="Tutorial"
+              class="swiper-image"
+              @click="tutorialShowModal = true"
             />
-            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
+          </swiper-slide>
-            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
+          <swiper-slide>
-            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
+            <img
+              src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg"
+              alt="Tutorial"
+              class="swiper-image"
+            />
+          </swiper-slide>
+          <swiper-slide>
+            <img
+              src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg"
+              alt="Tutorial"
+              class="swiper-image"
+            />
+          </swiper-slide>
+          <swiper-slide>
+            <img
+              src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg"
+              alt="Tutorial"
+              class="swiper-image"
+            />
+          </swiper-slide>
+        </swiper>
+        <div class="tutorial-grid">
+          <img
+            src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg"
+            alt="Tutorial"
+            class="tutorial-item"
+            @click="tutorialShowModal = true"
+          />
+          <img
+            src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg"
+            alt="Tutorial"
+            class="tutorial-item"
+          />
+          <img
+            src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg"
+            alt="Tutorial"
+            class="tutorial-item"
+          />
+          <img
+            src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg"
+            alt="Tutorial"
+            class="tutorial-item"
+          />
+        </div>
+      </div>
+
+      <!-- Left Section -->
+      <div class="left-section">
+        <h2 class="section-title">جلسات</h2>
+        <p class="section-description">
+          فقط یک ایده با جلسه شگفت‌انگیز بعدی‌تان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
+        </p>
+        <button class="create-meeting-btn" @click="showModal = true">
+          <img
+            src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg"
+            alt="Create Meeting Icon"
+            class="btn-icon"
+          />
+          <span>ایجاد جلسه جدید</span>
+        </button>
+      </div>
+
+      <!-- Meetings Section -->
+      <div class="meetings-section">
+        <div class="files-header">
+          <h1 class="files-title">آخرین فایل‌ها</h1>
+          <div class="file-buttons">
+            <button class="white-button" @click="openDialog('image')">
+              بارگذاری فایل
+            </button>
+            <router-link class="white-button" to="/dashboard/files">
+              مدیریت فایل‌ها
+            </router-link>
           </div>
         </div>
-        
+        <swiper
-        <!-- Left Section -->
+          :slides-per-view="2.2"
-        <div class="left-section">
+          :space-between="15"
-          <h2 class="section-title">جلسات</h2>
+          :loop="true"
-          <p class="section-description">
+          :pagination="{ clickable: true }"
-            فقط یک ایده با جلسه شگفت‌انگیز بعدی‌تان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
+          :breakpoints="{
-          </p>
+            768: { slidesPerView: 3.4, spaceBetween: 15 },
-          
+            1024: { slidesPerView: 2.8, spaceBetween: 25 },
-          <button class="create-meeting-btn" @click="showModal = true">
+            1280: { slidesPerView: 3.8, spaceBetween: 30 },
-            <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
+          }"
-            <span>ایجاد جلسه جدید</span>
+          :modules="modules"
-          </button>
+          class="last-files-swiper"
-
+        >
-          
+          <swiper-slide v-for="(meeting, index) in meetings" :key="index" class="meeting-card">
-        </div>
+            <div
-        
+              class="card-image"
-        <!-- Meetings Section -->
+              :style="{ backgroundImage: `url(${meeting.image})` }"
-        <div class="meetings-section">
+            ></div>
-          <div class="files-header">
+            <div class="card-content">
-            <h1 style="    font-size: 24px;">آخرین فایل ها</h1>
+              <h3>{{ meeting.title }}</h3>
-            <div class="file-buttons">
+              <div class="meeting-date">
-              <button class="white-button" @click="openDialog('image')">بارگذاری فایل</button>
+                <img
-              <router-link class="white-button" to="/dashboard/files">مدیریت فایل‌ها</router-link>
+                  src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg"
-            </div>
+                  alt="Calendar Icon"
-          </div>
+                  class="date-icon"
-          
+                />
-          <div class="meetings-scroll">
+                <span>{{ meeting.date }}</span>
-            <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>
+          </swiper-slide>
-        </div>
+        </swiper>
       </div>
     </div>
 
-    
+    <!-- Modals -->
-  <!-- Create Meeting Modal -->
+    <CreateMeetingModal
-  <CreateMeetingModal
+      :is-open="showModal"
-    :is-open="showModal"
+      @create-meeting="createNewMeeting"
-    @create-meeting="createNewMeeting"
+      @close="showModal = false"
-    @close="showModal = false"
+    />
-  />  
+    <TutorialShowModal
-
+      :is-open="tutorialShowModal"
-  <!-- Tutorial Modal -->
+      @close="tutorialShowModal = false"
-  <TutorialShowModal
+    />
-    :is-open="tutorialShowModal"
+    <NewFileDialog
-    @close="tutorialShowModal = false"
+      :is-open="isNewFileDialogOpen"
-  />
+      :initial-upload-type="currentUploadType"
-
+      :base-url="baseUrl"
-  <!-- New File Dialog Component -->
+      @close="closeDialog"
-  <NewFileDialog
+      @upload-success="fetchUserData"
-    :is-open="isNewFileDialogOpen"
+    />
-    :initial-upload-type="currentUploadType"
+  </div>
-    :base-url="baseUrl"
-    @close="closeDialog"
-    @upload-success="fetchUserData"
-  />
 </template>
 
 <script>
 import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
 import TutorialShowModal from '@/components/TutorialShowModal.vue';
 import NewFileDialog from '@/components/NewFileDialog.vue';
-
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import { Pagination } from 'swiper/modules';
 
 export default {
   name: 'DashboardPage',
   components: {
     CreateMeetingModal,
     TutorialShowModal,
-    NewFileDialog
+    NewFileDialog,
+    Swiper,
+    SwiperSlide,
   },
   data() {
     return {
+      modules: [Pagination],
       showModal: false,
       tutorialShowModal: false,
       isNewFileDialogOpen: false,
       currentUploadType: 'image',
-      baseUrl: 'http://194.62.43.230:8000'
+      baseUrl: 'http://194.62.43.230:8000',
-    }
+      meetings: [
+        {
+          title: 'Pico Control',
+          date: '24 تیر 1403',
+          image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png',
+        },
+        {
+          title: 'Flash Back',
+          date: '24 تیر 1403',
+          image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png',
+        },
+        {
+          title: 'Fakor Sanat Tehran',
+          date: '24 تیر 1403',
+          image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png',
+        },
+        {
+          title: 'Design Artist',
+          date: '24 تیر 1403',
+          image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png',
+        },
+        {
+          title: 'Fakor Sanat Tehran',
+          date: '24 تیر 1403',
+          image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png',
+        },
+        {
+          title: 'Design Artist',
+          date: '24 تیر 1403',
+          image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png',
+        },
+        {
+          title: 'Flash Back',
+          date: '24 تیر 1403',
+          image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png',
+        },
+      ],
+    };
   },
   methods: {
     createNewMeeting(meetingData) {
-      const newMeeting = {
+      this.meetings.push({
-        id: this.meetings.length + 1,
         title: meetingData.title,
         date: meetingData.date,
         image: 'https://via.placeholder.com/150',
         type: meetingData.type,
         maxCapacity: meetingData.maxCapacity,
-      };
+      });
-      this.meetings.push(newMeeting);
       this.showModal = false;
     },
-    filterMeetings() {
-      console.log('Filtering meetings');
-    },
     openDialog(type = 'image') {
       this.currentUploadType = type;
       this.isNewFileDialogOpen = true;
@@ -166,228 +234,80 @@ export default {
     },
     fetchUserData() {
       console.log('Fetching user data');
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
-/* .dashboard-page {
+.dashboard {
-  margin-right: 360px;
+  padding: 20px 0px;
-  padding: 20px;
+  font-family: 'IRANSansXFaNum-Medium', Helvetica, sans-serif;
-  direction: rtl;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.content {
-  flex: 1;
-  background-color: #f8f9fa;
-  border-radius: 20px;
-  padding: 35px 80px;
-  display: flex;
-  flex-direction: column;
-} */
-
-.dashboard-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 40px;
-  margin-top: 1rem;
-}
-
-.left-section {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.right-section {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
 }
 
 .section-title {
-  font-family: "IRANSansXFaNum-DemiBold", Helvetica;
+  font-family: 'IRANSansXFaNum-DemiBold', Helvetica, sans-serif;
   font-weight: 700;
   color: #101010;
   font-size: 19px;
   line-height: 26.6px;
-  margin: 0;
+  margin-bottom: 1rem;
 }
 
 .section-description {
-  font-family: "IRANSansXFaNum-Medium", Helvetica;
-  font-weight: 500;
   color: #4f5a69;
   font-size: 14px;
   line-height: 26.6px;
   margin: 0;
 }
 
-.tutorial-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
- 
-}
-
-.tutorial-item {
-  width: 300px;
-  height: auto;
-  border-radius: 8px;
-  margin: auto;
-}
-
 .create-meeting-btn {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 12px 24px;
+  padding: 8px 12px;
   border-radius: 8px;
   background-color: #3a57e8;
   color: white;
-  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  font-size: 14px;
-  font-weight: 500;
-  font-size: 16px;
   border: none;
   cursor: pointer;
-  width: fit-content;
 }
 
-.create-meeting-btn img {
+.btn-icon {
-  width: 16px;
+  width: 14px;
-  height: 16px;
+  height: 14px;
 }
 
-.meetings-section {
-  grid-column: 1 / -1;
-  margin-top: 40px;
-}
-
-.meeting-controls {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.meeting-btn {
-  width: 130px;
-  cursor: pointer;
-}
-
-.meetings-scroll {
-  width: 100%;
-  overflow-x: auto;
-  padding-bottom: 20px;
-}
-
-.meetings-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.meeting-cards {
-  display: flex;
-  gap: 20px;
-  width: max-content;
-}
-
-.meeting-card {
-  width: 250px;
-  background-color: white;
-  border-radius: 16px;
-  border: 0.5px solid #b8c0cb;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.card-image {
-  width: 100%;
-  height: 172px;
-  background-size: cover;
-  background-position: center;
-  border-radius: 14px;
-}
-
-.card-content {
-  padding: 8px 16px 16px;
-}
-
-.card-content h3 {
-  font-family: "IRANSansXFaNum-DemiBold", Helvetica;
-  font-weight: 700;
-  color: #444d5a;
-  font-size: 15px;
-  margin: 0 0 14px 0;
-}
-
-.meeting-date {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-family: "IRANSansXFaNum-Medium", Helvetica;
-  font-weight: 500;
-  color: #7f8da1;
-  font-size: 13px;
-}
-
-.meeting-date img {
-  width: 20px;
-  height: 20px;
-}
-
-.footer {
-  text-align: center;
-  margin-top: 20px;
-}
-
-.footer-text {
-  font-family: "IRANSansXFaNum-Medium", Helvetica;
-  font-weight: 500;
-  color: white;
-  font-size: 13px;
-  line-height: 18.2px;
-}
-
-.footer-logo {
-  width: 150px;
-  margin: 30px auto;
-}
-
-.footer-logo img {
-  width: 100%;
-  height: auto;
-}
-
-
-
-
-
 .files-header {
   display: flex;
   align-items: center;
-   
+  justify-content: space-between;
   margin-bottom: 20px;
 }
 
+.files-title {
+  font-size: 19px;
+  font-family: 'IRANSansXFaNum-DemiBold', Helvetica, sans-serif;
+  font-weight: 700;
+  color: #101010;
+}
+
 .file-buttons {
   display: flex;
-  gap: 30px;
+  gap: 10px;
-  margin-right: 40px;
 }
 
 .white-button {
   background-color: white;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
-  padding: 8px 16px;
+  padding: 8px 10px;
   font-size: 14px;
-  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  color: #101010;
   cursor: pointer;
   transition: background-color 0.2s;
-  color: #101010;
+  text-decoration: none;
   line-height: normal;
 }
 
@@ -395,4 +315,341 @@ export default {
   background-color: #f5f5f5;
 }
 
+.my-swiper,
+.last-files-swiper {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.swiper-image {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.tutorial-grid {
+  display: none;
+}
+
+.tutorial-item {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.meeting-card {
+  background-color: white;
+  border-radius: 16px;
+  border: 0.5px solid #b8c0cb;
+  overflow: hidden;
+}
+
+.card-image {
+  width: 100%;
+  height: 120px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 14px 14px 0 0;
+}
+
+.card-content {
+  padding: 12px 10px 8px;
+}
+
+.card-content h3 {
+  font-family: 'IRANSansXFaNum-DemiBold', Helvetica, sans-serif;
+  font-weight: 700;
+  color: #444d5a;
+  font-size: 14px;
+  margin: 0 0 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.meeting-date {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #7f8da1;
+  font-size: 12px;
+}
+
+.date-icon {
+  width: 15px;
+  height: 15px;
+}
+
+/* Mobile (max-width: 600px) */
+@media (max-width: 600px) {
+
+  .white-button {
+    font-size: 12px;
+  }
+  
+  .section-title {
+    margin-bottom: 0;
+
+  }
+
+  .files-title {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+  }
+
+  .create-meeting-btn {
+    width: fit-content;
+  }
+
+  .dashboard-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+   .left-section {
+    gap: 10px !important;
+   }
+
+  .my-swiper, .last-files-swiper {
+    margin: 0;
+  }
+
+  .right-section,
+  .left-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .tutorial-grid {
+    display: none;
+  }
+
+  .meeting-card {
+    width: 250px;
+    flex-shrink: 0;
+  }
+}
+
+/* Small Tablet (min-width: 600px and max-width: 780px) */
+@media (min-width: 600px) and (max-width: 780px) {
+  .dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+  }
+
+  .my-swiper {
+    display: none;
+  }
+
+  .tutorial-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+
+  .tutorial-item {
+    width: 200px;
+    margin: auto;
+  }
+
+  .meetings-section {
+    grid-column: 1 / -1;
+    margin-top: 40px;
+  }
+
+  .file-buttons {
+    margin-right: 20px;
+  }
+}
+
+/* Tablet (min-width: 780px and max-width: 1024px) */
+@media (min-width: 780px) and (max-width: 1024px) {
+  .dashboard-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .my-swiper {
+    display: none;
+  }
+
+  .tutorial-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+
+  .tutorial-item {
+    width: 85%;
+    margin: auto;
+  }
+
+  .meetings-section {
+    max-width: 96%;
+    margin-top: 40px;
+  }
+
+  .card-image {
+    height: 172px;
+  }
+
+  .card-content {
+    padding: 8px 16px 16px;
+  }
+
+  .card-content h3 {
+    font-size: 15px;
+  }
+
+  .date-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .file-buttons {
+    gap: 30px;
+    margin-right: 40px;
+  }
+
+  .white-button {
+    padding: 8px 16px;
+  }
+}
+
+/* Desktop (min-width: 1024px and max-width: 1280px) */
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .dashboard-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .my-swiper {
+    display: none;
+  }
+
+  .tutorial-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+
+  .tutorial-item {
+    width: 280px;
+    margin: auto;
+  }
+
+  .create-meeting-btn {
+    padding: 12px 24px;
+    font-size: 16px;
+  }
+
+  .btn-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .meetings-section {
+    max-width: 100%;
+    margin-top: 40px;
+  }
+
+  .card-image {
+    height: 172px;
+  }
+
+  .card-content {
+    padding: 8px 16px 16px;
+  }
+
+  .card-content h3 {
+    font-size: 15px;
+  }
+
+  .date-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .file-buttons {
+    gap: 30px;
+    margin-right: 40px;
+  }
+
+  .white-button {
+    padding: 8px 16px;
+  }
+}
+
+/* Large Desktop (min-width: 1280px) */
+@media (min-width: 1280px) {
+  .dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+  }
+
+  .my-swiper {
+    display: none;
+  }
+
+  .tutorial-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+
+  .tutorial-item {
+    width: 300px;
+    margin: auto;
+  }
+
+  .create-meeting-btn {
+    padding: 12px 24px;
+    font-size: 16px;
+    margin-top: 1.5rem;
+  }
+
+  .btn-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .meetings-section {
+    grid-column: 1 / -1;
+    margin-top: 40px;
+  }
+
+  .card-image {
+    height: 172px;
+  }
+
+  .card-content {
+    padding: 8px 16px 16px;
+  }
+
+  .card-content h3 {
+    font-size: 15px;
+  }
+
+  .date-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .file-buttons {
+    gap: 30px;
+    margin-right: 40px;
+  }
+
+  .white-button {
+    padding: 8px 16px;
+  }
+}
 </style>