From 39faa7a98c26929a300d4353ef766d99034c11ea Mon Sep 17 00:00:00 2001
From: "Kar l5.G" <kar@siliconpin.com>
Date: Sun, 23 Mar 2025 19:24:33 +0530
Subject: [PATCH] description page

---
 src/pages/description.astro | 115 ++++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 src/pages/description.astro

diff --git a/src/pages/description.astro b/src/pages/description.astro
new file mode 100644
index 0000000..3f17fc0
--- /dev/null
+++ b/src/pages/description.astro
@@ -0,0 +1,115 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="AI Chat - Home">
+	<div class="container mx-auto py-8 px-4">
+		<section class="text-center py-16 md:py-24">
+			<div class="animate-in fade-in slide-in-from-bottom-10 duration-700">
+				<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
+					Welcome to AI Chat
+				</h1>
+				<p class="text-xl text-muted-foreground max-w-3xl mx-auto mb-8">
+					A powerful interface for conversing with AI models with flexible provider options.
+				</p>
+				<a href="/tools/chat-with-ai" class="inline-block px-6 py-3 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-all-normal hover-lift shadow-md hover:shadow-lg">
+					Start Chatting
+					<span class="inline-block ml-2 transition-transform group-hover:translate-x-1">→</span>
+				</a>
+			</div>
+		</section>
+
+		<section class="py-12 grid md:grid-cols-3 gap-8">
+			<div class="bg-card text-card-foreground rounded-lg p-6 shadow-md card-elevation animate-in fade-in slide-in-from-bottom-10 duration-500 delay-100">
+				<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 transition-transform-bounce hover:scale-110">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+					</svg>
+				</div>
+				<h2 class="text-xl font-semibold mb-2">Multiple AI Providers</h2>
+				<p class="text-muted-foreground">Connect to various AI providers including OpenAI, Anthropic, and more, or run models directly in your browser.</p>
+			</div>
+
+			<div class="bg-card text-card-foreground rounded-lg p-6 shadow-md card-elevation animate-in fade-in slide-in-from-bottom-10 duration-500 delay-200">
+				<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 transition-transform-bounce hover:scale-110">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+					</svg>
+				</div>
+				<h2 class="text-xl font-semibold mb-2">File Upload Support</h2>
+				<p class="text-muted-foreground">Upload and analyze documents with AI assistance. Supports various file formats for enhanced context in conversations.</p>
+			</div>
+
+			<div class="bg-card text-card-foreground rounded-lg p-6 shadow-md card-elevation animate-in fade-in slide-in-from-bottom-10 duration-500 delay-300">
+				<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 transition-transform-bounce hover:scale-110">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
+					</svg>
+				</div>
+				<h2 class="text-xl font-semibold mb-2">Secure & Private</h2>
+				<p class="text-muted-foreground">Option to use browser-based models for complete privacy, or connect securely to external providers with your own API keys.</p>
+			</div>
+		</section>
+
+		<section class="py-12 border-t">
+			<div class="max-w-3xl mx-auto text-center animate-in fade-in slide-in-from-bottom-10 duration-500 delay-300">
+				<h2 class="text-2xl font-bold mb-6">About This Project</h2>
+				<p class="mb-4 text-muted-foreground">
+					This AI chat interface is designed to provide a flexible and powerful way to interact with various AI models.
+					It supports multiple providers, file uploads for context, and can even run models directly in your browser for complete privacy.
+				</p>
+				<p class="text-muted-foreground">
+					Use the navigation to explore the application and start chatting with AI assistants.
+				</p>
+			</div>
+		</section>
+
+		<section class="py-16 border-t">
+			<div class="max-w-4xl mx-auto">
+				<h2 class="text-2xl font-bold mb-8 text-center">Frequently Asked Questions</h2>
+				<div class="space-y-6 animate-in fade-in slide-in-from-bottom-10 duration-500 delay-400">
+					<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
+						<h3 class="text-lg font-medium mb-2">What AI models can I use?</h3>
+						<p class="text-muted-foreground">You can connect to various providers like OpenAI (ChatGPT), Anthropic (Claude), or run models directly in your browser with WebLLM for complete privacy.</p>
+					</div>
+					<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
+						<h3 class="text-lg font-medium mb-2">Do I need an API key?</h3>
+						<p class="text-muted-foreground">For cloud-based providers like OpenAI or Anthropic, you'll need your own API key. For browser-based models using WebLLM, no API key is required as everything runs locally.</p>
+					</div>
+					<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
+						<h3 class="text-lg font-medium mb-2">What files can I upload?</h3>
+						<p class="text-muted-foreground">The system supports various document formats including PDF, DOCX, TXT and more to provide context for your conversations with AI.</p>
+					</div>
+					<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
+						<h3 class="text-lg font-medium mb-2">How secure is my data?</h3>
+						<p class="text-muted-foreground">When using WebLLM, all processing happens in your browser and data never leaves your device. For cloud providers, data is sent to their APIs according to their privacy policies.</p>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</Layout>
+
+<script>
+// Add intersection observer for scroll animations
+document.addEventListener('DOMContentLoaded', () => {
+	const observerOptions = {
+		threshold: 0.1,
+		rootMargin: '0px 0px -50px 0px'
+	};
+
+	const observer = new IntersectionObserver((entries) => {
+		entries.forEach(entry => {
+			if (entry.isIntersecting) {
+				entry.target.classList.add('animate-in');
+				observer.unobserve(entry.target);
+			}
+		});
+	}, observerOptions);
+
+	// Select all sections
+	document.querySelectorAll('section').forEach(section => {
+		observer.observe(section);
+	});
+});
+</script>