feat: Improve UX with better notification position and back button

- Move notifications from top-right to bottom-right to avoid navbar overlap
- Add 'Back to Project' button on Templates page with animated arrow
- Update notification slide animation to match new bottom position

Author: davidjosipovic

frontend/src/components/Notification.tsx

@@ -51,7 +51,7 @@ export const Notification: React.FC<NotificationProps> = ({
   }[type];
 
   return (
-    <div className={`fixed top-4 right-4 z-[100] ${bgColor} border ${borderColor} ${textColor} px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 max-w-md animate-in fade-in slide-in-from-top-2`}>
+    <div className={`fixed bottom-4 right-4 z-[100] ${bgColor} border ${borderColor} ${textColor} px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 max-w-md animate-in fade-in slide-in-from-bottom-2`}>
       <span className="text-xl font-bold">{icon}</span>
       <p className="flex-1">{message}</p>
       <button 

frontend/src/pages/Templates.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { gql } from '@apollo/client';
 import { useQuery, useMutation } from '@apollo/client/react';
 import Navbar from '../components/Navbar';
@@ -123,6 +123,7 @@ interface GetTagsData {
 
 const Templates: React.FC = () => {
   const { projectId } = useParams<{ projectId: string }>();
+  const navigate = useNavigate();
   const [showModal, setShowModal] = useState(false);
   const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
   const { notification, showNotification } = useNotification();
@@ -247,6 +248,16 @@ const Templates: React.FC = () => {
       <Navbar />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
+          <button
+            onClick={() => navigate(`/project/${projectId}`)}
+            className="mb-4 flex items-center gap-2 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors group"
+          >
+            <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            <span className="font-medium">Back to Project</span>
+          </button>
+          
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white">