Moving contact modal to components directory

frontend/src/app/app.html

@@ -124,4 +124,6 @@
   </section>
 
   <app-footer />
+  
+  <app-contact-modal />
 </div>

frontend/src/app/app.ts

@@ -5,10 +5,11 @@ import { Feature } from './interfaces/feature';
 import { Plan } from './interfaces/plan';
 import { Stat } from './interfaces/stat';
 import { Footer } from './components/footer/footer';
+import { ContactModal } from './contact-modal/contact-modal';
 
 @Component({
   selector: 'app-root',
-  imports: [CommonModule, Navigation, Footer],
+  imports: [CommonModule, Navigation, Footer, ContactModal],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

frontend/src/app/components/contact-modal/contact-modal.html

@@ -0,0 +1,55 @@
+<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+	(ngClick)="toggleOpen()">
+	<div class="relative w-full max-w-lg bg-gray-900 rounded-3xl border border-gray-800 p-8 shadow-2xl"
+		(ngClick)="toggleOpen()">
+		<button (ngClick)="toggleOpen()"
+			class="absolute top-6 right-6 w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-violet-500 hover:text-violet-500 transition-all">
+			<!-- <X class="w-5 h-5" /> -->
+		</button>
+
+		<h2 class="text-3xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-pink-400">
+			Get In Touch
+		</h2>
+		<p class="text-gray-400 mb-8">
+			Let's discuss your next project
+		</p>
+
+		<form (ngSubmit)="handleSubmit()" [formGroup]="contactForm" class="space-y-6">
+			<div>
+				<label for="name" class="block text-sm font-medium mb-2 text-gray-300">
+					Name
+				</label>
+				<input type="text" id="name" name="name" formControlName="name" required
+					class="w-full px-4 py-3 bg-black border border-gray-700 rounded-xl focus:outline-none focus:border-violet-500 transition-colors text-white"
+					placeholder="Your name" />
+			</div>
+
+			<div>
+				<label for="email" class="block text-sm font-medium mb-2 text-gray-300">
+					Email
+				</label>
+				<input type="email" id="email" name="email" formControlName="email" required
+					class="w-full px-4 py-3 bg-black border border-gray-700 rounded-xl focus:outline-none focus:border-violet-500 transition-colors text-white"
+					placeholder="your@email.com" />
+			</div>
+
+			<div>
+				<label for="message" class="block text-sm font-medium mb-2 text-gray-300">
+					Message
+				</label>
+				<input type="text" formControlName="message" required
+					class="w-full px-4 py-3 bg-black border border-gray-700 rounded-xl focus:outline-none focus:border-violet-500 transition-colors text-white resize-none"
+					placeholder="Tell me something" />
+				<!-- <textarea id="message" name="message" formControlName="message" required rows="5"
+					class="w-full px-4 py-3 bg-black border border-gray-700 rounded-xl focus:outline-none focus:border-violet-500 transition-colors text-white resize-none"
+					placeholder="Tell me about your project..."> -->
+			</div>
+
+			<button type="submit"
+				class="w-full px-8 py-4 bg-gradient-to-r from-violet-600 to-purple-600 rounded-xl font-semibold hover:scale-[1.02] transition-transform flex items-center justify-center gap-2">
+				Send Message
+				<!-- <ArrowRight class="w-5 h-5" /> -->
+			</button>
+		</form>
+	</div>
+</div>

frontend/src/app/components/contact-modal/contact-modal.spec.ts

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

frontend/src/app/components/contact-modal/contact-modal.ts

@@ -0,0 +1,26 @@
+import { Component, model } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-contact-modal',
+  imports: [ReactiveFormsModule],
+  templateUrl: './contact-modal.html',
+  styles: ``,
+})
+export class ContactModal {
+  open = model<boolean>(false);
+
+  contactForm = new FormGroup({
+    name: new FormControl(''),
+    email: new FormControl('', Validators.email),
+    message: new FormControl(''),
+  }, { validators: Validators.required })
+
+  toggleOpen() {
+    this.open.update(value => !value);
+  }
+
+  handleSubmit() {
+    alert(this.contactForm.value);
+  }
+}