Update src/App.js

src/App.js

@@ -1,25 +1,66 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import { askGroq } from "../api/groqClient";
+
+const products = [
+  { id: 1, name: "Wireless Headphones", price: "$99" },
+  { id: 2, name: "Smart Watch", price: "$199" },
+  { id: 3, name: "AI Laptop", price: "$1299" },
+];
+
+export default function Home() {
+  const [query, setQuery] = useState("");
+  const [reply, setReply] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const response = await askGroq(query);
+    setReply(response);
+  };
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React love you
-        </a>
-      </header>
+    <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>
+
+      {/* 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.map((p) => (
+            <div key={p.id} className="bg-white p-4 rounded shadow">
+              <h3 className="text-lg 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">
+                Buy Now
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 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">
+          <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"
+          />
+          <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
+            Ask
+          </button>
+        </form>
+        {reply && (
+          <div className="mt-4 bg-gray-100 p-3 rounded text-gray-800">
+            <strong>AI:</strong> {reply}
+          </div>
+        )}
+      </div>
     </div>
   );
 }
-
-export default App;