Components : Interactive Digital Experience Section

Preview content adapted to proportion

Interactive Digital Experience Section

Banner

It is used to showcase features, services, or products in a visually appealing and interactive manner.

The component provides a seamless integration of text, images, and interactive elements to enhance digital engagement.

Users can interact with hover effects on buttons and elements, and click on buttons to explore further information.


The design adjusts to different screen sizes with grid layouts that change based on device, ensuring optimal display on mobile, tablet, and desktop.

Date : June 04, 2025
Views : 1688
Copys : 9

fa-tags

Website landing pages Product showcases Service introductions

Code

<section class="bg-[#F2F2F2] lg:h-[600px] xl:h-[800px] transition-all duration-300 ease-out">
 <div class="container mx-auto px-4 py-12 grid md:grid-cols-3 grid-flow-row-dense gap-8 items-center">
  <div class="md:col-span-2 space-y-6 p-8">
   <h1 class="text-4xl font-bold text-[#2F80ED]">
    Transform Your Digital Experience
   </h1>
   <p class="text-lg text-gray-600">
    Discover seamless integration across all platforms with enterprise-grade solutions
   </p>
   <button class="p-4 rounded-lg bg-[#2F80ED] text-white hover:opacity-90 active:translate-y-1 transition-all duration-300">
    Explore Features
   </button>
  </div>
  <div class="relative group h-96 md:h-auto">
   <div class="absolute inset-0 bg-[#2F80ED] rounded-2xl transform group-hover:translate-x-2 transition-transform duration-300">
    <div class="flex items-center justify-center h-full text-8xl">
     🚀
    </div>
   </div>
  </div>
 </div>
</section>
<section class="bg-[#6B7280] lg:h-[600px] xl:h-[800px] transition-opacity duration-200 ease-out">
 <div class="container mx-auto px-4 py-12 grid md:grid-cols-2 gap-8 items-center">
  <div class="order-2 md:order-1">
   <div class="bg-[#EF6F6C] p-8 rounded-3xl hover:opacity-90 transition-opacity">
    <div class="text-8xl mb-6">
     🎨
    </div>
    <h1 class="text-4xl font-bold text-white">
     Creative Studio Suite
    </h1>
    <p class="text-lg text-[#F2F2F2] mt-4">
     Professional tools for modern designers
    </p>
   </div>
  </div>
  <div class="order-1 md:order-2 space-y-8">
   <button class="p-4 rounded-full bg-[#EF6F6C] text-white hover:opacity-90 active:scale-95 transition-transform block ml-auto">
    View Plans
   </button>
   <div class="bg-white/20 backdrop-blur-sm p-8 rounded-2xl">
    <p class="text-xl text-[#F2F2F2]">
     Premium access starting at
    </p>
    <p class="text-3xl font-bold text-[#EF6F6C] mt-2">
     $29/mo
    </p>
   </div>
  </div>
 </div>
</section>
<div class="grid md:grid-cols-3 gap-6 p-8 bg-gradient-to-r from-[#EF6F6C]/20 to-[#2F80ED]/20">
 <div class="md:col-span-2 bg-white rounded-2xl p-8 shadow-xl hover:opacity-90 transition-opacity">
  <div class="flex gap-6 items-center">
   <div class="bg-[#2F80ED] p-6 rounded-xl text-4xl">
    🌟
   </div>
   <div>
    <h1 class="text-4xl font-bold text-gray-800">
     New Feature Launch
    </h1>
    <p class="text-lg text-gray-600 mt-2">
     Real-time analytics now available
    </p>
   </div>
  </div>
 </div>
 <div class="bg-[#EF6F6C] rounded-2xl p-8 flex flex-col justify-between">
  <div class="text-6xl mb-6">
   📈
  </div>
  <button class="w-full p-4 bg-white text-[#EF6F6C] rounded-lg hover:opacity-90 transition-opacity">
   Try Demo
  </button>
 </div>
</div>


