{% extends "layout.html" %}
{% load static %}

{% block title %}Welcome to BCPBD{% endblock %}

{% block content %}
<div class="pb-16 pt-8 space-y-12">

    <!-- Introduction Section -->
    <div class="text-center max-w-full lg:max-w-6xl mx-auto">
        <h1 class="text-2xl lg:text-3xl xl:text-4xl font-bold text-sky-600">Welcome to the Breast Cancer Portal of Bangladesh</h1>
        <p class="text-xl lg:text-2xl xl:text-2xl text-blue-900 mt-4">
            Your comprehensive resource for clinical and genetic information on breast cancer.
        </p>
        
    </div>

    <!-- Cards Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">

        <!-- Patient Information Card -->
        <a href="/patient-information/" class="group block bg-white shadow-md shadow-sky-100 rounded-lg border border-gray-300 hover:shadow-lg hover:shadow-sky-100 hover:border-sky-600 transition duration-300">
            <div class="p-6 text-center">
                <div class="rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">
                    <img src="{% static 'images/medical-record.png' %}" alt="">
                </div>
                <h2 class="text-2xl font-semibold text-gray-800 transition">Patient Information</h2>
                <p class="text-gray-600 mt-2">
                    Explore comprehensive resources to learn more about breast cancer and its treatment.
                </p>
            </div>
            <div class="bg-gray-100 py-4 text-center rounded-b-lg group-hover:bg-sky-600">
                <span class="text-sky-600 font-medium group-hover:text-white transition">Explore →</span>
            </div>
        </a>

        <!-- Research Tools Card -->
        <a href="/research-tools/" class="group block bg-white shadow-md shadow-sky-100 rounded-lg border border-gray-300 hover:shadow-lg hover:shadow-sky-100 hover:border-sky-600 transition duration-300">
            <div class="p-6 text-center">
                <div class="rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">
                    <img src="{% static 'images/medical-research.png' %}" alt="">
                </div>
                <h2 class="text-2xl font-semibold text-gray-800 transition">Research Tools</h2>
                <p class="text-gray-600 mt-2">
                    Access powerful tools to analyze clinical and genomic information for research and insights.
                </p>
            </div>
            <div class="bg-gray-100 py-4 text-center rounded-b-lg group-hover:bg-sky-600">
                <span class="text-sky-600 font-medium group-hover:text-white transition">Explore →</span>
            </div>
        </a>

        <!-- Breast Cancer Resources Card -->
        <a href="/breast-cancer-resources/" class="group block bg-white shadow-md shadow-sky-100 rounded-lg border border-gray-300 hover:shadow-lg hover:shadow-sky-100 hover:border-sky-600 transition duration-300">
            <div class="p-6 text-center">
                <div class="rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">
                    <img src="{% static 'images/billboard.png' %}" alt="">
                </div>
                <h2 class="text-2xl font-semibold text-gray-800 transition">Breast Cancer Resources</h2>
                <p class="text-gray-600 mt-2">
                    Discover additional resources to understand and manage breast cancer effectively.
                </p>
            </div>
            <div class="bg-gray-100 py-4 text-center rounded-b-lg group-hover:bg-sky-600">
                <span class="text-sky-600 font-medium group-hover:text-white transition">Explore →</span>
            </div>
        </a>

    </div>
    <div class="text-center max-w-full lg:max-w-6xl mx-auto">
        <p class="text-lg lg:text-xl xl:text-xl text-dark mt-2">
            Learn about breast cancer, its subtypes, and treatments. Access powerful tools for analyzing clinical and genomic information to aid research and improve patient care.
        </p>
    </div>

    
</div>
{% endblock %}