Added Todo component (#605)

* initial changes

* Added Todo component

* feat: update Todo component to use MatIcon and enhance styling

---------

Co-authored-by: Siva Rama Krishna <[email protected]>
Co-authored-by: manasa <[email protected]>

Author: 3 people

package-lock.json

@@ -0,0 +1,19 @@
+<div *ngIf="surveyCase">
+  <div class="banner-container">
+    <div class="icon-wrapper">
+      <div class="icon-box">
+        <img class="quick-link-icon" [src]="img" />
+      </div>
+    </div>
+    <div class="content-text">
+      <h2>Share Your Experience</h2>
+      <p>Take a quick survey about your recent experience with MediaCo.</p>
+    </div>
+    <div class="action-wrapper">
+      <button (click)="clickGo(surveyCase)" class="start-btn">
+        Start
+        <mat-icon>arrow_forward</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

src/app/_samples/mediaco/components/todo/todo.component.html

@@ -0,0 +1,89 @@
+$font-family: 'Roboto', sans-serif;
+
+$text-white: #ffffff;
+$btn-text-color: #5c4498;
+
+.banner-container {
+  font-family: $font-family;
+  background: linear-gradient(135deg, rgb(103, 80, 164) 0%, rgb(248, 20, 227) 50%, rgb(0, 201, 255) 100%) 0% 0% / 200% 200%;
+
+  border-radius: 24px;
+  padding: 24px 32px;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  color: $text-white;
+  box-shadow: 0 8px 20px rgba(94, 75, 159, 0.25);
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    text-align: center;
+    padding: 32px 24px;
+  }
+
+  position: absolute;
+  z-index: 10;
+  left: 29%;
+  top: 15rem;
+}
+
+.icon-wrapper {
+  flex-shrink: 0;
+
+  .icon-box {
+    width: 72px;
+    height: 72px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(4px);
+  }
+}
+
+.content-text {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  h2 {
+    margin: 0 0 6px 0;
+    font-size: 22px;
+    font-weight: 400;
+  }
+
+  p {
+    margin: 0;
+    font-size: 15px;
+    opacity: 0.9;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+}
+
+.action-wrapper {
+  flex-shrink: 0;
+
+  .start-btn {
+    background-color: #ffffff;
+    color: #5c4498;
+    border: none;
+    padding: 12px 28px;
+    border-radius: 50px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    letter-spacing: 0.1px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+}
+
+.quick-link-icon {
+  height: 35px;
+  filter: brightness(0) saturate(100%) invert(100%);
+}

src/app/_samples/mediaco/components/todo/todo.component.scss

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