Spaces:
Runtime error
Runtime error
| import React, { useState } from 'react'; | |
| import { | |
| Cpu, | |
| Code2, | |
| Settings, | |
| Users, | |
| Mail, | |
| Phone, | |
| MapPin, | |
| ChevronRight, | |
| Server, | |
| Monitor, | |
| Database, | |
| ShieldCheck, | |
| Menu, | |
| X, | |
| ArrowRight, | |
| Smartphone, | |
| Zap, | |
| Droplets | |
| } from 'lucide-react'; | |
| import { motion, AnimatePresence } from 'motion/react'; | |
| // --- Components --- | |
| const Logo = ({ className = "" }: { className?: string }) => ( | |
| <svg | |
| viewBox="0 0 400 220" | |
| className={className} | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| {/* TECNO Text */} | |
| <text | |
| x="40" | |
| y="45" | |
| fill="black" | |
| style={{ font: 'bold 32px Arial, sans-serif', letterSpacing: '12px' }} | |
| > | |
| TECNO | |
| </text> | |
| {/* Squares Row */} | |
| <rect x="0" y="65" width="35" height="35" fill="#F0F0F0" /> | |
| <rect x="45" y="65" width="35" height="35" fill="#D0D0D0" /> | |
| <rect x="90" y="65" width="35" height="35" fill="#A0A0A0" /> | |
| <rect x="135" y="65" width="35" height="35" fill="#707070" /> | |
| <rect x="180" y="65" width="35" height="35" fill="#000000" /> | |
| {/* Quarter Circle Shape */} | |
| <path | |
| d="M225 100 V30 C225 30 270 30 270 100 H225Z" | |
| fill="#A0A0A0" | |
| /> | |
| <rect x="240" y="55" width="15" height="15" fill="white" /> | |
| {/* silf Text */} | |
| <text | |
| x="145" | |
| y="190" | |
| fill="black" | |
| style={{ font: '900 110px Arial, sans-serif', letterSpacing: '-2px' }} | |
| > | |
| silf | |
| </text> | |
| </svg> | |
| ); | |
| const Navbar = () => { | |
| const [isOpen, setIsOpen] = useState(false); | |
| const navLinks = [ | |
| { name: 'Sistemas', href: '#sistemas' }, | |
| { name: 'Servicios', href: '#servicios' }, | |
| { name: 'Hardware', href: '#hardware' }, | |
| { name: 'Software', href: '#software' }, | |
| { name: 'Contacto', href: '#contacto' }, | |
| ]; | |
| return ( | |
| <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100"> | |
| <div className="max-w-7xl mx-auto px-6 h-24 flex items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <Logo className="h-16 w-auto" /> | |
| </div> | |
| {/* Desktop Nav */} | |
| <div className="hidden md:flex items-center gap-8"> | |
| {navLinks.map((link) => ( | |
| <a | |
| key={link.name} | |
| href={link.href} | |
| className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors" | |
| > | |
| {link.name} | |
| </a> | |
| ))} | |
| <button className="bg-zinc-900 text-white px-6 py-2.5 rounded-full text-sm font-bold hover:bg-zinc-800 transition-all active:scale-95"> | |
| Cotizar Proyecto | |
| </button> | |
| </div> | |
| {/* Mobile Toggle */} | |
| <button className="md:hidden p-2" onClick={() => setIsOpen(!isOpen)}> | |
| {isOpen ? <X size={24} /> : <Menu size={24} />} | |
| </button> | |
| </div> | |
| {/* Mobile Nav */} | |
| <AnimatePresence> | |
| {isOpen && ( | |
| <motion.div | |
| initial={{ opacity: 0, height: 0 }} | |
| animate={{ opacity: 1, height: 'auto' }} | |
| exit={{ opacity: 0, height: 0 }} | |
| className="md:hidden bg-white border-b border-zinc-100 overflow-hidden" | |
| > | |
| <div className="px-6 py-8 flex flex-col gap-6"> | |
| {navLinks.map((link) => ( | |
| <a | |
| key={link.name} | |
| href={link.href} | |
| onClick={() => setIsOpen(false)} | |
| className="text-lg font-bold text-zinc-900" | |
| > | |
| {link.name} | |
| </a> | |
| ))} | |
| <button className="w-full bg-zinc-900 text-white py-4 rounded-2xl font-bold"> | |
| Cotizar Proyecto | |
| </button> | |
| </div> | |
| </motion.div> | |
| )} | |
| </AnimatePresence> | |
| </nav> | |
| ); | |
| }; | |
| const Hero = () => ( | |
| <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden"> | |
| <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center"> | |
| <motion.div | |
| initial={{ opacity: 0, x: -20 }} | |
| animate={{ opacity: 1, x: 0 }} | |
| transition={{ duration: 0.6 }} | |
| > | |
| <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-100 text-zinc-600 text-xs font-bold uppercase tracking-widest mb-6"> | |
| <span className="w-2 h-2 rounded-full bg-zinc-900 animate-pulse" /> | |
| Innovación Tecnológica Integral | |
| </div> | |
| <h1 className="text-6xl lg:text-8xl font-black tracking-tighter leading-[0.9] mb-8"> | |
| Sistemas que <br /> | |
| <span className="text-zinc-400">Impulsan tu</span> <br /> | |
| Industria. | |
| </h1> | |
| <p className="text-xl text-zinc-600 max-w-lg mb-10 leading-relaxed"> | |
| En Tecnosilf diseñamos y ejecutamos soluciones de hardware y software a medida, optimizando procesos críticos con tecnología de vanguardia. | |
| </p> | |
| <div className="flex flex-col sm:flex-row gap-4"> | |
| <button className="bg-zinc-900 text-white px-8 py-4 rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all group"> | |
| Ver Soluciones | |
| <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" /> | |
| </button> | |
| <button className="border border-zinc-200 px-8 py-4 rounded-2xl font-bold hover:bg-zinc-50 transition-all"> | |
| Nuestros Servicios | |
| </button> | |
| </div> | |
| </motion.div> | |
| <motion.div | |
| initial={{ opacity: 0, scale: 0.9 }} | |
| animate={{ opacity: 1, scale: 1 }} | |
| transition={{ duration: 0.8, delay: 0.2 }} | |
| className="relative" | |
| > | |
| <div className="aspect-square bg-zinc-100 rounded-[40px] overflow-hidden relative group"> | |
| <img | |
| src="https://picsum.photos/seed/power-substation/1200/1200" | |
| alt="Infraestructura Eléctrica" | |
| className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" | |
| referrerPolicy="no-referrer" | |
| /> | |
| <div className="absolute inset-0 bg-gradient-to-t from-zinc-900/40 to-transparent" /> | |
| <div className="absolute bottom-8 left-8 right-8 p-6 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl text-white"> | |
| <div className="text-xs font-bold uppercase tracking-widest opacity-70 mb-1">Presencia Regional</div> | |
| <div className="text-xl font-bold">Soluciones para Cooperativas Eléctricas</div> | |
| </div> | |
| </div> | |
| {/* Decorative elements */} | |
| <div className="absolute -top-6 -right-6 w-32 h-32 bg-zinc-900 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob" /> | |
| <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-zinc-400 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob animation-delay-2000" /> | |
| </motion.div> | |
| </div> | |
| </section> | |
| ); | |
| const FeatureGrid = ({ title, subtitle, items, id }: { title: string, subtitle: string, items: any[], id: string }) => ( | |
| <section id={id} className="py-24 bg-white"> | |
| <div className="max-w-7xl mx-auto px-6"> | |
| <div className="mb-16"> | |
| <h2 className="text-4xl font-black tracking-tighter mb-4">{title}</h2> | |
| <p className="text-zinc-500 max-w-2xl">{subtitle}</p> | |
| </div> | |
| <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| {items.map((item, index) => ( | |
| <motion.div | |
| key={index} | |
| whileHover={{ y: -5 }} | |
| className="p-8 border border-zinc-100 rounded-3xl hover:border-zinc-900 transition-all group" | |
| > | |
| <div className="w-14 h-14 bg-zinc-50 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-zinc-900 transition-colors"> | |
| <item.icon className="text-zinc-900 group-hover:text-white transition-colors" size={28} /> | |
| </div> | |
| <h3 className="text-xl font-bold mb-3">{item.title}</h3> | |
| <p className="text-zinc-600 text-sm leading-relaxed mb-6"> | |
| {item.description} | |
| </p> | |
| <div className="flex flex-wrap gap-2"> | |
| {item.tags.map((tag: string) => ( | |
| <span key={tag} className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-zinc-100 rounded-md text-zinc-500"> | |
| {tag} | |
| </span> | |
| ))} | |
| </div> | |
| </motion.div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| const ContactSection = () => ( | |
| <section id="contacto" className="py-24 bg-zinc-900 text-white overflow-hidden relative"> | |
| <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center relative z-10"> | |
| <div> | |
| <h2 className="text-5xl font-black tracking-tighter mb-8">Hablemos de tu <br />próximo desafío.</h2> | |
| <div className="space-y-8"> | |
| <div className="flex items-start gap-4"> | |
| <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0"> | |
| <Mail size={24} /> | |
| </div> | |
| <div> | |
| <div className="text-xs font-bold uppercase tracking-widest opacity-50 mb-1">Email</div> | |
| <div className="text-xl font-medium">contacto@tecnosilf.com</div> | |
| </div> | |
| </div> | |
| <div className="flex items-start gap-4"> | |
| <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0"> | |
| <Phone size={24} /> | |
| </div> | |
| <div> | |
| <div className="text-xs font-bold uppercase tracking-widest opacity-50 mb-1">Teléfono</div> | |
| <div className="text-xl font-medium">+54 (2954) 456-789</div> | |
| </div> | |
| </div> | |
| <div className="flex items-start gap-4"> | |
| <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0"> | |
| <MapPin size={24} /> | |
| </div> | |
| <div> | |
| <div className="text-xs font-bold uppercase tracking-widest opacity-50 mb-1">Ubicación</div> | |
| <div className="text-xl font-medium">Santa Rosa, La Pampa, Argentina</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="bg-white p-10 rounded-[40px] text-zinc-900"> | |
| <form className="space-y-6"> | |
| <div className="grid sm:grid-cols-2 gap-6"> | |
| <div> | |
| <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Nombre</label> | |
| <input type="text" className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all" /> | |
| </div> | |
| <div> | |
| <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Email</label> | |
| <input type="email" className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all" /> | |
| </div> | |
| </div> | |
| <div> | |
| <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Asunto</label> | |
| <select className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all appearance-none"> | |
| <option>Desarrollo de Software</option> | |
| <option>Infraestructura de Hardware</option> | |
| <option>Sistemas de Gestión</option> | |
| <option>Soporte Técnico</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Mensaje</label> | |
| <textarea className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all min-h-[120px]" /> | |
| </div> | |
| <button className="w-full bg-zinc-900 text-white py-5 rounded-2xl font-bold hover:bg-zinc-800 transition-all"> | |
| Enviar Mensaje | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| {/* Background Pattern */} | |
| <div className="absolute top-0 right-0 w-1/2 h-full bg-white/5 skew-x-12 translate-x-1/2" /> | |
| </section> | |
| ); | |
| const Footer = () => ( | |
| <footer className="py-12 bg-white border-t border-zinc-100"> | |
| <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8"> | |
| <div className="flex items-center gap-2"> | |
| <Logo className="h-10 w-auto" /> | |
| </div> | |
| <p className="text-sm text-zinc-400"> | |
| © 2026 Tecnosilf Soluciones Tecnológicas. Todos los derechos reservados. | |
| </p> | |
| <div className="flex gap-6"> | |
| <a href="#" className="text-zinc-400 hover:text-zinc-900 transition-colors"><Monitor size={20} /></a> | |
| <a href="#" className="text-zinc-400 hover:text-zinc-900 transition-colors"><Code2 size={20} /></a> | |
| <a href="#" className="text-zinc-400 hover:text-zinc-900 transition-colors"><Database size={20} /></a> | |
| </div> | |
| </div> | |
| </footer> | |
| ); | |
| export default function App() { | |
| const sistemas = [ | |
| { | |
| title: "Monitoreo de Subestaciones", | |
| description: "Monitoreo activo de subestaciones subterráneas y a nivel en distribuidoras eléctricas con alertas en tiempo real.", | |
| icon: Zap, | |
| tags: ["Eléctricas", "Monitoreo", "Subestaciones"] | |
| }, | |
| { | |
| title: "Sistema GIS Agua y Energía", | |
| description: "Sistema de información geográfica especializado para redes de agua corriente y energía eléctrica en distribuidoras.", | |
| icon: MapPin, | |
| tags: ["GIS", "Agua", "Energía"] | |
| }, | |
| { | |
| title: "Toma de Estados Mobile", | |
| description: "Captura de estados y lecturas mediante dispositivos móviles para optimizar la gestión de distribuidoras.", | |
| icon: Smartphone, | |
| tags: ["Mobile", "Distribuidoras", "Eficiencia"] | |
| }, | |
| { | |
| title: "Sistemas a Medida", | |
| description: "Diseño y desarrollo de soluciones de software personalizadas adaptadas a los requerimientos específicos de su empresa.", | |
| icon: Code2, | |
| tags: ["Custom", "Software", "Industria"] | |
| } | |
| ]; | |
| const servicios = [ | |
| { | |
| title: "Desarrollo a Medida", | |
| description: "Creamos aplicaciones web y móviles escalables utilizando las últimas tecnologías del mercado.", | |
| icon: Code2, | |
| tags: ["Web", "Mobile", "API"] | |
| }, | |
| { | |
| title: "Infraestructura IT", | |
| description: "Diseño y despliegue de redes, servidores y centros de datos con estándares internacionales.", | |
| icon: Server, | |
| tags: ["Redes", "Servidores", "Capa 3"] | |
| }, | |
| { | |
| title: "Soporte Especializado", | |
| description: "Mantenimiento preventivo y correctivo de sistemas críticos con respuesta inmediata 24/7.", | |
| icon: Users, | |
| tags: ["Soporte", "Mantenimiento", "SLA"] | |
| } | |
| ]; | |
| const hardwareItems = [ | |
| { | |
| title: "Sistemas Embebidos", | |
| description: "Diseño de placas de circuito impreso (PCB) y firmware optimizado para aplicaciones industriales específicas.", | |
| icon: Cpu, | |
| tags: ["PCB Design", "Firmware", "C/C++"] | |
| }, | |
| { | |
| title: "Sensores Industriales", | |
| description: "Desarrollo de sensores de precisión para medición de variables críticas en entornos de alta exigencia.", | |
| icon: Settings, | |
| tags: ["Precisión", "IoT", "RS485"] | |
| }, | |
| { | |
| title: "Infraestructura de Red", | |
| description: "Implementación de redes industriales robustas y seguras para la interconexión de dispositivos en planta.", | |
| icon: Server, | |
| tags: ["Networking", "Seguridad", "Fibra"] | |
| } | |
| ]; | |
| const softwareItems = [ | |
| { | |
| title: "Aplicaciones Web & Cloud", | |
| description: "Plataformas escalables para la gestión de datos y visualización de procesos en tiempo real desde cualquier lugar.", | |
| icon: Monitor, | |
| tags: ["React", "Node.js", "AWS"] | |
| }, | |
| { | |
| title: "Desarrollo Mobile", | |
| description: "Apps nativas y multiplataforma para la toma de datos en campo y control remoto de dispositivos.", | |
| icon: ArrowRight, // Using ArrowRight as a placeholder for Mobile icon if not available | |
| tags: ["React Native", "Offline-first", "UX"] | |
| }, | |
| { | |
| title: "Bases de Datos & Big Data", | |
| description: "Arquitecturas de datos optimizadas para el almacenamiento y análisis de grandes volúmenes de información industrial.", | |
| icon: Database, | |
| tags: ["SQL", "NoSQL", "Analytics"] | |
| } | |
| ]; | |
| return ( | |
| <div className="min-h-screen bg-white text-zinc-900 selection:bg-zinc-900 selection:text-white"> | |
| <Navbar /> | |
| <Hero /> | |
| <FeatureGrid | |
| id="sistemas" | |
| title="Sistemas Propios" | |
| subtitle="Soluciones robustas desarrolladas internamente para resolver problemáticas específicas de la industria moderna." | |
| items={sistemas} | |
| /> | |
| <div className="bg-zinc-50 py-24"> | |
| <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center"> | |
| <div className="order-2 lg:order-1"> | |
| <div className="grid grid-cols-2 gap-4"> | |
| <div className="aspect-square bg-white rounded-3xl border border-zinc-100 p-8 flex flex-col justify-center items-center text-center"> | |
| <div className="text-4xl font-black mb-2">10+</div> | |
| <div className="text-xs font-bold uppercase tracking-widest text-zinc-400">Años de Exp.</div> | |
| </div> | |
| <div className="aspect-square bg-zinc-900 text-white rounded-3xl p-8 flex flex-col justify-center items-center text-center"> | |
| <div className="text-4xl font-black mb-2">15+</div> | |
| <div className="text-xs font-bold uppercase tracking-widest opacity-50">Clientes</div> | |
| </div> | |
| <div className="aspect-square bg-zinc-900 text-white rounded-3xl p-8 flex flex-col justify-center items-center text-center"> | |
| <div className="text-4xl font-black mb-2">50+</div> | |
| <div className="text-xs font-bold uppercase tracking-widest opacity-50">Proyectos</div> | |
| </div> | |
| <div className="aspect-square bg-white rounded-3xl border border-zinc-100 p-8 flex flex-col justify-center items-center text-center"> | |
| <div className="text-4xl font-black mb-2">24/7</div> | |
| <div className="text-xs font-bold uppercase tracking-widest text-zinc-400">Soporte</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="order-1 lg:order-2"> | |
| <h2 className="text-5xl font-black tracking-tighter mb-8">Confianza en el Sector Cooperativo.</h2> | |
| <p className="text-xl text-zinc-600 leading-relaxed mb-8"> | |
| Contamos con una sólida trayectoria brindando soluciones tecnológicas a más de 10 cooperativas de energía eléctrica distribuidas entre la Provincia de Buenos Aires y La Pampa. | |
| </p> | |
| <ul className="space-y-4"> | |
| {['Monitoreo de Redes Eléctricas', 'Gestión de Recursos Hídricos', 'Soporte Técnico Especializado'].map((item) => ( | |
| <li key={item} className="flex items-center gap-3 font-bold"> | |
| <div className="w-6 h-6 bg-zinc-900 rounded-full flex items-center justify-center"> | |
| <ChevronRight size={14} className="text-white" /> | |
| </div> | |
| {item} | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <FeatureGrid | |
| id="servicios" | |
| title="Servicios Profesionales" | |
| subtitle="Acompañamos a su empresa en cada etapa de su transformación digital con consultoría y ejecución experta." | |
| items={servicios} | |
| /> | |
| <div id="hardware" className="bg-zinc-900 py-24 text-white"> | |
| <div className="max-w-7xl mx-auto px-6"> | |
| <div className="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div> | |
| <h2 className="text-5xl font-black tracking-tighter mb-6">Hardware de <br />Grado Industrial.</h2> | |
| <p className="text-zinc-400 text-lg mb-10 leading-relaxed"> | |
| Diseñamos dispositivos capaces de operar en las condiciones más extremas, garantizando durabilidad y precisión milimétrica en cada componente. | |
| </p> | |
| <div className="space-y-6"> | |
| {hardwareItems.map((item, idx) => ( | |
| <div key={idx} className="flex gap-4 p-6 bg-white/5 rounded-2xl border border-white/10"> | |
| <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0"> | |
| <item.icon size={24} /> | |
| </div> | |
| <div> | |
| <h3 className="font-bold text-lg mb-1">{item.title}</h3> | |
| <p className="text-sm text-zinc-400">{item.description}</p> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| <div className="relative"> | |
| <div className="aspect-[4/5] bg-zinc-800 rounded-[40px] overflow-hidden"> | |
| <img | |
| src="https://picsum.photos/seed/industrial-server/800/1000" | |
| alt="Control Industrial" | |
| className="w-full h-full object-cover opacity-50 grayscale" | |
| referrerPolicy="no-referrer" | |
| /> | |
| </div> | |
| <div className="absolute -bottom-10 -left-10 p-8 bg-white text-zinc-900 rounded-3xl shadow-2xl max-w-xs"> | |
| <div className="text-3xl font-black mb-2">10+</div> | |
| <p className="text-sm font-medium text-zinc-500">Cooperativas eléctricas confían en nuestra tecnología en BA y La Pampa.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <section id="software" className="py-24 bg-white"> | |
| <div className="max-w-7xl mx-auto px-6"> | |
| <div className="flex flex-col lg:flex-row justify-between items-end mb-16 gap-8"> | |
| <div> | |
| <h2 className="text-5xl font-black tracking-tighter mb-4">Software que <br />Simplifica lo Complejo.</h2> | |
| <p className="text-zinc-500 max-w-xl">Interfaces intuitivas y motores de procesamiento potentes para que el control de su empresa esté siempre a un clic de distancia.</p> | |
| </div> | |
| <div className="flex gap-4"> | |
| <div className="px-6 py-3 bg-zinc-100 rounded-full text-sm font-bold">Cloud Native</div> | |
| <div className="px-6 py-3 bg-zinc-100 rounded-full text-sm font-bold">Real-time Data</div> | |
| </div> | |
| </div> | |
| <div className="grid md:grid-cols-3 gap-8"> | |
| {softwareItems.map((item, idx) => ( | |
| <div key={idx} className="p-10 bg-zinc-50 rounded-[40px] border border-transparent hover:border-zinc-200 transition-all"> | |
| <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-8 shadow-sm"> | |
| <item.icon size={32} className="text-zinc-900" /> | |
| </div> | |
| <h3 className="text-2xl font-bold mb-4">{item.title}</h3> | |
| <p className="text-zinc-600 mb-8 leading-relaxed">{item.description}</p> | |
| <div className="flex flex-wrap gap-2"> | |
| {item.tags.map(tag => ( | |
| <span key={tag} className="px-3 py-1 bg-white border border-zinc-100 rounded-lg text-[10px] font-bold uppercase tracking-widest text-zinc-400"> | |
| {tag} | |
| </span> | |
| ))} | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| <ContactSection /> | |
| <Footer /> | |
| </div> | |
| ); | |
| } | |