Components : Next-Gen Innovation

Preview content adapted to proportion

Next-Gen Innovation

Banner

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

This component provides a visually engaging header section with a gradient background, animated elements, and interactive buttons.

The component includes hover effects on buttons and background elements, as well as responsive text and layout adjustments. Users can click the 'Get Started' and 'Learn More' buttons to engage with the content.


The design adapts to different screen sizes with responsive text sizing, flex layout adjustments, and media queries for mobile and desktop views.

Date : May 29, 2025
Views : 1676
Copys : 0

fa-tags

Corporate websites, product launch pages, digital agency portfolios, tech company landing pages

Code

<div class="relative overflow-hidden bg-gradient-to-r from-blue-600 via-purple-500 to-purple-600 p-8 md:p-12 transition-all duration-600 hover:scale-105 transform-gpu">
 <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div class="flex-1 space-y-4 text-center md:text-left relative z-10">
   <h1 class="text-4xl md:text-5xl font-bold text-white drop-shadow-lg">
    Next-Gen Innovation
   </h1>
   <p class="text-lg md:text-xl text-orange-200 font-medium max-w-2xl">
    Transform your digital experience with cutting-edge solutions
   </p>
   <div class="flex flex-wrap gap-3 justify-center md:justify-start">
    <button class="bg-orange-400 hover:bg-orange-500 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300">
     Get Started
    </button>
    <button class="border-2 border-neon-green hover:bg-neon-green/20 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300">
     Learn More
    </button>
   </div>
  </div>
  <div class="flex-1 flex justify-center md:justify-end space-x-4 relative">
   <div class="w-24 h-24 bg-purple-300/20 rounded-xl backdrop-blur-lg rotate-12 animate-float">
   </div>
   <div class="w-24 h-24 bg-blue-300/20 rounded-xl backdrop-blur-lg -rotate-12 animate-float-delayed">
   </div>
   <div class="absolute top-0 right-0 -mr-8 -mt-8 w-16 h-16 bg-neon-green/30 rounded-full blur-xl">
   </div>
  </div>
 </div>
 <div class="absolute top-0 left-0 w-32 h-32 bg-neon-green/20 rounded-full blur-3xl">
 </div>
 <div class="absolute bottom-0 right-0 w-48 h-48 bg-purple-400/30 rounded-full blur-3xl">
 </div>
 <div class="absolute bottom-4 right-4 flex space-x-2">
  <span class="text-2xl">
   🚀
  </span>
  <span class="text-2xl">
   💡
  </span>
  <span class="text-2xl">
   ✨
  </span>
 </div>
</div>


<template>
 <div class="relative overflow-hidden bg-gradient-to-r from-blue-600 via-purple-500 to-purple-600 p-8 md:p-12 transition-all duration-600 hover:scale-105 transform-gpu">
  <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
   <div class="flex-1 space-y-4 text-center md:text-left relative z-10">
    <h1 class="text-4xl md:text-5xl font-bold text-white drop-shadow-lg">
     Next-Gen Innovation
    </h1>
    <p class="text-lg md:text-xl text-orange-200 font-medium max-w-2xl">
     Transform your digital experience with cutting-edge solutions
    </p>
    <div class="flex flex-wrap gap-3 justify-center md:justify-start">
     <button class="bg-orange-400 hover:bg-orange-500 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300">
      Get Started
     </button>
     <button class="border-2 border-neon-green hover:bg-neon-green/20 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300">
      Learn More
     </button>
    </div>
   </div>
   <div class="flex-1 flex justify-center md:justify-end space-x-4 relative">
    <div class="w-24 h-24 bg-purple-300/20 rounded-xl backdrop-blur-lg rotate-12 animate-float">
    </div>
    <div class="w-24 h-24 bg-blue-300/20 rounded-xl backdrop-blur-lg -rotate-12 animate-float-delayed">
    </div>
    <div class="absolute top-0 right-0 -mr-8 -mt-8 w-16 h-16 bg-neon-green/30 rounded-full blur-xl">
    </div>
   </div>
  </div>
  <div class="absolute top-0 left-0 w-32 h-32 bg-neon-green/20 rounded-full blur-3xl">
  </div>
  <div class="absolute bottom-0 right-0 w-48 h-48 bg-purple-400/30 rounded-full blur-3xl">
  </div>
  <div class="absolute bottom-4 right-4 flex space-x-2">
   <span class="text-2xl">
    🚀
   </span>
   <span class="text-2xl">
    💡
   </span>
   <span class="text-2xl">
    ✨
   </span>
  </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>
<div class="relative overflow-hidden bg-gradient-to-r from-blue-600 via-purple-500 to-purple-600 p-8 md:p-12 transition-all duration-600 hover:scale-105 transform-gpu">
 <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div class="flex-1 space-y-4 text-center md:text-left relative z-10">
   <h1 class="text-4xl md:text-5xl font-bold text-white drop-shadow-lg">
    Next-Gen Innovation
   </h1>
   <p class="text-lg md:text-xl text-orange-200 font-medium max-w-2xl">
    Transform your digital experience with cutting-edge solutions
   </p>
   <div class="flex flex-wrap gap-3 justify-center md:justify-start">
    <button class="bg-orange-400 hover:bg-orange-500 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300">
     Get Started
    </button>
    <button class="border-2 border-neon-green hover:bg-neon-green/20 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300">
     Learn More
    </button>
   </div>
  </div>
  <div class="flex-1 flex justify-center md:justify-end space-x-4 relative">
   <div class="w-24 h-24 bg-purple-300/20 rounded-xl backdrop-blur-lg rotate-12 animate-float">
   </div>
   <div class="w-24 h-24 bg-blue-300/20 rounded-xl backdrop-blur-lg -rotate-12 animate-float-delayed">
   </div>
   <div class="absolute top-0 right-0 -mr-8 -mt-8 w-16 h-16 bg-neon-green/30 rounded-full blur-xl">
   </div>
  </div>
 </div>
 <div class="absolute top-0 left-0 w-32 h-32 bg-neon-green/20 rounded-full blur-3xl">
 </div>
 <div class="absolute bottom-0 right-0 w-48 h-48 bg-purple-400/30 rounded-full blur-3xl">
 </div>
 <div class="absolute bottom-4 right-4 flex space-x-2">
  <span class="text-2xl">
   🚀
  </span>
  <span class="text-2xl">
   💡
  </span>
  <span class="text-2xl">
   ✨
  </span>
 </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.

1676
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