From b6c4558ff0470d78cdb70c195240000f4f6b9821 Mon Sep 17 00:00:00 2001
From: Anton Titovets <bayselonarrend@gmail.com>
Date: Wed, 19 Nov 2025 10:01:26 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=B4=D0=B0=20=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D0=BB=D0=B0=20=D0=BC=D0=B0=D1=82=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B0=D0=BB=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docusaurus/src/pages/courses.js         | 14 ++++----
 docs/docusaurus/src/pages/courses.module.css | 38 ++++++++++++++++----
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/docs/docusaurus/src/pages/courses.js b/docs/docusaurus/src/pages/courses.js
index 0a0ad0d42d..e2ab4a97e4 100644
--- a/docs/docusaurus/src/pages/courses.js
+++ b/docs/docusaurus/src/pages/courses.js
@@ -35,12 +35,9 @@ const CoursesPage = () => {
   const SubscriptionModal = () => (
     <div className={`${styles.modalOverlay} ${showSubscriptionModal ? styles.modalOverlayVisible : ''}`}
          onClick={() => setShowSubscriptionModal(false)}>
-      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+      <div className={styles.modalFeaturesContent} onClick={(e) => e.stopPropagation()}>
         <div className={styles.modalHeader}>
-          <h2>{subscriptionInfo.title}</h2>
-          <button className={styles.closeButton} onClick={() => setShowSubscriptionModal(false)}>
-            ×
-          </button>
+          <h1>{subscriptionInfo.title}</h1>
         </div>
         
         <div className={styles.modalBody}>
@@ -49,7 +46,10 @@ const CoursesPage = () => {
           <div className={styles.featuresGrid}>
             {subscriptionInfo.features.map((feature, index) => (
               <div key={index} className={styles.featureCard}>
-                <div className={styles.featureIcon}>{feature.icon}</div>
+                <svg className={styles.featureIcon} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={0.8} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d={feature.icon} />
+                </svg>
+
                 <h3 className={styles.featureTitle}>{feature.title}</h3>
                 <p className={styles.featureDescription}>{feature.description}</p>
               </div>
@@ -121,7 +121,7 @@ const CoursesPage = () => {
             <div className={styles.courseProgram}>
               <h3>Что вы получите:</h3>
               <ul className={styles.programList}>
-                <li>✓ Полный доступ к</li>
+                <li>✓ Полный доступ к текстовому материалу</li>
                 <li>✓ Обновления контента бесплатно</li>
               </ul>
             </div>
diff --git a/docs/docusaurus/src/pages/courses.module.css b/docs/docusaurus/src/pages/courses.module.css
index 440317c1da..0db99b467e 100644
--- a/docs/docusaurus/src/pages/courses.module.css
+++ b/docs/docusaurus/src/pages/courses.module.css
@@ -305,7 +305,19 @@
   background: white;
   border-radius: 16px;
   padding: 0;
-  max-width: 640px;
+  max-width: 670px;
+  width: 90%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modalFeaturesContent {
+  background: white;
+  border-radius: 16px;
+  padding: 0;
+  max-width: 840px;
   width: 90%;
   max-height: 90vh;
   overflow: hidden;
@@ -351,21 +363,34 @@
 .featuresGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1.5rem;
+  gap: 1rem;
   margin-bottom: 2rem;
 }
 
 .featureCard {
   text-align: center;
-  padding: 1.5rem 1rem;
-  border: 1px solid #eee;
+  background: white;
+  border: 1px solid #ddd;
   border-radius: 12px;
-  background: #fafafa;
+  padding: 1.2rem;
+  box-shadow:
+    inset 0 1px 3px rgba(255, 255, 255, 0.7),
+    0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.featureCard:hover {
+  box-shadow:
+    inset 0 1px 3px rgba(255, 255, 255, 0.7),
+    0 6px 12px rgba(0, 0, 0, 0.12);
 }
 
 .featureIcon {
-  font-size: 2.5rem;
+  width: 4rem;
+  height: 4rem;
+  flex-shrink: 0;
   margin-bottom: 1rem;
+  color: #004943;
 }
 
 .featureTitle {
@@ -416,6 +441,7 @@
 .primaryButton:hover {
   background: #00302a;
   color: white;
+  text-decoration: none;
 }
 
 /* Адаптивность */