.elementor-9759 .elementor-element.elementor-element-3d68cda{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9759 .elementor-element.elementor-element-0a6835e{width:100%;max-width:100%;top:0px;}body:not(.rtl) .elementor-9759 .elementor-element.elementor-element-0a6835e{left:0px;}body.rtl .elementor-9759 .elementor-element.elementor-element-0a6835e{right:0px;}:root{--page-title-display:none;}/* Start custom CSS */import React from 'react';
import CountdownTimer from './CountdownTimer';
import { ShoppingCart, ArrowRight } from 'lucide-react';

const Hero: React.FC = () => {
  return (
    <section className="relative min-h-screen flex flex-col items-center justify-center bg-gray-100 overflow-hidden pt-20 pb-20 px-4 section-spacing">
      {/* Background Decorative Elements */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-brand-green/20 rounded-full blur-[100px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-brand-orange/20 rounded-full blur-[100px]" />
      </div>

      <div className="container max-w-6xl mx-auto relative z-10 text-center">
        {/* Using custom-responsive-title from styles.css instead of utility classes for font size */}
        <h1 className="font-display custom-responsive-title font-bold mb-6 tracking-tighter leading-none text-gray-900">
          FINANCE TRACKER
        </h1>
        
        <p className="font-sans text-lg md:text-xl text-gray-600 max-w-2xl mx-auto mb-12 leading-relaxed">
          Take control of your income, expenses, and savings. See exactly where your money is going and manage your budget consciously. Turn financial chaos into a clear picture.
        </p>

        <div className="relative group inline-block mb-16">
          <div className="absolute -inset-1 bg-gradient-to-r from-brand-green to-brand-orange rounded-full blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
          <button className="relative px-12 py-4 bg-brand-green text-black font-bold rounded-full text-lg md:text-xl transition-transform transform group-hover:-translate-y-1 active:translate-y-0 shadow-xl flex items-center gap-3">
            <ShoppingCart className="w-5 h-5" />
            Purchase Template
            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </button>
        </div>

        <div className="bg-white/80 backdrop-blur-md rounded-2xl p-8 max-w-3xl mx-auto shadow-2xl border border-white/50">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="w-full md:w-1/2 text-left">
              <h3 className="font-sans font-semibold text-gray-500 uppercase tracking-widest text-sm mb-2">Limited Time Offer</h3>
              <div className="flex items-center gap-4">
                <span className="font-display text-5xl text-gray-900">$12</span>
                <span className="font-sans text-xl text-gray-400 line-through decoration-brand-orange decoration-2">$29</span>
                <span className="bg-brand-orange/10 text-brand-orange px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">Save 58%</span>
              </div>
            </div>
            <div className="w-full md:w-1/2 flex flex-col items-center md:items-end">
              <span className="text-sm font-medium text-gray-500 mb-2">Discount ends in:</span>
              <CountdownTimer />
            </div>
          </div>
        </div>

        {/* Floating Elements (Decorative) with custom CSS animation class */}
        <div className="absolute top-1/4 left-10 hidden lg:block floating-element" style={{ animationDelay: '0s' }}>
          <div className="bg-white p-4 rounded-xl shadow-lg rotate-[-6deg]">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 font-bold">$</div>
              <div className="text-left">
                <p className="text-xs text-gray-500">Income</p>
                <p className="font-bold text-green-600">+$4,250.00</p>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute bottom-1/3 right-10 hidden lg:block floating-element" style={{ animationDelay: '1.5s' }}>
          <div className="bg-white p-4 rounded-xl shadow-lg rotate-[6deg]">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-600 font-bold">%</div>
              <div className="text-left">
                <p className="text-xs text-gray-500">Expenses</p>
                <p className="font-bold text-red-600">-$1,120.50</p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
};

export default Hero;/* End custom CSS */