Update app.py

app.py

@@ -1,96 +1,33 @@
 import streamlit as st
 
-# Inject custom CSS styles for the div classes
 st.markdown("""
-<style>
-.prescripto-container {
-    margin-top: 40px;
-    padding: 30px;
-    background: #fefefe;
-    border-radius: 16px;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
-    font-family: 'Segoe UI', sans-serif;
-}
-
-.prescripto-title {
-    font-size: 30px;
-    color: #2c3e50;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.prescripto-subtitle {
-    font-size: 18px;
-    color: #555;
-    margin-bottom: 20px;
-}
-
-.prescripto-features, .prescripto-ideal {
-    background-color: #ffffff;
-    padding: 20px;
-    margin-top: 20px;
-    border-radius: 12px;
-    border-left: 5px solid #36D1DC;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
-}
-
-.prescripto-features ul, .prescripto-ideal ul {
-    list-style: none;
-    padding-left: 0;
-    margin-top: 10px;
-}
-
-.prescripto-features li::before {
-    content: "✅ ";
-    color: #27ae60;
-    font-weight: bold;
-}
-
-.prescripto-ideal li::before {
-    content: "💡 ";
-    color: #f39c12;
-    font-weight: bold;
-}
-
-.prescripto-built-note {
-    text-align: center;
-    font-style: italic;
-    color: #888;
-    margin-top: 25px;
-    font-size: 15px;
-}
-</style>
-""", unsafe_allow_html=True)
-
-# Now render the HTML using your div classes (inside container)
-st.markdown("""
-<div class="prescripto-container">
-
-    <div class="prescripto-title">📋 Why Prescripto AI?</div>
-    <div class="prescripto-subtitle">Transform unreadable prescriptions into clear medicine insights – powered by AI.</div>
-
-    <div class="prescripto-features">
-        <ul>
-            <li>Upload any prescription photo (handwritten or typed)</li>
-            <li>Auto-extract medicine names and timings using OCR</li>
-            <li>Get dosage, side effects, and usage instructions from AI</li>
-            <li>No confusion, no guessing — stay safe and informed</li>
+<div style="background-color: #f9f9f9; padding: 30px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); margin-top: 40px;">
+
+    <h2 style="color: #2c3e50; text-align: center;">📋 Why <span style="color:#ff4b2b;">Prescripto AI</span>?</h2>
+    <p style="text-align: center; font-size: 16px; color: #555;">Transform unreadable prescriptions into clear medicine instructions using AI 💊</p>
+
+    <hr style="margin: 25px 0; border: none; height: 1px; background: #eee;">
+
+    <ul style="font-size: 16px; line-height: 1.7; color: #333;">
+        <li>📷 <strong>Upload a handwritten or printed prescription</strong></li>
+        <li>🧠 <strong>AI extracts medicine names, doses & timings</strong></li>
+        <li>💡 <strong>Get side effects and special instructions instantly</strong></li>
+        <li>🔒 <strong>Stay safe, avoid confusion & errors</strong></li>
+    </ul>
+
+    <div style="margin-top: 25px;">
+        <p style="font-weight: 600; margin-bottom: 10px;">👥 Ideal For:</p>
+        <ul style="line-height: 1.6; color: #444;">
+            <li>👴 Elderly users needing clarity</li>
+            <li>👨‍👩‍👧‍👦 Families managing prescriptions</li>
+            <li>👩‍⚕️ Nurses, pharmacists & caregivers</li>
+            <li>📱 Anyone needing quick medicine info</li>
         </ul>
     </div>
 
-    <div class="prescripto-ideal">
-        <p style="font-weight:600; margin-bottom: 10px;">Perfect for:</p>
-        <ul>
-            <li>Senior citizens or non-medical users</li>
-            <li>Busy parents managing family health</li>
-            <li>Caregivers and healthcare workers</li>
-            <li>Anyone who wants clarity about their medication</li>
-        </ul>
-    </div>
-
-    <div class="prescripto-built-note">
-        🤖 Built with EasyOCR, HuggingFace LLMs, LangChain, and Streamlit 💙
-    </div>
-
+    <p style="text-align: center; font-style: italic; color: #888; margin-top: 30px;">
+        Built using EasyOCR, HuggingFace LLMs, LangChain & Streamlit 🚀
+    </p>
 </div>
 """, unsafe_allow_html=True)
+