import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown(
        """
        <div style="text-align: center; margin-bottom: 20px;">
            <h1>📋 Information Display</h1>
            <p>Two information boxes centered on screen</p>
            <p style="font-size: 0.9em; color: #666;">
                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #6366f1; text-decoration: none;">
                    Built with anycoder
                </a>
            </p>
        </div>
        """
    )
    
    with gr.Row():
        gr.Column(scale=1)
        
        with gr.Column(scale=2):
            with gr.Group():
                gr.Markdown(
                    """
                    ## 🌟 Information Box 1
                    
                    This is the first information box. It contains important details 
                    that you want to display to your users.
                    
                    **Key Features:**
                    - Easy to read layout
                    - Clean design
                    - Responsive styling
                    """
                )
            
            gr.Markdown("<br>")
            
            with gr.Group():
                gr.Markdown(
                    """
                    ## 🚀 Information Box 2
                    
                    This is the second information box. You can use it to show 
                    additional content or complementary information.
                    
                    **Benefits:**
                    - Organized content
                    - Visual separation
                    - Professional appearance
                    """
                )
        
        gr.Column(scale=1)

demo.launch(
    theme=gr.themes.Soft(
        primary_hue="indigo",
        secondary_hue="blue",
        neutral_hue="slate"
    ),
    footer_links=[
        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
    ]
)