P0056 | create the login page of Proxy.msg91

apps/proxy/src/app/auth/auth.component.html

@@ -1,36 +1,53 @@
-<div class="d-flex">
-    <div class="login-left-menu">
-        <div class="font-20 fw-bold brand-title">SAAR</div>
-        <div>
-            Take your API management to new heights with SAAR. Sign up for a free trial today and experience the
-            seamless management of APIs and proxy-pass like never before!
+<div class="landing-page">
+    <!-- Header -->
+    <header class="landing-header">
+        <div class="logo">36Blocks</div>
+        <button class="login-btn" (click)="login()">
+            Login
+            <mat-icon>arrow_forward</mat-icon>
+        </button>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero-section">
+        <h1 class="hero-title">
+            Seamless Authentication
+            <span class="highlight">Made Simple</span>
+        </h1>
+        <p class="hero-subtitle">
+            Securely access your APIs with 36Blocks. A modern authentication gateway built for reliability and
+            performance.
+        </p>
+        <div class="hero-buttons">
+            <button class="btn-primary" (click)="login()">
+                Get Started Free
+                <mat-icon>arrow_forward</mat-icon>
+            </button>
+            <button class="btn-secondary">View Documentation</button>
         </div>
-        <ng-container *ngFor="let data of description">
-            <div class="font-20 fw-bold">
-                {{ data.title }}
-            </div>
-            <div class="d-flex flex-column gap-2">
-                <div class="d-flex align-content-center gap-2" *ngFor="let item of data.list">
-                    <mat-icon class="mat-icon-20">done</mat-icon>
-                    {{ item }}
-                </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="features-section">
+        <div class="feature-card" *ngFor="let feature of features">
+            <div class="feature-icon">
+                <mat-icon>{{ feature.icon }}</mat-icon>
             </div>
-        </ng-container>
-    </div>
-    <div class="login-content">
-        <ng-component *ngTemplateOutlet="loginPage"></ng-component>
-    </div>
-</div>
+            <h3 class="feature-title">{{ feature.title }}</h3>
+            <p class="feature-description">{{ feature.description }}</p>
+        </div>
+    </section>
 
-<ng-template #loginPage>
-    <div class="right-title fw-bold">Welcome back!</div>
-    <div class="">Login with</div>
-    <button mat-stroked-button color="primary" (click)="login()">
-        <img class="mr-1" src="assets/images/logos/google-logo.svg" />
-        Google
-    </button>
-    <div class="d-flex align-items-center gap-1">
-        Don't have an account ?
-        <a [routerLink]="['/p/register']" class="text-primary cursor-pointer text-underline"> Register Here</a>
-    </div>
-</ng-template>
+    <!-- Description Section -->
+    <section class="description-section">
+        <div class="description-card" *ngFor="let data of description">
+            <h3 class="description-title">{{ data.title }}</h3>
+            <ul class="description-list">
+                <li *ngFor="let item of data.list">
+                    <mat-icon>check_circle</mat-icon>
+                    <span>{{ item }}</span>
+                </li>
+            </ul>
+        </div>
+    </section>
+</div>