Hero Components

Beautiful, responsive hero sections built with TailwindCSS. Perfect for landing pages, product launches, and website introductions. Copy, paste, and customize for React, Vue, or HTML.

1. Basic Hero Section

A clean, minimal hero with white background, black text, and a simple call-to-action. Perfect for professional or minimalist landing pages.

Welcome to Templateight

Build stunning websites with our premium TailwindCSS templates and components. Simple, clean, and effective.

<section class="bg-white py-24 px-4 sm:px-6 lg:px-8 border-t border-gray-100">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-4xl md:text-5xl font-bold text-black mb-6">Welcome to Templateight</h1>
    <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto">Build stunning websites with our premium TailwindCSS templates and components. Simple, clean, and effective.</p>
    <button class="inline-block px-8 py-4 bg-black text-white font-semibold text-lg hover:bg-gray-800 transition-colors">Get Started</button>
  </div>
</section>
<template>
  <section class="bg-white py-24 px-4 sm:px-6 lg:px-8 border-t border-gray-100">
    <div class="max-w-4xl mx-auto text-center">
      <h1 class="text-4xl md:text-5xl font-bold text-black mb-6">{{ title }}</h1>
      <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto">{{ subtitle }}</p>
      <button @click="handleClick" class="inline-block px-8 py-4 bg-black text-white font-semibold text-lg hover:bg-gray-800 transition-colors">{{ buttonText }}</button>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('Welcome to Templateight')
const subtitle = ref('Build stunning websites with our premium TailwindCSS templates and components. Simple, clean, and effective.')
const buttonText = ref('Get Started')

const handleClick = () => {
  // Handle button click
}
</script>
import React from 'react'

export default function MinimalHero() {
  const title = 'Welcome to Templateight'
  const subtitle = 'Build stunning websites with our premium TailwindCSS templates and components. Simple, clean, and effective.'
  const buttonText = 'Get Started'

  const handleClick = () => {
    // Handle button click
  }

  return (
    <section className="bg-white py-24 px-4 sm:px-6 lg:px-8 border-t border-gray-100">
      <div className="max-w-4xl mx-auto text-center">
        <h1 className="text-4xl md:text-5xl font-bold text-black mb-6">{title}</h1>
        <p className="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto">{subtitle}</p>
        <button onClick={handleClick} className="inline-block px-8 py-4 bg-black text-white font-semibold text-lg hover:bg-gray-800 transition-colors">{buttonText}</button>
      </div>
    </section>
  )
}

2. Modern Hero with Dual CTAs

A contemporary hero section with gradient background, modern typography, and two call-to-action buttons for better user engagement.

Transform Your Ideas

Create extraordinary digital experiences with our cutting-edge tools and innovative solutions. Join thousands of creators who trust our platform.

<section class="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-32 px-4 sm:px-6 lg:px-8">
  <div class="max-w-5xl mx-auto text-center">
    <h1 class="text-5xl md:text-7xl font-extrabold text-gray-900 mb-8 leading-tight">Transform Your Ideas</h1>
    <p class="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">Create extraordinary digital experiences with our cutting-edge tools and innovative solutions. Join thousands of creators who trust our platform.</p>
    <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
      <button class="group inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold text-lg rounded-xl shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300">
        Start Building Now
        <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
      </button>
      <button class="inline-flex items-center px-8 py-4 border-2 border-gray-300 text-gray-700 font-semibold text-lg rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-300">
        Learn More
      </button>
    </div>
  </div>
</section>
<template>
  <section class="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-32 px-4 sm:px-6 lg:px-8">
    <div class="max-w-5xl mx-auto text-center">
      <h1 class="text-5xl md:text-7xl font-extrabold text-gray-900 mb-8 leading-tight">{{ title }}</h1>
      <p class="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">{{ subtitle }}</p>
      <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
        <button @click="handlePrimaryClick" class="group inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold text-lg rounded-xl shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300">
          {{ primaryButtonText }}
          <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
          </svg>
        </button>
        <button @click="handleSecondaryClick" class="inline-flex items-center px-8 py-4 border-2 border-gray-300 text-gray-700 font-semibold text-lg rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-300">
          {{ secondaryButtonText }}
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('Transform Your Ideas')
const subtitle = ref('Create extraordinary digital experiences with our cutting-edge tools and innovative solutions. Join thousands of creators who trust our platform.')
const primaryButtonText = ref('Start Building Now')
const secondaryButtonText = ref('Learn More')

