Update src/about.py (#38)

- Update src/about.py (e735eed0798d9d7d344f58e42cd049ffc226abbe)


Co-authored-by: Muhammad Khaqan Nasir <[email protected]>

src/about.py

@@ -1,116 +1,296 @@
 import streamlit as st
 
 def main():
-    # Custom CSS for About page
+    # Updated CSS for About page
     st.markdown("""
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+        * {
+            font-family: 'Poppins', sans-serif !important;
+            box-sizing: border-box;
+        }
 
         .stApp {
-            font-family: 'Poppins', sans-serif;
-            background: #f8fafc;
+            background: #ffffff;
             min-height: 100vh;
-            color: #1a202c;
+            color: #1f2a44;
+            margin: 0 !important;
+            padding: 0 !important;
         }
 
-        #MainMenu {visibility: visible;}
+        #MainMenu {visibility: hidden;}
         footer {visibility: hidden;}
         .stDeployButton {display: none;}
         header {visibility: hidden;}
         .stApp > header {visibility: hidden;}
 
-        .container {
-            max-width: 1200px;
+        /* Main Container */
+        .main-container {
+            max-width: 100%;
+            width: 100%;
             margin: 0 auto;
-            padding: 1.5rem;
+            padding: 1rem 2rem;
         }
 
-        .header {
-            padding: 1.5rem 0;
+        /* Header Section */
+        .header-section {
             text-align: center;
+            margin-bottom: 2.5rem;
+            padding: 1.5rem 0;
         }
 
         .header-title {
-            font-size: 2.5rem;
+            font-size: 2.25rem;
             font-weight: 700;
-            color: #1a202c;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
+            color: #1f2a44;
+            margin: 0;
+        }
+
+        .header-subtitle {
+            font-size: 1rem;
+            color: #6b7280;
+            font-weight: 400;
+            max-width: 600px;
+            margin: 0.5rem auto 0;
         }
 
+        /* Section Styling */
         .section {
-            margin-bottom: 2rem;
+            margin-bottom: 2.5rem;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+            padding: 0 1rem;
         }
 
         .section-title {
-            font-size: 2rem;
+            font-size: 1.5rem;
             font-weight: 600;
-            color: #1a202c;
-            margin-bottom: 0.5rem;
+            color: #1f2a44;
+            margin-bottom: 1rem;
             display: flex;
             align-items: center;
             gap: 0.5rem;
         }
 
         .section-text {
-            font-size: 1.1rem;
-            color: #4a5568;
-            line-height: 1.5;
+            font-size: 0.95rem;
+            color: #6b7280;
+            line-height: 1.6;
             max-width: 800px;
             margin: 0 auto;
         }
 
-        .stSidebar {
-            background: #ffffff;
-            border-right: 1px solid #e5e7eb;
+        /* Team Section */
+        .team-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 1.5rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
         }
 
-        .stSidebar .sidebar-content {
-            padding: 1rem;
+        .team-card {
+            background: #f9fafb;
+            padding: 1.5rem;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+            text-align: center;
+            transition: transform 0.2s ease;
+        }
+
+        .team-card:hover {
+            transform: translateY(-3px);
+        }
+
+        .team-card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #1f2a44;
+            margin-bottom: 0.5rem;
+        }
+
+        .team-card-role {
+            font-size: 1rem;
+            color: #3b82f6;
+            margin-bottom: 1rem;
+        }
+
+        .team-card-text {
+            font-size: 0.9rem;
+            color: #6b7280;
+            line-height: 1.4;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .team-card-text a {
+            color: #3b82f6;
+            text-decoration: none;
+        }
+
+        .team-card-text a:hover {
+            text-decoration: underline;
+        }
+
+        /* Footer */
+        .footer {
+            border-top: 1px solid #e5e7eb;
+            padding: 1.5rem 0;
+            text-align: center;
+            max-width: 1200px;
+            margin: 2rem auto 0;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .main-container {
+                padding: 1rem;
+            }
+            .section {
+                padding: 0 0.5rem;
+            }
+            .team-container {
+                padding: 0 0.5rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header-title {
+                font-size: 1.75rem;
+            }
+            .header-subtitle {
+                font-size: 0.9rem;
+            }
+            .section-title {
+                font-size: 1.25rem;
+            }
+            .section-text {
+                font-size: 0.9rem;
+            }
+            .team-card-title {
+                font-size: 1.1rem;
+            }
+            .team-card-role {
+                font-size: 0.9rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header-title {
+                font-size: 1.5rem;
+            }
+            .header-subtitle {
+                font-size: 0.85rem;
+            }
+            .section-title {
+                font-size: 1.1rem;
+            }
+            .section-text {
+                font-size: 0.85rem;
+            }
+            .team-card-title {
+                font-size: 1rem;
+            }
+            .team-card-role {
+                font-size: 0.85rem;
+            }
+            .team-card-text {
+                font-size: 0.8rem;
+            }
         }
     </style>
     """, unsafe_allow_html=True)
 
+    # Main Container
+    st.markdown('<div class="main-container">', unsafe_allow_html=True)
 
-    # Header
+    # Header Section
     st.markdown("""
-    <div class="header">
-        <div class="container">
-            <h1 class="header-title">🛡️ TruthCheck</h1>
-        </div>
+    <div class="header-section">
+        <h1 class="header-title">📋 TruthCheck - Advanced Fake News Detector</h1>
+        <p class="header-subtitle">Empowering you to uncover the truth</p>
     </div>
     """, unsafe_allow_html=True)
 
     # About Content
     st.markdown("""
-    <div class="container">
-        <div class="section">
-            <h2 class="section-title">ℹ️ About TruthCheck</2>
-            <p class="section-text">
-                TruthCheck is an advanced fake news detection platform powered by cutting-edge AI technology. Our mission is to empower users to distinguish between authentic information and misinformation in an era of digital overload.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">🚀 Our Mission</h3>
-            <p class="section-text">
-                We aim to combat misinformation by providing a reliable, user-friendly tool that analyzes news articles with high accuracy. TruthCheck leverages a hybrid BERT-BiLSTM model to detect linguistic patterns and contextual cues, ensuring you can trust the news you read.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">🧠 Our Technology</h3>
-            <p class="section-text">
-                TruthCheck combines BERT's natural language understanding with BiLSTM's sequential processing to achieve state-of-the-art fake news detection. Our model analyzes text for credibility, sentiment, and context, delivering results with confidence scores and attention visualizations.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">🌍 Why It Matters</h3>
-            <p class="section-text">
-                In a world where misinformation spreads rapidly, TruthCheck stands as a guardian of truth. Whether you're a journalist, researcher, or concerned citizen, our tool helps you make informed decisions by verifying the authenticity of news content.
-            </p>
+    <div class="section">
+        <h2 class="section-title">ℹ️ About TruthCheck</h2>
+        <p class="section-text">
+            TruthCheck is a cutting-edge platform designed to combat misinformation by analyzing news articles for authenticity. Powered by advanced AI, our mission is to empower users—journalists, researchers, and everyday citizens—to make informed decisions in an era of digital information overload.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">🚀 Our Mission</h3>
+        <p class="section-text">
+            We strive to promote transparency and trust in information by providing a reliable, user-friendly tool for fake news detection. TruthCheck leverages state-of-the-art AI models to deliver accurate, transparent results, helping users distinguish credible news from misinformation.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">🧠 Our Technology</h3>
+        <p class="section-text">
+            TruthCheck combines BERT's natural language understanding with BiLSTM's sequential processing to deliver robust fake news detection. Our hybrid model analyzes text for linguistic patterns, sentiment, and context, providing results with confidence scores and attention visualizations for deeper insights.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">📋 How to Use TruthCheck</h3>
+        <p class="section-text">
+            Using TruthCheck is simple and intuitive:
+            <ul>
+                <li><strong>Submit an Article</strong>: Paste the text of a news article or a URL into our analysis tool.</li>
+                <li><strong>Get Results</strong>: Our AI processes the content and provides a credibility score with detailed insights.</li>
+                <li><strong>Explore Insights</strong>: Review attention visualizations and contextual analysis to understand the results.</li>
+                <li><strong>Contact Us</strong>: Reach out via our contact form for support or feedback.</li>
+            </ul>
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">🌍 Why TruthCheck Matters</h3>
+        <p class="section-text">
+            In a world where misinformation can spread rapidly, TruthCheck serves as a vital tool for verifying information. Whether you're validating news for research, journalism, or personal knowledge, our platform ensures you can trust the content you consume.
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Team Section
+    st.markdown("""
+    <div class="section">
+        <h2 class="section-title">👥 Our Team</h2>
+        <div class="team-container">
+            <div class="team-card">
+                <h3 class="team-card-title">Muhammad Adnan Tariq</h3>
+                <p class="team-card-role">AI Specialist</p>
+                <p class="team-card-text"><span>📧</span> <strong>Email</strong>: <a href="mailto:[email protected]">[email protected]</a></p>
+                <p class="team-card-text"><span>📞</span> <strong>Phone</strong>: +92336-6569117</p>
+                <p class="team-card-text"><span>🔗</span> <strong>LinkedIn</strong>: <a href="https://www.linkedin.com/in/adnaantariq/">Linkedin</a></p>
+                <p class="team-card-text"><span>🔗</span> <strong>GitHub</strong>: <a href="https://github.com/adnaan-tariq">GitHub</a></p>
+            </div>
+            <div class="team-card">
+                <h3 class="team-card-title">Muhammad Khaqan Nasir</h3>
+                <p class="team-card-role">Lead Developer</p>
+                <p class="team-card-text"><span>📧</span> <strong>Email</strong>: <a href="mailto:[email protected]">[email protected]</a></p>
+                <p class="team-card-text"><span>📞</span> <strong>Phone</strong>: +92309-1111977</p>
+                <p class="team-card-text"><span>🔗</span> <strong>LinkedIn</strong>: <a href="https://www.linkedin.com/in/khaqan-nasir/">Linkedin</a></p>
+                <p class="team-card-text"><span>🔗</span> <strong>GitHub</strong>: <a href="https://github.com/KhaqanNasir">GitHub</a></p>
+            </div>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
+    # Footer
+    st.markdown("---")
+    st.markdown(
+        '<p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2025</p>',
+        unsafe_allow_html=True
+    )
+
+    st.markdown('</div>', unsafe_allow_html=True)  # Close main-container
+
 if __name__ == "__main__":
     main()