[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]plaintext:file="public/logo-isoftland.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iSoft%2B30-b2jLn4TxzktH2rRQcQ4euvF050wK3R.webp" isMerged="true" [V0_FILE]xml:file="public/logos/eset.svg" query="ESET security logo, minimalist design" isMerged="true" [V0_FILE]xml:file="public/logos/whatsup.svg" query="WhatsUp Gold network monitoring logo, minimalist design" isMerged="true" [V0_FILE]xml:file="public/logos/solarwinds.svg" query="SolarWinds logo, minimalist design" isMerged="true" [V0_FILE]plaintext:file="public/logos/eset.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ESET-Logo-NHKohb8LwIEouxBDvWn1wWDBlWvfm7.png" isMerged="true" [V0_FILE]plaintext:file="public/logos/whatsup.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/whatsupgold-qku7BehUGfeKcWSlCfyI9DfFXZrmtd.png" isMerged="true" [V0_FILE]plaintext:file="public/logos/solarwinds.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SolarWinds-logo-B8K2Lf7GZlM0uYqcfJc9U7jTuKMjBn.webp" isMerged="true" [V0_FILE]plaintext:file="public/partners-logos.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_2025-04-16_at_5.12.06_PM-removebg-preview-VcKyfjk7SCYcuI1rZ726M0oVCJgMRV.png" isMerged="true" [V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isMerged="true" import Link from "next/link" import { notFound } from "next/navigation" import { ArrowLeft, Linkedin } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { blogPosts } from "@/lib/blog-data" import { Markdown } from "@/components/markdown" interface BlogPostPageProps { params: { slug: string } } export function generateMetadata({ params }: BlogPostPageProps) { const post = blogPosts.find((post) => post.slug === params.slug) if (!post) { return { title: "Post no encontrado | iSoftland", description: "El artículo que buscas no existe", } } return { title: `${post.title} | iSoftland Blog`, description: post.excerpt, } } export default function BlogPostPage({ params }: BlogPostPageProps) { const post = blogPosts.find((post) => post.slug === params.slug) if (!post) { notFound() } return (

{post.category} {post.date}

{post.title}

{post.author && (

{post.author.charAt(0)}

{post.author}

{post.role || "Autor"}

)}

{post.linkedinUrl && (

)}

) } [V0_FILE]typescriptreact:file="components/markdown.tsx" isMerged="true" "use client" import ReactMarkdown from "react-markdown" import remarkGfm from "remark-gfm" interface MarkdownProps { content: string } export function Markdown({ content }: MarkdownProps) { return (

, h2: ({ node, ...props }) =>

, h3: ({ node, ...props }) =>

, h4: ({ node, ...props }) =>

, p: ({ node, ...props }) =>
, ul: ({ node, ...props }) =>
, ol: ({ node, ...props }) =>
, li: ({ node, ...props }) =>
, a: ({ node, ...props }) => ( ), blockquote: ({ node, ...props }) => (
), code: ({ node, inline, ...props }) => inline ? ( ) : ( ), }} > {content} ) } [V0_FILE]plaintext:file="public/logos/teamviewer.png" isMerged="true" [V0_FILE]plaintext:file="public/logos/mdaemon.png" isMerged="true" [V0_FILE]png:file="public/logo-isoftland.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iSoft%2B35-pUbtzCVZQF0PbjEphDA6sqVraJjn1L.png" isMerged="true" [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, isoftland: { blue: "#2A1A5E", // Color morado oscuro del logo blue2: "#1E1347", // Versión más oscura para gradientes light: "#EAF1FA", accent: "#FF9E18", gray: "#8A8A8A", // Color gris del logo }, }, fontFamily: { sans: [ "Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", ], }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 0.25rem)", sm: "calc(var(--radius) - 0.5rem)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="styles/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 210 100% 98%; --foreground: 222 47% 11%; --card: 0 0% 100%; --card-foreground: 222 47% 11%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; --primary: 270 58% 24%; /* Morado oscuro iSoftland / --primary-foreground: 0 0% 98%; --secondary: 270 58% 19%; / Versión más oscura para contraste / --secondary-foreground: 210 40% 96%; --muted: 210 40% 96%; --muted-foreground: 215 16% 47%; --accent: 35 100% 55%; --accent-foreground: 270 58% 24%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 270 58% 24%; --radius: 1rem; } } @layer base { { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } .animate-in { animation: animate-in 0.5s ease-out; } @keyframes animate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } [V0_FILE]typescriptreact:file="lib/blog-data.ts" isEdit="true" isMerged="true" export interface BlogPost { slug: string title: string date: string category: string excerpt: string author?: string role?: string content: string linkedinUrl?: string isLinkedInPost?: boolean } export const blogPosts: BlogPost[] = [ { slug: "seguridad-informatica-empresas-2023", title: "Tendencias en seguridad informática para empresas en 2023", date: "15 de Marzo, 2023", category: "Seguridad", author: "Carlos Mendoza", role: "Especialista en Ciberseguridad", excerpt: "Descubre las principales tendencias en seguridad informática que toda empresa debería implementar para proteger sus activos digitales en 2023.", content: ` # Tendencias en seguridad informática para empresas en 2023 La seguridad informática se ha convertido en una prioridad absoluta para las empresas de todos los tamaños. Con el aumento de los ataques cibernéticos y la sofisticación de las amenazas, es fundamental mantenerse al día con las últimas tendencias y soluciones. ## 1. Zero Trust Architecture El enfoque de "no confiar en nadie" se ha convertido en el estándar de oro en seguridad empresarial. Este modelo asume que las amenazas pueden provenir tanto del exterior como del interior de la organización, por lo que verifica cada solicitud como si se originara desde una red abierta. ## 2. Inteligencia Artificial y Machine Learning Los sistemas de seguridad basados en IA están revolucionando la forma en que detectamos y respondemos a las amenazas. Estos sistemas pueden: - Identificar patrones anómalos que podrían indicar un ataque - Automatizar respuestas a incidentes en tiempo real - Predecir posibles vulnerabilidades antes de que sean explotadas ## 3. Seguridad en la nube Con la migración masiva a servicios en la nube, la seguridad de estos entornos se ha vuelto crítica. Las empresas están implementando: - Cifrado de datos en reposo y en tránsito - Gestión de identidades y accesos (IAM) - Segmentación de redes virtuales ## 4. Protección contra ransomware El ransomware sigue siendo una de las amenazas más destructivas. Las estrategias de protección incluyen: - Copias de seguridad regulares y aisladas - Formación continua de los empleados - Soluciones de detección temprana ## Conclusión La inversión en seguridad informática ya no es opcional para las empresas que quieren sobrevivir en el entorno digital actual. Implementar estas tendencias no solo protege los activos digitales, sino que también genera confianza entre clientes y socios comerciales. `, linkedinUrl: "https://www.linkedin.com/company/isoftland/posts/", isLinkedInPost: true, }, { slug: "monitoreo-redes-tiempo-real", title: "La importancia del monitoreo de redes en tiempo real", date: "28 de Abril, 2023", category: "Monitoreo", author: "Ana Martínez", role: "Ingeniera de Redes", excerpt: "El monitoreo de redes en tiempo real es esencial para garantizar la continuidad operativa y detectar problemas antes de que afecten a los usuarios.", content: ` # La importancia del monitoreo de redes en tiempo real En el entorno empresarial actual, donde la conectividad es fundamental para las operaciones diarias, el monitoreo de redes en tiempo real se ha convertido en una necesidad crítica. Las interrupciones en la red pueden tener consecuencias graves, desde pérdida de productividad hasta impactos financieros significativos. ## Beneficios del monitoreo en tiempo real ### Detección temprana de problemas Un sistema de monitoreo eficaz puede identificar anomalías antes de que se conviertan en problemas graves. Esto incluye: - Picos de tráfico inusuales - Latencia elevada - Fallos en dispositivos de red - Intentos de intrusión ### Optimización del rendimiento El monitoreo continuo proporciona datos valiosos para optimizar el rendimiento de la red: - Identificación de cuellos de botella - Análisis de patrones de uso - Planificación de capacidad ### Cumplimiento normativo Muchas industrias están sujetas a regulaciones que requieren monitoreo y registro de actividades de red: - GDPR - HIPAA - PCI DSS ## Herramientas de monitoreo modernas Las soluciones actuales ofrecen capacidades avanzadas: 1. Dashboards visuales que muestran el estado de la red de un vistazo 2. Alertas personalizables para notificar problemas críticos 3. Análisis predictivo para anticipar posibles fallos 4. Integración con sistemas de tickets para agilizar la resolución de problemas ## Conclusión Invertir en un sistema robusto de monitoreo de redes ya no es un lujo, sino una necesidad empresarial. Las organizaciones que implementan estas soluciones no solo mejoran su seguridad y rendimiento, sino que también reducen costos operativos a largo plazo. `, linkedinUrl: "https://www.linkedin.com/company/isoftland/posts/", isLinkedInPost: true, }, { slug: "infraestructura-it-nube", title: "Modernización de infraestructura IT: ¿Nube pública, privada o híbrida?", date: "10 de Mayo, 2023", category: "Infraestructura", author: "Roberto Sánchez", role: "Arquitecto de Soluciones Cloud", excerpt: "Analizamos las ventajas y desventajas de los diferentes modelos de nube para ayudarte a elegir la mejor opción para tu empresa.", content: ` # Modernización de infraestructura IT: ¿Nube pública, privada o híbrida? La migración a la nube es uno de los pilares fundamentales de la transformación digital. Sin embargo, elegir entre nube pública, privada o híbrida puede ser un desafío para muchas organizaciones. Cada modelo tiene sus propias ventajas y consideraciones que deben alinearse con los objetivos empresariales. ## Nube Pública ### Ventajas: - Escalabilidad inmediata: Capacidad para aumentar o disminuir recursos según la demanda - Costos operativos: Modelo de pago por uso que elimina grandes inversiones iniciales - Mantenimiento simplificado: El proveedor se encarga de la infraestructura subyacente ### Consideraciones: - Preocupaciones sobre seguridad y privacidad de datos - Posible dependencia del proveedor (vendor lock-in) - Costos a largo plazo pueden superar a otras opciones ## Nube Privada ### Ventajas: - Control total: La organización mantiene el control completo sobre su entorno - Seguridad mejorada: Ideal para datos sensibles y aplicaciones críticas - Personalización: Capacidad para adaptar la infraestructura a necesidades específicas ### Consideraciones: - Requiere inversión inicial significativa - Necesidad de personal especializado para gestión y mantenimiento - Escalabilidad más limitada comparada con la nube pública ## Nube Híbrida ### Ventajas: - Flexibilidad: Combina lo mejor de ambos mundos - Optimización de costos: Cargas de trabajo críticas en privado, el resto en público - Estrategia de continuidad: Mejor resiliencia ante fallos ### Consideraciones: - Mayor complejidad en la gestión - Requiere estrategias de integración bien definidas - Posibles desafíos de seguridad en la interconexión ## Factores clave para la decisión Al evaluar qué modelo es el más adecuado, considere: 1. Tipo de datos y aplicaciones 2. Requisitos regulatorios y de cumplimiento 3. Presupuesto disponible 4. Capacidades del equipo IT interno 5. Objetivos de crecimiento a largo plazo ## Conclusión No existe una solución única para todas las organizaciones. La tendencia actual muestra que muchas empresas están optando por estrategias híbridas que les permiten mantener el control sobre sus activos más críticos mientras aprovechan la flexibilidad de la nube pública para otras cargas de trabajo. La clave está en realizar una evaluación detallada de las necesidades actuales y futuras antes de comprometerse con cualquier modelo. `, linkedinUrl: "https://www.linkedin.com/company/isoftland/posts/", isLinkedInPost: true, }, { slug: "transformacion-digital-pymes", title: "Guía de transformación digital para PyMEs", date: "22 de Junio, 2023", category: "Transformación Digital", excerpt: "Una guía práctica para que las pequeñas y medianas empresas inicien su proceso de transformación digital de manera efectiva y con recursos limitados.", content: ` # Guía de transformación digital para PyMEs La transformación digital ya no es exclusiva de las grandes corporaciones. Las pequeñas y medianas empresas pueden (y deben) aprovechar las tecnologías digitales para mejorar su eficiencia, alcanzar nuevos mercados y mantenerse competitivas en un entorno cada vez más digitalizado. ## ¿Por qué es importante para las PyMEs? - Supervivencia en el mercado: Las empresas que no se adaptan quedan rezagadas - Eficiencia operativa: Automatización de procesos manuales y repetitivos - Mejor experiencia del cliente: Servicios más rápidos y personalizados - Acceso a nuevos mercados: Posibilidad de expandirse más allá de los límites geográficos tradicionales ## Por dónde empezar ### 1. Evaluación digital Antes de invertir, es fundamental entender dónde se encuentra su empresa: - ¿Qué procesos podrían beneficiarse más de la digitalización? - ¿Cuáles son los puntos de fricción en la experiencia del cliente? - ¿Qué capacidades digitales tiene actualmente su equipo? ### 2. Priorización estratégica No intente transformar todo a la vez. Comience con: - Procesos que generan mayor impacto en ingresos o satisfacción del cliente - Áreas donde la implementación sea relativamente sencilla - Iniciativas que requieran menor inversión inicial ### 3. Tecnologías esenciales para PyMEs #### Presencia digital - Sitio web optimizado para móviles - Perfiles en redes sociales relevantes para su industria - Estrategia de SEO básica #### Herramientas de productividad - Suite ofimática en la nube (Google Workspace, Microsoft 365) - Herramientas de colaboración (Slack, Microsoft Teams) - Gestión de proyectos (Trello, Asana, Monday) #### Sistemas empresariales - CRM para gestión de clientes - Software de facturación electrónica - Herramientas de análisis de datos básicas ## Superar obstáculos comunes ### Presupuesto limitado - Utilice soluciones SaaS con modelos de suscripción - Aproveche versiones gratuitas o planes para pequeñas empresas - Implemente por fases, reinvirtiendo los beneficios de cada etapa ### Resistencia al cambio - Involucre al equipo desde el principio - Proporcione capacitación adecuada - Comunique claramente los beneficios ### Falta de conocimientos técnicos - Considere asociarse con proveedores de servicios tecnológicos - Contrate consultores para proyectos específicos - Invierta en formación para el personal clave ## Conclusión La transformación digital no es un destino, sino un viaje continuo. Las PyMEs que adoptan un enfoque gradual pero constante, centrándose en iniciativas de alto impacto, pueden lograr resultados significativos sin necesidad de grandes inversiones iniciales. Lo más importante es comenzar, aprender de cada implementación y seguir adaptándose a medida que evoluciona tanto la tecnología como las necesidades del negocio. `, linkedinUrl: "https://www.linkedin.com/company/isoftland/posts/", isLinkedInPost: false, }, { slug: "ciberseguridad-empleados-remoto", title: "Ciberseguridad para empleados en trabajo remoto", date: "7 de Julio, 2023", category: "Seguridad", excerpt: "Estrategias y mejores prácticas para garantizar la seguridad de la información cuando tus empleados trabajan desde casa u otras ubicaciones remotas.", content: ` # Ciberseguridad para empleados en trabajo remoto El trabajo remoto ha llegado para quedarse, pero trae consigo nuevos desafíos de seguridad. Los perímetros tradicionales de la red corporativa se han difuminado, y ahora los datos empresariales viajan a través de redes domésticas y dispositivos personales. Proteger la información en este nuevo escenario requiere un enfoque diferente. ## Riesgos específicos del trabajo remoto ### Redes inseguras Los empleados remotos suelen conectarse a través de redes WiFi domésticas o públicas que carecen de las protecciones de la infraestructura corporativa. ### Dispositivos personales El uso de dispositivos personales para trabajo (BYOD) aumenta la superficie de ataque si estos no cumplen con los estándares de seguridad corporativos. ### Phishing dirigido Los atacantes están aprovechando la situación para crear campañas de phishing específicamente diseñadas para trabajadores remotos. ### Seguridad física La información confidencial puede estar expuesta en entornos domésticos o espacios de coworking. ## Estrategias esenciales de protección ### 1. Conexiones seguras - VPN corporativa: Exija el uso de VPN para acceder a recursos de la empresa - Autenticación de dos factores (2FA): Implemente 2FA para todos los servicios críticos - Segmentación de red: Separe el tráfico laboral del personal, incluso en redes domésticas ### 2. Políticas de dispositivos - Gestión de dispositivos móviles (MDM): Considere soluciones que permitan administrar la seguridad de dispositivos remotos - Cifrado de disco: Asegúrese de que todos los dispositivos con datos empresariales tengan cifrado de disco completo - Actualizaciones automáticas: Configure actualizaciones automáticas de sistemas operativos y aplicaciones ### 3. Formación y concienciación - Simulacros de phishing: Realice pruebas periódicas para mantener la vigilancia - Sesiones de formación: Capacite regularmente sobre amenazas emergentes - Guías claras: Proporcione instrucciones sencillas sobre qué hacer ante un incidente ### 4. Acceso a datos - Principio de mínimo privilegio: Limite el acceso solo a lo necesario para cada rol - Monitoreo de acceso: Implemente sistemas que detecten patrones inusuales de acceso - Políticas de clasificación de datos: Defina claramente qué información puede compartirse y cómo ## Plan de respuesta a incidentes Incluso con las mejores precauciones, los incidentes pueden ocurrir. Asegúrese de que sus empleados remotos: 1. Sepan a quién contactar inmediatamente 2. Entiendan qué acciones tomar (y cuáles evitar) 3. Puedan aislar rápidamente dispositivos comprometidos ## Herramientas recomendadas - Soluciones VPN: Cisco AnyConnect, NordVPN Teams, Perimeter 81 - Gestión de contraseñas: LastPass, 1Password, Bitwarden - Seguridad de endpoints: CrowdStrike, SentinelOne, ESET Endpoint Security - Autenticación: Duo Security, Okta, Microsoft Authenticator ## Conclusión La seguridad en el trabajo remoto requiere un equilibrio entre protección y productividad. Las medidas demasiado restrictivas pueden llevar a los empleados a buscar atajos, mientras que controles insuficientes exponen a la organización a riesgos innecesarios. El enfoque más efectivo combina tecnología adecuada, políticas claras y, sobre todo, una cultura de seguridad donde cada empleado entienda su papel en la protección de la información corporativa, independientemente de dónde trabaje. `, linkedinUrl: "https://www.linkedin.com/company/isoftland/posts/", isLinkedInPost: false, }, ] [V0_FILE]typescriptreact:file="app/blog/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { ArrowRight, Linkedin } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { blogPosts } from "@/lib/blog-data" export const metadata = { title: "Blog | iSoftland", description: "Artículos, noticias y recursos sobre tecnología y soluciones empresariales", } export default function BlogPage() { return ( Blog iSoftland Artículos, noticias y recursos sobre tecnología, seguridad informática y soluciones empresariales. {blogPosts.map((post) => ( {post.category} {post.date} {post.title} {post.excerpt} {post.isLinkedInPost && ( Publicado en LinkedIn )} ))} ) } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="app/productos/page.tsx" isMoved="true" isMovedFrom="app/productos/page.tsx" isEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { productos } from "@/lib/productos-data" export const metadata = { title: "Catálogo de Productos | iSoftland", description: "Explora nuestra gama completa de soluciones tecnológicas para empresas", } export default function ProductosPage() { return ( Catálogo de Productos {productos.map((producto) => ( {producto.nombre} {producto.descripcionCorta} {producto.descripcionLarga} Características principales: {producto.caracteristicas.slice(0, 4).map((feature, index) => ( {feature} ))} ))} ) } [V0_FILE]typescriptreact:file="components/productos-dropdown.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { ChevronDown } from "lucide-react" import { productos } from "@/lib/productos-data" export default function ProductosDropdown() { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) // Cerrar el menú al hacer clic fuera de él useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (menuRef.current && !menuRef.current.contains(event.target as Node)) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) return ( setIsOpen(true)} onMouseLeave={() => setIsOpen(false)}> setIsOpen(false)} > Productos {isOpen && ( {productos.map((producto) => ( setIsOpen(false)} > {producto.nombre} {producto.descripcionCorta} ))} setIsOpen(false)} > Ver todos los productos )} ) } [V0_FILE]typescriptreact:file="components/mobile-productos-dropdown.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { ChevronDown, ChevronUp } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { productos } from "@/lib/productos-data" export default function MobileProductosDropdown({ onClose }: { onClose: () => void }) { const [isOpen, setIsOpen] = useState(false) return ( {isOpen && ( {productos.map((producto) => ( {producto.nombre} {producto.descripcionCorta} ))} Ver todos los productos )} ) } [V0_FILE]typescriptreact:file="app/productos/not-found.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export default function NotFound() { return ( Producto no encontrado Lo sentimos, el producto que estás buscando no existe o ha sido movido. ) } [V0_FILE]typescriptreact:file="app/productos/[producto]/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { notFound, useParams } from "next/navigation" import Image from "next/image" import Link from "next/link" import { ArrowRight, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import ContactForm from "@/components/contact-form" import { getProductoById } from "@/lib/productos-data" export default function ProductoPage() { const params = useParams() const productoId = params.producto as string const producto = getProductoById(productoId) // Scroll al inicio cuando cambia el producto useEffect(() => { window.scrollTo(0, 0) }, [productoId]) if (!producto) { notFound() } return ( <> {/* Hero Section /}

{producto.categoria === "seguridad" ? "Seguridad" : producto.categoria === "monitoreo" ? "Monitoreo" : producto.categoria === "infraestructura" ? "Infraestructura" : producto.categoria === "soporte" ? "Soporte" : "Comunicación"}
{producto.nombre}

{producto.descripcionLarga}

{/ Características Section /}

Características
¿Por qué elegir {producto.nombre}?

Descubre las características que hacen de {producto.nombre} la solución ideal para tu empresa.

{producto.caracteristicas.map((caracteristica, index) => (

{caracteristica.split(":")[0]}

{caracteristica.includes(":") ? caracteristica.split(":")[1] : caracteristica}
))}

{/ Beneficios Section /}

Beneficios
Ventajas para tu negocio

{producto.nombre} ofrece múltiples beneficios que impactarán positivamente en tu organización.

{producto.beneficios.map((beneficio, index) => (

{beneficio.split(":")[0]}

{beneficio.includes(":") ? beneficio.split(":")[1] : beneficio}

))}

{/ Casos de Uso Section /} {producto.casosDeUso && (

Aplicaciones
Casos de uso

Descubre cómo {producto.nombre} puede aplicarse en diferentes escenarios.

{producto.casosDeUso.map((caso, index) => (
{caso.split(":")[0]}

{caso.includes(":") ? caso.split(":")[1] : "Implementa soluciones adaptadas a las necesidades específicas de este sector."}
))}

)} {/ Contacto Section /}

¿Interesado en {producto.nombre}?

Completa el formulario y un especialista se pondrá en contacto contigo para asesorarte sobre esta solución.

) } [V0_FILE]typescriptreact:file="app/productos/[producto]/metadata.ts" isMerged="true" import { getProductoById } from "@/lib/productos-data" export async function generateMetadata({ params }: { params: { producto: string } }) { const producto = getProductoById(params.producto) if (!producto) { return { title: "Producto no encontrado | iSoftland", description: "El producto que buscas no existe", } } return { title: `${producto.nombre} | iSoftland`, description: producto.descripcionCorta, } } [V0_FILE]typescriptreact:file="app/blog/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import Link from "next/link" import Image from "next/image" import { Menu, Linkedin } from "lucide-react" import { Button } from "@/components/ui/button" import ProductosDropdown from "@/components/productos-dropdown" import WhatsAppButton from "@/components/whatsapp-button" export default function BlogLayout({ children, }: { children: React.ReactNode }) { return (

