Tul xxx Tul

Viewing: index.php

<?php
require_once 'includes/config.php';

$products = [];
$productsError = '';

try {
    $stmt = $pdo->query("SELECT id, name, description, price, image_url FROM products ORDER BY created_at DESC LIMIT 6");
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $productsError = 'No se pudo cargar el catálogo en este momento.';
}

$settingsPath = __DIR__ . '/data/settings.json';
$defaultSettings = [
    'site_name' => SITE_NAME,
    'hero_title' => 'Haz',
    'hero_highlight' => 'eCo',
    'hero_tagline' => 'Transformo tu presencia digital en experiencias memorables: branding, desarrollo y catálogo virtual escalable.',
    'profile_name' => 'Tu Nombre',
    'profile_role' => 'Desarrollador Web | Diseñador',
    'profile_description' => 'Apasionado por crear experiencias digitales memorables y sistemas ligeros que potencian negocios locales.',
    'skills' => ['Branding', 'Catálogo virtual', 'Automatización', 'Responsive design'],
    'contact_email' => 'correo@dominio.com',
    'cta_label' => 'Agenda una llamada',
    'cta_mailto' => 'correo@dominio.com',
    'social' => [
        'facebook' => '',
        'twitter' => '',
        'instagram' => '',
        'linkedin' => '',
        'github' => ''
    ]
];

$settings = $defaultSettings;
if (file_exists($settingsPath)) {
    $settingsData = json_decode(file_get_contents($settingsPath), true);
    if (is_array($settingsData)) {
        $settings = array_replace_recursive($settings, $settingsData);
    }
}

