Add src/app/chat/page.tsx

src/app/chat/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+
+interface Message {
+  id: number;
+  text: string;
+  sender: 'user' | 'ai';
+}
+
+const dummyMessages: Message[] = [
+  { id: 1, text: "Hello DB Buddy, can you tell me the total sales for last quarter?", sender: 'user' },
+  { id: 2, text: "Certainly! I'm retrieving the data now. Please specify if you'd like to see it grouped by region or product category.", sender: 'ai' },
+  { id: 3, text: "Group it by region, please.", sender: 'user' },
+  { id: 4, text: "Understood. Here is the total sales for last quarter, grouped by region: North America: $1.2M, Europe: $850K, Asia: $700K. Would you like a detailed breakdown?", sender: 'ai' },
+  { id: 5, text: "No, thank you. That's perfect.", sender: 'user' },
+];
+
+export default function ChatPage() {
+  const navItems = [
+    {
+      name: "Home",      id: "/"},
+    {
+      name: "Features",      id: "#features"},
+    {
+      name: "Impact",      id: "#metrics"},
+    {
+      name: "Testimonials",      id: "#testimonials"},
+    {
+      name: "Pricing",      id: "#pricing"},
+    {
+      name: "FAQs",      id: "#faqs"},
+    {
+      name: "Chat",      id: "/chat"},
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="noiseDiagonalGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-vector/gradient-data-logo-template_23-2149203399.jpg"
+            logoAlt="DB Buddy Logo"
+            brandName="DB Buddy"
+            button={{
+              text: "Get Started",              href: "#contact"}}
+          />
+        </div>
+
+        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-80px)] py-10 px-4 sm:px-6 lg:px-8">
+          <h1 className="text-4xl font-bold mb-8 text-foreground">AI Chat Interface</h1>
+          <div className="w-full max-w-3xl bg-card rounded-lg shadow-xl overflow-hidden">
+            <div className="p-4 bg-primary-cta text-white text-lg font-semibold">
+              DB Buddy Chat
+            </div>
+            <div className="flex flex-col p-6 space-y-4 max-h-[600px] overflow-y-auto">
+              {dummyMessages.map((message) => (
+                <div
+                  key={message.id}
+                  className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
+                >
+                  <div
+                    className={`max-w-[70%] p-3 rounded-lg ${
+                      message.sender === 'user'
+                        ? 'bg-primary-cta text-white self-end'
+                        : 'bg-background-accent text-foreground self-start'
+                    }`}
+                  >
+                    {message.text}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}