1"use client";
2
3export const EclipseSaasHero = () => {
4  return (
5    <main className="relative min-h-screen overflow-hidden bg-white">
6      {/* Ray Ellipse Background */}
7      <div className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none select-none">
8        {/* Background Blur */}
9        <div
10          className="absolute left-1/2 -translate-x-1/2 w-[6000px] h-[2471px] opacity-100"
11          style={{
12            background:
13              "radial-gradient(circle at center 800px, rgba(251, 146, 60, 0.4) 0%, rgba(251, 146, 60, 0.2) 14%, rgba(251, 146, 60, 0.1) 18%, rgba(251, 146, 60, 0.04) 22%, rgba(255, 255, 255, 0.05) 25%)",
14            filter: "blur(120px)",
15          }}
16        />
17
18        {/* Ellipses Container */}
19        <div className="absolute top-[392px] left-1/2 -translate-x-1/2 w-[3000px] h-[3000px] rotate-180">
20          {/* Ellipse One */}
21          <div
22            className="absolute w-full h-full rounded-full rotate-180 -mt-[13px] z-[5] backdrop-blur-sm"
23            style={{
24              background:
25                "radial-gradient(43.89% 25.74% at 50.02% 97.24%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%)",
26              border: "16px solid rgba(251, 146, 60, 0.3)",
27            }}
28          />
29
30          {/* Ellipse Two */}
31          <div
32            className="absolute w-full h-full bg-white/40 backdrop-blur-sm rounded-full rotate-180 -mt-[11px] z-[4]"
33            style={{
34              border: "23px solid rgba(254, 215, 170, 0.5)",
35            }}
36          />
37
38          {/* Ellipse Three */}
39          <div
40            className="absolute w-full h-full bg-white/30 backdrop-blur-sm rounded-full rotate-180 -mt-[8px] z-[3]"
41            style={{
42              border: "23px solid rgba(253, 186, 116, 0.6)",
43            }}
44          />
45
46          {/* Ellipse Four */}
47          <div
48            className="absolute w-full h-full bg-white/20 rounded-full rotate-180 -mt-[4px] z-[2]"
49            style={{
50              border: "23px solid rgba(251, 146, 60, 0.7)",
51            }}
52          />
53
54          {/* Ellipse Five */}
55          <div
56            className="absolute w-full h-full bg-white/10 rounded-full rotate-180 z-[1]"
57            style={{
58              border: "20px solid rgba(249, 115, 22, 0.8)",
59              boxShadow: "0 -15px 40px rgba(249, 115, 22, 0.4)",
60            }}
61          />
62        </div>
63      </div>
64
65      {/* Hero Section */}
66      <div className="relative z-10 flex min-h-screen flex-col">
67        <div className="flex-1 flex items-center justify-center">
68          <div className="flex items-center justify-center min-h-screen w-full px-6 sm:px-12 lg:px-20 -mt-20">
69            <div className="relative z-10 flex max-w-6xl w-full flex-col items-center gap-12 text-center">
70              {/* Headline */}
71              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight tracking-tight text-gray-900 text-balance">
72                Transform Your Business
73                <br />
74                <span className="bg-gradient-to-r from-orange-600 to-orange-400 bg-clip-text text-transparent">
75                  With Smart Analytics
76                </span>
77              </h1>
78
79              {/* Description */}
80              <p className="text-xl sm:text-2xl text-gray-600 max-w-3xl leading-relaxed">
81                Harness the power of real-time data insights to make informed decisions, boost productivity, and accelerate growth.
82              </p>
83
84              {/* CTA Buttons */}
85              <div className="flex flex-col sm:flex-row items-center gap-4 mt-4">
86                <button className="px-6 py-3 bg-orange-500 text-white rounded-lg font-medium hover:bg-orange-600 transition-colors">
87                  Start Free Trial
88                </button>
89                <button className="px-6 py-3 text-orange-600 font-medium hover:text-orange-700 transition-colors">
90                  Watch Demo →
91                </button>
92              </div>
93
94              {/* Stats */}
95              <div className="grid grid-cols-3 gap-8 sm:gap-16 mt-12 pt-8 border-t border-gray-200/50 w-full max-w-3xl">
96                <div className="text-center">
97                  <div className="text-3xl sm:text-4xl font-bold text-gray-900">50K+</div>
98                  <div className="text-sm text-gray-600 mt-1">Active Users</div>
99                </div>
100                <div className="text-center">
101                  <div className="text-3xl sm:text-4xl font-bold text-gray-900">99.9%</div>
102                  <div className="text-sm text-gray-600 mt-1">Uptime</div>
103                </div>
104                <div className="text-center">
105                  <div className="text-3xl sm:text-4xl font-bold text-gray-900">4.9/5</div>
106                  <div className="text-sm text-gray-600 mt-1">Rating</div>
107                </div>
108              </div>
109
110              {/* Social Proof */}
111              <div className="flex flex-col items-center gap-4 mt-8">
112                <p className="text-sm text-gray-500">Trusted by leading companies worldwide</p>
113                <div className="flex items-center gap-8 opacity-60">
114                  <div className="text-2xl font-bold text-gray-400">COMPANY</div>
115                  <div className="text-2xl font-bold text-gray-400">BRAND</div>
116                  <div className="text-2xl font-bold text-gray-400">CORP</div>
117                </div>
118              </div>
119            </div>
120          </div>
121        </div>
122      </div>
123    </main>
124  );
125};
126