refactor(VocabLessonView): combine lesson description and learning goals into a single component

- Merged the lesson description and learning goals sections into a unified block for improved layout and readability.
- Updated styles to enhance the visual presentation of the combined content, ensuring a more cohesive user experience.

frontend/src/views/social/VocabLessonView.vue

@@ -76,17 +76,21 @@
         </div>
 
         <div class="learn-grid">
-          <div v-if="lesson && lesson.description" class="lesson-description-box">
+          <div
+            v-if="(lesson && lesson.description) || lessonDidactics.learningGoals.length > 0"
+            class="didactic-card lesson-intro-combined"
+          >
+            <div v-if="lesson && lesson.description" class="lesson-intro-block">
               <h4>{{ $t('socialnetwork.vocab.courses.lessonDescription') }}</h4>
               <p>{{ lesson.description }}</p>
             </div>
-
+            <div v-if="lessonDidactics.learningGoals.length > 0" class="lesson-intro-block">
-          <div v-if="lessonDidactics.learningGoals.length > 0" class="didactic-card">
               <h4>{{ $t('socialnetwork.vocab.courses.learningGoals') }}</h4>
               <ul class="didactic-list">
                 <li v-for="(goal, index) in lessonDidactics.learningGoals" :key="'goal-' + index">{{ goal }}</li>
               </ul>
             </div>
+          </div>
 
           <div v-if="lessonDidactics.corePatterns.length > 0" class="didactic-card">
             <h4>{{ $t('socialnetwork.vocab.courses.corePatterns') }}</h4>
@@ -2282,7 +2286,6 @@ export default {
 }
 
 .didactic-card,
-.lesson-description-box,
 .cultural-notes {
   padding: 18px;
   background: #f8f9fa;
@@ -2290,6 +2293,20 @@ export default {
   border: 1px solid #e7e7e7;
 }
 
+.lesson-intro-combined {
+  grid-column: 1 / -1;
+}
+
+.lesson-intro-block + .lesson-intro-block {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e0e4e8;
+}
+
+.lesson-intro-block h4 {
+  margin-top: 0;
+}
+
 .didactic-list {
   margin: 0;
   padding-left: 20px;
@@ -2613,19 +2630,6 @@ export default {
   margin: 0 10px;
 }
 
-.lesson-description-box {
-  margin: 20px 0;
-  padding: 15px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.lesson-description-box h4 {
-  margin-top: 0;
-  color: #333;
-}
-
 .grammar-explanations {
   margin: 20px 0;
   padding: 15px;