Update src/streamlit_app.py

src/streamlit_app.py

@@ -9,205 +9,135 @@ st.set_page_config(
 
 # CSS مخصص
 st.markdown("""
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
-
-        html, body, [class*="css"] {
-            font-family: 'Cairo', sans-serif;
-            background-color: #0f1117;
-            margin: 0;
-            padding: 0;
-        }
-
-        .full-screen {
-            min-height: 100vh;
-            width: 100%;
-            background: linear-gradient(-45deg, #2193b0, #6dd5ed, #1e3c72, #2a5298);
-            background-size: 400% 400%;
-            animation: gradientBG 10s ease infinite;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            text-align: center;
-            padding: 30px 15px;
-            border-radius: 0 0 40px 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: 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;
-            font-weight: 700;
-            margin: 20px 0;
-            color: #ffffff;
-        }
-
-        p {
-            font-size: 1.1rem;
-            max-width: 600px;
-            margin: 15px auto;
-            opacity: 0.9;
-            color: rgba(255, 255, 255, 0.95);
-        }
-
-        .cta-buttons {
-            margin-top: 25px;
-        }
-
-        .cta-buttons a {
-            background: #00bcd4;
-            color: white;
-            font-size: 1.05rem;
-            font-weight: bold;
-            text-decoration: none;
-            padding: 10px 25px;
-            border-radius: 30px;
-            transition: 0.3s;
-            box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
-        }
-
-        .cta-buttons a:hover {
-            background: #0097a7;
-            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>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
+
+html, body, [class*="css"] {
+    font-family: 'Cairo', sans-serif;
+    background-color: #0f1117;
+    scroll-behavior: smooth;
+}
+
+.full-screen {
+    min-height: 70vh;
+    width: 100%;
+    background: linear-gradient(-45deg, #2193b0, #6dd5ed, #1e3c72, #2a5298);
+    background-size: 400% 400%;
+    animation: gradientBG 10s ease infinite;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    text-align: center;
+    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: 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;
+    font-weight: 700;
+    margin: 20px 0;
+    color: #ffffff;
+}
+
+p {
+    font-size: 1.1rem;
+    max-width: 600px;
+    margin: 15px auto;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.95);
+}
+
+.cta-buttons {
+    margin-top: 25px;
+}
+
+.cta-buttons a {
+    background: #00bcd4;
+    color: white;
+    font-size: 1.05rem;
+    font-weight: bold;
+    text-decoration: none;
+    padding: 10px 25px;
+    border-radius: 30px;
+    transition: 0.3s;
+    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
+}
+
+.cta-buttons a:hover {
+    background: #0097a7;
+    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;
+}
+</style>
 """, unsafe_allow_html=True)
 
 
 
+
+
 # واجهة الوكيل الصوتي
 st.markdown("""
-    <div class="full-screen">
-        <div class="logo-container">
-            <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Voice Assistant">
-        </div>
-        <h1>وكيلك الصوتي الذكي</h1>
-        <p>
-            تحدث، ودع وكيلنا الذكي يتولى المهمة!<br>
-            حجوزاتك وطلباتك تُنجز بسهولة واحترافية.
-        </p>
-        <div class="cta-buttons">
-            <a href="https://vapi.ai?demo=true&shareKey=f612978f-043a-48ad-8133-d5902b2aba32&assistantId=acdaf234-999f-4fc9-b229-d51e1d9fd10d" target="_blank">
-                تواصل مع وكيلك الآن 
-            </a>
-        </div>
+<div class="full-screen">
+    <div class="logo-container">
+        <img src="https://cdn-icons-png.flaticon.com/512/4712/4712027.png" alt="وكيلك الذكي">
     </div>
-
-    <div class="about-section">
-        <h2>من نحن</h2>
-        <p>نحن فريق تقني نؤمن بقوة الذكاء الاصطناعي في تسهيل حياتك اليومية، من خلال مساعد ذكي صوتي يفهمك ويتفاعل معك.</p>
-        <div class="features">
-            <div class="feature">
-                <img src="https://cdn-icons-png.flaticon.com/512/3595/3595455.png" alt="Booking">
-                <h4>سهولة الحجز</h4>
-                <p>إجراء الحجوزات في العيادات والمطاعم بكل سهولة ويسر.</p>
-            </div>
-            <div class="feature">
-                <img src="https://cdn-icons-png.flaticon.com/512/2099/2099058.png" alt="Recording">
-                <h4>تسجيل دقيق</h4>
-                <p>تسجيل الأوامر والطلبات الصوتية بدقة واحترافية عالية.</p>
-            </div>
-            <div class="feature">
-                <img src="https://cdn-icons-png.flaticon.com/512/4712/4712006.png" alt="Interaction">
-                <h4>تفاعل ذكي</h4>
-                <p>الرد الفوري والتفاعل الطبيعي مع محادثاتك وكأنك تتحدث مع إنسان.</p>
-            </div>
-        </div>
+    <h1>وكيلك الصوتي الذكي</h1>
+    <p>تحدث، ودع وكيلك الذكي يتولى المهمة<br>حجوزاتك، طلباتك، كلها تتم بسهولة واحترافية</p>
+    <div class="cta-buttons">
+        <a href="#about">من نحن</a>
     </div>
-""", unsafe_allow_html=True)
+</div>
+
+<div class="about-section" id="about">
+    <h2>من نحن</h2>
+    <p>نحن وكيلك الذكي، نقدم حلولاً متطورة لخدمة العملاء الصوتية عبر الذكاء الاصطناعي، لتسريع تجربة المستخدم، وتحقيق تواصل احترافي، على مدار الساعة.</p>
+</div>
+""", unsafe_allow_html=True)