feat: Implement email functionality with FastAPI-Mail and Mailhog

- Updated docker-compose.yml to include Mailhog service for email testing.
- Added environment variables for email configuration in docker-compose.
- Updated requirements.txt to include fastapi-mail for email support.
- Created templates for password reset, email verification, and welcome emails.
- Developed mail utility module to handle sending emails using FastAPI-Mail.
- Added documentation for email testing with Mailhog.

app/templates/error.html

@@ -1,19 +1,22 @@
 {% extends "base.html" %}
 {% block content %}
-<div class="max-w-2xl mx-auto mt-8 p-8 bg-white rounded-lg shadow-md">
-    <div class="text-center">
-        <i class="fas fa-exclamation-circle text-red-600 text-5xl mb-4"></i>
-        <h1 class="text-2xl font-bold mb-4">{{ error_title|default("Error") }}</h1>
-        <p class="text-gray-700 mb-6">{{ error_message|default("An error occurred. Please try again.") }}</p>
-        
-        <div class="mt-8">
-            <a href="/" class="text-irish-green hover:underline mr-6">
-                <i class="fas fa-home mr-1"></i> Go to Home
-            </a>
-            <a href="javascript:history.back()" class="text-irish-green hover:underline">
-                <i class="fas fa-arrow-left mr-1"></i> Go Back
-            </a>
-        </div>
+<div class="flex flex-col items-center justify-center min-h-[60vh] px-4 py-12">
+  <div class="text-center">
+    <div class="mb-6">
+      <svg class="mx-auto h-16 w-16 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </svg>
     </div>
+    <h1 class="text-3xl font-bold text-gray-900 mb-2">Oops! Something went wrong</h1>
+    <p class="text-gray-600 mb-6">{{ error }}</p>
+    <div class="flex justify-center">
+      <a href="/" class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-6 rounded-md mr-4">
+        Go Home
+      </a>
+      <button onclick="window.history.back()" class="border border-irish-green text-irish-green hover:bg-gray-100 font-bold py-2 px-6 rounded-md">
+        Go Back
+      </button>
+    </div>
+  </div>
 </div>
 {% endblock %}