RetroBusinessLayout
Un composant de mise en page à thème rétro/vintage pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et un design simple. Il est réactif et inclut la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center font-mono text-gray-800 dark:text-gray-200 p-4">
<!-- Header -->
<header class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-8 flex justify-between items-center transform transition duration-300 hover:scale-105">
<h1 class="text-3xl font-bold uppercase tracking-wider">Acme Corp</h1>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 transform transition duration-300 hover:scale-105">
<section class="text-center mb-10">
<h2 class="text-4xl font-bold mb-4 uppercase">Welcome to the Future Past</h2>
<p class="text-lg leading-relaxed">Crafting innovative solutions with a nod to the timeless aesthetics of yesteryear. We bring your business visions to life with robust technology and classic design principles.</p>
</section>
<section class="grid md:grid-cols-2 gap-8">
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
<h3 class="text-2xl font-semibold mb-3">Our Mission</h3>
<p class="text-gray-700 dark:text-gray-300">To fuse nostalgic design sensibilities with modern technological advancements, delivering unparalleled digital experiences that stand the test of time.</p>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
<h3 class="text-2xl font-semibold mb-3">What We Offer</h3>
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
<li>Web Development (Retro & Modern)</li>
<li>Digital Marketing Strategies</li>
<li>Brand Identity & Design</li>
<li>IT Consulting & Solutions</li>
</ul>
</div>
</section>
</main>
<!-- Footer -->
<footer class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mt-8 text-center text-gray-600 dark:text-gray-300 transform transition duration-300 hover:scale-105">
<p>© 2023 Acme Corp. All rights reserved. Embracing the past, building the future.</p>
</footer>
</div>Composants associés
Composants de mise en page
Un composant de mise en page de tableau de bord réactif qui utilise des micro-interactions et une palette de couleurs pastel, conçu pour afficher la visualisation des données et les panneaux de contrôle avec prise en charge du mode sombre.
Composant Composants de mise en page
Un composant de mise en page réactive présentant des micro-interactions par le biais d’animations attrayantes qui répondent aux actions de l’utilisateur, avec prise en charge du mode sombre et de l’utilisation de Tailwind CSS.
Mise en page rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.