beautify: loginform Planet Animation

src/app/login/components/LoginForm.tsx

@@ -119,20 +119,78 @@ export default function LoginForm() {
         {/* Animated Ball - Desktop Only */}
         {showBall && !isMobile && (
           <div className="absolute -top-16 left-1/2 -translate-x-1/2 w-28 z-20">
-            <div className="w-28 h-28 rounded-full bg-gradient-to-br from-[#8D6B1D] via-[#A67C20] to-[#C49225] flex items-center justify-center shadow-xl border-4 border-white relative">
+            <div className="w-28 h-28 rounded-full bg-gradient-to-br from-[#8D6B1D] via-[#A67C20] to-[#C49225] shadow-xl border-4 border-white relative">
-              <svg className="w-20 h-20 text-[#F4E7D1]" viewBox="0 0 64 64" fill="none">
+              {/* Inner small circle with cartoony Earth */}
-                <circle cx="32" cy="32" r="20" fill="currentColor" />
+              <div className="absolute inset-0 flex items-center justify-center">
-                <ellipse cx="32" cy="38" rx="16" ry="5" fill="#8D6B1D" fillOpacity=".10" />
+                <div className="w-16 h-16 rounded-full bg-white/15 backdrop-blur-sm border border-white/25 flex items-center justify-center shadow-inner relative overflow-hidden">
-                <ellipse cx="32" cy="26" rx="10" ry="4" fill="#8D6B1D" fillOpacity=".08" />
+                  <svg
-                <circle cx="40" cy="26" r="3" fill="#8D6B1D" fillOpacity=".5" />
+                    viewBox="0 0 64 64"
+                    className="w-14 h-14"
+                    role="img"
+                    aria-label="Cartoon Earth"
+                  >
+                    <defs>
+                      <radialGradient id="earth-ocean" cx="50%" cy="40%" r="65%">
+                        <stop offset="0%" stopColor="#3fa9f5" />
+                        <stop offset="100%" stopColor="#1d5fae" />
+                      </radialGradient>
+                      <linearGradient id="earth-glow" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stopColor="rgba(255,255,255,0.55)" />
+                        <stop offset="60%" stopColor="rgba(255,255,255,0)" />
+                      </linearGradient>
+                    </defs>
+                    <circle cx="32" cy="32" r="30" fill="url(#earth-ocean)" />
+                    {/* Land masses (stylized) */}
+                    <path
+                      fill="#4caf50"
+                      d="M18 30c4-6 10-9 16-9 3 0 5 1 7 3 2 2 1 4-1 5-4 2-8 2-11 5-2 2-3 4-6 4-5 0-8-5-5-8Z"
+                    />
+                    <path
+                      fill="#66bb6a"
+                      d="M40 18c3 1 6 3 7 6 1 3 0 5-2 6-2 1-3 0-5-2-3-3-6-5-6-7 0-3 3-4 6-3Z"
+                      opacity=".9"
+                    />
+                    <path
+                      fill="#43a047"
+                      d="M26 44c2-2 5-3 8-2 2 1 3 3 1 5-2 3-6 5-9 4-3-1-3-5 0-7Z"
+                      opacity=".85"
+                    />
+                    {/* Atmospheric rim */}
+                    <circle
+                      cx="32"
+                      cy="32"
+                      r="30"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.35)"
+                      strokeWidth="1.5"
+                    />
+                    {/* Light sheen */}
+                    <ellipse
+                      cx="26"
+                      cy="22"
+                      rx="11"
+                      ry="7"
+                      fill="url(#earth-glow)"
+                      opacity=".6"
+                    />
                   </svg>
-              {/* Orbiting balls */}
+                  {/* Subtle gloss overlay */}
+                  <span className="pointer-events-none absolute inset-0 before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_35%_30%,rgba(255,255,255,0.45),transparent_70%)]" />
+                </div>
+              </div>
+              {/* Orbiting balls (unchanged) */}
               <span className="absolute left-1/2 top-1/2 w-0 h-0">
                 <span className="block absolute animate-orbit-1" style={{ width: 0, height: 0 }}>
-                  <span className="block w-3 h-3 bg-[#8D6B1D] rounded-full shadow-lg" style={{ transform: 'translateX(44px)' }}></span>
+                  <span
+                    className="block w-3 h-3 bg-[#8D6B1D] rounded-full shadow-lg"
+                    style={{ transform: 'translateX(44px)' }}
+                  />
                 </span>
                 <span className="block absolute animate-orbit-2" style={{ width: 0, height: 0 }}>
-                  <span className="block w-2.5 h-2.5 bg-[#A67C20] rounded-full shadow-md" style={{ transform: 'translateX(-36px)' }}></span>
+                  <span
+                    className="block w-2.5 h-2.5 bg-[#A67C20] rounded-full shadow-md"
+                    style={{ transform: 'translateX(-36px)' }}
+                  />
                 </span>
               </span>
             </div>