Aperçu

New Version 2.0 Released

Create digital experiences that matter.

Elevate your brand with our cutting-edge design system. Build faster, scale easier, and deliver unparalleled user experiences.

+2k

Trusted by over 2,000 forward-thinking teams.

Cas d’utilisation et fonctionnalités

SaaS et pages de destination des produits : idéales pour communiquer efficacement des messages clés et des images visuelles.
Split Layout : divisez l’écran en deux pour attirer l’attention de l’utilisateur en contrastant le texte et les images.
Animation slide-in : les éléments glissent de gauche à droite au fur et à mesure du chargement de la page, donnant un aspect dynamique et moderne.
Élément Glassmorphism : adopte un flou d’arrière-plan (Backdrop Blur) sur la fenêtre de maquette de droite pour créer une belle interface utilisateur avec de la profondeur.

Points clés du design et de l’UX (Design & UX)

Typographie en gras : les titres sont en gras, utilisent des tailles de police plus grandes et sont accentués par un texte dégradé.
Appel à l’action clair (CTA) : différenciez visuellement les boutons principaux et secondaires pour encourager les utilisateurs à agir.
Preuve sociale : pour montrer la fiabilité, nous avons inclus une section qui affiche l’icône de l’utilisateur et le nombre d’abonnés.
Conception réactive : conçu pour être affiché verticalement (Stack) sur les appareils mobiles et horizontalement (Split) sur les tablettes et les écrans de plus grande largeur.

Comment personnaliser (Guide de personnalisation)

Schémas de couleurs et dégradés : modifiez les classes de couleurs telles que « de-indigo-600 », « à-violet-800 » pour les personnaliser afin qu’elles correspondent aux couleurs de votre marque.
Visuel à droite : affiche actuellement une maquette créée avec CSS, mais vous pouvez la remplacer par la balise img d’une image ou d’une illustration de produit réelle.
Ajustement de l’animation : Vous pouvez ajuster la vitesse et le mouvement de l’animation en modifiant la valeur de @keyframes dans la balise style ou l’heure de la propriété animation du style en ligne.

Code d’implémentation (Implémentation)

<div class="relative min-h-screen flex flex-col md:flex-row bg-slate-900 text-white overflow-hidden font-sans w-full">

<!-- Left Content -->

<div class="w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 lg:p-24 z-10" style="animation: slideInLeft 1s ease-out forwards;">

  <div class="max-w-xl">

    <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">

      <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>

      <span>New Version 2.0 Released</span>

    </div>

    <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-6">

      Create <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">digital experiences</span> that matter.

    </h1>

    <p class="text-lg md:text-xl text-slate-400 mb-8 leading-relaxed">

      Elevate your brand with our cutting-edge design system. Build faster, scale easier, and deliver unparalleled user experiences.

    </p>

    <div class="flex flex-col sm:flex-row gap-4">

      <button class="px-8 py-4 rounded-full bg-white text-slate-900 font-bold text-lg hover:bg-slate-100 transition-transform hover:-translate-y-1 hover:shadow-xl hover:shadow-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900">

        Get Started Free

      </button>

      <button class="px-8 py-4 rounded-full bg-slate-800 text-white font-bold text-lg border border-slate-700 hover:bg-slate-700 hover:border-slate-600 transition-all focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900 flex items-center justify-center gap-2">

        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

        Watch Demo

      </button>

    </div>

    

    <div class="mt-12 flex items-center gap-6 text-slate-500 text-sm">

      <div class="flex -space-x-3">

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=1" alt="User 1" />

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=2" alt="User 2" />

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=3" alt="User 3" />

        <div class="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-xs font-bold text-white">+2k</div>

      </div>

      <p>Trusted by over 2,000 forward-thinking teams.</p>

    </div>

  </div>

</div>



<!-- Right Visual -->

<div class="w-full md:w-1/2 relative min-h-[50vh] md:min-h-screen" style="animation: slideInRight 1s ease-out forwards;">

  <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-800 overflow-hidden">

    <div class="absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-tr from-pink-500 to-orange-400 blur-3xl opacity-50 mix-blend-overlay"></div>

    <div class="absolute bottom-[10%] -left-[20%] w-[60%] h-[60%] rounded-full bg-gradient-to-tr from-blue-500 to-teal-400 blur-3xl opacity-40 mix-blend-overlay"></div>

    

    <!-- Mockup Window -->

    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] max-w-lg rounded-2xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500">

      <div class="flex items-center px-4 py-3 border-b border-white/10 bg-white/5">

        <div class="flex space-x-2">

          <div class="w-3 h-3 rounded-full bg-red-500"></div>

          <div class="w-3 h-3 rounded-full bg-yellow-500"></div>

          <div class="w-3 h-3 rounded-full bg-green-500"></div>

        </div>

      </div>

      <div class="p-6">

        <div class="h-4 w-1/3 bg-white/20 rounded mb-4"></div>

        <div class="h-8 w-3/4 bg-white/20 rounded mb-6"></div>

        <div class="space-y-3">

          <div class="h-2 w-full bg-white/10 rounded"></div>

          <div class="h-2 w-full bg-white/10 rounded"></div>

          <div class="h-2 w-5/6 bg-white/10 rounded"></div>

        </div>

        <div class="mt-8 flex gap-3">

          <div class="h-10 w-24 bg-indigo-500 rounded-lg"></div>

          <div class="h-10 w-24 bg-white/10 rounded-lg"></div>

        </div>

      </div>

    </div>

  </div>

</div>



<style>
@keyframes slideInLeft {

    from { opacity: 0; transform: translateX(-50px); }

    to { opacity: 1; transform: translateX(0); }

  }

  @keyframes slideInRight {

    from { opacity: 0; transform: translateX(50px); }

    to { opacity: 1; transform: translateX(0); }

  }
</style>

</div>

Prise en charge du navigateur

| Navigateur | Statut d’assistance | Remarques |

|:---:|:---:|:---|

| Google Chrome | ✅ | |

| Safari aux pommes | ✅ | Le flou de fond est pris en charge dans Safari 9+ |

| Mozilla Firefox | ✅ | Prise en charge complète de Background Blur à partir de la version 103 |

| Microsoft Bord | ✅ | |