redesign login page and profile account button

src/servala/frontend/templates/account/login.html

@@ -1,46 +1,111 @@
 {% extends "frontend/base.html" %}
 {% load static i18n %}
 {% load allauth account socialaccount %}
+
 {% block html_title %}
-    {% block page_title %}
-        {% translate "Sign In" %}
-    {% endblock page_title %}
+    {% translate "Sign in" %}
 {% endblock html_title %}
+
+{% block page_title %}
+    {% translate "Welcome to Servala" %}
+{% endblock page_title %}
+
+{% block card_header %}
+    <div class="card-header text-center py-4" style="background: linear-gradient(135deg, var(--bs-primary), #8B5CF6); border-radius: 0.5rem 0.5rem 0 0;">
+        <img src="{% static 'img/Servala-4.png' %}" alt="Servala" class="mb-3" style="height: 70px;">
+    </div>
+{% endblock card_header %}
+
 {% block card_content %}
+    <!-- Main Sign In Section -->
     {% if SOCIALACCOUNT_ENABLED %}
         {% get_providers as socialaccount_providers %}
         {% if socialaccount_providers %}
+            <div class="mb-4">
+                <div class="text-center mb-4">
+                    <h5 class="text-primary mb-2">{% translate "Ready to get started?" %}</h5>
+                    <p class="text-muted mb-0">{% translate "Sign in to access your managed service instances and the Servala service catalog" %}</p>
+                </div>
+                
                 {% for provider in socialaccount_providers %}
                     {% provider_login_url provider process=process scope=scope auth_params=auth_params as href %}
                     <form method="post" action="{{ href }}">
                         {% csrf_token %}
                         {{ redirect_field }}
-                    <button href="{{ href }}"
-                            class="btn btn-warning btn-lg icon icon-left btn-keycloak"
-                            title="{{ provider.name }}">
-                        <img src="{% static 'img/keycloak.svg' %}" style="height: 30px">
-                        <span class="ms-2">{% translate "Sign In" %}</span>
+                        <button type="submit"
+                                class="btn btn-primary btn-lg w-100 py-3 mb-4 fw-semibold"
+                                title="{{ provider.name }}"
+                                style="border-radius: 12px; box-shadow: 0 4px 15px rgba(154, 99, 236, 0.2); background: linear-gradient(135deg, var(--bs-primary), #8B5CF6);">
+                            <span>{% translate "Sign in with VSHN Account" %}</span>
                         </button>
                     </form>
                 {% endfor %}
+            </div>
         {% endif %}
     {% endif %}
-    <div class="mt-2">
+
+    <!-- Feature Preview & Learn More Section -->
+    <div class="mt-4 pt-3 border-top">
+        <div class="row g-3 text-center">
+            <!-- Feature Icons -->
+            <div class="col-3">
+                <div class="text-primary mb-1">
+                    <i class="bi bi-shield-check" style="font-size: 1.2rem;"></i>
+                </div>
+                <small class="text-muted fw-medium">{% translate "Secure" %}</small>
+            </div>
+            <div class="col-3">
+                <div class="text-primary mb-1">
+                    <i class="bi bi-lightning" style="font-size: 1.2rem;"></i>
+                </div>
+                <small class="text-muted fw-medium">{% translate "Fast" %}</small>
+            </div>
+            <div class="col-3">
+                <div class="text-primary mb-1">
+                    <i class="bi bi-cloud" style="font-size: 1.2rem;"></i>
+                </div>
+                <small class="text-muted fw-medium">{% translate "Scalable" %}</small>
+            </div>
+            <!-- Learn More -->
+            <div class="col-3">
+                <div class="text-primary mb-1">
+                    <i class="bi bi-info-circle" style="font-size: 1.2rem;"></i>
+                </div>
+                <small class="text-muted fw-medium">
+                    <a href="https://servala.com" 
+                       target="_blank" 
+                       class="text-decoration-none text-muted">
+                        {% translate "Learn more" %}
+                        <i class="bi bi-arrow-up-right ms-1" style="font-size: 0.7rem;"></i>
+                    </a>
+                </small>
+            </div>
+        </div>
+    </div>
+
+    <!-- Alternative Login Options (Admin) -->
+    <div class="mt-4 pt-3 border-top text-center">
+        <small class="text-muted">
             <a data-bs-toggle="collapse"
                href="#login-form"
                role="button"
                aria-controls="login-form"
-           class="d-flex align-items-center">
-            <i class="bi bi-chevron-right me-2 ms-1 mb-2 collapse-icon"></i>
-            {% translate "Log in with email and password instead" %}
+               class="text-muted text-decoration-none">
+                <i class="bi bi-envelope me-1" style="font-size: 0.8rem;"></i>
+                {% translate "Local sign in with email and password" %}
             </a>
-        <div class="collapse mt-3 ms-3"
-             id="login-form"
-             class="form form-vertical"
-             style="max-width: 400px">
+        </small>
+    </div>
+
+    <div class="collapse mt-3" id="login-form">
+        <div class="card bg-light border-0 shadow-sm" style="border-radius: 12px;">
+            <div class="card-body p-4">
+                <div class="form form-vertical">
                     {% url 'account_login' as form_action %}
                     {% translate "Sign In" as form_submit_label %}
                     {% include "includes/form.html" with extra_field=redirect_field %}
                 </div>
             </div>
+        </div>
+    </div>
 {% endblock card_content %}

src/servala/frontend/templates/frontend/profile.html

@@ -116,10 +116,9 @@
                                 {% endblocktranslate %}
                             </p>
                             <div>
-                                <a href="{{ account_href }}"
-                                   class="btn btn-warning btn-lg icon icon-left btn-keycloak">
-                                    <img src="{% static 'img/keycloak.svg' %}" style="height: 30px">
-                                    <span class="mx-1">{% translate "Account" %}</span>
+                                <a href="{{ account_href }}" target="_blank"
+                                   class="btn btn-primary btn-lg icon icon-left btn-keycloak">
+                                    <span class="mx-1">{% translate "VSHN Account Console" %}</span>
                                 </a>
                             </div>
                         </div>