feature: login page

- add login page design
- use card class instead on card component
- add button press animations

src/app/core/layouts/header/header.html

@@ -1,5 +1,7 @@
 <header>
-  <nav class="wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center">
+  <nav
+    class="bg-gray-50 wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center shadow-lg shadow-gray-400/20"
+  >
     <div class="">
       <a href="/" class="px-3 py-1 bg-gray-800 text-white">eKart</a>
     </div>
@@ -10,20 +12,17 @@
         class="w-full border border-gray-300 text-sm rounded-full rounded-r-none px-6 py-1"
         placeholder="Search watches, brands, products..."
       />
-      <button class="btn-ghost group rounded-l-none! py-1 px-3 border-l-0!">
-        <lucide-angular
-          [img]="SearchIcon"
-          class="w-5 group-active:scale-80 transition-all duration-200 ease-out"
-        />
+      <button class="btn btn-ghost rounded-l-none! py-1 px-3 border-l-0!">
+        <lucide-angular [img]="SearchIcon" class="w-5" />
       </button>
     </div>
 
     <div class="flex space-x-4">
       <div class="flex text-gray-600">
-        <button class="btn-ghost py-1 px-2 rounded-r-none!">
+        <button class="btn btn-ghost py-1 px-2 rounded-r-none!">
           <lucide-angular [img]="UserIcon" class="w-5" />
         </button>
-        <button class="btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
+        <button class="btn btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
           <lucide-angular [img]="CartIcon" class="w-5" />
         </button>
       </div>

src/app/features/home/products/componets/product-card/product-card.html

@@ -1,4 +1,4 @@
-<app-card class="flex flex-col relative">
+<div class="card flex flex-col relative">
   <!--Favorite button -->
   <button
     class="absolute right-6 top-6 transition-all duration-300 ease active:scale-80 hover:bg-gray-100 p-1 rounded-full"
@@ -14,4 +14,4 @@
   <p class="text-gray-400 text-sm">Product Name</p>
   <p class="text-gray-400 text-xs">⭐4.5</p>
   <p class="text-gray-400 text-xs">Price: 4999/-</p>
-</app-card>
+</div>

src/app/features/home/products/componets/product-card/product-card.ts

@@ -1,11 +1,10 @@
 import { Component } from "@angular/core";
-import { Card } from "../../../../../shared/components/card/card";
 import { LucideAngularModule, Heart } from "lucide-angular";
 
 @Component({
   selector: "app-product-card",
   standalone: true,
-  imports: [Card, LucideAngularModule],
+  imports: [LucideAngularModule],
   templateUrl: "./product-card.html",
 })
 export class ProductCard {

src/app/features/home/products/products.ts

@@ -1,5 +1,4 @@
 import { Component } from "@angular/core";
-import { Card } from "../../../shared/components/card/card";
 import { ProductCard } from "./componets/product-card/product-card";
 
 @Component({

src/app/features/login/login.html

@@ -1 +1,28 @@
-<p>login works!</p>
+<section class="my-20 flex justify-center items-center">
+  <article class="card max-w-8/12 grid sm:grid-cols-3 gap-x-4">
+    <div class="col-span-2">
+      <img src="/assets/images/login-page.jpg" alt="" class="rounded-lg" />
+    </div>
+
+    <article class="space-y-4">
+      <h1 class="text-3xl text-gray-800 font-space font-bold">Login</h1>
+
+      <h2 class="text-xl text-gray-600">Get access to your Orders, Wishlist and Recommendations</h2>
+
+      <form class="flex flex-col space-y-5">
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Email</legend>
+          <input type="text" class="input" placeholder="Enter email here" />
+          <p class="label">your-email-address@email.com</p>
+        </fieldset>
+
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Password</legend>
+          <input type="password" class="input" placeholder="Type here" />
+        </fieldset>
+
+        <button type="submit" class="btn btn-black py-2">Login</button>
+      </form>
+    </article>
+  </article>
+</section>

src/app/shared/components/card/card.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { Card } from "./card";
-
-describe("Card", () => {
-  let component: Card;
-  let fixture: ComponentFixture<Card>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Card],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(Card);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/shared/components/card/card.ts

@@ -1,14 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "app-card",
-  imports: [],
-  template: `
-    <div
-      class="rounded-xl border border-gray-300 hover:border-gray-400 p-4 hover:shadow-xl transition-all duration-300 ease-in-out"
-    >
-      <ng-content />
-    </div>
-  `,
-})
-export class Card {}

src/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-  <body>
+  <body class="min-h-screen font-sans antialiased bg-base-200">
     <app-root></app-root>
   </body>
 </html>

src/styles.css

@@ -12,10 +12,41 @@
   --font-space: "Space Grotesk", sans-serif;
 }
 
+body {
+  @apply bg-gray-100;
+}
+
 .wrapper {
   @apply px-5 sm:px-15;
 }
 
-.btn-ghost {
-  @apply text-gray-600 flex justify-center border border-gray-300  rounded-full hover:bg-gray-800 hover:text-gray-200 transition-all duration-200 ease-out;
+.btn {
+  @apply rounded-full transition-all duration-200 ease-out flex justify-center active:translate-y-[1px];
+}
+
+.btn-ghost {
+  @apply text-gray-600 border border-gray-300 hover:bg-gray-800 hover:text-gray-200;
+}
+
+.btn-black {
+  @apply text-gray-100 bg-gray-800 border border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
+}
+
+.card {
+  @apply bg-gray-50 rounded-xl border border-gray-300 hover:border-gray-400 p-4 hover:shadow-xl transition-all duration-300 ease-in-out;
+}
+
+.fieldset {
+  @apply space-y-1;
+}
+.fieldset-legend {
+  @apply text-xs font-bold ml-2 text-gray-800;
+}
+
+.fieldset .label {
+  @apply text-xs text-gray-400 ml-2;
+}
+
+.input {
+  @apply p-3 border border-gray-300 rounded-xl text-sm w-full;
 }