Home Blog Testimonios FAQ

{children}

Más de 35 años brindando soluciones de innovación tecnológica en Latinoamérica.

Producto

Home

Productos

Recursos

Blog

Soporte

Empresa

Acerca de

Política de Privacidad

© {new Date().getFullYear()} iSoftland. Todos los derechos reservados.

Política de Privacidad Términos de Servicio

{/ WhatsApp Button /}
) } [V0_FILE]typescriptreact:file="app/productos/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import Link from "next/link" import Image from "next/image" import { Menu, Linkedin } from "lucide-react" import { Button } from "@/components/ui/button" import ProductosDropdown from "@/components/productos-dropdown" import WhatsAppButton from "@/components/whatsapp-button" export default function ProductosLayout({ children, }: { children: React.ReactNode }) { return (

Home Blog Testimonios FAQ

{children}

Más de 35 años brindando soluciones de innovación tecnológica en Latinoamérica.

Producto

Home

Productos

Recursos

Blog

Soporte

Empresa

Acerca de

Política de Privacidad

© {new Date().getFullYear()} iSoftland. Todos los derechos reservados.

Política de Privacidad Términos de Servicio

{/ WhatsApp Button /}
) } [V0_FILE]png:file="public/logos/whatsup-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhasUp_logo-iYrVcHwS2oVqMWvVklyWPtktXrQ3Ok.png" isMerged="true" [V0_FILE]png:file="public/logos/mdaemon-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/MDaemon_logo-HGtLOBv8U8E0wXJAvh3RxsSVzgXk5o.png" isMerged="true" [V0_FILE]png:file="public/logos/eset-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ESET_logo-i3neZskpJTHKSEoe9YJ3xuOBxCakhl.png" isMerged="true" [V0_FILE]png:file="public/logos/teamviewer-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TeamViewer_logo-NxA6KtSqhlSzLDahindpU08kdK53rc.png" isMerged="true" [V0_FILE]png:file="public/logos/solarwinds-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Solarwinds_logo-1h1KMaobZS8dPvYC5qQghD8AJZFPX1.png" isMerged="true" [V0_FILE]plaintext:file=".env.example" isMerged="true" # Email Configuration RESEND_API_KEY=your_resend_api_key_here CONTACT_EMAIL=ventas@isoftland.com # Alternative SMTP Configuration SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=your_email@gmail.com SMTP_PASS=your_app_password SMTP_FROM=contacto@isoftland.com # Database (optional) DATABASE_URL=your_database_url_here [V0_FILE]markdown:file="EMAIL_SETUP.md" isMerged="true" # Configuración de Email para iSoftland Este documento explica cómo configurar el envío de emails para el formulario de contacto. ## Opciones de Configuración ### Opción 1: Resend (Recomendado) Resend es un servicio moderno y fácil de usar para envío de emails. 1. Regístrate en [resend.com](https://resend.com) 2. Obtén tu API key 3. Instala la dependencia: \`\`\`bash npm install @resend/node \`\`\` 4. Configura las variables de entorno: \`\`\`env RESEND_API_KEY=tu_api_key_aqui CONTACT_EMAIL=ventas@isoftland.com \`\`\` ### Opción 2: SMTP con Nodemailer Puedes usar cualquier proveedor SMTP (Gmail, Outlook, etc.) 1. Instala nodemailer: \`\`\`bash npm install nodemailer @types/nodemailer \`\`\` 2. Configura las variables de entorno: \`\`\`env SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=tu_email@gmail.com SMTP_PASS=tu_contraseña_de_aplicacion SMTP_FROM=contacto@isoftland.com CONTACT_EMAIL=ventas@isoftland.com \`\`\` ### Configuración con Gmail 1. Habilita la verificación en 2 pasos 2. Genera una contraseña de aplicación 3. Usa esa contraseña en `SMTP_PASS` ## Activar el Servicio 1. Descomenta el código correspondiente en `lib/email-service.ts` 2. Reinicia la aplicación 3. Prueba el formulario de contacto ## Estructura del Email El email incluye: - Datos del contacto (nombre, empresa, email, teléfono) - Solución de interés - Mensaje del usuario - Fecha y hora de envío - Información de origen ## Personalización Puedes modificar: - El formato del email en `EmailService.formatEmailContent()` - Los destinatarios en las variables de entorno - El asunto del email - Agregar campos adicionales al formulario [V0_FILE]plaintext:file=".env.local.example" isMerged="true" # Configuración SMTP para Gmail SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=tu_email@gmail.com SMTP_PASS=tu_contraseña_de_aplicacion_gmail SMTP_FROM=contacto@isoftland.com CONTACT_EMAIL=ventas@isoftland.com # Opcional: Para desarrollo NODE_ENV=development [V0_FILE]markdown:file="GMAIL_SETUP.md" isMerged="true" # 📧 Configuración de Gmail SMTP para iSoftland ## Paso 1: Preparar tu cuenta de Gmail ### 1.1 Habilitar verificación en 2 pasos 1. Ve a [myaccount.google.com](https://myaccount.google.com) 2. Selecciona Seguridad en el panel izquierdo 3. En "Iniciar sesión en Google", selecciona Verificación en 2 pasos 4. Sigue las instrucciones para habilitarla ### 1.2 Generar contraseña de aplicación 1. En la misma sección de Seguridad 2. Busca Contraseñas de aplicaciones (aparece después de habilitar 2FA) 3. Selecciona la aplicación: Correo 4. Selecciona el dispositivo: Otro (nombre personalizado) 5. Escribe: iSoftland Website 6. Copia la contraseña generada (16 caracteres) ## Paso 2: Configurar variables de entorno Crea un archivo `.env.local` en la raíz del proyecto: \`\`\`env # Configuración SMTP para Gmail SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=tu_email@gmail.com SMTP_PASS=la_contraseña_de_aplicacion_de_16_caracteres SMTP_FROM=contacto@isoftland.com CONTACT_EMAIL=ventas@isoftland.com \`\`\` ## Paso 3: Instalar dependencias \`\`\`bash npm install nodemailer @types/nodemailer \`\`\` ## Paso 4: Probar la configuración 1. Reinicia el servidor de desarrollo: \`\`\`bash npm run dev \`\`\` 2. Ve a la sección de contacto en tu sitio web 3. Completa y envía el formulario 4. Revisa la consola para ver los logs de envío 5. Verifica que el email llegue a la dirección configurada ## Ejemplo de configuración completa: \`\`\`env SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=contacto@miempresa.com SMTP_PASS=abcd efgh ijkl mnop SMTP_FROM=contacto@isoftland.com CONTACT_EMAIL=ventas@isoftland.com \`\`\` ## Solución de problemas comunes: ### ❌ Error: "Invalid login" - Verifica que la verificación en 2 pasos esté habilitada - Asegúrate de usar la contraseña de aplicación, no tu contraseña normal ### ❌ Error: "Connection timeout" - Verifica tu conexión a internet - Algunos firewalls corporativos bloquean el puerto 587 ### ❌ Error: "Authentication failed" - Regenera la contraseña de aplicación - Verifica que no haya espacios extra en las variables de entorno ## 🔒 Seguridad - ✅ Nunca subas el archivo `.env.local` a Git - ✅ Usa contraseñas de aplicación, no tu contraseña principal - ✅ Considera usar un email dedicado para el sitio web - ✅ Revisa regularmente los accesos en tu cuenta de Google ## 📧 Formato del email El sistema enviará emails con: - ✅ Formato HTML profesional con colores de iSoftland - ✅ Todos los datos del formulario organizados - ✅ Fecha y hora de envío - ✅ Reply-to configurado al email del cliente - ✅ Asunto descriptivo con nombre y empresa ¡Listo! Una vez configurado, recibirás todas las consultas del sitio web directamente en tu email. [V0_FILE]javascript:file="scripts/test-email.js" isMerged="true" const nodemailer = require("nodemailer") require("dotenv").config({ path: ".env.local" }) async function testEmailConfiguration() { console.log("🧪 Probando configuración de email...\n") // Verificar variables de entorno console.log("📋 Variables de entorno:") console.log(`SMTP_HOST: ${process.env.SMTP_HOST}`) console.log(`SMTP_PORT: ${process.env.SMTP_PORT}`) console.log(`SMTP_USER: ${process.env.SMTP_USER}`) console.log(`SMTP_PASS: ${process.env.SMTP_PASS ? "configurada" : "❌ NO CONFIGURADA"}`) console.log(`CONTACT_EMAIL: ${process.env.CONTACT_EMAIL}\n`) if (!process.env.SMTP_USER || !process.env.SMTP_PASS) { console.log("❌ Error: Faltan configurar SMTP_USER y/o SMTP_PASS") console.log("📝 Edita el archivo .env.local con tus credenciales de Gmail") return } try { // Crear transporter console.log("🔧 Creando transporter...") const transporter = nodemailer.createTransporter({ host: process.env.SMTP_HOST, port: Number.parseInt(process.env.SMTP_PORT || "587"), secure: process.env.SMTP_PORT === "465", auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS, }, tls: { rejectUnauthorized: false, }, }) // Verificar conexión console.log("🔍 Verificando conexión SMTP...") await transporter.verify() console.log("✅ Conexión SMTP verificada correctamente\n") // Enviar email de prueba console.log("📧 Enviando email de prueba...") const testEmail = { from: `"iSoftland Test" <${process.env.SMTP_USER}>`, to: process.env.CONTACT_EMAIL || process.env.SMTP_USER, subject: "🧪 Prueba de configuración - iSoftland", html: `

