<template>
  <MLampContainer>
    <Motion
      as="h1"
      :initial="{ opacity: 0.5, y: 100 }"
      :while-in-view="{ opacity: 1, y: 0 }"
      :transition="{
        delay: 0.3,
        duration: 0.8,
        ease: 'easeInOut',
      }"
      class="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
    >
      Build lamps <br> the right way
    </Motion>
  </MLampContainer>
</template>

<script setup>
import { Motion } from 'motion-v'
</script>

<template>
  <MLampContainer class="rounded-xl overflow-hidden">
    <div class="text-center max-w-3xl mx-auto p-10">
      <div class="mb-8">
        <div class="w-20 h-20 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center mx-auto">
          <UIcon
            name="i-lucide-sun"
            class="w-10 h-10 text-white"
          />
        </div>
      </div>
      <h2 class="text-4xl font-bold text-white mb-6">
        Lamp Effect
      </h2>
      <p class="text-dimmed text-lg mb-8 max-w-2xl mx-auto">
        Create dramatic lighting effects with our lamp container that adds depth and atmosphere to your content
      </p>
      <div class="flex flex-wrap justify-center gap-5">
        <UButton
          color="primary"
          variant="solid"
          size="lg"
        >
          Get Started
        </UButton>
        <UButton
          color="neutral"
          variant="outline"
          size="lg"
        >
          Learn More
        </UButton>
      </div>
    </div>
  </MLampContainer>
</template>