Componente di layout aziendale 3D triadico
Un componente di layout di complessità moderata per siti Web aziendali/aziendali, con una combinazione di colori triadica ed elementi di progettazione 3D per la profondità, con reattività completa e supporto per la modalità oscura.
Codice HTML
<div class="bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-teal-950 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
<!-- Header Section -->
<header class="max-w-7xl mx-auto mb-8 lg:mb-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
<div class="flex flex-col sm:flex-row justify-between items-center">
<div class="flex items-center space-x-2">
<svg class="h-8 w-8 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9a9 9 0 00-9-9H3m0 0l3.75 3.75M3 12h6.5m4.25-5.25L12 3m-4.5 9h-4.5m16.5 0h-4.5m-4.5 4.5l-3.75 3.75M12 21V9.75" />
</svg>
<h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white capitalize">Company Name</h1>
</div>
<nav class="mt-4 sm:mt-0">
<ul class="flex flex-wrap justify-center sm:justify-start gap-x-4 sm:gap-x-6 text-base font-medium">
<li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Home</a></li>
<li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Services</a></li>
<li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">About</a></li>
<li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content Area -->
<main class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
<!-- Hero/Featured Section (Column 1) -->
<section class="lg:col-span-2 rounded-xl bg-gradient-to-br from-indigo-500 via-purple-600 to-teal-500 shadow-2xl overflow-hidden p-6 sm:p-8 lg:p-10 relative group transform perspective-1000 rotateY-3 translateZ-0 transition-all duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-deep dark:from-indigo-700 dark:via-purple-800 dark:to-teal-700">
<div class="absolute inset-0 bg-pattern opacity-10 dark:opacity-20 pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-start">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4 capitalize drop-shadow-lg">Innovate. Achieve. Transform.</h2>
<p class="text-base sm:text-lg text-indigo-100 mb-6 lg:mb-8 max-w-2xl">We provide cutting-edge solutions to propel your business forward in the digital age. Our expert team is dedicated to your success.</p>
<button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Discover More</button>
</div>
</section>
<!-- Sidebar/Stats Section (Column 2) -->
<aside class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY--3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 capitalize">Our Impact</h3>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="p-3 bg-indigo-100 rounded-full dark:bg-indigo-900/50">
<svg class="h-6 w-6 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</div>
<div>
<p class="text-xl font-semibold text-gray-900 dark:text-white">250+</p>
<p class="text-gray-600 dark:text-gray-400 capitalize">Satisfied Clients</p>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="p-3 bg-purple-100 rounded-full dark:bg-purple-900/50">
<svg class="h-6 w-6 text-purple-600 dark:text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M13 17v4m-2-2h4m5-16v4m-2-2h4m-2 20h2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h12zm-3-10L14 7l-2 2-2-2-3 3-2-2m6-2V6" />
</svg>
</div>
<div>
<p class="text-xl font-semibold text-gray-900 dark:text-white">10+ Years</p>
<p class="text-gray-600 dark:text-gray-400 capitalize">Industry Experience</p>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="p-3 bg-teal-100 rounded-full dark:bg-teal-900/50">
<svg class="h-6 w-6 text-teal-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.747-.602-3.328-1.602-4.664z" />
</svg>
</div>
<div>
<p class="text-xl font-semibold text-gray-900 dark:text-white">99%</p>
<p class="text-gray-600 dark:text-gray-400 capitalize">Project Success Rate</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Content Grid (Column 3) -->
<section class="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
<!-- Service Card 1 -->
<article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
<img src="https://picsum.photos/400/250?random=1" alt="Web Development" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Web Development</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Building responsive, high-performance websites tailored to your business needs.</p>
<a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More →</a>
</article>
<!-- Service Card 2 -->
<article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-NEG1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
<img src="https://picsum.photos/400/250?random=2" alt="Digital Marketing" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Digital Marketing</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Strategizing and executing effective digital campaigns to maximize your reach.</p>
<a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More →</a>
</article>
<!-- Service Card 3 -->
<article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
<img src="https://picsum.photos/400/250?random=3" alt="Cloud Solutions" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Cloud Solutions</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Scalable and secure cloud infrastructure to power your business operations.</p>
<a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More →</a>
</article>
<!-- Call to Action Card -->
<div class="md:col-span-2 lg:col-span-3 bg-indigo-600 dark:bg-purple-800 rounded-xl shadow-xl overflow-hidden p-6 sm:p-8 lg:p-10 flex flex-col sm:flex-row items-center justify-between text-white transform perspective-1000 rotateX-NEG2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
<div class="text-center sm:text-left mb-4 sm:mb-0">
<h3 class="text-2xl font-bold mb-2 capitalize">Ready to elevate your business?</h3>
<p class="text-indigo-100 text-lg">Let's create something extraordinary together.</p>
</div>
<button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Get Started Today</button>
</div>
</section>
</main>
<!-- Footer Section -->
<footer class="max-w-7xl mx-auto mt-8 lg:mt-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 text-center text-gray-700 dark:text-gray-300 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
<p>© 2023 Company Name. All rights reserved.</p>
<div class="flex justify-center space-x-4 mt-2">
<a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Privacy Policy</a>
<span class="text-gray-400">|</span>
<a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Terms of Service</a>
</div>
</footer>
</div>
<style>
/* Custom properties for 3D transforms */
.perspective-1000 { perspective: 1000px; }
.rotateX-3 { transform: rotateX(3deg); }
.rotateX-NEG2 { transform: rotateX(-2deg); }
.rotateY-3 { transform: rotateY(3deg); }
.rotateY-NEG1 { transform: rotateY(-1deg); }
.rotateY-2 { transform: rotateY(2deg); }
.translateZ-0 { transform: translateZ(0); }
/* Deeper shadow for 3D effect */
.shadow-deep {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
.dark .shadow-deep {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}
/* Simple patterned background for hero */
.bg-pattern {
background-image: radial-gradient(#ffffff20 1px, transparent 1px);
background-size: 20px 20px;
}
/* Ensure transforms apply correctly */
.group:hover .group-hover\:rotateX-0 { transform: rotateX(0deg); }
.group:hover .group-hover\:translateZ-10 { transform: translateZ(10px); }
.group:hover .group-hover\:shadow-2xl { box-shadow: var(--tw-shadow); }
</style>Componenti correlati
Componente Layout E-commerce
Un componente di layout per l'e-commerce reattivo con supporto per il tema scuro, costruito con Tailwind CSS seguendo i principi del Material Design. Include una barra di navigazione, un'area di contenuto principale con elenchi di prodotti e un piè di pagina. La combinazione di colori è pastello.
Layout blog con barra laterale sfumata
Un componente di layout del blog reattivo con un'area di contenuto principale e una barra laterale sfumata, con colori tenui e tenui, transizioni fluide e supporto completo per la modalità scura. Progettato per il consumo di contenuti su schermi di varie dimensioni.
Componente di layout della funzione di e-commerce di Glassmorphism
Componente di layout della funzione di e-commerce di Glassmorphism