From e8c6a06b3c2dfe1ba96ace3446019ac7dc39c1cf Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 1 Sep 2025 19:26:20 +0000
Subject: [PATCH] Implement user feedback: Show app with alert banner instead
 of replacing pages

Co-authored-by: FranP-code <76450203+FranP-code@users.noreply.github.com>
---
 src/components/DisabledBanner.tsx |  45 +++++
 src/pages/configuration.astro     |   6 +-
 src/pages/dashboard.astro         |   6 +-
 src/pages/index.astro             | 269 +++++++++++++++++++++++++++++-
 4 files changed, 320 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DisabledBanner.tsx

diff --git a/src/components/DisabledBanner.tsx b/src/components/DisabledBanner.tsx
new file mode 100644
index 0000000..b80b74a
--- /dev/null
+++ b/src/components/DisabledBanner.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { AlertTriangle, X } from 'lucide-react';
+
+interface DisabledBannerProps {
+  onDismiss?: () => void;
+  dismissible?: boolean;
+}
+
+export function DisabledBanner({ onDismiss, dismissible = false }: DisabledBannerProps) {
+  return (
+    <div className="bg-orange-50 dark:bg-orange-900/20 border-b border-orange-200 dark:border-orange-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="py-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <AlertTriangle className="h-5 w-5 text-orange-400" />
+              </div>
+              <div className="ml-3">
+                <p className="text-sm font-medium text-orange-800 dark:text-orange-200">
+                  Project Disabled
+                </p>
+                <p className="text-sm text-orange-700 dark:text-orange-300">
+                  This project has been disabled (it was part of a hackathon). Functionality is limited. To enable it, please contact me.
+                </p>
+              </div>
+            </div>
+            {dismissible && onDismiss && (
+              <div className="flex-shrink-0">
+                <button
+                  type="button"
+                  className="bg-orange-50 dark:bg-transparent rounded-md p-1.5 text-orange-500 hover:bg-orange-100 dark:hover:bg-orange-900/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"
+                  onClick={onDismiss}
+                >
+                  <span className="sr-only">Dismiss</span>
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/configuration.astro b/src/pages/configuration.astro
index a6ca5e3..a48fd5f 100644
--- a/src/pages/configuration.astro
+++ b/src/pages/configuration.astro
@@ -1,17 +1,19 @@
 ---
 import "@/styles/globals.css";
 import Layout from "../layouts/Layout.astro";
-import { DisabledProject } from "../components/DisabledProject";
+import { Configuration as ConfigComponent } from "../components/Configuration";
 import { Navbar } from "../components/Navbar";
 import { AuthGuard } from "../components/AuthGuard";
+import { DisabledBanner } from "../components/DisabledBanner";
 import { Toaster } from "../components/ui/sonner";
 ---
 
 <Layout title="Configuration - InboxNegotiator">
 	<Navbar client:load />
+	<DisabledBanner client:load />
 
 	<AuthGuard requireAuth={true} client:load>
-		<DisabledProject client:load />
+		<ConfigComponent client:load />
 	</AuthGuard>
 	<Toaster client:load />
 </Layout>
diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro
index 9449eae..7474efc 100644
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
@@ -1,17 +1,19 @@
 ---
 import "@/styles/globals.css";
 import Layout from "../layouts/Layout.astro";
-import { DisabledProject } from "../components/DisabledProject";
+import { Dashboard } from "../components/Dashboard";
 import { AuthGuard } from "../components/AuthGuard";
 import { Navbar } from "../components/Navbar";
+import { DisabledBanner } from "../components/DisabledBanner";
 import { Toaster } from "../components/ui/sonner";
 ---
 
 <Layout title="Dashboard - InboxNegotiator">
 	<Navbar client:load />
+	<DisabledBanner client:load />
 
 	<AuthGuard requireAuth={true} client:load>
-		<DisabledProject client:load />
+		<Dashboard client:load />
 	</AuthGuard>
 	<Toaster client:load />
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1727b85..a799100 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,276 @@
 ---
 import "@/styles/globals.css";
 import Layout from "../layouts/Layout.astro";
-import { DisabledProject } from "../components/DisabledProject";
 import { Navbar } from "../components/Navbar";
+import { DisabledBanner } from "../components/DisabledBanner";
 ---
 
 <Layout title="InboxNegotiator - AI-Powered Debt Resolution">
 	<Navbar client:load />
-	<DisabledProject showAuth={true} client:load />
+	<DisabledBanner client:load />
+
+	<main
+		class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-background dark:to-gray-800"
+	>
+		<!-- Hero Section -->
+		<section class="relative overflow-hidden">
+			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16">
+				<div class="text-center">
+					<h1
+						class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-foreground mb-6"
+					>
+						AI-Powered
+						<span
+							class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400"
+						>
+							Debt Resolution
+						</span>
+					</h1>
+					<p
+						class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto"
+					>
+						Forward your debt emails and let our AI negotiate FDCPA-compliant
+						payment plans automatically. Save time, reduce stress, and
+						potentially save thousands on your debts.
+					</p>
+					<div class="flex flex-col sm:flex-row gap-4 justify-center">
+						<a
+							href="/signup"
+							class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors"
+						>
+							Get Started Free
+						</a>
+						<a
+							href="#how-it-works"
+							class="inline-flex items-center justify-center px-8 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+						>
+							Learn More
+						</a>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<!-- Features Section -->
+		<section id="how-it-works" class="py-16 bg-white dark:bg-background">
+			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+				<div class="text-center mb-16">
+					<h2
+						class="text-3xl font-bold text-gray-900 dark:text-foreground mb-4"
+					>
+						How It Works
+					</h2>
+					<p class="text-lg text-gray-600 dark:text-gray-300">
+						Simple, automated, and compliant debt resolution
+					</p>
+				</div>
+
+				<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+					<div class="text-center">
+						<div
+							class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-4"
+						>
+							<svg
+								class="w-8 h-8 text-blue-600 dark:text-blue-400"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+								></path>
+							</svg>
+						</div>
+						<h3
+							class="text-xl font-semibold text-gray-900 dark:text-foreground mb-2"
+						>
+							Forward Emails
+						</h3>
+						<p class="text-gray-600 dark:text-gray-300">
+							Simply forward your debt collection emails to our secure
+							processing address.
+						</p>
+					</div>
+
+					<div class="text-center">
+						<div
+							class="w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mx-auto mb-4"
+						>
+							<svg
+								class="w-8 h-8 text-purple-600 dark:text-purple-400"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+								></path>
+							</svg>
+						</div>
+						<h3
+							class="text-xl font-semibold text-gray-900 dark:text-foreground mb-2"
+						>
+							AI Analysis
+						</h3>
+						<p class="text-gray-600 dark:text-gray-300">
+							Our AI analyzes the debt and generates FDCPA-compliant negotiation
+							strategies.
+						</p>
+					</div>
+
+					<div class="text-center">
+						<div
+							class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4"
+						>
+							<svg
+								class="w-8 h-8 text-green-600 dark:text-green-400"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+							</svg>
+						</div>
+						<h3
+							class="text-xl font-semibold text-gray-900 dark:text-foreground mb-2"
+						>
+							Track Progress
+						</h3>
+						<p class="text-gray-600 dark:text-gray-300">
+							Monitor negotiations in real-time and track your potential
+							savings.
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<!-- Benefits Section -->
+		<section class="py-16 bg-gray-50 dark:bg-gray-900">
+			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+				<div class="text-center mb-16">
+					<h2
+						class="text-3xl font-bold text-gray-900 dark:text-foreground mb-4"
+					>
+						Why Choose InboxNegotiator?
+					</h2>
+				</div>
+
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+					<div
+						class="bg-white dark:bg-card p-6 rounded-lg shadow-sm border dark:border-border"
+					>
+						<h3
+							class="text-lg font-semibold text-gray-900 dark:text-foreground mb-2"
+						>
+							FDCPA Compliant
+						</h3>
+						<p class="text-gray-600 dark:text-gray-300">
+							All responses follow Fair Debt Collection Practices Act
+							guidelines.
+						</p>
+					</div>
+
+					<div
+						class="bg-white dark:bg-card p-6 rounded-lg shadow-sm border dark:border-border"
+					>
+						<h3
+							class="text-lg font-semibold text-gray-900 dark:text-foreground mb-2"
+						>
+							Save Money
+						</h3>
+						<p class="text-gray-600 dark:text-gray-300">
+							Potentially reduce your debt by up to 40% through strategic
+							negotiations.
+						</p>
+					</div>
+
+					<div
+						class="bg-white dark:bg-card p-6 rounded-lg shadow-sm border dark:border-border"
+					>
+						<h3
+							class="text-lg font-semibold text-gray-900 dark:text-foreground mb-2"
+						>
+							Real-time Updates
+						</h3>
+						<p class="text-gray-600 dark:text-gray-300">
+							Track your negotiations with live dashboard updates.
+						</p>
+					</div>
+
+					<div
+						class="bg-white dark:bg-card p-6 rounded-lg shadow-sm border dark:border-border"
+					>
+						<h3
+							class="text-lg font-semibold text-gray-900 dark:text-foreground mb-2"
+						>
+							Secure & Private
+						</h3>
+						<p class="text-gray-600 dark:text-gray-300">
+							Your financial information is encrypted and protected.
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<!-- CTA Section -->
+		<section class="py-16 bg-blue-600 dark:bg-blue-700">
+			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+				<h2 class="text-3xl font-bold text-white mb-4">
+					Ready to Take Control of Your Debt?
+				</h2>
+				<p class="text-xl text-blue-100 dark:text-blue-200 mb-8">
+					Join thousands who have successfully negotiated their debts with AI
+					assistance.
+				</p>
+				<a
+					href="/signup"
+					class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 dark:text-blue-700 dark:bg-gray-100 dark:hover:bg-gray-200 transition-colors"
+				>
+					Start Your Free Account
+				</a>
+			</div>
+		</section>
+	</main>
+
+	<!-- Footer -->
+	<footer class="bg-gray-900 dark:bg-gray-950 text-white py-12">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			<div class="text-center">
+				<div class="flex items-center justify-center gap-3 mb-4">
+					<svg
+						class="w-8 h-8"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+						></path>
+					</svg>
+					<span class="text-xl font-bold">InboxNegotiator</span>
+				</div>
+				<p class="text-gray-400 dark:text-gray-500 mb-4">
+					AI-powered debt resolution platform
+				</p>
+				<p class="text-sm text-gray-500 dark:text-gray-600">
+					© 2025 InboxNegotiator. All rights reserved.
+				</p>
+			</div>
+		</div>
+	</footer>
 </Layout>