<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Diseñar página web joomla para que sea RENTABLE. SoloJoomla Diseños profesionales para posicionar tu web.">
    <!-- Optimización para motores de búsqueda de Rank Math -  https://rankmath.com/ -->
<title>SoloJoomla - Diseño Web y SEO con Joomla</title>
<link rel="canonical" href="https://www.solojoomla.com/" />
<meta name="description" content="Diseñar página web joomla para que sea RENTABLE. SoloJoomla Diseños profesionales para posicionar tu web."/>
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/>
<meta property="og:locale" content="es_ES"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="SoloJoomla - Diseño Web y SEO con Joomla"/>
<meta property="og:description" content="Diseñar página web joomla para que sea RENTABLE. SoloJoomla Diseños profesionales para posicionar tu web."/>
<meta property="og:url" content="https://www.solojoomla.com/"/>
<meta property="og:site_name" content="Solo Joomla en Español"/>
<meta property="og:updated_time" content="2024-05-24T16:03:47+00:00"/>
<meta property="article:published_time" content="2019-05-21T20:28:32+00:00"/>
<meta property="article:modified_time" content="2026-05-07T16:03:47+00:00"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="SoloJoomla - Diseño Web y SEO con Joomla"/>
<meta name="twitter:description" content="Diseñar página web joomla para que sea RENTABLE. SoloJoomla Diseños profesionales para posicionar tu web."/>
<meta name="twitter:creator" content="@solojoomla"/>
<meta name="twitter:label1" content="Escrito por"/>
<meta name="twitter:data1" content="Redactor Solojoomla"/>
<meta name="twitter:label2" content="Tiempo de lectura"/>
<meta name="twitter:data2" content="10 minutos"/>
<link rel="icon" href="img/favicon.ico" sizes="32x32"/>
<link rel="icon" href="img/favicon.ico" sizes="192x192"/>
<link rel="apple-touch-icon" href="img/favicon.ico"/>
<script type="application/ld+json" class="rank-math-schema">{"@context":"https://schema.org","@graph":[{"@type":["Person","Organization"],"@id":"https://www.solojoomla.com/#person","name":"Redactor Solojoomla","logo":{"@type":"ImageObject","@id":"https://www.solojoomla.com/#logo","url":"https://www.solojoomla.com/img/logo.png","contentUrl":"https://www.solojoomla.com/img/logo.png","caption":"Redactor Solojoomla","inLanguage":"es","width":"380","height":"80"},"image":{"@type":"ImageObject","@id":"https://www.solojoomla.com/#logo","url":"https://www.solojoomla.com/img/logo.png","contentUrl":"https://www.solojoomla.com/img/logo.png","caption":"Redactor Solojoomla","inLanguage":"es","width":"380","height":"80"}},{"@type":"WebSite","@id":"https://www.solojoomla.com/#website","url":"https://solojoomla.com","name":"Redactor Solojoomla","publisher":{"@id":"https://www.solojoomla.com/#person"},"inLanguage":"es","potentialAction":{"@type":"SearchAction","target":"https://www.solojoomla.com/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"ImageObject","@id":"https://www.solojoomla.com/img/galeria-imagenes.jpg","url":"https://www.solojoomla.com/img/galeria-imagenes.jpg","width":"200","height":"200","inLanguage":"es"},{"@type":"WebPage","@id":"https://www.solojoomla.com/#webpage","url":"https://www.solojoomla.com/","name":"Joomla - Dise\u00f1o Y Posicionamiento Web Con Joomla","datePublished":"2019-05-21T20:28:32+00:00","dateModified":"2024-05-24T16:03:47+00:00","about":{"@id":"https://www.solojoomla.com/#person"},"isPartOf":{"@id":"https://www.solojoomla.com/#website"},"primaryImageOfPage":{"@id":"https://www.solojoomla.com/img/galeria-imagenes.jpg"},"inLanguage":"es"},{"@type":"Article","headline":"Joomla - Dise\u00f1o Y Posicionamiento Web Con Joomla","datePublished":"2019-05-21T20:28:32+00:00","dateModified":"2024-05-24T16:03:47+00:00","author":{"@type":"Person","name":"Redactor Solojoomla"},"description":"Dise\u00f1a tu p\u00e1gina web para que sea RENTABLE. Joomla es una opci\u00f3n v\u00e1lida para cualquier proyecto. Dise\u00f1os profesionales, r\u00e1pidas para posicionar tu web en google","name":"Joomla - Dise\u00f1o Y Posicionamiento Web Con Joomla","@id":"https://www.solojoomla.com/#schema-1389469","isPartOf":{"@id":"https://www.solojoomla.com/#webpage"},"publisher":{"@id":"https://www.solojoomla.com/#person"},"image":{"@id":"https://www.solojoomla.com/img/galeria-imagenes.jpg"},"inLanguage":"es","mainEntityOfPage":{"@id":"https://www.solojoomla.com/#webpage"}}]}</script>

    
    <!-- Tailwind CSS untuk Styling Cepat dan Responsif -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- FontAwesome untuk Ikon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    
    <style>
        body { font-family: 'Inter', sans-serif; }
        /* Smooth scrolling untuk jangkar link */
        html { scroll-behavior: smooth; }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 antialiased">

    <!-- TOP BAR -->
    <div class="bg-gray-900 text-gray-300 text-xs py-2 hidden md:block">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex space-x-4">
                <a href="#" class="hover:text-white transition">Iniciar sesión</a>
                <a href="#" class="hover:text-white transition">REGISTRO</a>
                <a href="#" class="hover:text-white transition">Calcular precio web Profesional</a>
            </div>
            <div class="flex space-x-4">
                <a href="#" class="hover:text-white transition">Mi Perfil</a>
                <a href="#" class="hover:text-white transition">Manuales Joomla!</a>
                <a href="#" class="hover:text-white transition">Mapa Web</a>
            </div>
        </div>
    </div>

    <!-- HEADER & NAVIGATION -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center text-center md:text-left flex-col md:flex-row gap-4">
                <!-- Logo -->
                <a href="#" class="flex flex-col items-center md:items-start text-gray-800">
                    <span class="text-xs text-gray-500 uppercase tracking-widest">Gestor de contenidos Joomla para crear tu web</span>
                    <span class="text-3xl font-bold text-blue-900 tracking-tighter">SOLOJOOMLA<span class="text-gray-500 text-lg">.COM</span></span>
                </a>

                <!-- Nav -->
                <nav>
                    <ul class="flex flex-wrap justify-center space-x-6 text-sm font-semibold text-gray-700">
                        <li><a href="#" class="hover:text-blue-600 transition">Foros</a></li>
                        <li><a href="#" class="hover:text-blue-600 transition">Blogs <i class="fas fa-chevron-down text-xs"></i></a></li>
                        <li><a href="#" class="hover:text-blue-600 transition">Servicios <i class="fas fa-chevron-down text-xs"></i></a></li>
                        <li><a href="#" class="hover:text-blue-600 transition">Recursos</a></li>
                        <li><a href="#" class="hover:text-blue-600 transition">Videos <i class="fas fa-chevron-down text-xs"></i></a></li>
                        <li><a href="#" class="text-gray-400 hover:text-blue-600 transition"><i class="fas fa-search"></i></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <main>
        <!-- HERO SECTION (H1 ada di sini untuk SEO) -->
        <section class="bg-white py-16 lg:py-24 text-center border-b border-gray-100">
            <div class="container mx-auto px-4 max-w-4xl">
                <h1 class="text-4xl lg:text-5xl font-bold text-blue-900 mb-6 leading-tight">
                   SoloJoomla Diseño y Posicionamiento Web con Joomla
                </h1>
                <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                    <a href="/" class="text-blue-600 hover:underline">Joomla</a> es un GESTOR de CONTENIDOS web dinámico que permite crear una web para empresa, un directorio online, un blog, una Tienda Online, una web para vender cursos online. Puede convertirse en cualquier tipo de web y <strong>no es necesario saber programar</strong>, gracias a las extensiones Joomla creadas por usuarios de la comunidad.
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-full transition shadow-lg hover:shadow-xl">
                        Descargar Joomla
                    </a>
                    <a href="#" class="bg-white border-2 border-blue-600 text-blue-600 hover:bg-blue-50 font-semibold py-3 px-8 rounded-full transition">
                        Instalar Joomla en Español
                    </a>
                </div>
            </div>
        </section>

        <!-- 6 COSAS QUE PUEDES HACER (Grid Section) -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <header class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-blue-900">6 cosas que puedes hacer con joomla y debes saber</h2>
                    <div class="w-24 h-1 bg-blue-600 mx-auto mt-4 rounded"></div>
                </header>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Card 1 -->
                    <article class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100 text-center">
                        <div class="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Tipos de Webs</h3>
                        <p class="text-sm text-gray-600">Diseña tu página web con Joomla, de arquitectura avanzada, funciones de administración y parte pública, con <strong>plantillas personalizables</strong> para obtener el aspecto relacionado con tu actividad.</p>
                    </article>

                    <!-- Card 2 -->
                    <article class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100 text-center">
                        <div class="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
                            <i class="fas fa-question-circle"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Resolución de Problemas</h3>
                        <p class="text-sm text-gray-600">Es muy probable que tu mismo lo puedas arreglar con la ayuda de los <strong>Foros de joomla</strong>, leyendo tutoriales o visionando videos joomla sobre resolución de problemas.</p>
                    </article>

                    <!-- Card 3 -->
                    <article class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100 text-center">
                        <div class="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Mantenimiento y seguridad</h3>
                        <p class="text-sm text-gray-600">La seguridad va ligada al mantenimiento y actualizaciones de su sistema. Joomla Projects cuida mucho la seguridad, pero puedes sufrir un revés si no actualizas.</p>
                    </article>

                    <!-- Card 4 -->
                    <article class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100 text-center">
                        <div class="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
                            <i class="fas fa-code"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Creación de extensiones</h3>
                        <p class="text-sm text-gray-600">Crear una extensión joomla a medida para satisfacer tus objetivos es una tarea que requiere de un análisis previo y conocimientos en programación.</p>
                    </article>

                    <!-- Card 5 -->
                    <article class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100 text-center">
                        <div class="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Crear Tiendas Online</h3>
                        <p class="text-sm text-gray-600">Crear una tienda online va más allá de la creación de la propia tienda. Es necesario aplicar técnicas de marketing y diseño orientado a móviles.</p>
                    </article>

                    <!-- Card 6 -->
                    <article class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100 text-center">
                        <div class="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
                            <i class="fas fa-search-location"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Posicionar mejor tu web</h3>
                        <p class="text-sm text-gray-600">Posicionarse de forma adecuada en los buscadores (SEO) es la consecuencia de un desarrollo de programación web realizado con eficacia y respeto a los algoritmos.</p>
                    </article>
                </div>
            </div>
        </section>

        <!-- HIGHLIGHT: JOOMLA 5 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 text-center">
                <header class="mb-10">
                    <span class="text-blue-600 font-semibold tracking-wider uppercase text-sm">Última versión Joomla</span>
                    <h2 class="text-3xl font-bold text-blue-900 mt-2">Es una actualización de joomla 4 y no una nueva versión joomla</h2>
                </header>
                
                <div class="max-w-5xl mx-auto bg-gray-50 rounded-2xl overflow-hidden shadow-lg border border-gray-200">
                    <img src="img/joomla-5.jpg" alt="Joomla 5 Release Logo Placeholder" class="w-full h-64 md:h-96 object-cover">
                    <div class="p-8 text-left">
                        <h3 class="text-3xl font-bold text-blue-900 mb-4">Joomla 5</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Novedades de Joomla 5 Lanzamiento: Joomla 5 fue lanzado el 19 de octubre de 2023. Compatibilidad PHP: Joomla 5 requiere PHP 8.1 o superior. Plantillas y extensiones: Joomla 5 no incluye cambios de ruptura para plantillas y Solojoomla extensiones de terceros. Mejoras de rendimiento y seguridad integradas.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- TUTORIALS & ARTICLES (Combined Section for better structure) -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <header class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-blue-900">Tutoriales, Extensiones y Manuales</h2>
                    <p class="text-gray-500 mt-2">Aprende cómo funciona y cómo instalar herramientas en Joomla</p>
                    <div class="w-24 h-1 bg-blue-600 mx-auto mt-4 rounded"></div>
                </header>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Article 1 -->
                    <article class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=800&auto=format&fit=crop" alt="Instalar componente en Joomla 3" class="w-full h-48 object-cover">
                        <div class="p-6 flex-grow">
                            <h3 class="text-xl font-bold text-gray-900 mb-2"><a href="#" class="hover:text-blue-600">Extension joomla - Como instalar un Componente Joomla en 3 pasos</a></h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Por regla general TODAS las extensiones de Joomla, siguen el mismo procedimiento para su instalación y los componentes joomla siendo la base de nuestra web...</p>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-100 text-sm text-blue-600 font-semibold">
                            <a href="#">Leer tutorial &rarr;</a>
                        </div>
                    </article>

                    <!-- Article 2 -->
                    <article class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition">
                        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop" alt="Instalar Template Joomla" class="w-full h-48 object-cover">
                        <div class="p-6 flex-grow">
                            <h3 class="text-xl font-bold text-gray-900 mb-2"><a href="#" class="hover:text-blue-600">Instalar y Personalizar Template Joomla</a></h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Para personalizar <a href="/"><b>Solojoomla</b></a> template, en la mayoría de las ocasiones que nos disponemos a instalar y probar un template, en lo primero que nos fijamos es en la imagen que acompaña dicho template...</p>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-100 text-sm text-blue-600 font-semibold">
                            <a href="#">Leer tutorial &rarr;</a>
                        </div>
                    </article>

                    <!-- Article 3 -->
                    <article class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition">
                        <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=800&auto=format&fit=crop" alt="Copia de seguridad en Joomla" class="w-full h-48 object-cover">
                        <div class="p-6 flex-grow">
                            <h3 class="text-xl font-bold text-gray-900 mb-2"><a href="#" class="hover:text-blue-600">Copia de seguridad y Restauración de la copia Joomla!</a></h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Realizar una copia de seguridad de nuestro joomla!, no es algo que se realice todas las veces que se debería y podría ser necesario o útil para salvaguardar la estructura creada...</p>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-100 text-sm text-blue-600 font-semibold">
                            <a href="#">Leer tutorial &rarr;</a>
                        </div>
                    </article>
                    
                    <!-- Article 4 -->
                    <article class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" alt="Eliminar cache joomla" class="w-full h-48 object-cover">
                        <div class="p-6 flex-grow">
                            <h3 class="text-xl font-bold text-gray-900 mb-2"><a href="#" class="hover:text-blue-600">Eliminar cache de joomla de forma auto periódica</a></h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Es sabido que la carga que a veces soporta la cache de nuestro joomla nos resta espacio en nuestro hosting y puede llegar a ralentizar nuestra web. Si tomamos los consejos de aumentar el tiempo de la cache...</p>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-100 text-sm text-blue-600 font-semibold">
                            <a href="#">Leer tutorial &rarr;</a>
                        </div>
                    </article>
                    
                    <!-- Article 5 -->
                    <article class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition">
                        <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=800&auto=format&fit=crop" alt="Cobrar con tarjeta TPV" class="w-full h-48 object-cover">
                        <div class="p-6 flex-grow">
                            <h3 class="text-xl font-bold text-gray-900 mb-2"><a href="#" class="hover:text-blue-600">Cómo cobrar con tarjeta sin TPV virtual</a></h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Cobrar con tarjeta sin TPV... ¿Cuantas veces nos hemos hecho esa pregunta? Para evitar todo el papeleo de los bancos y sus elevados intereses por un servicio prestado...</p>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-100 text-sm text-blue-600 font-semibold">
                            <a href="#">Leer tutorial &rarr;</a>
                        </div>
                    </article>

                    <!-- Article 6 -->
                    <article class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition">
                        <div class="bg-blue-900 h-48 flex items-center justify-center">
                            <span class="text-white text-4xl font-bold">TYPO</span>
                        </div>
                        <div class="p-6 flex-grow">
                            <h3 class="text-xl font-bold text-gray-900 mb-2"><a href="#" class="hover:text-blue-600">Cufón, Fuentes tipográficas con estilo propio para Joomla</a></h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Cómo crear y personalizar fuentes tipográficas con estilo propio e incluirlas en joomla, se hace mas sencillo con la ayuda de plugins joomla...</p>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-100 text-sm text-blue-600 font-semibold">
                            <a href="#">Leer tutorial &rarr;</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- FAQ SECTION (Good for SEO Schema markup theoretically) -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 max-w-5xl">
                <header class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-blue-900">6 Preguntas que te puedes estar haciendo</h2>
                    <div class="w-24 h-1 bg-blue-600 mx-auto mt-4 rounded"></div>
                </header>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Q1 -->
                    <div class="border-l-4 border-blue-600 pl-4">
                        <h3 class="font-bold text-lg mb-2">¿En qué y cómo me va a beneficiar utilizar Joomla?</h3>
                        <p class="text-gray-600 text-sm">Usar un CMS, abreviatura de Gestor de contenidos, te permite poder crear tu propia tienda online, tu blog... al tiempo de poder administrar, actualizar tu web, publicar textos, videos, fotos... <strong>No necesitaras a nadie para tener tu información al día.</strong></p>
                    </div>
                    <!-- Q2 -->
                    <div class="border-l-4 border-blue-600 pl-4">
                        <h3 class="font-bold text-lg mb-2">¿Voy a ganar dinero con mi Tienda Online?</h3>
                        <p class="text-gray-600 text-sm">Si vas a ganar dinero depende de como te tomes el día a día para atender esa tienda online. La competencia en internet es feroz, pero <strong>Sí se puede</strong> siendo constante.</p>
                    </div>
                    <!-- Q3 -->
                    <div class="border-l-4 border-blue-600 pl-4">
                        <h3 class="font-bold text-lg mb-2">¿Cuanto tiempo tardare en recuperar mi inversión?</h3>
                        <p class="text-gray-600 text-sm">Toda inversión en la que recuperas la inversión antes de los dos primeros años, es factible y debe hacerse.</p>
                    </div>
                    <!-- Q4 -->
                    <div class="border-l-4 border-blue-600 pl-4">
                        <h3 class="font-bold text-lg mb-2">¿Es complicado personalizar Joomla?</h3>
                        <p class="text-gray-600 text-sm">Con la ayuda de los framework template que utiliza joomla para formar el aspecto de joomla, hoy día es bastante sencillo.</p>
                    </div>
                    <!-- Q5 -->
                    <div class="border-l-4 border-blue-600 pl-4">
                        <h3 class="font-bold text-lg mb-2">¿Cuanto cuesta Joomla?</h3>
                        <p class="text-gray-600 text-sm">Joomla tiene licencia GNU, y su coste es cero.</p>
                    </div>
                    <!-- Q6 -->
                    <div class="border-l-4 border-blue-600 pl-4">
                        <h3 class="font-bold text-lg mb-2">¿Que necesito a parte del propio joomla para que funcione?</h3>
                        <p class="text-gray-600 text-sm">Se necesita un alojamiento web para subir los archivos de joomla y crear una base de datos. Es suficiente con un hosting con php 7.3 mínimo y MySQL 5.5.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- CALL TO ACTION -->
        <section class="bg-red-600 py-12 text-center text-white">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl md:text-3xl font-bold mb-6">Elige presupuesto o estimación de lo que necesitas para tu desarrollo web</h2>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <button class="bg-white text-red-600 font-bold py-3 px-6 rounded shadow hover:bg-gray-10 transition">
                        Estimación desarrollo web
                    </button>
                    <button class="bg-white text-red-600 font-bold py-3 px-6 rounded shadow hover:bg-gray-10 transition">
                        Presupuesto web
                    </button>
                </div>
            </div>
        </section>

    </main>

    <!-- FOOTER -->
    <footer class="bg-gray-200 pt-16 pb-8 border-t border-gray-300">
        <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
            
            <div>
                <h3 class="text-lg font-bold text-gray-800 mb-4">Ayuda Joomla - Debates recientes</h3>
                <ul class="text-sm text-gray-600 space-y-2">
                    <li><a href="#" class="hover:text-blue-600">Rapidez de ejecución de videoblog y foro</a></li>
                    <li><a href="#" class="hover:text-blue-600">Carga lenta de inicio</a></li>
                    <li><a href="#" class="hover:text-blue-600">Radio en joomla</a></li>
                    <li><a href="#" class="hover:text-blue-600">Quickstart templates joomla 4</a></li>
                    <li><a href="#" class="hover:text-blue-600">Dos webs en un solo joomla</a></li>
                    <li><a href="#" class="hover:text-blue-600">Joomla 4 en Español</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-bold text-gray-800 mb-4">Lo que hacemos aquí</h3>
                <ul class="text-sm text-gray-600 space-y-2">
                    <li><a href="#" class="hover:text-blue-600">Webs para Empresas y Particulares</a></li>
                    <li><a href="#" class="hover:text-blue-600">Tiendas Online Rentables</a></li>
                    <li><a href="#" class="hover:text-blue-600">Averigua el precio de tu web</a></li>
                    <li><a href="#" class="hover:text-blue-600">Ayudamos de forma gratuita</a></li>
                    <li><a href="#" class="hover:text-blue-600">Posicionar web en Google</a></li>
                    <li><a href="#" class="hover:text-blue-600">Servicio mantenimiento web</a></li>
                </ul>
            </div>

            <div class="lg:col-span-2">
                <h3 class="text-lg font-bold text-gray-800 mb-4">Últimas extensiones actualizadas</h3>
                <div class="space-y-4">
                    <a href="#" class="flex items-center space-x-4 group">
                        <div class="w-12 h-12 bg-white rounded flex items-center justify-center text-xl text-blue-600 border border-gray-300 group-hover:border-blue-500 transition">
                            <i class="fas fa-users"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-bold text-gray-800 group-hover:text-blue-600 transition">Jomsocial vs Community Builder</h4>
                        </div>
                    </a>
                    <a href="#" class="flex items-center space-x-4 group">
                        <div class="w-12 h-12 bg-white rounded flex items-center justify-center text-xl text-blue-600 border border-gray-300 group-hover:border-blue-500 transition">
                            <i class="fas fa-puzzle-piece"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-bold text-gray-800 group-hover:text-blue-600 transition">Plugin Joomla contenidos relacionados</h4>
                        </div>
                    </a>
                </div>
            </div>

        </div>

        <div class="container mx-auto px-4 pt-8 border-t border-gray-300 flex flex-col md:flex-row justify-between items-center text-xs text-gray-500">
            <p>&copy; 2024 <a href="/">SoloJoomla</a> | Desarrollo Web</p>
            <div class="space-x-4 mt-4 md:mt-0">
                <a href="#" class="hover:text-gray-800">Aviso Legal</a>
                <a href="#" class="hover:text-gray-800">Política de Privacidad</a>
                <a href="#" class="hover:text-gray-800">Política de Cookies</a>
            </div>
        </div>
    </footer>

</body>
</html>