src/about.py

import streamlit as st

def main():
    # Custom 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');

        .stApp {
            font-family: 'Poppins', sans-serif;
            background: #f8fafc;
            min-height: 100vh;
            color: #1a202c;
        }

        #MainMenu {visibility: visible;}
        footer {visibility: hidden;}
        .stDeployButton {display: none;}
        header {visibility: hidden;}
        .stApp > header {visibility: hidden;}

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem;
        }

        .header {
            padding: 1.5rem 0;
            text-align: center;
        }

        .header-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1a202c;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .section {
            margin-bottom: 2rem;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .section-text {
            font-size: 1.1rem;
            color: #4a5568;
            line-height: 1.5;
            max-width: 800px;
            margin: 0 auto;
        }

        .stSidebar {
            background: #ffffff;
            border-right: 1px solid #e5e7eb;
        }

        .stSidebar .sidebar-content {
            padding: 1rem;
        }
    </style>
    """, unsafe_allow_html=True)


    # Header
    st.markdown("""
    <div class="header">
        <div class="container">
            <h1 class="header-title">🛡️ TruthCheck</h1>
        </div>
    </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>
    </div>
    """, unsafe_allow_html=True)

if __name__ == "__main__":
    main()