Update src/App.js

src/App.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { askGroq } from "groqClient";
+import { askGroq } from "./groqClient";
+import "./index.css"; // Add Tailwind directives here
 
 const products = [
   { id: 1, name: "Wireless Headphones", price: "$99" },
@@ -7,60 +8,64 @@ const products = [
   { id: 3, name: "AI Laptop", price: "$1299" },
 ];
 
-export default function Home() {
-  const [query, setQuery] = useState("");
+function App() {
+  const [msg, setMsg] = useState("");
   const [reply, setReply] = useState("");
 
-  const handleSubmit = async (e) => {
+  const handleAsk = async (e) => {
     e.preventDefault();
-    const response = await askGroq(query);
-    setReply(response);
+    const res = await askGroq(msg);
+    setReply(res);
+    setMsg("");
   };
 
   return (
     <div className="min-h-screen bg-gray-100">
       {/* Navbar */}
-      <nav className="bg-blue-700 text-white px-6 py-4 shadow">
-        <h1 className="text-xl font-bold">🛍️ AI Commerce</h1>
+      <nav className="bg-blue-600 text-white p-4">
+        <h1 className="text-2xl font-bold">AI‑Powered eCommerce</h1>
       </nav>
 
-      {/* Product List */}
-      <div className="p-6">
-        <h2 className="text-2xl font-semibold mb-4">Featured Products</h2>
-        <div className="grid md:grid-cols-3 gap-6">
+      {/* Products */}
+      <section className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Top Products</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {products.map((p) => (
             <div key={p.id} className="bg-white p-4 rounded shadow">
-              <h3 className="text-lg font-bold">{p.name}</h3>
+              <h3 className="font-bold">{p.name}</h3>
               <p className="text-gray-600">{p.price}</p>
-              <button className="mt-2 px-4 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
+              <button className="mt-2 bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">
                 Buy Now
               </button>
             </div>
           ))}
         </div>
-      </div>
+      </section>
 
-      {/* Chatbot */}
-      <div className="p-6 bg-white shadow mt-8">
-        <h2 className="text-xl font-bold mb-2">🤖 AI Assistant</h2>
-        <form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-4">
+      {/* AI Chat */}
+      <section className="p-6 bg-white m-4 rounded shadow">
+        <h2 className="text-lg font-bold mb-2">Ask AI Assistant</h2>
+        <form onSubmit={handleAsk} className="flex flex-col md:flex-row gap-2">
           <input
             type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Ask about recommendation, purchase behavior, or revenue..."
-            className="flex-1 border border-gray-300 rounded p-2"
+            className="flex-1 border rounded p-2"
+            placeholder="e.g. product recommendation, purchase behavior, revenue forecasting"
+            value={msg}
+            onChange={(e) => setMsg(e.target.value)}
+            required
           />
-          <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
+          <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
             Ask
           </button>
         </form>
         {reply && (
-          <div className="mt-4 bg-gray-100 p-3 rounded text-gray-800">
+          <div className="mt-4 bg-gray-100 p-3 rounded">
             <strong>AI:</strong> {reply}
           </div>
         )}
-      </div>
+      </section>
     </div>
   );
 }
+
+export default App;