Corporate_Portfolio_Showcase_Simple
Un composant de présentation de portefeuille simple, propre et fiable, conçu pour les environnements d’entreprise professionnels, utilisant une palette de couleurs triadique et prenant en charge le mode sombre.
HTML Code
<section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="container mx-auto px-4 max-w-6xl">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-white mb-4">
Our Latest Innovations
</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
Discover the impactful projects we've delivered, showcasing our expertise and commitment to excellence.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/id/1015/600/400" alt="Project Image 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Enterprise Solution X
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
A robust cloud-based platform designed to streamline operations for large enterprises.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
View Case Study
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Project Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/id/1018/600/400" alt="Project Image 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Dynamic Data Dashboard
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
An intuitive analytics dashboard providing real-time insights for decision-makers.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white font-medium rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
View Case Study
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Project Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/id/1020/600/400" alt="Project Image 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
AI-Powered Customer Support
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
An intelligent chatbot and knowledge base for enhanced customer experiences.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-fuchsia-600 text-white font-medium rounded-md hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
View Case Study
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
</section>Composants associés
Composant de documentation Art Déco Violet
Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.
Composants fonctionnels
Composante de rencontre/sociale minimaliste/flat design avec un schéma de couleurs arc-en-ciel dégradé pour l’affichage d’un profil d’utilisateur.
Carte d’inscription immobilière
Une carte d’annonce immobilière complexe, inspirée du papier/de l’impression avec des tons bleus d’entreprise, conçue pour les plateformes d’annonces immobilières. Il propose une mise en page réactive, une prise en charge du mode sombre et de multiples détails sur une propriété.