Untitled

export default function Interactive3DEarthGlobeApp() { return ( <div className="w-full h-screen bg-black overflow-hidden relative flex items-center justify-center"> <style>{` .earth { width: 320px; height: 320px; border-radius: 50%; position: relative; transform-style: preserve-3d; animation: rotate 20s linear infinite; background: radial-gradient(circle at 30% 30%, #4fc3f7, #1565c0 70%), linear-gradient(90deg, transparent 45%, rgba(255,255,255,0.08) 50%, transparent 55%); box-shadow: 0 0 60px rgba(0, 150, 255, 0.5), inset -30px -30px 60px rgba(0,0,0,0.5), inset 20px 20px 40px rgba(255,255,255,0.1); }

.earth::before {
          content: '';
                position: absolute;
                      inset: 0;
                            border-radius: 50%;
                                  background:
                                          radial-gradient(circle at 60% 40%, transparent 55%, rgba(255,255,255,0.08) 56%),
                                                  radial-gradient(circle at 35% 65%, #43a047 0 12%, transparent 13%),
                                                          radial-gradient(circle at 60% 35%, #43a047 0 10%, transparent 11%),
                                                                  radial-gradient(circle at 50% 70%, #2e7d32 0 15%, transparent 16%),
                                                                          radial-gradient(circle at 75% 55%, #66bb6a 0 8%, transparent 9%),
                                                                                  radial-gradient(circle at 25% 40%, #388e3c 0 7%, transparent 8%);
                                                                                        opacity: 0.9;
}

    .earth::after {
              content: '';
                    position: absolute;
                          inset: -10px;
                                border-radius: 50%;
                                      border: 2px solid rgba(255,255,255,0.1);
                                            transform: rotateX(75deg);
    }

        .stars {
                  position: absolute;
                        inset: 0;
                              background-image:
                                      radial-gradient(2px 2px at 20px 30px, white, transparent),
                                              radial-gradient(2px 2px at 100px 120px, white, transparent),
                                                      radial-gradient(1px 1px at 250px 80px, white, transparent),
                                                              radial-gradient(2px 2px at 400px 200px, white, transparent),
                                                                      radial-gradient(1px 1px at 600px 100px, white, transparent),
                                                                              radial-gradient(2px 2px at 800px 300px, white, transparent),
                                                                                      radial-gradient(1px 1px at 950px 150px, white, transparent);
                                                                                            background-size: 1000px 500px;
                                                                                                  animation: twinkle 6s linear infinite;
                                                                                                        opacity: 0.8;
        }

            .shadow {
                      position: absolute;
                            width: 340px;
                                  height: 340px;
                                        border-radius: 50%;
                                              background: radial-gradient(circle, rgba(0,0,0,0.1), transparent 70%);
                                                    filter: blur(30px);
                                                          transform: translateY(70px);
            }

                @keyframes rotate {
                          from {
                                    transform: rotateY(0deg);
                          }
                                to {
                                            transform: rotateY(360deg);
                                }
                }

                    @keyframes twinkle {
                              0%, 100% {
                                        opacity: 0.5;
                              }
                                    50% {
                                                opacity: 1;
                                    }
                    }
                      `}</style>

                        <div className="stars"></div>

                          <div className="relative flex items-center justify-center">
                              <div className="shadow"></div>
                                  <div
                                        className="earth cursor-grab active:cursor-grabbing"
                                              onMouseMove={(e) => {
                                                        const earth = e.currentTarget;
                                                                const rect = earth.getBoundingClientRect();
                                                                        const x = e.clientX - rect.left - rect.width / 2;
                                                                                const y = e.clientY - rect.top - rect.height / 2;

                                                                                        earth.style.transform = `rotateY(${x / 2}deg) rotateX(${-y / 4}deg)`;
                                              }}
                                                    onMouseLeave={(e) => {
                                                                e.currentTarget.style.transform = '';
                                                    }}
                                                        ></div>
                                                          </div>

                                                            <div className="absolute bottom-6 text-center text-white/70 text-sm px-4">
                                                                Interactive 3D Earth Globe • Drag your mouse on the globe
                                                                  </div>
                                                                  </div>

); }
                                                    }}
                                              }}
                                    }
                              }
                    }
                                }
                          }
                }
            }
        }
    }
}})}