$siteName = $settings['site_name'] ?: SITE_NAME;
$profileDescription = $settings['profile_description'] ?? '';
$profileSkills = $settings['skills'] ?? [];
if (!is_array($profileSkills)) {
    $profileSkills = array_filter(array_map('trim', explode(',', (string) $profileSkills)));
}
$defaultColors = [
    'primary' => '#1a96d3',
    'secondary' => '#ff9e1b',
    'accent' => '#f9b252',
    'light_accent' => '#fcdea8',
    'success' => '#81e29b',
    'danger' => '#f28c8c',
    'dark' => '#2c3e50',
    'gray' => '#7f8c8d',
    'light' => '#f8f9fc'
];
$colors = array_merge($defaultColors, $settings['colors'] ?? []);
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">
    <title><?php echo htmlspecialchars($siteName); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            /* Colores principales */
            --primary-color: <?php echo htmlspecialchars($colors['primary']); ?>;
            --secondary-color: <?php echo htmlspecialchars($colors['secondary']); ?>;
            --accent-color: <?php echo htmlspecialchars($colors['accent']); ?>;
            --light-accent: <?php echo htmlspecialchars($colors['light_accent']); ?>;
            --success-color: <?php echo htmlspecialchars($colors['success']); ?>;
            --danger-color: <?php echo htmlspecialchars($colors['danger']); ?>;
            
            /* Colores neutros */
            --dark-color: <?php echo htmlspecialchars($colors['dark']); ?>;
            --gray-color: <?php echo htmlspecialchars($colors['gray']); ?>;
            --light-color: <?php echo htmlspecialchars($colors['light']); ?>;
            --white: #ffffff;
            
            /* Sombras */
            --shadow-sm: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.1);
            --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Nunito', sans-serif;
            background-color: var(--light-color);
            color: var(--dark-color);
        }

        /* Navegación */
        .top-nav {
            background-color: var(--white);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .top-nav .nav-link {
            color: var(--primary-color);
            font-weight: 600;
            border-radius: 999px;
            padding: 0.4rem 1rem;
            transition: background 0.2s ease;
        }

        .top-nav .nav-link.active,
        .top-nav .nav-link:hover {
            background-color: var(--secondary-color);
            color: var(--white);
        }

        /* Hero */
        .hero {
            background-color: var(--light-accent);
            border-radius: 24px;
            padding: 3rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2rem;
            box-shadow: var(--shadow-md);
        }

        .hero h1 {
            font-size: clamp(2.2rem, 5vw, 3.5rem);
            font-weight: 800;
            color: var(--primary-color);
            line-height: 1.1;
        }

        .hero h1 span {
            color: var(--secondary-color);
        }

        .hero .tagline {
            font-size: 1.25rem;
            color: var(--gray-color);
        }

        .hero-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        /* Tarjeta de perfil */
        .profile-card {
            background: white;
            border-radius: 15px;
            box-shadow: var(--shadow-md);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .profile-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
        
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid white;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            object-fit: cover;
        }
        
        .social-links a {
            color: var(--dark-color);
            font-size: 1.5rem;
            margin: 0 10px;
            transition: color 0.3s ease;
        }
        
        .social-links a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        /* Botones */
        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 600;
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--white);
        }

        .section-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .section-title h3 {
            color: var(--primary-color);
            font-weight: 700;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
        }

        .benefit-card {
            background: var(--white);
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(0,0,0,0.04);
            transition: transform 0.2s ease;
        }

        .benefit-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .benefit-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: var(--light-accent);
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .catalog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
        }

        .product-card {
            border: none;
            border-radius: 20px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: var(--white);
        }

        .product-media {
            position: relative;
            width: 100%;
            padding-top: 65%;
            background-color: #eef2f7;
        }

        .product-media img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-tag {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background-color: var(--secondary-color);
            color: var(--white);
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .product-body {
            flex: 1;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
        }

        .product-price {
            font-weight: 700;
            font-size: 1.25rem;
            color: var(--primary-color);
        }

        .product-footer {
            margin-top: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .plan-card {
            border: none;
            border-radius: 20px;
            box-shadow: var(--shadow-sm);
            padding: 2rem;
            text-align: center;
            background: var(--white);
            border-top: 6px solid var(--primary-color);
            height: 100%;
        }

        .plan-card.highlight {
            border-top-color: var(--secondary-color);
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }
    </style>
</head>
<body>
    <!-- Navegación -->
    <header class="top-nav">
        <nav class="navbar navbar-expand-lg navbar-light py-3">
            <div class="container">
                <a class="navbar-brand d-flex align-items-center" href="#inicio">
                    <img src="assets/images/logotipo_positivo.png" alt="Logo" style="max-height: 36px;" class="me-2">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0 gap-2">
                        <li class="nav-item"><a class="nav-link" href="#beneficios">Beneficios</a></li>
                        <li class="nav-item"><a class="nav-link" href="#catalogo">Servicios</a></li>
                        <li class="nav-item"><a class="nav-link" href="#planes">Planes</a></li>
                        <li class="nav-item"><a class="nav-link" href="#contacto">Contacto</a></li>
                        <li class="nav-item"><a class="nav-link" href="admin/">Admin</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <main class="container py-5" id="inicio">
        <!-- Hero -->
        <section class="hero mb-5">
            <div class="flex-grow-1">
                <p class="text-uppercase fw-bold text-secondary">Momentos que enamoran</p>
                <h1>
                    <?php echo htmlspecialchars($settings['hero_title']); ?>
                    <?php if (!empty($settings['hero_highlight'])): ?>
                        <span><?php echo htmlspecialchars($settings['hero_highlight']); ?></span>
                    <?php endif; ?>
                </h1>
                <p class="tagline"><?php echo htmlspecialchars($settings['hero_tagline']); ?></p>
                <div class="hero-cta">
                    <a href="#contacto" class="btn btn-primary"><i class="fas fa-paper-plane me-2"></i>Empezar proyecto</a>
                    <a href="#catalogo" class="btn btn-outline-primary"><i class="fas a-list me-2"></i>Ver catálogo</a>
                </div>
            </div>
            <div class="profile-card text-center p-4 flex-shrink-0" style="max-width: 360px;">
                <div class="bg-primary py-4 position-relative overflow-hidden rounded-4">
                    <img src="assets/images/logotipo_positivo.png" alt="Logo" class="img-fluid" style="max-height: 45px;">
                    <div class="position-absolute start-50 translate-middle" style="bottom: -75px;">
                        <img src="assets/images/profile-placeholder.jpg" alt="Foto de perfil" class="profile-img img-fluid">
                    </div>
                </div>
                <div style="height: 75px;"></div>
                <h2 class="mb-2"><?php echo htmlspecialchars($settings['profile_name']); ?></h2>
                <p class="text-muted"><?php echo htmlspecialchars($settings['profile_role']); ?></p>
                <div class="social-links mb-3">
                    <?php
                    $socialIcons = [
                        'facebook' => 'fab fa-facebook',
                        'twitter' => 'fab fa-twitter',
                        'instagram' => 'fab fa-instagram',
                        'linkedin' => 'fab fa-linkedin',
                        'github' => 'fab fa-github'
                    ];
                    $hasSocial = false;
                    foreach ($socialIcons as $key => $icon):
                        $url = $settings['social'][$key] ?? '';
                        if (!empty($url)) {
                            $hasSocial = true;
                    ?>
                        <a href="<?php echo htmlspecialchars($url); ?>" target="_blank" rel="noopener">
                            <i class="<?php echo $icon; ?>"></i>
                        </a>
                    <?php }
                    endforeach;
                    if (!$hasSocial): ?>
                        <span class="text-muted small">Agrega tus redes desde Configuración</span>
                    <?php endif; ?>
                </div>
                <a href="mailto:<?php echo htmlspecialchars($settings['cta_mailto']); ?>" class="btn btn-primary w-100"><?php echo htmlspecialchars($settings['cta_label']); ?></a>
            </div>
        </section>

        <!-- Perfil -->
        <section id="perfil" class="mb-5">
            <div class="section-title">
                <h3>Perfil Profesional</h3>
                <p class="text-muted">Un vistazo rápido a mi experiencia y enfoque.</p>
            </div>
            <div class="row g-4 align-items-stretch">
                <div class="col-md-7">
                    <div class="card border-0 shadow-sm h-100 p-4">
                        <h4 class="mb-3">Sobre mí</h4>
                        <p class="text-muted mb-3"><?php echo nl2br(htmlspecialchars($profileDescription)); ?></p>
                        <ul class="list-unstyled d-flex flex-wrap gap-3 mb-0">
                            <li><i class="fas fa-envelope text-primary me-2"></i><?php echo htmlspecialchars($settings['contact_email']); ?></li>
                            <li><i class="fas fa-map-marker-alt text-primary me-2"></i>Disponible remoto</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="card border-0 shadow-sm h-100 p-4">
                        <h4 class="mb-3">Especialidades</h4>
                        <div class="d-flex flex-wrap gap-2">
                            <?php if (!empty($profileSkills)): ?>
                                <?php foreach ($profileSkills as $skill): ?>
                                    <span class="badge rounded-pill" style="background-color: var(--light-accent); color: var(--secondary-color);">
                                        <?php echo htmlspecialchars($skill); ?>
                                    </span>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <span class="text-muted">Agrega tus habilidades desde Configuración.</span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Beneficios -->
        <section id="beneficios" class="mb-5">
            <div class="section-title">
                <h3>Haz que tu negocio resuene</h3>
                <p class="text-muted">Soluciones creativas que conectan con tus clientes en cada punto de contacto.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon"><i class="fas fa-microphone"></i></div>
                    <h5>Locuciones Dinámicas</h5>
                    <p>Narrativas que captan la atención y comunican tu propuesta con claridad.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon"><i class="fas fa-music"></i></div>
                    <h5>Música de Ambiente</h5>
                    <p>Curaduría sonora que refuerza tu identidad y mejora la experiencia.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon"><i class="fas fa-star"></i></div>
                    <h5>Experiencia Premium</h5>
                    <p>Interfaz moderna y ligera para tus clientes y tu equipo.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon"><i class="fas fa-coins"></i></div>
                    <h5>Bajo Costo</h5>
                    <p>Paquetes accesibles con resultados profesionales garantizados.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon"><i class="fas fa-repeat"></i></div>
                    <h5>Automatización</h5>
                    <p>Catálogo y contactabilidad integrados para ahorrar tiempo.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon"><i class="fas fa-heart"></i></div>
                    <h5>Branding Consistente</h5>
                    <p>Usamos tu paleta cromática para mantener coherencia visual.</p>
                </div>
            </div>
        </section>

        <!-- Catálogo -->
        <section id="catalogo" class="mb-5">
            <div class="section-title">
                <h3>Catálogo Virtual</h3>
                <p class="text-muted">Gestión centralizada para tus productos o servicios.</p>
            </div>
            <div class="catalog-grid" id="productos">
                <?php if ($productsError): ?>
                    <div>
                        <div class="alert alert-warning text-center mb-0"><?php echo $productsError; ?></div>
                    </div>
                <?php elseif (empty($products)): ?>
                    <div>
                        <div class="text-center p-5 bg-white rounded-4 shadow-sm">
                            <img src="assets/images/loading.gif" alt="Sin productos" class="mb-3" style="max-height: 60px;">
                            <h5 class="mb-1">Aún no hay elementos en el catálogo</h5>
                            <p class="text-muted">Agrega productos desde el panel Admin para mostrarlos aquí.</p>
                            <a href="admin/" class="btn btn-outline-primary">Ir al panel</a>
                        </div>
                    </div>
                <?php else: ?>
                    <?php foreach ($products as $product):
                        $imagePath = !empty($product['image_url']) ? htmlspecialchars($product['image_url']) : 'assets/images/product-placeholder.jpg';
                        $price = is_numeric($product['price']) ? '$' . number_format($product['price'], 2) : htmlspecialchars($product['price']);
                        $statusBadge = !empty($product['is_active']) ? '<span class="badge bg-success badge-status">Disponible</span>' : '<span class="badge bg-secondary badge-status">No disponible</span>';
                    ?>
                        <div class="product-card">
                            <div class="product-media">
                                <img src="<?php echo $imagePath; ?>" alt="<?php echo htmlspecialchars($product['name']); ?>">
                                <span class="product-tag">Destacado</span>
                            </div>
                            <div class="product-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="mb-0"><?php echo htmlspecialchars($product['name']); ?></h5>
                                    <?php echo $statusBadge; ?>
                                </div>
                                <p class="text-muted small mb-3"><?php echo htmlspecialchars($product['description']); ?></p>
                                <div class="product-footer">
                                    <span class="product-price"><?php echo $price; ?></span>
                                    <a href="#contacto" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-envelope me-2"></i>Solicitar
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </section>

        <!-- Planes -->
        <section id="planes" class="mb-5">
            <div class="section-title">
                <h3>Planes y Precios</h3>
                <p class="text-muted">Elige el plan que mejor se adapte a tu marca.</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="plan-card">
                        <h5 class="mb-3">Plan Básico</h5>
                        <p class="display-6 text-primary">$200</p>
                        <p class="text-muted">Landing + catálogo ligero</p>
                        <ul class="list-unstyled text-start mt-3">
                            <li><i class="fas fa-check text-success me-2"></i>Hosting incluido</li>
                            <li><i class="fas fa-check text-success me-2"></i>Panel de productos</li>
                            <li><i class="fas fa-check text-success me-2"></i>Soporte 30 días</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="plan-card highlight">
                        <h5 class="mb-3">Plan Premium</h5>
                        <p class="display-6 text-primary">$450</p>
                        <p class="text-muted">Branding completo + automatización</p>
                        <ul class="list-unstyled text-start mt-3">
                            <li><i class="fas fa-check text-success me-2"></i>Integraciones a medida</li>
                            <li><i class="fas fa-check text-success me-2"></i>Automatización de contactos</li>
                            <li><i class="fas fa-check text-success me-2"></i>Soporte 90 días</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="plan-card" style="border-top-color: var(--danger-color);">
                        <h5 class="mb-3">Plan Personalizado</h5>
                        <p class="display-6 text-primary">$?00</p>
                        <p class="text-muted">Soluciones enterprise bajo demanda</p>
                        <ul class="list-unstyled text-start mt-3">
                            <li><i class="fas fa-check text-success me-2"></i>Consultoría UX/UI</li>
                            <li><i class="fas fa-check text-success me-2"></i>Integración ERP/CRM</li>
                            <li><i class="fas fa-check text-success me-2"></i>Soporte dedicado</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contacto -->
        <section id="contacto" class="mb-5">
            <div class="section-title">
                <h3>Conversemos</h3>
                <p class="text-muted">Completa el formulario y te responderé en menos de 24h.</p>
            </div>
            <div class="card p-4 border-0 shadow-sm rounded-4">
                <form id="contactForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="name" class="form-label">Nombre</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="col-12">
                            <label for="message" class="form-label">Mensaje</label>
                            <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary px-5">Enviar Mensaje</button>
                    </div>
                    <div id="contactStatus" class="text-center mt-3"></div>
                </form>
            </div>
        </section>
    </main>

    <footer class="text-center py-4 text-muted">
        <p> 2023  Todos los derechos reservados.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contactForm');
            const contactStatus = document.getElementById('contactStatus');

            if (contactForm) {
                contactForm.addEventListener('submit', async function(e) {
                    e.preventDefault();
                    contactStatus.innerHTML = '<span class="text-muted">Enviando...</span>';

                    const formData = new FormData(contactForm);

                    try {
                        const response = await fetch('contact_submit.php', {
                            method: 'POST',
                            body: formData
                        });
                        const data = await response.json();

                        if (data.success) {
                            contactStatus.innerHTML = '<div class="alert alert-success py-2">' + data.message + '</div>';
                            contactForm.reset();
                        } else {
                            contactStatus.innerHTML = '<div class="alert alert-warning py-2">' + data.message + '</div>';
                        }
                    } catch (error) {
                        contactStatus.innerHTML = '<div class="alert alert-danger py-2">No pudimos enviar tu mensaje. Intenta más tarde.</div>';
                    }
                });
            }
        });
    </script>
</body>
</html>
User / IP	: 216.73.217.21
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64