Abogados FL - Sitio Web del Bufete

Un sitio web profesional y moderno para el bufete de abogados Abogados FL, desarrollado con Astro para máximo rendimiento y optimización SEO.

🌟 Características

Diseño Moderno: Interfaz elegante con colores corporativos (azul oscuro #1f2c3d y dorado #c5a47e)
Optimizado para Rendimiento: Construido con Astro para sitios estáticos ultra-rápidos
Responsive: Diseño completamente adaptable a dispositivos móviles y desktop
Formulario de Contacto Robusto: Sistema seguro con validación, reCAPTCHA y respaldo
SEO Optimizado: Metadatos estructurados y contenido optimizado para motores de búsqueda

🏗️ Arquitectura

Frontend: Astro + HTML/CSS + JavaScript minimal
Backend: Script PHP para formulario de contacto
Email: PHPMailer con autenticación SMTP
Seguridad: reCAPTCHA v3 + validación y sanitización
Hosting: Compatible con hosting compartido estándar

📋 Prerrequisitos

Node.js 18+
npm o yarn
PHP 7.2+ (para el servidor de producción)
Acceso SMTP para envío de emails
Cuenta de Google reCAPTCHA

🚀 Instalación y Configuración

1. Clonar y configurar el proyecto

# Instalar dependencias
npm install

# Instalar PHPMailer (para producción)
composer install

2. Configurar variables de entorno

El formulario de contacto utiliza variables de entorno para una gestión segura de credenciales. Configure las siguientes variables en su servidor:

# Configuración SMTP
SMTP_HOST=smtp.tuservidor.com        # Ej: smtp.gmail.com
SMTP_PORT=587                        # 587 para TLS, 465 para SSL
[email protected]   # Email del remitente
SMTP_PASS=tu_contraseña_segura      # Contraseña SMTP
[email protected]
SMTP_FROM_NAME="Abogados FL"
[email protected] # Email para recibir consultas

# Configuración reCAPTCHA
RECAPTCHA_SECRET_KEY=tu_clave_secreta_recaptcha

Métodos de configuración:

En cPanel:
- Accede a "Software" > "Variables de entorno"
- Añade cada variable con su valor correspondiente
- Reinicia PHP-FPM si es necesario

Usando .htaccess (Apache):

SetEnv SMTP_HOST smtp.tuservidor.com
SetEnv SMTP_PORT 587
SetEnv SMTP_USER [email protected]
# ... (resto de variables)

En php.ini o .user.ini:

env[SMTP_HOST] = smtp.tuservidor.com
env[SMTP_PORT] = 587
# ... (resto de variables)

⚠️ ¡IMPORTANTE!

Nunca almacenes credenciales en el código fuente
Usa contraseñas seguras y únicas
Configura todas las variables antes de desplegar
Mantén un respaldo seguro de las credenciales
Restringe los permisos de los archivos de configuración


### 3. Configurar reCAPTCHA

1. Crear cuenta en [Google reCAPTCHA](https://www.google.com/recaptcha/)
2. Agregar su dominio y obtener las claves
3. Actualizar la clave del sitio en `src/components/Contact.astro`:

```html
<div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>

Actualizar la clave secreta en enviar_correo.php

🛠️ Desarrollo

# Iniciar servidor de desarrollo
npm run dev

# Compilar para producción
npm run build

# Vista previa de la compilación
npm run preview

📦 Despliegue

1. Compilar el sitio

npm run build

2. Subir archivos al servidor

Subir via FTP a la carpeta public_html:

public_html/
├── dist/              # Contenido compilado de Astro
├── enviar_correo.php  # Script del formulario
├── composer.json      # Dependencias PHP
├── vendor/           # Librerías PHP (ejecutar composer install en servidor)
└── logs/             # Carpeta para logs (crear con permisos 755)

3. Configurar permisos

chmod 755 logs/
chmod 644 enviar_correo.php
chmod 644 composer.json

4. Instalar dependencias PHP en el servidor

composer install --no-dev --optimize-autoloader

📁 Estructura del Proyecto

├── src/
│   ├── components/          # Componentes reutilizables
│   │   ├── Header.astro     # Navegación principal
│   │   ├── Hero.astro       # Sección hero
│   │   ├── About.astro      # Sobre nosotros
│   │   ├── StatsBar.astro   # Estadísticas
│   │   ├── Services.astro   # Servicios legales
│   │   ├── Team.astro       # Equipo de abogados
│   │   ├── Testimonials.astro # Testimonios
│   │   ├── News.astro       # Blog/noticias
│   │   ├── Contact.astro    # Formulario de contacto
│   │   └── Footer.astro     # Pie de página
│   ├── layouts/
│   │   └── Layout.astro     # Layout principal
│   └── pages/
│       └── index.astro      # Página principal
├── public/
│   ├── gracias.html         # Página de éxito
│   ├── error.html           # Página de error
│   └── images/              # Imágenes del sitio
├── enviar_correo.php        # Script del formulario
├── composer.json            # Dependencias PHP
└── package.json             # Dependencias Node.js

🎨 Personalización

Colores Corporativos

:root {
  --color-primary: #1f2c3d;    /* Azul oscuro */
  --color-accent: #c5a47e;     /* Dorado */
  --color-white: #ffffff;
  --color-light: #f8f9fa;
}

Tipografías

Títulos: Playfair Display (serif elegante)
Cuerpo: Lato (sans-serif moderna)

Imágenes Requeridas

Agregar estas imágenes en public/images/:

abogado2.png         # Imagen principal del abogado para el Hero
abogado4.png         # Foto perfil para sección "Sobre mí"
abogado_horizontal1.png # Imagen destacada para sección del abogado
abogado1.png         # Imagen para artículo del blog 1
abogado3.png         # Imagen para artículo del blog 2
abogado6.png         # Imagen para artículo del blog 3
edificio_oficina.png # Imagen del edificio para banner de contacto
entrada_edificio.png # Foto de la entrada del edificio
pasillo_oficina.png  # Imagen de fondo para barra de estadísticas
logo.svg             # Logo principal
logo-white.svg       # Logo blanco para footer

🔧 Configuración del Servidor

Requisitos del Hosting

PHP 7.2+ con extensiones: curl, openssl, mbstring
Soporte para Composer
Acceso a envío de emails vía SMTP
Permisos para crear directorios y archivos

Variables de Entorno (Opcional)

Para mayor seguridad, puede usar variables de entorno:

$config = [
    'smtp' => [
        'host' => $_ENV['SMTP_HOST'] ?? 'smtp.gmail.com',
        'username' => $_ENV['SMTP_USER'] ?? '[email protected]',
        'password' => $_ENV['SMTP_PASS'] ?? 'su_password',
        // ...
    ]
];

🔐 Seguridad

✅ Validación y sanitización de todos los inputs
✅ Protección XSS con htmlspecialchars
✅ Verificación reCAPTCHA obligatoria
✅ Headers de seguridad configurados
✅ Logs de errores activados
✅ Backup automático de mensajes

📧 Funcionalidad del Formulario

Campos del Formulario

Nombre completo (requerido)
Email (requerido, validado)
Teléfono (requerido, formato chileno)
Área legal de interés (select)
Descripción del caso (requerido)
Aceptación de políticas (checkbox requerido)
reCAPTCHA (requerido)

Flujo de Procesamiento

Validación del lado del cliente
Verificación reCAPTCHA
Sanitización de datos
Validación del lado del servidor
Backup en archivo CSV
Envío por email vía PHPMailer
Redirección a página de éxito/error

🐛 Resolución de Problemas

Error: "Método no permitido"

Verificar que el formulario use método POST
Confirmar que el archivo PHP esté en la ruta correcta

Error: "reCAPTCHA fallida"

Verificar las claves de reCAPTCHA
Confirmar que el dominio esté autorizado

Emails no se envían

Verificar configuración SMTP
Revisar logs de errores en /logs/php_errors.log
Confirmar que el servidor permita conexiones SMTP

Problemas de permisos

chmod 755 logs/
chmod 644 *.php
chmod 644 *.html

📞 Soporte

Para soporte técnico o consultas sobre el desarrollo:

Email: [email protected]
Teléfono: +56 (9) XXXXXXXX
Documentación: Ver comentarios en el código fuente

📄 Licencia

Desarrollado con ❤️ para Abogados FL - Defendemos sus derechos con excelencia y dedicación

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.serena		.serena
.vscode		.vscode
public		public
src		src
vendor		vendor
.gitignore		.gitignore
README.md		README.md
astro.config.mjs		astro.config.mjs
composer.json		composer.json
composer.lock		composer.lock
enviar_correo.php		enviar_correo.php
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.mjs		tailwind.config.mjs
tsconfig.json		tsconfig.json

JoZeuZ/abogadosfl.cl

Folders and files

Latest commit

History

Repository files navigation