Update src/streamlit_app.py

src/streamlit_app.py

@@ -15,13 +15,10 @@ st.markdown("""
         html, body, [class*="css"] {
             font-family: 'Cairo', sans-serif;
             background-color: #0f1117;
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
         }
 
         .full-screen {
-            height: 100vh;
+            min-height: 70vh;
             width: 100%;
             background: linear-gradient(-45deg, #2193b0, #6dd5ed, #1e3c72, #2a5298);
             background-size: 400% 400%;
@@ -35,27 +32,41 @@ st.markdown("""
             padding: 30px 15px;
             border-radius: 0 0 40px 40px;
             margin-bottom: 40px;
-       }
+        }
+
+        @keyframes gradientBG {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
 
         .logo-container img {
             width: 120px;
             height: 120px;
             border-radius: 50%;
-            border: 4px solid white;
-            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+            border: 5px solid white;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
+            animation: glow 3s infinite alternate;
+        }
+
+        @keyframes glow {
+            0% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
+            100% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9); }
         }
 
         h1 {
             font-size: 2.8rem;
-            margin: 15px 0;
-            color: #fff;
+            font-weight: 700;
+            margin: 20px 0;
+            color: #ffffff;
         }
 
         p {
             font-size: 1.1rem;
-            max-width: 500px;
-            margin: 10px auto;
-            color: rgba(255, 255, 255, 0.9);
+            max-width: 600px;
+            margin: 15px auto;
+            opacity: 0.9;
+            color: rgba(255, 255, 255, 0.95);
         }
 
         .cta-buttons {
@@ -65,23 +76,98 @@ st.markdown("""
         .cta-buttons a {
             background: #00bcd4;
             color: white;
-            font-size: 1rem;
+            font-size: 1.05rem;
             font-weight: bold;
             text-decoration: none;
             padding: 10px 25px;
-            border-radius: 25px;
+            border-radius: 30px;
             transition: 0.3s;
+            box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
         }
 
         .cta-buttons a:hover {
             background: #0097a7;
-            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
+            transform: translateY(-3px);
+        }
+
+        .about-section {
+            background-color: #ffffff;
+            color: #222;
+            border-radius: 30px;
+            padding: 60px 30px;
+            max-width: 1000px;
+            margin: 60px auto;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+
+        .about-section h2 {
+            font-size: 2.5rem;
+            color: #0f1117;
+            margin-bottom: 20px;
+            font-weight: 800;
+        }
+
+        .about-section p {
+            font-size: 1.2rem;
+            color: #555;
+            margin: 0 auto 40px;
+            max-width: 700px;
+        }
+
+        .features {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 30px;
         }
 
+        .feature {
+            background: linear-gradient(135deg, #ffffff, #f7f7f7);
+            border-radius: 25px;
+            padding: 30px 20px;
+            width: 260px;
+            text-align: center;
+            box-shadow: 0 6px 18px rgba(0,0,0,0.1);
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .feature:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 24px rgba(0,0,0,0.15);
+        }
+
+        .feature img {
+            width: 60px;
+            height: 60px;
+            margin-bottom: 15px;
+            transition: transform 0.3s ease;
+        }
+
+        .feature:hover img {
+            transform: rotate(6deg) scale(1.1);
+        }
+
+        .feature h4 {
+            font-size: 1.3rem;
+            color: #0077b6;
+            margin-bottom: 10px;
+            font-weight: 700;
+        }
+
+        .feature p {
+            font-size: 1rem;
+            color: #444;
+        }
+
+        .feature:nth-child(1) { background: #fef6f0; }
+        .feature:nth-child(2) { background: #f0f8ff; }
+        .feature:nth-child(3) { background: #f4f4fe; }
+
     </style>
 """, unsafe_allow_html=True)
 
-
 # واجهة الوكيل الصوتي
 st.markdown("""
     <div class="full-screen">