feat(frontend): add slack screenshot + try to add favicon, fail for now

Author: JimmyDore

frontend/public/images/logo.png

@@ -12,7 +12,7 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="/images/logo_2.png" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>

frontend/public/images/logo.webp

@@ -12,19 +12,6 @@ import MainLayout from '../layouts/MainLayout.astro';
       Monitor your services, APIs, and landing pages in one place. Get instant notifications when something goes wrong.
     </p>
 
-    <div class="relative mb-16 rounded-lg shadow-lg overflow-hidden max-w-3xl mx-auto">
-      <div class="aspect-w-16 aspect-h-9">
-        <img 
-          src="/images/dashboard-preview.png" 
-          alt="Dashboard Preview" 
-          class="w-full h-full object-cover rounded-lg"
-          onerror="this.style.display='none'"
-          loading="lazy"
-        />
-      </div>
-      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/20 to-transparent"></div>
-    </div>
-    
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
       <div class="p-6 bg-white rounded-lg shadow-sm transition duration-200 hover:shadow-md">
         <h3 class="text-lg font-semibold text-gray-900 mb-3">Service Monitoring</h3>
@@ -56,5 +43,30 @@ import MainLayout from '../layouts/MainLayout.astro';
         Go to your dashboard
       </a>
     </div>
+    <div class="relative mb-16 rounded-lg shadow-lg overflow-hidden max-w-3xl mx-auto">
+      <div class="aspect-w-16 aspect-h-9">
+        <img 
+          src="/images/dashboard-preview.png" 
+          alt="Dashboard Preview" 
+          class="w-full h-full object-cover rounded-lg"
+          onerror="this.style.display='none'"
+          loading="lazy"
+        />
+      </div>
+      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/20 to-transparent"></div>
+    </div>
+    <div class="relative mb-16 rounded-lg shadow-lg overflow-hidden max-w-sm mx-auto">
+      <div class="aspect-w-16 aspect-h-9">
+        <img 
+          src="/images/slack_notif.png" 
+          alt="Slack notification" 
+          class="w-full h-full object-cover rounded-lg"
+          onerror="this.style.display='none'"
+          loading="lazy"
+        />
+      </div>
+      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/20 to-transparent"></div>
+    </div>
+    
   </div>
 </MainLayout>