Conectando mercados globales con soluciones estratégicas desde 2009
Sitio web corporativo de Intertrade Solutions Inc., empresa líder en soluciones EDI y optimización de cadena de suministro. Esta plataforma digital presenta de manera elegante y profesional los servicios especializados de la empresa, incluyendo comercio de materias primas, gestión portuaria y tecnologías de integración B2B.
- 🎨 Diseño Moderno: UI/UX contemporáneo con animaciones fluidas y microinteracciones
- 📱 Totalmente Responsivo: Experiencia optimizada en todos los dispositivos
- ⚡ Performance Superior: Carga ultrarrápida con optimizaciones avanzadas
- 🔍 SEO 100% Optimizado: Structured data, meta tags y sitemap automático
- ♿ Accesibilidad: Cumple con estándares WCAG 2.1
- 🌍 Multiidioma Ready: Preparado para expansión internacional
intertrade-website/
├── 📁 public/ # Assets estáticos
│ ├── 🖼️ Logo.webp # Logo corporativo
│ ├── 🎬 assets/videos/ # Videos institucionales
│ ├── 📸 assets/images/ # Galería de productos
│ ├── 🎨 assets/icons/ # Iconografía SVG
│ ├── 🤖 robots.txt # SEO crawling rules
│ └── 📱 site.webmanifest # PWA manifest
├── 📁 src/
│ ├── 📁 components/ # Componentes reutilizables
│ │ ├── 🧭 header/ # Navegación y menú
│ │ ├── 🦶 footer/ # Pie de página y contacto
│ │ ├── 🎪 hero/ # Sección principal
│ │ ├── 👥 nosotros/ # Información corporativa
│ │ ├── 🏭 sectores/ # Industrias atendidas
│ │ ├── ⭐ resenas/ # Testimonios de clientes
│ │ ├── 📦 materia-prima/ # Catálogo de productos
│ │ ├── 🚢 puertos/ # Gestión portuaria
│ │ ├── ❓ faq/ # Preguntas frecuentes
│ │ ├── 🔍 seo/ # Optimización SEO
│ │ └── 🎛️ ui/ # Componentes de interfaz
│ ├── 📁 layouts/ # Plantillas base
│ │ └── Layout.astro # Layout principal
│ ├── 📁 pages/ # Rutas del sitio
│ │ ├── index.astro # Página principal
│ │ └── servicios.astro # Página de servicios
│ └── 📁 styles/ # Estilos globales
├── ⚙️ astro.config.mjs # Configuración de Astro
├── 🎨 tailwind.config.mjs # Configuración de Tailwind
└── 📋 package.json # Dependencias del proyecto
- Astro 4.x - Framework moderno para sitios web estáticos
- React 18 - Componentes interactivos
- TypeScript - Tipado estático para mayor robustez
- Tailwind CSS 4 - Framework CSS utility-first
- Gotham Font Family - Tipografía corporativa premium
- Custom CSS Variables - Sistema de colores corporativos
- @astrojs/sitemap - Generación automática de sitemap
- @astrojs/partytown - Scripts de terceros optimizados
- Schema.org Structured Data - Rich snippets para buscadores
- Image Optimization - WebP format para máxima compresión
- Font Loading Strategy - Preload con fallbacks
- DNS Prefetch - Resolución anticipada de dominios
- Critical CSS Inlining - Estilos críticos embebidos
:root {
--carrot-orange: #F18B21; /* Color primario - Energía */
--eastern-blue: #0A8BA4; /* Color secundario - Confianza */
--manhattan: #F2C078; /* Acento cálido */
--spray: #7DD3FC; /* Acento fresco */
--sante-fe: #B45309; /* Tierra */
--golden-glow: #FDE68A; /* Luminosidad */
}- Gotham Bold - Títulos principales
- Gotham Medium - Subtítulos y destacados
- Gotham Regular - Texto de cuerpo
- 🎪 Hero Section - Video background con overlay dinámico
- 🎠 Carousels - Testimonios y galería de productos
- 💳 Cards System - Información modular y responsiva
- 🎯 CTA Buttons - Llamadas a la acción optimizadas
- 📱 Floating Elements - Botón de LinkedIn y navegación
# Clonar el repositorio
git clone [repository-url]
cd intertrade-website
# Instalar dependencias
npm install# Servidor de desarrollo
npm run dev
# 🌐 http://localhost:4321
# Modo de desarrollo con host
npm run dev -- --host
# 🌐 Accesible desde la red local# Build de producción
npm run build
# Preview del build
npm run preview
# Análisis del bundle
npm run build -- --analyze# Verificación de tipos
npm run astro check
# Linting (si configurado)
npm run lint
# Formateo de código
npm run format✅ Meta Tags Completos
- Title tags optimizados por página
- Meta descriptions únicas y atractivas
- Keywords estratégicas por industria
- Open Graph para redes sociales
- Twitter Cards para mejor sharing
✅ Structured Data (Schema.org)
- Organization markup completo
- Service catalog detallado
- Contact information estructurada
- Breadcrumb navigation
- FAQ schema para preguntas frecuentes
✅ Technical SEO
- Sitemap XML automático
- Robots.txt optimizado
- Canonical URLs
- Hreflang ready para internacionalización
- Core Web Vitals optimizados
✅ Performance SEO
- Lazy loading de imágenes
- Critical CSS inlining
- Font display optimization
- Preconnect a dominios externos
- Minificación automática
- Lighthouse Score: 95+ en todas las categorías
- Core Web Vitals: Todos en verde
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
/* Mobile First Approach */
sm: '640px' /* Tablets pequeñas */
md: '768px' /* Tablets */
lg: '1024px' /* Laptops */
xl: '1280px' /* Desktops */
2xl: '1536px' /* Pantallas grandes */- 📱 Mobile Navigation - Menú hamburguesa con animaciones
- 🖼️ Adaptive Images - Diferentes resoluciones por dispositivo
- 📊 Flexible Grids - Layouts que se adaptan fluidamente
- 🎛️ Touch-Friendly - Botones y elementos optimizados para touch
- Estructura de archivos i18n ready
- Meta tags con locale específico
- Hreflang attributes configurables
- Content management system friendly
- 🇪🇸 Español (Principal)
- 🇺🇸 English
- 🇵🇹 Português
# Configuración del sitio
SITE_URL=https://intertradesolutions.com
SITE_TITLE=Intertrade Solutions Inc.
# Analytics (opcional)
GOOGLE_ANALYTICS_ID=GA_MEASUREMENT_ID
GOOGLE_TAG_MANAGER_ID=GTM_CONTAINER_ID
# APIs externas (futuro)
LINKEDIN_API_KEY=your_linkedin_api_key
CONTACT_FORM_ENDPOINT=your_form_endpoint- 📊 Google Analytics 4
- 🏷️ Google Tag Manager
- 📧 Contact Form APIs
- 💼 LinkedIn Company API
- 🗺️ Google Maps (para ubicaciones)
- Netlify - Deploy automático desde Git
- Vercel - Optimizado para frameworks modernos
- Cloudflare Pages - CDN global incluido
# Build command
npm run build
# Output directory
dist/
# Node version
18.x- 👥 User Engagement - Tiempo en sitio, páginas por sesión
- 🎯 Conversion Tracking - Formularios completados, CTAs clickeados
- 📱 Device Analytics - Desktop vs Mobile usage
- 🌍 Geographic Data - Países y regiones de visitantes
- ⚡ Core Web Vitals tracking
- 🔍 SEO Performance monitoring
- 🚨 Error Tracking y alertas
- 📊 A/B Testing capabilities
- 📝 Atomic Design - Metodología de componentes
- 🎨 BEM Naming - Para clases CSS personalizadas
- 📱 Mobile First - Diseño responsive desde móvil
- ♿ Accessibility First - WCAG 2.1 compliance
# Feature branches
git checkout -b feature/nueva-funcionalidad
# Commit messages descriptivos
git commit -m "feat: agregar carousel de testimonios"
# Pull requests con review
git push origin feature/nueva-funcionalidad- 🏢 Cliente: Intertrade Solutions Inc.
- 🌐 Website: intertradesolutions.com
- 💼 LinkedIn: @intertradesolutions
- 🚀 Desarrollado por: RVSolutions+
- 📧 Soporte Técnico: Disponible para actualizaciones y mejoras
- 🔧 Mantenimiento: Actualizaciones regulares de seguridad y performance
🌟 Crafted with precision and passion by RVSolutions+ 🌟
Transformando ideas en experiencias digitales excepcionales
