Retro_Industrial_Columns_Component
Un componente de columnas complejo, vibrante y de estilo retro/vintage para empresas manufactureras/industriales, con una estética de los años 80/90 con soporte para modo oscuro y capacidad de respuesta total.
Código HTML
<section class="bg-gradient-to-br from-gray-200 to-gray-50 dark:from-zinc-900 dark:to-zinc-950 py-16 px-4 sm:px-6 lg:px-8 font-mono overflow-hidden relative">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-10 dark:opacity-5"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="text-center mb-16">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-indigo-700 dark:text-cyan-400 drop-shadow-lg mb-4 uppercase tracking-wider leading-tight animate-pulse-fast">
<span class="block transform -skew-x-6 inline-block bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 px-4 py-2 rounded-lg shadow-xl mb-2">Advanced Industrial Solutions</span>
<span class="block text-gray-800 dark:text-gray-100 mt-2">for the Modern Age</span>
</h2>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto shadow-sm p-4 rounded-md bg-gray-100/70 dark:bg-zinc-800/70 backdrop-blur-sm border border-gray-300 dark:border-zinc-700">
Revolutionizing manufacturing with cutting-edge technology and unparalleled precision. Explore our robust capabilities.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
<!-- Column 1: Precision Engineering -->
<div class="group perspective h-full">
<div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-red-500 to-red-600 dark:from-red-600 dark:to-red-700 p-6 rounded-xl shadow-2xl border-4 border-red-400 dark:border-red-500 box-border text-gray-900">
<!-- Front Side -->
<div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
<div class="text-center flex-grow flex flex-col justify-center items-center">
<div class="text-6xl text-yellow-300 mb-4 animate-spin-slow-reverse"><span class="material-icons-outlined"></span></div>
<h3 class="text-3xl font-extrabold text-yellow-200 mb-3 drop-shadow-md text-glow capitalize">Precision Engineering</h3>
<p class="text-yellow-100 text-lg sm:text-xl">Unmatched accuracy for complex industrial demands.</p>
</div>
<button class="mt-8 px-6 py-3 bg-yellow-300 hover:bg-yellow-400 text-red-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-yellow-200 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-70">Discover More</button>
</div>
<!-- Back Side -->
<div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
<h3 class="text-2xl font-bold text-yellow-200 mb-3 border-b-2 border-yellow-300 pb-2">Key Features</h3>
<ul class="list-disc list-inside text-yellow-100 space-y-2 flex-grow text-lg">
<li><span class="text-yellow-300 pr-1">></span> CNC Machining</li>
<li><span class="text-yellow-300 pr-1">></span> CAD/CAM Integration</li>
<li><span class="text-yellow-300 pr-1">></span> Quality Control Systems</li>
<li><span class="text-yellow-300 pr-1">></span> Rapid Prototyping</li>
</ul>
<div class="text-center mt-6">
<img src="https://picsum.photos/id/160/300/200" alt="Precision Engineering" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-yellow-300 mb-4">
<a href="#" class="text-yellow-300 hover:underline transition-colors duration-300 text-lg">View Case Studies →</a>
</div>
</div>
</div>
</div>
<!-- Column 2: Automated Systems -->
<div class="group perspective h-full">
<div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-green-500 to-green-600 dark:from-green-600 dark:to-green-700 p-6 rounded-xl shadow-2xl border-4 border-green-400 dark:border-green-500 box-border text-gray-900">
<!-- Front Side -->
<div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
<div class="text-center flex-grow flex flex-col justify-center items-center">
<div class="text-6xl text-cyan-300 mb-4 animate-[spin_5s_linear_infinite]"><span class="material-icons-outlined"></span></div>
<h3 class="text-3xl font-extrabold text-cyan-200 mb-3 drop-shadow-md text-glow capitalize">Automated Systems</h3>
<p class="text-cyan-100 text-lg sm:text-xl">Smart solutions for peak operational efficiency.</p>
</div>
<button class="mt-8 px-6 py-3 bg-cyan-300 hover:bg-cyan-400 text-green-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-cyan-200 focus:outline-none focus:ring-4 focus:ring-cyan-500 focus:ring-opacity-70">Explore Robotics</button>
</div>
<!-- Back Side -->
<div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
<h3 class="text-2xl font-bold text-cyan-200 mb-3 border-b-2 border-cyan-300 pb-2">Key Technologies</h3>
<ul class="list-disc list-inside text-cyan-100 space-y-2 flex-grow text-lg">
<li><span class="text-cyan-300 pr-1">></span> Robotic Integration</li>
<li><span class="text-cyan-300 pr-1">></span> IoT & Sensors</li>
<li><span class="text-cyan-300 pr-1">></span> Predictive Maintenance</li>
<li><span class="text-cyan-300 pr-1">></span> AI-Driven Optimization</li>
</ul>
<div class="text-center mt-6">
<img src="https://picsum.photos/id/356/300/200" alt="Automated Systems" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-cyan-300 mb-4">
<a href="#" class="text-cyan-300 hover:underline transition-colors duration-300 text-lg">See Automation In Action →</a>
</div>
</div>
</div>
</div>
<!-- Column 3: Global Supply Chain -->
<div class="group perspective h-full">
<div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-purple-500 to-purple-600 dark:from-purple-600 dark:to-purple-700 p-6 rounded-xl shadow-2xl border-4 border-purple-400 dark:border-purple-500 box-border text-gray-900">
<!-- Front Side -->
<div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
<div class="text-center flex-grow flex flex-col justify-center items-center">
<div class="text-6xl text-pink-300 mb-4 animate-[heartbeat_1.5s_infinite]"><span class="material-icons-outlined"></span></div>
<h3 class="text-3xl font-extrabold text-pink-200 mb-3 drop-shadow-md text-glow capitalize">Global Supply Chain</h3>
<p class="text-pink-100 text-lg sm:text-xl">Seamless logistics from raw material to finished product.</p>
</div>
<button class="mt-8 px-6 py-3 bg-pink-300 hover:bg-pink-400 text-purple-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-pink-200 focus:outline-none focus:ring-4 focus:ring-pink-500 focus:ring-opacity-70">View Our Network</button>
</div>
<!-- Back Side -->
<div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
<h3 class="text-2xl font-bold text-pink-200 mb-3 border-b-2 border-pink-300 pb-2">Logistics & Tracking</h3>
<ul class="list-disc list-inside text-pink-100 space-y-2 flex-grow text-lg">
<li><span class="text-pink-300 pr-1">></span> Real-time Tracking</li>
<li><span class="text-pink-300 pr-1">></span> Warehousing Solutions</li>
<li><span class="text-pink-300 pr-1">></span> Global Distribution</li>
<li><span class="text-pink-300 pr-1">></span> Compliance Management</li>
</ul>
<div class="text-center mt-6">
<img src="https://picsum.photos/id/1084/300/200" alt="Global Supply Chain" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-pink-300 mb-4">
<a href="#" class="text-pink-300 hover:underline transition-colors duration-300 text-lg">Explore Our Reach →</a>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-16">
<div class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 uppercase tracking-wide">Trusted By Industry Leaders</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center max-w-4xl mx-auto opacity-80">
<img src="https://picsum.photos/id/237/100/50?grayscale" alt="Client Logo 1" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
<img src="https://picsum.photos/id/238/100/50?grayscale" alt="Client Logo 2" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
<img src="https://picsum.photos/id/239/100/50?grayscale" alt="Client Logo 3" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
<img src="https://picsum.photos/id/240/100/50?grayscale" alt="Client Logo 4" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
</div>
<div class="mt-12">
<a href="#contact" class="inline-flex items-center px-8 py-4 bg-yellow-400 dark:bg-yellow-500 text-gray-900 border-4 border-yellow-300 dark:border-yellow-400 rounded-full text-xl font-bold uppercase shadow-2xl transition-all duration-300 transform hover:scale-105 hover:rotate-2 group focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-70 animate-bounce-slow">
<span class="material-icons-outlined text-3xl mr-3 group-hover:-rotate-12 transition-transform duration-300"></span>
Get a Quote Today!
</a>
</div>
</div>
</div>
<!-- Global Styles/Animations - Add to your main CSS or use a style tag for demo -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
.font-mono {
font-family: 'VT323', monospace;
}
h2, h3, button {
font-family: 'Press Start 2P', cursive;
}
.text-glow {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.perspective {
perspective: 1000px;
/* height: 400px; /* Adjust as needed */
}
.preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotateY-180 {
transform: rotateY(180deg);
}
@keyframes pulse-fast {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.03); opacity: 0.9; }
}
.animate-pulse-fast {
animation: pulse-fast 2s infinite ease-in-out;
}
@keyframes spin-slow-reverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow-reverse {
animation: spin-slow-reverse 15s linear infinite;
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
@keyframes heartbeat {
0% { transform: scale(1); }
14% { transform: scale(1.15); }
28% { transform: scale(1); }
42% { transform: scale(1.15); }
70% { transform: scale(1); }
}
.animate-heartbeat {
animation: heartbeat 1.5s infinite;
}
@keyframes bounce-slow {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.animate-bounce-slow {
animation: bounce-slow 4s infinite;
}
</style>
</section>Componentes relacionados
Componente Columnas Brutalistas
Un componente de columnas complejas con un diseño brutalista, con un esquema de color monocromático, adecuado para el blog o el consumo de contenido. El diseño presenta alto contraste, diseños inusuales y admite el modo oscuro.
Componente Columnas
Un componente de columnas responsivo con pequeñas animaciones atractivas, adecuado para el comercio electrónico con un tema oscuro.
Componente Columnas
Componente de columnas para un tablero, con un diseño 3D con colores complementarios. Incluye tres columnas responsivas con un diseño simple, compatibilidad con el modo oscuro y utiliza Tailwind CSS para el estilo. No se incluye JavaScript.