Luxus-Social-Login-Komponente für Wetter-App

<div class="min-h-screen bg-gradient-to-br from-indigo-950 to-gray-900 flex items-center justify-center p-4 sm:p-6 dark:from-zinc-950 dark:to-black font-serif text-white">
  <div class="w-full max-w-md bg-white/5 rounded-3xl backdrop-filter backdrop-blur-lg shadow-2xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out dark:bg-black/20 dark:shadow-zinc-800/50 border border-white/10 dark:border-zinc-700">
    <div class="p-8 sm:p-10">
      <h2 class="text-4xl font-extrabold text-center mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-indigo-400 dark:from-teal-300 dark:to-indigo-300 transform transition-transform duration-300 hover:scale-105">
        Welcome to AeroCast
      </h2>
      <p class="text-center text-gray-300 mb-8 max-w-sm mx-auto text-lg leading-relaxed dark:text-gray-400">
        Sign in to unlock personalized weather insights and climate data from around the globe.
      </p>

      <div class="space-y-4 mb-8">
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Google">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#EA4335"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="rgba(0,0,0,0)"/><path d="M6.862 13.56c-.66.86-1.07 2-1.07 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66L17.91 20.17c-1.87 1.4-4.22 2.2-6.2 2.2C4.78 22.37 0 17 0 10.1C0 7.6 1.1 5.3 2.9 3.5L6.86 6.5C5.8 8.1 5.2 9.9 5.2 11.9c0 1.9.4 3.7 1.5 5.2z" fill="#34A853"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="#4285F4"/><path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#FBBC04" transform="matrix(0 1 -1 0 24 0)"/></svg>
          <span class="text-lg font-semibold">Sign in with Google</span>
        </button>
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Apple">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 0c-3.328 0-6.035 2.707-6.035 6.035v11.93c0 3.328 2.707 6.035 6.035 6.035s6.035-2.707 6.035-6.035V6.035C18.035 2.707 15.328 0 12 0zm0 1.5c2.518 0 4.535 2.017 4.535 4.535v.001l-.001.001v11.931c0 2.518-2.017 4.535-4.535 4.535s-4.535-2.017-4.535-4.535V6.034C7.465 3.518 9.482 1.5 12 1.5zM12 4.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 9c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 13.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 18c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5z" clip-rule="evenodd" fill="#FFFFFF" fill-rule="evenodd"/><path d="M12 4.5c0-.829-.671-1.5-1.5-1.5S9 3.671 9 4.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 9c0-.829-.671-1.5-1.5-1.5S9 8.171 9 9s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 13.5c0-.829-.671-1.5-1.5-1.5S9 12.671 9 13.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 18c0-.829-.671-1.5-1.5-1.5S9 17.171 9 18s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5z" opacity=".2" fill="#000000"/><path d="M12 1.5c-2.518 0-4.535 2.017-4.535 4.535v11.931c0 2.518 2.017 4.535 4.535 4.535s4.535-2.017 4.535-4.535V6.034C16.535 3.518 14.518 1.5 12 1.5z" stroke="currentColor" stroke-opacity=".1" stroke-width=".5"/></svg>

          <span class="text-lg font-semibold">Sign in with Apple</span>
        </button>
      </div>

      <div class="relative flex items-center justify-center mb-8">
        <div class="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
        <div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
        <span class="px-4 py-2 bg-gray-900 border border-white/10 text-gray-400 rounded-full text-sm uppercase tracking-wider shadow-inner dark:bg-zinc-900 dark:border-zinc-700">Or Continue With</span>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" placeholder="[email protected]">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" placeholder="••••••••">
        </div>
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-teal-500 border-gray-600 rounded focus:ring-teal-400 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-teal-500">
            <label for="remember-me" class="ml-2 block text-gray-300 dark:text-gray-400">Remember me</label>
          </div>
          <a href="#" class="font-medium text-teal-400 hover:text-teal-300 transition-colors duration-200 dark:text-teal-300 dark:hover:text-teal-200">
            Forgot your password?
          </a>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-xl shadow-sm text-lg font-bold text-gray-900 bg-gradient-to-r from-teal-400 to-indigo-400 hover:from-teal-300 hover:to-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-95 dark:from-teal-300 dark:to-indigo-300 dark:text-zinc-900">
            Sign In
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-gray-400 dark:text-gray-500 text-base">
        Don't have an account? 
        <a href="#" class="font-medium text-teal-400 hover:text-teal-300 transition-colors duration-200 dark:text-teal-300 dark:hover:text-teal-200">
          Sign up here
        </a>
      </p>
    </div>
  </div>
</div>