Component:
Feature Mobile App Dark

Name: Feature Mobile App Dark
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Feature Page Section Content Mobile App Dark
Colors:
Description:
This carefully crafted Feature component is perfect for Mobile App landing pages, featuring a Dark design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Feature
@industry: Mobile App
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<section class="bg-zinc-950 py-24 px-6">
  <div class="max-w-7xl mx-auto">

    <div class="text-center mb-20">
      <h2 class="text-lime-400 font-bold tracking-widest uppercase text-sm mb-3">Core Features</h2>
      <h3 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Built for the modern <br
          class="hidden md:block" /> mobile workflow.</h3>
      <p class="text-zinc-400 max-w-2xl mx-auto text-lg leading-relaxed">
        Stop juggling multiple tools. Lumina brings your entire production pipeline into a single, high-performance
        interface.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <div
        class="group p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 hover:border-lime-400/50 transition-all duration-300 transform-gpu hover:-translate-y-2">
        <div
          class="w-14 h-14 bg-zinc-800 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-lime-400 transition-colors duration-300">
          <svg class="w-7 h-7 text-lime-400 group-hover:text-zinc-950" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-white text-xl font-bold mb-3">Lightning Fast Sync</h3>
        <p class="text-zinc-400 leading-relaxed text-sm">
          Proprietary protocol ensures your data is synced across all devices in under 50ms. Work offline, sync.
        </p>
      </div>

      <div
        class="group p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 hover:border-lime-400/50 transition-all duration-300 transform-gpu hover:-translate-y-2">
        <div
          class="w-14 h-14 bg-zinc-800 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-lime-400 transition-colors duration-300">
          <svg class="w-7 h-7 text-lime-400 group-hover:text-zinc-950" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              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.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>
        <h3 class="text-white text-xl font-bold mb-3">Bank-Grade Security</h3>
        <p class="text-zinc-400 leading-relaxed text-sm">
          Your privacy is non-negotiable. We use end-to-end AES-256 encryption for every byte of data stored.
        </p>
      </div>

      <div
        class="group p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 hover:border-lime-400/50 transition-all duration-300 transform-gpu hover:-translate-y-2">
        <div
          class="w-14 h-14 bg-zinc-800 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-lime-400 transition-colors duration-300">
          <svg class="w-7 h-7 text-lime-400 group-hover:text-zinc-950" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
          </svg>
        </div>
        <h3 class="text-white text-xl font-bold mb-3">Real-time Analytics</h3>
        <p class="text-zinc-400 leading-relaxed text-sm">
          Deep insights into your performance with beautifully rendered charts and automated weekly reports.
        </p>
      </div>

      <div
        class="group p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 hover:border-lime-400/50 transition-all duration-300 transform-gpu hover:-translate-y-2">
        <div
          class="w-14 h-14 bg-zinc-800 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-lime-400 transition-colors duration-300">
          <svg class="w-7 h-7 text-lime-400 group-hover:text-zinc-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h7" />
          </svg>
        </div>
        <h3 class="text-white text-xl font-bold mb-3">Modular Workflow</h3>
        <p class="text-zinc-400 leading-relaxed text-sm">
          Build your workflow like LEGO. Enable only what you need and scale features as your team grows.
        </p>
      </div>
      
      <div
        class="group p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 hover:border-lime-400/50 transition-all duration-300 transform-gpu hover:-translate-y-2">
        <div
          class="w-14 h-14 bg-zinc-800 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-lime-400 transition-colors duration-300">
          <svg class="w-7 h-7 text-lime-400 group-hover:text-zinc-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M12 8v4l3 3M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" />
          </svg>
        </div>
        <h3 class="text-white text-xl font-bold mb-3">Smart Automation</h3>
        <p class="text-zinc-400 leading-relaxed text-sm">
          Automate repetitive tasks with intelligent rules and triggers that adapt to your workflow.
        </p>
      </div>
      
      <div
        class="group p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 hover:border-lime-400/50 transition-all duration-300 transform-gpu hover:-translate-y-2">
        <div
          class="w-14 h-14 bg-zinc-800 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-lime-400 transition-colors duration-300">
          <svg class="w-7 h-7 text-lime-400 group-hover:text-zinc-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M17 8h2a2 2 0 012 2v8a2 2 0 01-2 2h-2M7 8H5a2 2 0 00-2 2v8a2 2 0 002 2h2M12 15v2M12 9v2" />
          </svg>
        </div>
        <h3 class="text-white text-xl font-bold mb-3">Seamless Integrations</h3>
        <p class="text-zinc-400 leading-relaxed text-sm">
          Connect effortlessly with your favorite tools via native integrations and a powerful API.
        </p>
      </div>

    </div>

    <a href="#"
      class="block max-w-[220px] mx-auto mt-12 text-center px-8 py-4 bg-lime-400 hover:bg-lime-300 text-zinc-950 font-bold rounded-2xl transition-all transform hover:scale-105">
      Download the App
    </a>
    <p class="text-center text-zinc-400 text-sm mt-4">
      No credit card required. Cancel anytime.
    </p>
  </div>
</section>
Feature Mobile App Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
