src/about.py

import streamlit as st

def main():
    # Updated CSS for About page
    st.markdown("""
    <style>
        @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 {
            background: #ffffff;
            min-height: 100vh;
            color: #1f2a44;
            margin: 0 !important;
            padding: 0 !important;
        }

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

        /* Main Container */
        .main-container {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
            padding: 1rem 2rem;
        }

        /* Header Section */
        .header-section {
            text-align: center;
            margin-bottom: 2.5rem;
            padding: 1.5rem 0;
        }

        .header-title {
            font-size: 2.25rem;
            font-weight: 700;
            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: 2.5rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 1rem;
        }

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

        .section-text {
            font-size: 0.95rem;
            color: #6b7280;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
        }

        /* 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;
        }

        .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 Section
    st.markdown("""
    <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="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:adnantariq966@gmail.com">adnantariq966@gmail.com</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:khaqannasir01@gmail.com">khaqannasir01@gmail.com</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()