🎉 ¡Configuración exitosa!

El sistema de email de iSoftland está funcionando correctamente

✅ Prueba completada

Este es un email de prueba para verificar que la configuración SMTP está funcionando.

Fecha: ${new Date().toLocaleString("es-AR")}

Servidor: ${process.env.SMTP_HOST}

Usuario: ${process.env.SMTP_USER}

Si recibes este email, significa que el formulario de contacto del sitio web funcionará correctamente.

`, text: ` 🎉 ¡Configuración exitosa! El sistema de email de iSoftland está funcionando correctamente. ✅ Prueba completada Este es un email de prueba para verificar que la configuración SMTP está funcionando. Fecha: ${new Date().toLocaleString("es-AR")} Servidor: ${process.env.SMTP_HOST} Usuario: ${process.env.SMTP_USER} Si recibes este email, significa que el formulario de contacto del sitio web funcionará correctamente. `, } const info = await transporter.sendMail(testEmail) console.log("✅ Email de prueba enviado correctamente!") console.log(`📧 Message ID: ${info.messageId}`) console.log(`📬 Enviado a: ${process.env.CONTACT_EMAIL || process.env.SMTP_USER}\n`) console.log("🎉 ¡Todo configurado correctamente!") console.log("💡 Ahora puedes probar el formulario de contacto en tu sitio web.") } catch (error) { console.log("❌ Error en la configuración:") console.error(error.message) if (error.code === "EAUTH") { console.log("\n💡 Posibles soluciones:") console.log("1. Verifica que la verificación en 2 pasos esté habilitada en Gmail") console.log("2. Usa una contraseña de aplicación, no tu contraseña normal") console.log("3. Regenera la contraseña de aplicación si es necesaria") } } } testEmailConfiguration() [V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js .yarn/install-state.gz # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store .pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env.local .env .env.production # vercel .vercel # typescript .tsbuildinfo next-env.d.ts # scripts /scripts/.log [V0_FILE]markdown:file="CONFIGURACION_RAPIDA.md" isMerged="true" # ⚡ Configuración Rápida - Gmail SMTP ## 🚀 Pasos para activar el email: ### 1. Instalar dependencias \`\`\`bash npm install \`\`\` ### 2. Configurar Gmail 1. Ve a [myaccount.google.com](https://myaccount.google.com) 2. Seguridad → Verificación en 2 pasos → Habilitar 3. Contraseñas de aplicaciones → Correo → Otro → "iSoftland" 4. Copia la contraseña de 16 caracteres ### 3. Editar .env.local Reemplaza estos valores en el archivo `.env.local`: \`\`\`env SMTP_USER=tu_email@gmail.com SMTP_PASS=la_contraseña_de_aplicacion_de_16_caracteres CONTACT_EMAIL=ventas@isoftland.com \`\`\` ### 4. Probar configuración \`\`\`bash npm run test-email \`\`\` ### 5. Iniciar servidor \`\`\`bash npm run dev \`\`\` ## ✅ ¡Listo! Ahora el formulario de contacto enviará emails automáticamente. ## 🔧 Solución de problemas - Si el test falla, revisa las credenciales en `.env.local` - Asegúrate de usar la contraseña de aplicación, no tu contraseña normal - Verifica que la verificación en 2 pasos esté habilitada [V0_FILE]plaintext:file=".env.production.example" isMerged="true" # Variables de entorno para PRODUCCIÓN - Vercel SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=tu_email@gmail.com SMTP_PASS=tu_contraseña_de_aplicacion_gmail SMTP_FROM=contacto@isoftland.com CONTACT_EMAIL=ventas@isoftland.com # URL del sitio en producción NEXT_PUBLIC_SITE_URL=https://tu-sitio.vercel.app # Configuración adicional NODE_ENV=production [V0_FILE]javascript:file="scripts/verify-production.js" isMerged="true" // Script para verificar configuración de producción const requiredEnvVars = ["SMTP_HOST", "SMTP_PORT", "SMTP_USER", "SMTP_PASS", "SMTP_FROM", "CONTACT_EMAIL"] console.log("🔍 Verificando configuración para producción...\n") let allConfigured = true requiredEnvVars.forEach((varName) => { const value = process.env[varName] if (value) { if (varName.includes("PASS")) { console.log(`✅ ${varName}: configurada`) } else { console.log(`✅ ${varName}: ${value}`) } } else { console.log(`❌ ${varName}: NO CONFIGURADA`) allConfigured = false } }) console.log("\n" + "=".repeat(50)) if (allConfigured) { console.log("🎉 ¡Todas las variables están configuradas!") console.log("✅ Listo para deploy en Vercel") } else { console.log("⚠️ Faltan configurar algunas variables") console.log("📝 Configúralas en Vercel Dashboard > Settings > Environment Variables") } console.log("\n📋 Próximos pasos:") console.log("1. Configura las variables en Vercel") console.log("2. Haz deploy: vercel --prod") console.log("3. Prueba el formulario en tu sitio en vivo") [V0_FILE]markdown:file="DEPLOY_VERCEL.md" isMerged="true" # 🚀 Deploy a Producción con Vercel ## Paso 1: Instalar Vercel CLI \`\`\`bash npm install -g vercel \`\`\` ## Paso 2: Login en Vercel \`\`\`bash vercel login \`\`\` ## Paso 3: Configurar Variables de Entorno en Vercel ### Opción A: Desde el Dashboard de Vercel 1. Ve a [vercel.com/dashboard](https://vercel.com/dashboard) 2. Selecciona tu proyecto (o créalo) 3. Ve a Settings > Environment Variables 4. Agrega estas variables: | Variable | Valor | Entorno | |----------|-------|---------| | \`SMTP_HOST\` | \`smtp.gmail.com\` | Production | | \`SMTP_PORT\` | \`587\` | Production | | \`SMTP_USER\` | \`tu_email@gmail.com\` | Production | | \`SMTP_PASS\` | \`tu_contraseña_de_aplicacion\` | Production | | \`SMTP_FROM\` | \`contacto@isoftland.com\` | Production | | \`CONTACT_EMAIL\` | \`ventas@isoftland.com\` | Production | ### Opción B: Desde la CLI \`\`\`bash vercel env add SMTP_HOST # Ingresa: smtp.gmail.com # Selecciona: Production vercel env add SMTP_PORT # Ingresa: 587 # Selecciona: Production vercel env add SMTP_USER # Ingresa: tu_email@gmail.com # Selecciona: Production vercel env add SMTP_PASS # Ingresa: tu_contraseña_de_aplicacion # Selecciona: Production vercel env add SMTP_FROM # Ingresa: contacto@isoftland.com # Selecciona: Production vercel env add CONTACT_EMAIL # Ingresa: ventas@isoftland.com # Selecciona: Production \`\`\` ## Paso 4: Deploy a Producción \`\`\`bash # Deploy de prueba (preview) npm run deploy-preview # Deploy a producción npm run deploy \`\`\` ## Paso 5: Verificar el Deploy 1. Verifica la build: - Ve a Vercel Dashboard > Deployments - Asegúrate de que el build sea exitoso 2. Prueba el formulario: - Ve a tu sitio en vivo - Completa el formulario de contacto - Verifica que llegue el email 3. Revisa los logs: - En Vercel Dashboard > Functions - Busca los logs de \`/api/contacto\` ## 🔧 Solución de Problemas ### ❌ Build falla \`\`\`bash # Prueba la build localmente npm run build \`\`\` ### ❌ Variables de entorno no funcionan - Verifica que estén configuradas para "Production" - Redeploy después de agregar variables - Usa \`vercel env ls\` para listar variables ### ❌ Email no se envía en producción - Revisa los logs en Vercel Dashboard > Functions - Verifica que Gmail permita "aplicaciones menos seguras" - Asegúrate de usar contraseña de aplicación ## 📊 Monitoreo ### Logs en tiempo real: \`\`\`bash vercel logs --follow \`\`\` ### Ver variables configuradas: \`\`\`bash vercel env ls \`\`\` ### Información del proyecto: \`\`\`bash vercel inspect \`\`\` ## 🎯 URLs importantes - Dashboard: https://vercel.com/dashboard - Docs: https://vercel.com/docs - Status: https://vercel-status.com ¡Listo! Tu sitio estará disponible en una URL como \`https://tu-proyecto.vercel.app\` [V0_FILE]png:file="public/logos/solarwinds-main.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Solarwinds_logo-MQ1eHUEjnUgOn9CBvOQGK5z4ilN2Eq.png" isMerged="true" [V0_FILE]typescriptreact:file="components/whatsapp-button.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { MessageCircle } from "lucide-react" export default function WhatsAppButton() { const phoneNumber = "5491125000900" const defaultMessage = "Hola, estoy interesado en sus servicios. ¿Podría darme más información?" const handleWhatsAppClick = () => { const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(defaultMessage)}` window.open(whatsappUrl, "_blank") } return (

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { motion } from "framer-motion" import Link from "next/link" import { Check } from "lucide-react" interface HeroProps { title: string subtitle: string cta: { text: string href: string variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "primary" } secondaryCta: { text: string href: string variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "primary" } gradient: string } export function Hero({ title, subtitle, cta, secondaryCta, gradient }: HeroProps) { return (

+35 años de experiencia
{title}

{subtitle}

Soporte local

Implementación rápida

Tecnología de punta

) } [V0_FILE]plaintext:file=".env.local" isEdit="true" isMerged="true" # Configuración Resend para iSoftland RESEND_API_KEY=re_ECD4aaYo_gYu3i126P24DTce2zVwibiVZ CONTACT_EMAIL=tomasp@isoftland.com # Configuración adicional NODE_ENV=development NEXT_PUBLIC_SITE_URL=http://localhost:3000 [V0_FILE]plaintext:file="public/clientes/banco-provincia.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bancoprovincia_logo-aEuu5aI4QsHLCvGVJCER2kTLdov0vW.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/banco-central.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bancocentral_logo-kW5KlF9NGwkDtDfs0b5Cb60v2Wvg8h.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/boca.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/BocaJuniors_logo-84VYwF6IvtVPqCfCQoGT3Kcsbomqvl.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/burger-king.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/burgerking_logo-RrIaJVZ6GYSdcJEZokK9qUDCniNF6q.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/cablevision.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cablevision_logo-M8o81AhEZrlz8cuDuvmmMNivJGpA3f.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/hospital-aleman.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hospitalaleman_logo-03nwqfyugK9vcEKvRCl1tm1p5NkuLe.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/musimundo.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/musimundo_logo-ZHNO1Chjf8xaWO3FCMhDrPTZMIsyli.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/rapsodia.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rapsodia_logo-VuPEsI2RBcz1yGeuGGok3Q5VHGZzgo.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/pampa-energia.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pampaenergia_logo-6AcUDuLJeucLJ9nEj3IPSntHNVmdce.avif" isMerged="true" [V0_FILE]plaintext:file="public/clientes/starbucks.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/starbucks_logo-OPfASmwbJQ5ru5LCgS9uk0DvwX1EiG.avif" isMerged="true" [V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { AlertCircle, CheckCircle2, Mail, Send } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { productos } from "@/lib/productos-data" interface FormData { name: string company: string email: string phone: string message: string solution?: string } interface ContactFormProps { preselectedProduct?: string } export default function ContactForm({ preselectedProduct }: ContactFormProps) { const [formData, setFormData] = useState({ name: "", company: "", email: "", phone: "", message: "", solution: preselectedProduct || "", }) // Actualizar el producto seleccionado cuando cambia el prop preselectedProduct useEffect(() => { setFormData((prev) => ({ ...prev, solution: preselectedProduct || prev.solution, })) }, [preselectedProduct]) const [isSubmitting, setIsSubmitting] = useState(false) const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle") const [errorMessage, setErrorMessage] = useState("") const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) setSubmitStatus("idle") setErrorMessage("") try { console.log("📧 Enviando formulario de contacto...") const response = await fetch("/api/contacto", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) // Intenta leer JSON, si falla, lee texto plano let responseData: any const contentType = response.headers.get("Content-Type") || "" if (contentType.includes("application/json")) { responseData = await response.json() } else { const text = await response.text() responseData = { message: text } } if (!response.ok) { throw new Error(responseData?.message || "Hubo un error al enviar el formulario") } console.log("✅ Formulario enviado correctamente") setSubmitStatus("success") setFormData({ name: "", company: "", email: "", phone: "", message: "", solution: preselectedProduct || "", }) } catch (error) { console.error("❌ Error enviando formulario:", error) setSubmitStatus("error") setErrorMessage(error instanceof Error ? error.message : "Hubo un error al enviar el formulario") } finally { setIsSubmitting(false) // Reset status after 8 seconds for success, 10 seconds for error setTimeout( () => { setSubmitStatus("idle") setErrorMessage("") }, submitStatus === "success" ? 8000 : 10000, ) } } return (
{submitStatus === "success" && ( ¡Mensaje enviado correctamente! Gracias por contactarnos. Hemos recibido tu consulta y nos pondremos en contacto contigo a la brevedad.
📧 Revisa tu email para la confirmación automática )} {submitStatus === "error" && ( Error al enviar el mensaje {errorMessage}
Por favor, intenta nuevamente o contáctanos directamente por WhatsApp. )}

Nombre completo

Empresa *

Correo electrónico *

Teléfono

Solución de interés

Mensaje * </div> <Button type="submit" className="w-full bg-white text-isoftland-blue hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed" disabled={isSubmitting} > {isSubmitting ? ( <div className="flex items-center gap-2"> <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-isoftland-blue"></div> Enviando mensaje... </div> ) : ( <div className="flex items-center gap-2"> <Send className="h-4 w-4" /> Enviar mensaje </div> )} </Button> <p className="text-xs text-inherit opacity-80 text-center mt-4"> Los campos marcados con * son obligatorios <br /> <small className="text-xs opacity-60">📧 Recibirás una confirmación automática en tu email</small> </p> </form> </div> ) } [V0_FILE]typescriptreact:file="app/api/contacto/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { EmailService } from "@/lib/email-service" export async function POST(request: Request) { try { // Parse the request body const body = await request.json() // Validate required fields const { name, company, email, message, phone, solution } = body if (!name || !company || !email || !message) { return NextResponse.json( { success: false, message: "Faltan campos obligatorios", }, { status: 400 }, ) } // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return NextResponse.json( { success: false, message: "Formato de email inválido", }, { status: 400 }, ) } console.log("📧 Procesando formulario de contacto:", { name, company, email }) // Send email using the email service const emailSent = await EmailService.sendContactForm({ name, company, email, phone, message, solution, }) if (!emailSent) { return NextResponse.json( { success: false, message: "Error al enviar el email. Por favor, intenta nuevamente.", }, { status: 500 }, ) } console.log("✅ Email enviado correctamente") // Return success response return NextResponse.json( { success: true, message: "¡Gracias por contactarnos! Hemos recibido tu consulta y nos pondremos en contacto contigo a la brevedad.", }, { status: 200 }, ) } catch (error: any) { console.error("❌ Error processing contact form:", error) // Siempre devolver JSON, nunca texto plano return NextResponse.json( { success: false, message: error.message || "Error interno del servidor. Por favor, intenta nuevamente más tarde.", error: process.env.NODE_ENV === "development" ? error.toString() : undefined, }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="lib/email-service.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { Resend } from "resend" // Email service utility export interface ContactFormData { name: string company: string email: string phone?: string message: string solution?: string } export class EmailService { static async sendContactForm(data: ContactFormData): Promise<boolean> { try { // Verificar configuración if (!process.env.RESEND_API_KEY) { console.error("❌ RESEND_API_KEY no configurada") throw new Error("Configuración de email no disponible") } const resend = new Resend(process.env.RESEND_API_KEY) const environment = process.env.NODE_ENV || "development" // Usar siempre el dominio de Resend que funciona const fromAddress = "iSoftland <onboarding@resend.dev>" // Format the email content const htmlContent = this.formatEmailContentHTML(data) console.log(`📧 Enviando email desde: ${environment}`) // Send email with Resend const { data: emailData, error } = await resend.emails.send({ from: fromAddress, to: [process.env.CONTACT_EMAIL || "tomasp@isoftland.com"], subject: `🔔 ${environment === "production" ? "" : "[DEV] "}Nueva consulta de ${data.name} - ${data.company}`, html: htmlContent, replyTo: data.email, headers: { "X-Priority": "1", }, }) if (error) { console.error("❌ Error enviando email con Resend:", error) throw new Error(`Error de Resend: ${error.message}`) } console.log("✅ Email enviado correctamente:", emailData?.id) return true } catch (error: any) { console.error("❌ Error sending email:", error) throw new Error(error.message || "Error al enviar el email") } } private static formatEmailContentHTML(data: ContactFormData): string { const solutionName = this.getSolutionName(data.solution) const environment = process.env.NODE_ENV || "development" const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "localhost:3000" return ` <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nueva consulta - iSoftland</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } .container { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .header { background: linear-gradient(135deg, #2A1A5E, #1E1347); color: white; padding: 30px 20px; text-align: center; } .header h1 { margin: 0 0 10px 0; font-size: 24px; } .header p { margin: 0; opacity: 0.9; } .content { padding: 0; } .section { margin: 0; padding: 25px; border-bottom: 1px solid #f0f0f0; } .section:last-child { border-bottom: none; } .section h3 { margin: 0 0 15px 0; color: #2A1A5E; font-size: 18px; display: flex; align-items: center; gap: 8px; } .info-grid { display: grid; grid-template-columns: 140px 1fr; gap: 12px; margin: 15px 0; } .info-label { font-weight: bold; color: #666; } .info-value { color: #333; } .message-box { background: #f8faff; padding: 20px; border-radius: 8px; border-left: 4px solid #2A1A5E; margin: 15px 0; } .footer { background: #2A1A5E; color: white; padding: 20px; text-align: center; } .footer p { margin: 5px 0; } .badge { background: #FF9E18; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; } .reply-button { display: inline-block; background: #FF9E18; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: bold; margin: 10px 0; } @media (max-width: 600px) { .info-grid { grid-template-columns: 1fr; gap: 8px; } .info-label { font-weight: bold; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>🔔 Nueva Consulta</h1> <p>Se ha recibido una nueva consulta desde el sitio web de iSoftland</p> ${environment === "production" ? "" : `<span class="badge">DESARROLLO</span>`} </div> <div class="content"> <div class="section"> <h3>👤 Datos del Contacto</h3> <div class="info-grid"> <span class="info-label">Nombre:</span> <span class="info-value"><strong>${data.name}</strong></span> <span class="info-label">Empresa:</span> <span class="info-value"><strong>${data.company}</strong></span> <span class="info-label">Email:</span> <span class="info-value"><a href="mailto:${data.email}" style="color: #2A1A5E; text-decoration: none;">${data.email}</a></span> <span class="info-label">Teléfono:</span> <span class="info-value">${data.phone || "No proporcionado"}</span> <span class="info-label">Solución:</span> <span class="info-value"><strong style="color: #2A1A5E;">${solutionName}</strong></span> </div> <a href="mailto:${data.email}" class="reply-button">📧 Responder al cliente</a> </div> <div class="section"> <h3>💬 Mensaje</h3> <div class="message-box"> ${data.message.replace(/\n/g, "<br>")} </div> </div> <div class="section"> <h3>📋 Información Técnica</h3> <div class="info-grid"> <span class="info-label">Fecha:</span> <span class="info-value">${new Date().toLocaleString("es-AR", { timeZone: "America/Argentina/Buenos_Aires", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", })}</span> <span class="info-label">Sitio web:</span> <span class="info-value"><a href="${siteUrl}" style="color: #2A1A5E;">${siteUrl}</a></span> <span class="info-label">Entorno:</span> <span class="info-value">${environment.toUpperCase()}</span> </div> </div> </div> <div class="footer"> <p><strong>iSoftland - Sistema de Contacto</strong></p> <p>Este es un mensaje automático. Para responder, utiliza: <strong>${data.email}</strong></p> </div> </div> </body> </html> ` } private static getSolutionName(solutionId?: string): string { const solutions: Record<string, string> = { eset: "ESET - Ciberseguridad", "whatsup-gold": "WhatsUp Gold - Monitoreo de redes", solarwinds: "SolarWinds - Monitoreo de redes", mdaemon: "MDaemon - Correo Electrónico", teamviewer: "TeamViewer - Control Remoto", } return solutionId ? solutions[solutionId] || "Solución no especificada" : "No especificada" } } [V0_FILE]png:file="public/clientes/banco-provincia.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bancoprovincia_logo-aEuu5aI4QsHLCvGVJCER2kTLdov0vW.avif" isMerged="true" [V0_FILE]png:file="public/clientes/banco-central.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bancocentral_logo-kW5KlF9NGwkDtDfs0b5Cb60v2Wvg8h.avif" isMerged="true" [V0_FILE]png:file="public/clientes/boca.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/BocaJuniors_logo-84VYwF6IvtVPqCfCQoGT3Kcsbomqvl.avif" isMerged="true" [V0_FILE]png:file="public/clientes/burger-king.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/burgerking_logo-RrIaJVZ6GYSdcJEZokK9qUDCniNF6q.avif" isMerged="true" [V0_FILE]png:file="public/clientes/cablevision.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cablevision_logo-M8o81AhEZrlz8cuDuvmmMNivJGpA3f.avif" isMerged="true" [V0_FILE]png:file="public/clientes/hospital-aleman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hospitalaleman_logo-03nwqfyugK9vcEKvRCl1tm1p5NkuLe.avif" isMerged="true" [V0_FILE]png:file="public/clientes/musimundo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/musimundo_logo-ZHNO1Chjf8xaWO3FCMhDrPTZMIsyli.avif" isMerged="true" [V0_FILE]png:file="public/clientes/rapsodia.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rapsodia_logo-VuPEsI2RBcz1yGeuGGok3Q5VHGZzgo.avif" isMerged="true" [V0_FILE]png:file="public/clientes/pampa-energia.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pampaenergia_logo-6AcUDuLJeucLJ9nEj3IPSntHNVmdce.avif" isMerged="true" [V0_FILE]png:file="public/clientes/starbucks.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/starbucks_logo-OPfASmwbJQ5ru5LCgS9uk0DvwX1EiG.avif" isMerged="true" [V0_FILE]typescriptreact:file="components/productos-home.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Link from "next/link" import { productos } from "@/lib/productos-data" export default function ProductosHome() { const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, } return ( <section id="productos" className="py-16 bg-isoftland-light"> <div className="container px-4 md:px-6"> <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} className="flex flex-col items-center justify-center space-y-4 text-center mb-10" > <h2 className="text-3xl md:text-4xl font-bold text-isoftland-blue">Nuestros Productos</h2> <p className="max-w-[800px] text-muted-foreground md:text-lg"> Soluciones tecnológicas líderes para potenciar tu empresa </p> </motion.div> <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true }} className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6 max-w-7xl mx-auto" > {productos.map((producto, index) => ( <motion.div key={producto.id} variants={item}> <Link href={`/productos/${producto.id}`} className="group bg-white rounded-xl p-4 md:p-6 shadow-sm hover:shadow-lg transition-all duration-300 h-full flex flex-col items-center border border-gray-100 hover:border-isoftland-accent/30" > <div className="w-full h-12 md:h-14 flex items-center justify-center mb-3 md:mb-4"> <img src={producto.logo || "/placeholder.svg"} alt={producto.nombre} className="max-h-10 md:max-h-12 max-w-full object-contain transition-transform duration-300 group-hover:scale-110" /> </div> <h3 className="font-semibold text-center text-isoftland-blue group-hover:text-isoftland-accent transition-colors duration-300 mb-2 text-sm md:text-base"> {producto.nombre} </h3> <p className="text-xs md:text-sm text-center text-gray-600 group-hover:text-gray-700 transition-colors"> {producto.descripcionCorta} </p> </Link> </motion.div> ))} </motion.div> </div> </section> ) } [V0_FILE]typescriptreact:file="lib/casos-exito-data.ts" isMerged="true" export interface CasoExito { id: string empresa: string industria: string pais: string equipos?: string producto: string resumen: string desafio: string solucion: string resultados: string testimonioDestacado: string responsable: string logo?: string } export const casosExito: CasoExito[] = [ { id: "policia-federal", empresa: "Superintendencia de Bienestar de la Policía Federal Argentina", industria: "Público", pais: "Argentina", equipos: "1,500 equipos", producto: "ESET Endpoint Protection Advanced", resumen: "Institución pública que protege grandes cantidades de información confidencial con ESET tras sufrir ataques de ransomware.", desafio: "Utilizaban un antivirus gratuito con limitaciones en la administración centralizada. Necesitaban una solución reconocida que permitiera gestionar todos los equipos desde una única consola y proteger datos confidenciales como bases de datos, presupuestos y proyectos.", solucion: "Implementaron ESET Endpoint Protection Advanced para proteger 1,500 equipos, incluyendo protección para endpoints, servidores de archivo y consola de administración centralizada. La implementación coincidió con un ataque masivo de ransomware que lograron resolver exitosamente.", resultados: "Administración centralizada simplificada, reducción del tiempo dedicado a tareas de seguridad, recuperación exitosa de documentos afectados por ransomware, y alta satisfacción con el soporte técnico remoto.", testimonioDestacado: "Estamos muy conformes con las soluciones de ESET y el equipo de atención técnica, sin duda han superado nuestras expectativas por lo que los recomendamos a otros colegas.", responsable: "Vladimiro Burlak (SysAdmin) y Martín Rodríguez (Administrador de Sistemas)", logo: "/casos-exito/policia-federal.png", }, { id: "greenpeace", empresa: "Greenpeace Argentina", industria: "No gubernamental", pais: "Argentina", producto: "ESET Endpoint Protection Advanced", resumen: "ONG internacional que mejoró su seguridad y gestión centralizada con ESET tras las limitaciones de su solución anterior.", desafio: "Falta de homogeneidad en el producto anterior, dificultades para administrar y hacer seguimiento del estado de seguridad de cada dispositivo. El producto tenía limitaciones en funcionalidades y versatilidad.", solucion: "Adoptaron ESET Endpoint Protection Advanced que incluye protección para terminales, dispositivos móviles y servidores de archivo, con consola de administración centralizada gratuita para controlar la seguridad de todos los equipos.", resultados: "Proceso de instalación sencillo sin problemas, excelente atención del soporte técnico, costo competitivo a través del partner local iSoftland, y gestión centralizada que marcó la diferencia respecto a otros proveedores.", testimonioDestacado: "Sin dudas recomendamos las soluciones de ESET para la protección de los equipos; la consola de administración realmente hizo la diferencia respecto a otros proveedores.", responsable: "Matías Moreno (Supervisor de TI)", logo: "/casos-exito/greenpeace.png", }, { id: "lanus", empresa: "Municipalidad de Lanús", industria: "Gobierno", pais: "Argentina", equipos: "2,700 equipos", producto: "ESET PROTECT Enterprise", resumen: "Organización gubernamental que desde hace 10 años confía en ESET para proteger 2,700 equipos con gestión centralizada.", desafio: "Después de malas experiencias en el pasado, necesitaban una solución confiable para proteger la integridad y disponibilidad de sus activos informáticos en una red de 2,700 equipos entre servidores, laptops y equipos de escritorio.", solucion: "Desde 2013 utilizan ESET PROTECT con gestión centralizada, seleccionado a través de concurso de precios por su excelente balance calidad/precio. La solución permite gestión masiva desde la consola y verificación en tiempo real del estado de los activos.", resultados: "Ahorro significativo de tiempo en tareas administrativas, protección confiable de activos, gestión centralizada eficiente, tranquilidad respecto a la integridad de datos, y excelente servicio postventa durante 10 años de relación.", testimonioDestacado: "Desde que contamos con ellos, nunca más tuvimos que renegar con un malware. Es muy completa y está al nivel de sus competidores.", responsable: "Jorge Abazyan (Director General)", logo: "/casos-exito/lanus.png", }, { id: "rio-grande", empresa: "Municipio de Río Grande", industria: "Público", pais: "Argentina", equipos: "700 equipos", producto: "ESET Endpoint Protection Standard", resumen: "Municipio que resolvió problemas recurrentes de ransomware y troyanos implementando ESET con administración centralizada.", desafio: "Sufrían reiterados inconvenientes con infecciones de ransomware y troyanos usando productos gratuitos. Necesitaban proteger información crítica de ciudadanos, proyectos y procedimientos internos almacenada en servidores y equipos.", solucion: "Implementaron ESET Endpoint Protection Standard para 700 equipos, incluyendo protección para endpoints, dispositivos móviles y servidores de archivo, con consola de administración para gestión unificada.", resultados: "Resolución completa de todos los inconvenientes anteriores, alto nivel de detección y eliminación de amenazas, capacidad de monitorear actividad de equipos desde una única consola, y funcionamiento sin problemas que no requirió soporte técnico.", testimonioDestacado: "Estamos muy conformes con las características y el nivel de seguridad que nos brinda ESET, por lo que la recomendamos sin duda.", responsable: "Matías Calderini (Director del área de informática)", logo: "/casos-exito/rio-grande.png", }, ] export function getCasoExitoById(id: string): CasoExito | undefined { return casosExito.find((caso) => caso.id === id) } [V0_FILE]typescriptreact:file="components/casos-exito.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ChevronDown, ChevronUp, Building2, MapPin, Users, Shield } from "lucide-react" import { casosExito } from "@/lib/casos-exito-data" export default function CasosExito() { const [expandedCase, setExpandedCase] = useState<string | null>(null) const toggleExpanded = (caseId: string) => { setExpandedCase(expandedCase === caseId ? null : caseId) } const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, } return ( <section id="casos-exito" className="w-full py-20 md:py-32 bg-white"> <div className="container px-4 md:px-6"> <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} className="flex flex-col items-center justify-center space-y-4 text-center mb-12" > <Badge className="rounded-full px-4 py-1.5 text-sm font-medium bg-isoftland-light text-isoftland-blue"> Casos de Éxito </Badge> <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-isoftland-blue"> Historias de éxito de nuestros clientes </h2> <p className="max-w-[800px] text-muted-foreground md:text-lg"> Descubre cómo organizaciones líderes han transformado su seguridad con nuestras soluciones </p> </motion.div> <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true }} className="grid gap-6 md:grid-cols-2 max-w-6xl mx-auto" > {casosExito.map((caso, index) => ( <motion.div key={caso.id} variants={item}> <Card className="h-full overflow-hidden border-border/40 hover:border-isoftland-accent/30 transition-all duration-300"> <CardHeader className="pb-4"> <div className="flex items-start justify-between mb-3"> <Badge variant="outline" className="bg-isoftland-light text-isoftland-blue"> {caso.industria} </Badge> <div className="flex items-center gap-2 text-sm text-muted-foreground"> <MapPin className="h-4 w-4" /> {caso.pais} </div> </div> <CardTitle className="text-xl text-isoftland-blue line-clamp-2 mb-2">{caso.empresa}</CardTitle> <div className="flex flex-wrap gap-3 text-sm text-muted-foreground mb-3"> <div className="flex items-center gap-1"> <Building2 className="h-4 w-4" /> <span>{caso.producto}</span> </div> {caso.equipos && ( <div className="flex items-center gap-1"> <Users className="h-4 w-4" /> <span>{caso.equipos}</span> </div> )} </div> <p className="text-muted-foreground line-clamp-3">{caso.resumen}</p> </CardHeader> <CardContent className="pt-0"> <Button variant="ghost" onClick={() => toggleExpanded(caso.id)} className="w-full text-isoftland-blue hover:text-isoftland-accent hover:bg-isoftland-light/50 transition-colors" > {expandedCase === caso.id ? ( <> Ver menos <ChevronUp className="ml-2 h-4 w-4" /> </> ) : ( <> Ver caso completo <ChevronDown className="ml-2 h-4 w-4" /> </> )} </Button> <AnimatePresence> {expandedCase === caso.id && ( <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3 }} className="overflow-hidden" > <div className="pt-6 space-y-6"> <div> <h4 className="font-semibold text-isoftland-blue mb-2 flex items-center gap-2"> <Shield className="h-4 w-4" /> El Desafío </h4> <p className="text-sm text-muted-foreground leading-relaxed">{caso.desafio}</p> </div> <div> <h4 className="font-semibold text-isoftland-blue mb-2">La Solución</h4> <p className="text-sm text-muted-foreground leading-relaxed">{caso.solucion}</p> </div> <div> <h4 className="font-semibold text-isoftland-blue mb-2">Resultados</h4> <p className="text-sm text-muted-foreground leading-relaxed">{caso.resultados}</p> </div> <div className="bg-isoftland-light p-4 rounded-lg border-l-4 border-isoftland-accent"> <blockquote className="text-sm italic text-isoftland-blue mb-2"> "{caso.testimonioDestacado}" </blockquote> <footer className="text-xs font-medium text-muted-foreground">— {caso.responsable}</footer> </div> </div> </motion.div> )} </AnimatePresence> </CardContent> </Card> </motion.div> ))} </motion.div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { motion } from "framer-motion" import { Menu, X, Shield, BarChart, Layers, LifeBuoy, Linkedin } from "lucide-react" import { Button } from "@/components/ui/button" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Hero } from "@/components/hero" import ProductosHome from "@/components/productos-home" import MasProductos from "@/components/mas-productos" import CasosExito from "@/components/casos-exito" import ContactForm from "@/components/contact-form" import ProductosDropdown from "@/components/productos-dropdown" import MobileProductosDropdown from "@/components/mobile-productos-dropdown" export default function LandingPage() { const [isScrolled, setIsScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { if (window.scrollY > 10) { setIsScrolled(true) } else { setIsScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, } const features = [ { title: "Seguridad Multicapa", description: "Protege endpoints y servidores con nuestras suites ESET de próxima generación.", icon: <Shield className="size-5" />, }, { title: "Monitoreo de Red", description: "Detecta incidentes en tiempo real con WhatsUp Gold y paneles intuitivos.", icon: <BarChart className="size-5" />, }, { title: "Gestión de Infraestructura", description: "Observabilidad completa con SolarWinds para maximizar disponibilidad.", icon: <Layers className="size-5" />, }, { title: "Consultoría y Soporte", description: "Acompañamiento experto desde la evaluación hasta la puesta en marcha.", icon: <LifeBuoy className="size-5" />, }, ] const clientes = [ { nombre: "Hospital Alemán", logo: "/clientes/hospital-aleman.png" }, { nombre: "Starbucks", logo: "/clientes/starbucks.png" }, { nombre: "Burger King", logo: "/clientes/burger-king.png" }, { nombre: "Musimundo", logo: "/clientes/musimundo.png" }, { nombre: "Boca Juniors", logo: "/clientes/boca.png" }, { nombre: "Rapsodia", logo: "/clientes/rapsodia.png" }, { nombre: "Banco Central", logo: "/clientes/banco-central.png" }, { nombre: "Cablevision", logo: "/clientes/cablevision.png" }, { nombre: "Pampa Energía", logo: "/clientes/pampa-energia.png" }, { nombre: "Banco Provincia", logo: "/clientes/banco-provincia.png" }, ] return ( <div className="flex min-h-[100dvh] flex-col"> <header className={`sticky top-0 z-50 w-full backdrop-blur-lg transition-all duration-300 ${isScrolled ? "bg-background/80 shadow-sm" : "bg-transparent"}`} > <div className="container flex h-16 items-center justify-between"> <div className="flex items-center gap-2"> <Link href="/" className="flex items-center"> <Image src="/logo-isoftland.png" alt="iSoftland" width={180} height={40} priority className="h-8 w-auto" /> </Link> </div> <nav className="hidden md:flex gap-8"> <Link href="#" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground" > Home </Link> <ProductosDropdown /> <Link href="/blog" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground" > Blog </Link> <Link href="#casos-exito" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground" > Casos de Éxito </Link> <Link href="#faq" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground" > FAQ </Link> </nav> <div className="hidden md:flex"> <Button variant="primary" className="rounded-full" asChild> <Link href="#contacto">Contáctanos</Link> </Button> </div> <div className="flex items-center gap-4 md:hidden"> <Button variant="ghost" size="icon" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}> {mobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />} <span className="sr-only">Menú</span> </Button> </div> </div> {/* Mobile menu /} {mobileMenuOpen && ( <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} className="md:hidden absolute top-16 inset-x-0 bg-background/95 backdrop-blur-lg border-b" > <div className="container py-4 flex flex-col gap-2"> <Link href="#" className="py-2 text-sm font-medium" onClick={() => setMobileMenuOpen(false)}> Home </Link> <MobileProductosDropdown onClose={() => setMobileMenuOpen(false)} /> <Link href="/blog" className="py-2 text-sm font-medium" onClick={() => setMobileMenuOpen(false)}> Blog </Link> <Link href="#casos-exito" className="py-2 text-sm font-medium" onClick={() => setMobileMenuOpen(false)}> Casos de Éxito </Link> <Link href="#faq" className="py-2 text-sm font-medium" onClick={() => setMobileMenuOpen(false)}> FAQ </Link> <div className="flex flex-col gap-2 pt-2 border-t mt-2"> <Button variant="primary" className="rounded-full" asChild> <Link href="#contacto" onClick={() => setMobileMenuOpen(false)}> Contáctanos </Link> </Button> </div> </div> </motion.div> )} </header> <main className="flex-1"> {/ Hero Section /} <Hero title="Soluciones de Software Corporativo" subtitle="Más de 35 años brindando soluciones de innovación tecnológica en Latinoamérica." cta={{ text: "Contáctanos", href: "#contacto", variant: "primary" }} secondaryCta={{ text: "Nuestros Productos", href: "#productos", variant: "ghost" }} gradient="bg-[linear-gradient(135deg,theme(colors.isoftland.blue),theme(colors.isoftland.blue2))]" /> {/ Nuestros Productos Section /} <ProductosHome /> {/ Más Productos Section /} <MasProductos /> {/ Features Section - Soluciones clave para tu infraestructura de TI /} <section id="features" className="w-full py-20 md:py-32 bg-isoftland-light"> <div className="container px-4 md:px-6"> <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} className="flex flex-col items-center justify-center space-y-4 text-center mb-12" > <Badge className="rounded-full px-4 py-1.5 text-sm font-medium bg-isoftland-accent text-isoftland-blue2"> Características </Badge> <h2 className="text-3xl md:text-4xl font-bold tracking-tight"> Soluciones clave para tu infraestructura de TI </h2> <p className="max-w-[800px] text-muted-foreground md:text-lg"> iSoftland integra soluciones líderes en seguridad, monitoreo y respaldo empresarial. </p> </motion.div> <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true }} className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4" > {features.map((feature, i) => ( <motion.div key={i} variants={item}> <Card className="h-full overflow-hidden bg-white border-border/40 rounded-xl shadow-sm transition-all hover:shadow-md"> <CardContent className="p-6 flex flex-col h-full"> <div className="size-10 rounded-full bg-isoftland-light flex items-center justify-center text-isoftland-blue mb-4"> {feature.icon} </div> <h3 className="text-xl font-bold mb-2 text-isoftland-blue">{feature.title}</h3> <p className="text-sm leading-relaxed">{feature.description}</p> </CardContent> </Card> </motion.div> ))} </motion.div> </div> </section> {/ Partners Section - Clientes que confían en nosotros /} <section className="w-full py-12 border-y bg-muted/30"> <div className="container px-4 md:px-6"> <div className="flex flex-col items-center justify-center space-y-8 text-center"> <p className="text-sm font-medium text-muted-foreground">Clientes que confían en nosotros</p> <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-items-center w-full max-w-6xl"> {clientes.map((cliente, index) => ( <div key={index} className="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow" > <Image src={cliente.logo || "/placeholder.svg"} alt={cliente.nombre} width={120} height={60} className="h-12 w-auto object-contain transition-all duration-300 hover:scale-105" /> </div> ))} </div> </div> </div> </section> {/ Casos de Éxito Section /} <CasosExito /> {/ FAQ Section /} <section id="faq" className="w-full py-20 md:py-32 bg-isoftland-light"> <div className="container px-4 md:px-6"> <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} className="flex flex-col items-center justify-center space-y-4 text-center mb-12" > <Badge className="rounded-full px-4 py-1.5 text-sm font-medium bg-isoftland-accent text-isoftland-blue2"> FAQ </Badge> <h2 className="text-3xl md:text-4xl font-bold tracking-tight">Preguntas Frecuentes</h2> <p className="max-w-[800px] text-muted-foreground md:text-lg"> Encuentra respuestas a preguntas comunes sobre nuestros productos y servicios. </p> </motion.div> <div className="mx-auto max-w-3xl"> <Accordion type="single" collapsible className="w-full"> {[ { question: "¿Qué tipo de soporte ofrecen?", answer: "El soporte varía según el producto y la empresa. Todos los productos corporativos incluyen soporte por correo electrónico, con opciones adicionales que ofrecen soporte prioritario y telefónico. El soporte de los productos hogareños adquiridos en la Tienda ESET tienen soporte directo del fabricante.", }, { question: "¿Cómo accedo al soporte corporativo?", answer: "Envíe un mail a soporte@isoftland.com indicando datos completos del producto, licencia, y de la empresa cliente, y describiendo con detalles la duda o consulta.", }, { question: "¿Cómo accedo al soporte para clientes de la tienda ESET?", answer: ( <span> Contacte a ESET en forma directa en esta página:{" "} <a href="https://www.eset.com/ar/soporte/contacto/" target="_blank" rel="noopener noreferrer" className="text-isoftland-blue hover:text-isoftland-accent underline" > https://www.eset.com/ar/soporte/contacto/ </a> </span> ), }, { question: "¿Consultas respecto a la facturación de productos adquiridos en la Tienda ESET?", answer: "Envíe un mail a iventas@isoftland.com.", }, ].map((faq, i) => ( <motion.div key={i} initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.3, delay: i 0.05 }} > <AccordionItem value={`item-${i}`} className="border-b border-border/40 py-2"> <AccordionTrigger className="text-left font-medium hover:no-underline"> {faq.question} </AccordionTrigger> <AccordionContent className="text-muted-foreground">{faq.answer}</AccordionContent> </AccordionItem> </motion.div> ))} </Accordion> </div> </div> </section> {/* Contact Section /} <section id="contacto" className="w-full py-20 md:py-32 bg-gradient-to-br from-isoftland-blue to-isoftland-blue2 text-white relative overflow-hidden" > <div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#ffffff10_1px,transparent_1px),linear-gradient(to_bottom,#ffffff10_1px,transparent_1px)] bg-[size:4rem_4rem]"></div> <div className="absolute -top-24 -left-24 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div> <div className="absolute -bottom-24 -right-24 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div> <div className="container px-4 md:px-6 relative"> <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="flex flex-col items-center justify-center space-y-6 text-center mb-12" > <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">Contáctanos</h2> <p className="mx-auto max-w-[700px] text-primary-foreground/80 md:text-xl"> Completa el formulario y un especialista se pondrá en contacto contigo para asesorarte sobre nuestras soluciones. </p> </motion.div> <div className="max-w-lg mx-auto bg-white/10 backdrop-blur-sm rounded-xl p-6 md:p-8 shadow-lg"> <ContactForm /> </div> </div> </section> </main> {/ Footer simplificado /} <footer className="w-full border-t bg-background/95 backdrop-blur-sm"> <div className="container flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-8 md:px-6"> <div className="flex items-center gap-4"> <Image src="/logo-isoftland.png" alt="iSoftland" width={120} height={30} className="h-6 w-auto" /> <Link href="https://www.linkedin.com/company/isoftland" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-foreground transition-colors" aria-label="LinkedIn" > <Linkedin className="size-5" /> </Link> </div> <p className="text-xs text-muted-foreground text-center sm:text-right"> © 2025 iSoftland. Todos los derechos reservados. </p> </div> </footer> </div> ) } [V0_FILE]xml:file="public/logos/anydesk.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/anydesk-8lmkYFX8h7Zhfv2tsU4eSh16fwll0E.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/mas-productos.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Badge } from "@/components/ui/badge" import { productosAdicionales } from "@/lib/productos-data" export default function MasProductos() { const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.05, }, }, } const item = { hidden: { opacity: 0, y: 10 }, show: { opacity: 1, y: 0 }, } return ( <section id="mas-productos" className="py-16 bg-white"> <div className="container px-4 md:px-6"> <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} className="flex flex-col items-center justify-center space-y-4 text-center mb-12" > <Badge className="rounded-full px-4 py-1.5 text-sm font-medium bg-isoftland-light text-isoftland-blue"> Portafolio Completo </Badge> </motion.div> <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true }} className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-7 gap-4 max-w-6xl mx-auto justify-items-center" > {productosAdicionales.map((producto, index) => ( <motion.div key={index} variants={item} className="group bg-white rounded-lg p-4 shadow-sm border border-gray-100 hover:shadow-md hover:border-isoftland-accent/30 transition-all duration-300 flex flex-col items-center justify-center min-h-[100px] w-full" > <div className="w-full h-12 flex items-center justify-center mb-2 bg-white rounded"> <img src={producto.logo || "/placeholder.svg?height=40&width=80&text=" + producto.nombre} alt={producto.nombre} className="max-h-8 max-w-full object-contain filter grayscale group-hover:grayscale-0 transition-all duration-300" /> </div> <h3 className="text-xs font-medium text-center text-gray-700 group-hover:text-isoftland-blue transition-colors"> {producto.nombre} </h3> </motion.div> ))} </motion.div> </div> </section> ) } [V0_FILE]png:file="public/logos/invgate.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/invgate-5Sqn5SNF6HLWnCakredZ7VEgsKnLBG.png" isMerged="true" [V0_FILE]png:file="public/logos/beyond-compare.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/beyond%20compare-yOGrXDawpxfL9mqrYoFiYEUTRgLQ0K.png" isMerged="true" [V0_FILE]png:file="public/logos/anydesk.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/anydesk-1bjDjv8QrCEswoKKUhd8zF151gOx5T.png" isMerged="true" [V0_FILE]png:file="public/logos/avast.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/avast-9kmZBTz6yp3fTyhWAkCACb7oivmhgv.png" isMerged="true" [V0_FILE]png:file="public/logos/gfi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/gfi-cBcQbvwbMptLk9zJ5UGxZMskoclxdI.png" isMerged="true" [V0_FILE]png:file="public/logos/acronis.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/acronis-ZJGCoa0yB4sTY82SIWJf6SAuZFSSjK.png" isMerged="true" [V0_FILE]png:file="public/logos/goldmine.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/goldmine-uHvff7LBQ7pixRTRhT4tlMoYRVZWRj.png" isMerged="true" [V0_FILE]plaintext:file="public/logos/fastvue.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fastvue-4iL9tMUlANKMc4sOYMVqpK1OIf1fBM.avif" isMerged="true" [V0_FILE]png:file="public/logos/adobe.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/adobe-ZTkgnlYqzQhsaf2o80Ck31Xeks4cYl.png" isMerged="true" [V0_FILE]png:file="public/logos/kaspersky.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/kaspersky-rftovkhDT93GumiIenPZpsqTQ0fqJ6.png" isMerged="true" [V0_FILE]png:file="public/logos/veeam.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/veeam-L92ea6DQOYcvZyHrh8kfNGtbDFDokW.png" isMerged="true" [V0_FILE]png:file="public/logos/symantec.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/symantec-G8iWC3pc3oCFK8UUEponxXJqKWoOV1.png" isMerged="true" [V0_FILE]png:file="public/logos/netsupport.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/netsupport-9Vc0dNGWYuDO4YSFnyHSMQONGu922K.png" isMerged="true" [V0_FILE]png:file="public/logos/sendmarc.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sendmark-NmiKfDLcJCN1Ibkjli0OsKy18PXeOV.png" isMerged="true" [V0_FILE]png:file="public/logos/promodag.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/promodag-d4oR5LNdiHtJixOMaxOZRPxkijSoQt.png" isMerged="true" [V0_FILE]png:file="public/logos/sophos.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sophos-TEK4NapYrleOZDHaymV6Wl1fYwlGzZ.png" isMerged="true" [V0_FILE]png:file="public/logos/soti.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/soti-shAk14gZZfpK72SITN8cvUomfoUw5O.png" isMerged="true" [V0_FILE]png:file="public/logos/moveit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/moveit-FQXpHg2WXhiBtOdWttN537b2ShlyUJ.png" isMerged="true" [V0_FILE]png:file="public/logos/ultraedit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ultraedit-N2RXzGRxM9A5McEO23rec3SAtpgI3u.png" isMerged="true" [V0_FILE]png:file="public/logos/veritas.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/veritas-kIPL2cdMdRPbUgcbs6o7zF9HfffJ5D.png" isMerged="true" [V0_FILE]png:file="public/logos/webtrends.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/webtrends-DnaUjuLfsit50lf1ZJwcgf0Y86boOW.png" isMerged="true" [V0_FILE]typescriptreact:file="lib/productos-data.ts" isEdit="true" isMerged="true" export interface Producto { id: string nombre: string logo: string descripcionCorta: string descripcionLarga: string caracteristicas: string[] beneficios: string[] categoria: string imagenHero?: string casosDeUso?: string[] } export const productos: Producto[] = [ { id: "eset", nombre: "ESET", logo: "/logos/eset-new.png", descripcionCorta: "Ciberseguridad", descripcionLarga: "ESET ofrece soluciones de seguridad avanzadas para proteger su empresa contra amenazas cibernéticas. Con tecnología multicapa, protección contra ransomware y gestión centralizada, ESET proporciona una defensa robusta para su infraestructura de TI.", caracteristicas: [ "Protección contra malware y ransomware", "Gestión centralizada de seguridad", "Bajo impacto en el rendimiento del sistema", "Protección para endpoints, servidores y dispositivos móviles", "Cifrado de datos y prevención de fugas de información", "Detección avanzada de amenazas con machine learning", ], beneficios: [ "Reducción de riesgos de seguridad", "Cumplimiento de normativas de protección de datos", "Menor costo operativo en gestión de seguridad", "Protección continua sin afectar el rendimiento", "Visibilidad completa del estado de seguridad", ], categoria: "seguridad", imagenHero: "/productos/eset-hero.jpg", casosDeUso: [ "Protección de infraestructura empresarial", "Seguridad para entornos de trabajo remoto", "Protección de datos sensibles en el sector financiero", "Seguridad para instituciones educativas", ], }, { id: "whatsup-gold", nombre: "WhatsUp Gold", logo: "/logos/whatsup-new.png", descripcionCorta: "Monitoreo de redes", descripcionLarga: "WhatsUp Gold proporciona monitoreo integral de redes, servidores, aplicaciones y dispositivos. Obtenga visibilidad completa de su infraestructura IT con alertas en tiempo real y paneles personalizables para identificar y resolver problemas antes de que afecten a sus usuarios.", caracteristicas: [ "Monitoreo de disponibilidad y rendimiento", "Mapeo automático de redes", "Alertas y notificaciones personalizables", "Análisis de tráfico de red", "Monitoreo de aplicaciones y servicios", "Informes detallados y personalizables", ], beneficios: [ "Reducción de tiempo de inactividad", "Identificación proactiva de problemas", "Optimización del rendimiento de la red", "Planificación efectiva de capacidad", "Mejora en la toma de decisiones basada en datos", ], categoria: "monitoreo", imagenHero: "/productos/whatsup-hero.jpg", casosDeUso: [ "Monitoreo de infraestructura crítica", "Gestión de redes empresariales", "Supervisión de centros de datos", "Monitoreo de servicios en la nube", ], }, { id: "solarwinds", nombre: "SolarWinds", logo: "/logos/solarwinds-main.png", descripcionCorta: "Monitoreo de redes", descripcionLarga: "SolarWinds ofrece una suite completa de herramientas para la gestión y monitoreo de infraestructura IT. Desde monitoreo de red hasta gestión de bases de datos y análisis de logs, SolarWinds proporciona visibilidad total de su entorno tecnológico.", caracteristicas: [ "Monitoreo de red y servidores", "Gestión de bases de datos", "Análisis de logs y eventos", "Monitoreo de aplicaciones web", "Gestión de configuraciones", "Reportes y dashboards personalizables", ], beneficios: [ "Visibilidad completa de la infraestructura", "Detección proactiva de problemas", "Optimización del rendimiento", "Reducción de tiempo de resolución", "Mejora en la planificación de capacidad", ], categoria: "infraestructura", imagenHero: "/productos/solarwinds-hero.jpg", casosDeUso: [ "Monitoreo de centros de datos", "Gestión de redes empresariales", "Supervisión de aplicaciones críticas", "Análisis de rendimiento de bases de datos", ], }, { id: "mdaemon", nombre: "MDaemon", logo: "/logos/mdaemon-new.png", descripcionCorta: "Correo Electrónico", descripcionLarga: "MDaemon es un servidor de correo electrónico seguro y confiable diseñado para empresas de todos los tamaños. Ofrece una alternativa rentable a Microsoft Exchange con funciones de seguridad robustas y fácil administración, ideal para empresas que buscan control total sobre sus comunicaciones.", caracteristicas: [ "Correo electrónico seguro y confiable", "Protección contra spam y malware", "Acceso webmail y móvil", "Fácil instalación y administración", "Calendario y contactos compartidos", "Archivado de mensajes y cumplimiento normativo", ], beneficios: [ "Control total sobre los datos de correo", "Reducción de costos de licenciamiento", "Mejora en la seguridad del correo", "Simplicidad en la administración", "Independencia de servicios en la nube", ], categoria: "comunicacion", imagenHero: "/productos/mdaemon-hero.jpg", casosDeUso: [ "Servidor de correo para PyMEs", "Alternativa a servicios de correo en la nube", "Comunicaciones seguras para sectores regulados", "Gestión de correo para múltiples dominios", ], }, { id: "teamviewer", nombre: "TeamViewer", logo: "/logos/teamviewer-new.png", descripcionCorta: "Control Remoto", descripcionLarga: "TeamViewer es una solución líder para acceso remoto, control y soporte que permite conectarse a dispositivos desde cualquier lugar. Ideal para soporte técnico, trabajo remoto y colaboración a distancia, TeamViewer ofrece conexiones seguras y de alto rendimiento.", caracteristicas: [ "Acceso remoto seguro a equipos", "Transferencia de archivos", "Reuniones en línea y videoconferencias", "Soporte técnico a distancia", "Control remoto de dispositivos móviles", "Integración con sistemas de tickets", ], beneficios: [ "Soporte técnico más eficiente", "Reducción de tiempos de resolución", "Facilitación del trabajo remoto", "Mejora en la colaboración entre equipos", "Reducción de costos de desplazamiento", ], categoria: "soporte", imagenHero: "/productos/teamviewer-hero.jpg", casosDeUso: [ "Soporte técnico remoto", "Trabajo desde casa", "Mantenimiento de equipos distribuidos", "Capacitación y formación a distancia", ], }, ] // Productos adicionales para la sección "Portafolio Completo" export const productosAdicionales = [ { nombre: "SOTI", logo: "/logos/soti.png" }, { nombre: "Veeam", logo: "/logos/veeam.png" }, { nombre: "MOVEit", logo: "/logos/moveit.png" }, { nombre: "GFI Software", logo: "/logos/gfi.png" }, { nombre: "AnyDesk", logo: "/logos/anydesk.png" }, { nombre: "Symantec", logo: "/logos/symantec.png" }, { nombre: "VERITAS", logo: "/logos/veritas.png" }, { nombre: "InvGate", logo: "/logos/invgate.png" }, { nombre: "GoldMine", logo: "/logos/goldmine.png" }, { nombre: "Fastvue", logo: "/logos/fastvue.avif" }, { nombre: "Sophos", logo: "/logos/sophos.png" }, { nombre: "WebTrends", logo: "/logos/webtrends.png" }, { nombre: "Acronis", logo: "/logos/acronis.png" }, { nombre: "NetSupport", logo: "/logos/netsupport.png" }, { nombre: "Beyond Compare", logo: "/logos/beyond-compare.png" }, { nombre: "Kaspersky", logo: "/logos/kaspersky.png" }, { nombre: "Avast", logo: "/logos/avast.png" }, { nombre: "Adobe", logo: "/logos/adobe.png" }, { nombre: "Promodag", logo: "/logos/promodag.png" }, { nombre: "SendMarc", logo: "/logos/sendmarc.png" }, { nombre: "Ultraedit", logo: "/logos/ultraedit.png" }, ] export function getProductoById(id: string): Producto | undefined { return productos.find((producto) => producto.id === id) } export function getProductosByCategoria(categoria: string): Producto[] { return productos.filter((producto) => producto.categoria === categoria) } [V0_FILE]typescriptreact:file="package.json" isEdit="true" isMerged="true" { "name": "saas-landing-page", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "test-email": "node scripts/test-email.js", "verify-prod": "node scripts/verify-production.js", "deploy": "vercel --prod", "deploy-preview": "vercel" }, "dependencies": { "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-select": "2.2.6", "@radix-ui/react-tabs": "^1.0.4", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", "react-markdown": "^9.0.1", "remark-gfm": "^4.0.0", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7", "resend": "^0.8.6", "nodemailer": "7.0.9", "dotenv": "17.2.3" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef<typeof LabelPrimitive.Root>, React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> >(({ className, ...props }, ref) => ( <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} /> )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import "@/styles/globals.css" import { Inter } from "next/font/google" import type { Metadata } from "next" import { ThemeProvider } from "@/components/theme-provider" import WhatsAppButton from "@/components/whatsapp-button" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) export const metadata: Metadata = { title: "iSoftland +35 años", description: "Distribuimos e implementamos tecnologías de clase mundial para hacer crecer tu empresa.", icons: { icon: "/icon.svg", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="es" suppressHydrationWarning> <body className={`${inter.className} ${inter.variable}`}> <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange> {children} <WhatsAppButton /> </ThemeProvider> </body> </html> ) } [V0_FILE]jpg:file="app/icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/app/icon-IpXAQCkY14ZcM86hZHVZtUfJtIA2Wa.png"</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This