const handlePrimaryClick = () => {
  // Handle primary button click
}

const handleSecondaryClick = () => {
  // Handle secondary button click
}
</script>
import React from 'react'

export default function ModernHero() {
  const title = 'Transform Your Ideas'
  const subtitle = 'Create extraordinary digital experiences with our cutting-edge tools and innovative solutions. Join thousands of creators who trust our platform.'
  const primaryButtonText = 'Start Building Now'
  const secondaryButtonText = 'Learn More'

  const handlePrimaryClick = () => {
    // Handle primary button click
  }

  const handleSecondaryClick = () => {
    // Handle secondary button click
  }

  return (
    <section className="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-32 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto text-center">
        <h1 className="text-5xl md:text-7xl font-extrabold text-gray-900 mb-8 leading-tight">{title}</h1>
        <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">{subtitle}</p>
        <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
          <button onClick={handlePrimaryClick} className="group inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold text-lg rounded-xl shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300">
            {primaryButtonText}
            <svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </button>
          <button onClick={handleSecondaryClick} className="inline-flex items-center px-8 py-4 border-2 border-gray-300 text-gray-700 font-semibold text-lg rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-300">
            {secondaryButtonText}
          </button>
        </div>
      </div>
    </section>
  )
}

3. Hero with Stats

A practical hero section with a compelling headline, call-to-action, and key statistics below to build trust and credibility. Perfect for business or product landing pages.

Powering Innovation Worldwide

Join millions of developers and businesses building the future with our platform. Fast, reliable, and scalable solutions.

10M+
Active Users
99.9%
Uptime
24/7
Support
<section class="bg-gradient-to-b from-slate-50 to-white py-24 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto text-center">
    <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">Powering Innovation Worldwide</h1>
    <p class="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto">Join millions of developers and businesses building the future with our platform. Fast, reliable, and scalable solutions.</p>
    <button class="inline-flex items-center px-8 py-4 bg-blue-600 text-white font-semibold text-lg rounded-lg hover:bg-blue-700 transition-colors shadow-lg hover:shadow-xl">
      Get Started Free
      <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
      </svg>
    </button>
  </div>

  <!-- Stats Section -->
  <div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
    <div class="text-center group">
      <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group-hover:border-blue-200">
        <div class="text-3xl md:text-4xl font-bold text-blue-600 mb-2">10M+</div>
        <div class="text-gray-600 font-medium">Active Users</div>
      </div>
    </div>
    <div class="text-center group">
      <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group-hover:border-green-200">
        <div class="text-3xl md:text-4xl font-bold text-green-600 mb-2">99.9%</div>
        <div class="text-gray-600 font-medium">Uptime</div>
      </div>
    </div>
    <div class="text-center group">
      <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group-hover:border-purple-200">
        <div class="text-3xl md:text-4xl font-bold text-purple-600 mb-2">24/7</div>
        <div class="text-gray-600 font-medium">Support</div>
      </div>
    </div>
  </div>
