Nature Hero

"color: #ff7b72;">import React "color: #ff7b72;">from "react";

"color: #ff7b72;">export "color: #ff7b72;">default "color: #ff7b72;">function NatureHeroHero() {
  "color: #ff7b72;">return (
    <section className="relative w-full min-h-[90vh] flex items-center justify-center overflow-hidden font-sans">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <img
          src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2674&auto=format&fit=crop"
          alt="Nature Hero"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-black/50 backdrop-blur-[2px]" />
      </div>

      {/* Content Container */}
      <div className="relative z-10 text-center max-w-4xl mx-auto px-6 py-20">
        <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 border border-white/20 text-white/90 text-sm font-medium mb-8 backdrop-blur-md">
          New Release
        </span>
        
        <h1 className="text-6xl md:text-8xl font-black text-white mb-8 leading-[0.9] tracking-tighter uppercase italic">
          Nature Hero
        </h1>
        
        <p className="text-xl md:text-2xl text-white/70 mb-12 max-w-2xl mx-auto leading-relaxed">
          A beautiful nature themed hero section. Elevate your digital presence with our premium production-ready blocks.
        </p>
        
        <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
          <button className="w-full sm:w-auto px-10 py-4 bg-white text-black font-bold text-lg rounded-full hover:scale-105 active:scale-95 transition-all shadow-xl shadow-white/10">
            START BUILDING
          </button>
          <button className="w-full sm:w-auto px-10 py-4 border border-white/20 text-white font-bold text-lg rounded-full hover:bg-white/10 backdrop-blur-md transition-all">
            VIEW DOCS
          </button>
        </div>
      </div>

      {/* Decorative Elements */}
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce opacity-40">
        <span className="text-[10px] text-white uppercase tracking-widest font-bold">Scroll to explore</span>
        <div className="w-px h-10 bg-gradient-to-b ">from-white to-transparent" />
      </div>
    </section>
  );
}