<template>
 <section class="bg-[#F2F2F2] lg:h-[600px] xl:h-[800px] transition-all duration-300 ease-out">
  <div class="container mx-auto px-4 py-12 grid md:grid-cols-3 grid-flow-row-dense gap-8 items-center">
   <div class="md:col-span-2 space-y-6 p-8">
    <h1 class="text-4xl font-bold text-[#2F80ED]">
     Transform Your Digital Experience
    </h1>
    <p class="text-lg text-gray-600">
     Discover seamless integration across all platforms with enterprise-grade solutions
    </p>
    <button class="p-4 rounded-lg bg-[#2F80ED] text-white hover:opacity-90 active:translate-y-1 transition-all duration-300">
     Explore Features
    </button>
   </div>
   <div class="relative group h-96 md:h-auto">
    <div class="absolute inset-0 bg-[#2F80ED] rounded-2xl transform group-hover:translate-x-2 transition-transform duration-300">
     <div class="flex items-center justify-center h-full text-8xl">
      🚀
     </div>
    </div>
   </div>
  </div>
 </section>
 <section class="bg-[#6B7280] lg:h-[600px] xl:h-[800px] transition-opacity duration-200 ease-out">
  <div class="container mx-auto px-4 py-12 grid md:grid-cols-2 gap-8 items-center">
   <div class="order-2 md:order-1">
    <div class="bg-[#EF6F6C] p-8 rounded-3xl hover:opacity-90 transition-opacity">
     <div class="text-8xl mb-6">
      🎨
     </div>
     <h1 class="text-4xl font-bold text-white">
      Creative Studio Suite
     </h1>
     <p class="text-lg text-[#F2F2F2] mt-4">
      Professional tools for modern designers
     </p>
    </div>
   </div>
   <div class="order-1 md:order-2 space-y-8">
    <button class="p-4 rounded-full bg-[#EF6F6C] text-white hover:opacity-90 active:scale-95 transition-transform block ml-auto">
     View Plans
    </button>
    <div class="bg-white/20 backdrop-blur-sm p-8 rounded-2xl">
     <p class="text-xl text-[#F2F2F2]">
      Premium access starting at
     </p>
     <p class="text-3xl font-bold text-[#EF6F6C] mt-2">
      $29/mo
     </p>
    </div>
   </div>
  </div>
 </section>
 <div class="grid md:grid-cols-3 gap-6 p-8 bg-gradient-to-r from-[#EF6F6C]/20 to-[#2F80ED]/20">
  <div class="md:col-span-2 bg-white rounded-2xl p-8 shadow-xl hover:opacity-90 transition-opacity">
   <div class="flex gap-6 items-center">
    <div class="bg-[#2F80ED] p-6 rounded-xl text-4xl">
     🌟
    </div>
    <div>
     <h1 class="text-4xl font-bold text-gray-800">
      New Feature Launch
     </h1>
     <p class="text-lg text-gray-600 mt-2">
      Real-time analytics now available
     </p>
    </div>
   </div>
  </div>
  <div class="bg-[#EF6F6C] rounded-2xl p-8 flex flex-col justify-between">
   <div class="text-6xl mb-6">
    📈
   </div>
   <button class="w-full p-4 bg-white text-[#EF6F6C] rounded-lg hover:opacity-90 transition-opacity">
    Try Demo
   </button>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyBannerComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyBannerComponent = () => {
    return (
<div>
<section class="bg-[#F2F2F2] lg:h-[600px] xl:h-[800px] transition-all duration-300 ease-out">
 <div class="container mx-auto px-4 py-12 grid md:grid-cols-3 grid-flow-row-dense gap-8 items-center">
  <div class="md:col-span-2 space-y-6 p-8">
   <h1 class="text-4xl font-bold text-[#2F80ED]">
    Transform Your Digital Experience
   </h1>
   <p class="text-lg text-gray-600">
    Discover seamless integration across all platforms with enterprise-grade solutions
   </p>
   <button class="p-4 rounded-lg bg-[#2F80ED] text-white hover:opacity-90 active:translate-y-1 transition-all duration-300">
    Explore Features
   </button>
  </div>
  <div class="relative group h-96 md:h-auto">
   <div class="absolute inset-0 bg-[#2F80ED] rounded-2xl transform group-hover:translate-x-2 transition-transform duration-300">
    <div class="flex items-center justify-center h-full text-8xl">
     🚀
    </div>
   </div>
  </div>
 </div>
</section>
<section class="bg-[#6B7280] lg:h-[600px] xl:h-[800px] transition-opacity duration-200 ease-out">
 <div class="container mx-auto px-4 py-12 grid md:grid-cols-2 gap-8 items-center">
  <div class="order-2 md:order-1">
   <div class="bg-[#EF6F6C] p-8 rounded-3xl hover:opacity-90 transition-opacity">
    <div class="text-8xl mb-6">
     🎨
    </div>
    <h1 class="text-4xl font-bold text-white">
     Creative Studio Suite
    </h1>
    <p class="text-lg text-[#F2F2F2] mt-4">
     Professional tools for modern designers
    </p>
   </div>
  </div>
  <div class="order-1 md:order-2 space-y-8">
   <button class="p-4 rounded-full bg-[#EF6F6C] text-white hover:opacity-90 active:scale-95 transition-transform block ml-auto">
    View Plans
   </button>
   <div class="bg-white/20 backdrop-blur-sm p-8 rounded-2xl">
    <p class="text-xl text-[#F2F2F2]">
     Premium access starting at
    </p>
    <p class="text-3xl font-bold text-[#EF6F6C] mt-2">
     $29/mo
    </p>
   </div>
  </div>
 </div>
</section>
<div class="grid md:grid-cols-3 gap-6 p-8 bg-gradient-to-r from-[#EF6F6C]/20 to-[#2F80ED]/20">
 <div class="md:col-span-2 bg-white rounded-2xl p-8 shadow-xl hover:opacity-90 transition-opacity">
  <div class="flex gap-6 items-center">
   <div class="bg-[#2F80ED] p-6 rounded-xl text-4xl">
    🌟
   </div>
   <div>
    <h1 class="text-4xl font-bold text-gray-800">
     New Feature Launch
    </h1>
    <p class="text-lg text-gray-600 mt-2">
     Real-time analytics now available
    </p>
   </div>
  </div>
 </div>
 <div class="bg-[#EF6F6C] rounded-2xl p-8 flex flex-col justify-between">
  <div class="text-6xl mb-6">
   📈
  </div>
  <button class="w-full p-4 bg-white text-[#EF6F6C] rounded-lg hover:opacity-90 transition-opacity">
   Try Demo
  </button>
 </div>
</div>

</div>
    )
}
export default MyBannerComponent;

Recommended Related Components

More+

Interactive Digital Experience Section

It is used to showcase features, services, or products in a visually appealing and interactive manner.

1688
9

Next-Gen Innovation

It is designed to showcase a company's innovative solutions, highlight key offerings, and guide users to take action.

1675
0

Interactive Feature Showcase

Ideal for highlighting key offerings, services, or projects on a website or application.

1011
0

Interactive Gradient Header

This component is used to create a visually appealing and interactive header or section for web pages.

598
2