</section>
<template>
  <section class="bg-gradient-to-b from-slate-50 to-white py-24 px-4 sm:px-6 lg:px-8">
    <div class="max-w-6xl mx-auto text-center">
      <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">{{ title }}</h1>
      <p class="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto">{{ subtitle }}</p>
      <button @click="handleClick" class="inline-flex items-center px-8 py-4 bg-blue-600 text-white font-semibold text-lg rounded-lg hover:bg-blue-700 transition-colors shadow-lg hover:shadow-xl">
        {{ buttonText }}
        <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
      </button>
    </div>

    <!-- Stats Section -->
    <div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
      <div v-for="stat in stats" :key="stat.id" class="text-center group">
        <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group-hover:border-blue-200">
          <div class="text-3xl md:text-4xl font-bold text-blue-600 mb-2">{{ stat.value }}</div>
          <div class="text-gray-600 font-medium">{{ stat.label }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('Powering Innovation Worldwide')
const subtitle = ref('Join millions of developers and businesses building the future with our platform. Fast, reliable, and scalable solutions.')
const buttonText = ref('Get Started Free')

const stats = ref([
  { id: 1, value: '10M+', label: 'Active Users' },
  { id: 2, value: '99.9%', label: 'Uptime' },
  { id: 3, value: '24/7', label: 'Support' }
])

const handleClick = () => {
  // Handle button click
}
</script>
import React from 'react'

export default function HeroWithStats() {
  const title = 'Powering Innovation Worldwide'
  const subtitle = 'Join millions of developers and businesses building the future with our platform. Fast, reliable, and scalable solutions.'
  const buttonText = 'Get Started Free'

  const stats = [
    { id: 1, value: '10M+', label: 'Active Users' },
    { id: 2, value: '99.9%', label: 'Uptime' },
    { id: 3, value: '24/7', label: 'Support' }
  ]

  const handleClick = () => {
    // Handle button click
  }

  return (
    <section className="bg-gradient-to-b from-slate-50 to-white py-24 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto text-center">
        <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">{title}</h1>
        <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto">{subtitle}</p>
        <button onClick={handleClick} className="inline-flex items-center px-8 py-4 bg-blue-600 text-white font-semibold text-lg rounded-lg hover:bg-blue-700 transition-colors shadow-lg hover:shadow-xl">
          {buttonText}
          <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </button>
      </div>

      <!-- Stats Section -->
      <div className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
        {stats.map(stat => (
          <div key={stat.id} className="text-center group">
            <div className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group-hover:border-blue-200">
              <div className="text-3xl md:text-4xl font-bold text-blue-600 mb-2">{stat.value}</div>
              <div className="text-gray-600 font-medium">{stat.label}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}

4. Hero with Background Image

A visually striking hero section with a background image, overlay text, and call-to-action. Perfect for showcasing products, portfolios, or creating immersive landing pages.

Discover Your Next Adventure

Explore breathtaking landscapes and create unforgettable memories with our premium travel experiences.

<section class="relative h-96 md:h-[500px] bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');">
  <div class="absolute inset-0 bg-black/50"></div>
  <div class="relative z-10 flex items-center justify-center h-full px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto text-center text-white">
      <h1 class="text-4xl md:text-6xl font-bold mb-6">Discover Your Next Adventure</h1>
      <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto opacity-90">Explore breathtaking landscapes and create unforgettable memories with our premium travel experiences.</p>
      <button class="inline-flex items-center px-8 py-4 bg-white text-black font-semibold text-lg rounded-lg hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl">
        Start Your Journey
        <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
      </button>
    </div>
  </div>
</section>
<template>
  <section class="relative h-96 md:h-[500px] bg-cover bg-center" :style="{ backgroundImage: `url(${backgroundImage})` }">
    <div class="absolute inset-0 bg-black/50"></div>
    <div class="relative z-10 flex items-center justify-center h-full px-4 sm:px-6 lg:px-8">
      <div class="max-w-4xl mx-auto text-center text-white">
        <h1 class="text-4xl md:text-6xl font-bold mb-6">{{ title }}</h1>
        <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto opacity-90">{{ subtitle }}</p>
        <button @click="handleClick" class="inline-flex items-center px-8 py-4 bg-white text-black font-semibold text-lg rounded-lg hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl">
          {{ buttonText }}
          <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
          </svg>
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('Discover Your Next Adventure')
const subtitle = ref('Explore breathtaking landscapes and create unforgettable memories with our premium travel experiences.')
const buttonText = ref('Start Your Journey')
const backgroundImage = ref('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')

const handleClick = () => {
  // Handle button click
}
</script>
import React from 'react'

export default function HeroWithBackground() {
  const title = 'Discover Your Next Adventure'
  const subtitle = 'Explore breathtaking landscapes and create unforgettable memories with our premium travel experiences.'
  const buttonText = 'Start Your Journey'
  const backgroundImage = 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'

  const handleClick = () => {
    // Handle button click
  }

  return (
    <section className="relative h-96 md:h-[500px] bg-cover bg-center" 
    
    >
      <div className="absolute inset-0 bg-black/50"></div>
      <div className="relative z-10 flex items-center justify-center h-full px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto text-center text-white">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">{title}</h1>
          <p className="text-xl md:text-2xl mb-8 max-w-2xl mx-auto opacity-90">{subtitle}</p>
          <button onClick={handleClick} className="inline-flex items-center px-8 py-4 bg-white text-black font-semibold text-lg rounded-lg hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl">
            {buttonText}
            <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </button>
        </div>
      </div>
    </section>
  )
}

5. Split Layout Header with Image

Modern split-layout header with content on the left and image on the right. Features colorful gradients, shadows, and responsive design.

Welcome to Innovation

Discover cutting-edge solutions that transform your business. Join thousands of satisfied customers.

Modern workspace
Live & Active 
<header class="bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <!-- Left Content -->
      <div class="text-center lg:text-left">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6">
          Welcome to Innovation
        </h1>
        <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-lg mx-auto lg:mx-0">
          Discover cutting-edge solutions that transform your business. Join thousands of satisfied customers.
        </p>
        <button class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold text-lg rounded-xl shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300">
          Get Started Today
          <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
          </svg>
        </button>
      </div>

      <!-- Right Image -->
      <div class="relative">
        <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden">
          <img src="https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Modern workspace" class="w-full h-96 lg:h-[500px] object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
          <!-- Floating Elements -->
          <div class="absolute top-4 right-4 w-12 h-12 bg-gradient-to-r from-pink-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg animate-bounce">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <div class="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm rounded-lg p-3 shadow-lg">
            <div class="flex items-center space-x-2">
              <div class="w-3 h-3 bg-green-500 rounded-full"></div>
              <span class="text-sm font-medium text-gray-800">Live & Active</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<template>
  <header class="bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 py-16 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <!-- Left Content -->
        <div class="text-center lg:text-left">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6">
            {{ title }}
          </h1>
          <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-lg mx-auto lg:mx-0">
            {{ subtitle }}
          </p>
          <button @click="handleClick" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold text-lg rounded-xl shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300">
            {{ buttonText }}
            <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
            </svg>
          </button>
        </div>

        <!-- Right Image -->
        <div class="relative">
          <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden">
            <img :src="imageSrc" alt="Modern workspace" class="w-full h-96 lg:h-[500px] object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            <!-- Floating Elements -->
            <div class="absolute top-4 right-4 w-12 h-12 bg-gradient-to-r from-pink-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg animate-bounce">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <div class="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm rounded-lg p-3 shadow-lg">
              <div class="flex items-center space-x-2">
                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                <span class="text-sm font-medium text-gray-800">Live & Active</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('Welcome to Innovation')
const subtitle = ref('Discover cutting-edge solutions that transform your business. Join thousands of satisfied customers.')
const buttonText = ref('Get Started Today')
const imageSrc = ref('https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')

const handleClick = () => {
  // Handle button click
}
</script>
import React from 'react'

export default function SplitHeaderWithImage() {
  const title = 'Welcome to Innovation'
  const subtitle = 'Discover cutting-edge solutions that transform your business. Join thousands of satisfied customers.'
  const buttonText = 'Get Started Today'
  const imageSrc = 'https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'

  const handleClick = () => {
    // Handle button click
  }

  return (
    <header className="bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 py-16 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- Left Content -->
          <div className="text-center lg:text-left">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6">
              {title}
            </h1>
            <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-lg mx-auto lg:mx-0">
              {subtitle}
            </p>
            <button onClick={handleClick} className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold text-lg rounded-xl shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300">
              {buttonText}
              <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </button>
          </div>

          <!-- Right Image -->
          <div className="relative">
            <div className="relative bg-white rounded-2xl shadow-2xl overflow-hidden">
              <img src={imageSrc} alt="Modern workspace" className="w-full h-96 lg:h-[500px] object-cover" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
              <!-- Floating Elements -->
              <div className="absolute top-4 right-4 w-12 h-12 bg-gradient-to-r from-pink-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg animate-bounce">
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm rounded-lg p-3 shadow-lg">
                <div className="flex items-center space-x-2">
                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  <span className="text-sm font-medium text-gray-800">Live & Active</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More