From b9bb46c216e21f4ab52aa11ebd7e94643c48992e Mon Sep 17 00:00:00 2001
From: Mark Schill <mark@theschills.com>
Date: Fri, 21 Nov 2025 00:19:49 -0600
Subject: [PATCH] Moving contact modal to components directory

---
 .../contact-modal/contact-modal.html          | 55 +++++++++++++++++++
 .../contact-modal/contact-modal.spec.ts       | 23 ++++++++
 .../components/contact-modal/contact-modal.ts | 26 +++++++++
 3 files changed, 104 insertions(+)
 create mode 100644 frontend/src/app/components/contact-modal/contact-modal.html
 create mode 100644 frontend/src/app/components/contact-modal/contact-modal.spec.ts
 create mode 100644 frontend/src/app/components/contact-modal/contact-modal.ts

diff --git a/frontend/src/app/components/contact-modal/contact-modal.html b/frontend/src/app/components/contact-modal/contact-modal.html
new file mode 100644
index 0000000..daf5632
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/app/components/contact-modal/contact-modal.spec.ts b/frontend/src/app/components/contact-modal/contact-modal.spec.ts
new file mode 100644
index 0000000..c0c4fb4
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/frontend/src/app/components/contact-modal/contact-modal.ts b/frontend/src/app/components/contact-modal/contact-modal.ts
new file mode 100644
index 0000000..93d1014
--- /dev/null
+++ b/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);
+  }
+}