fix chat scroll jumps and move about us to home page

web/app/ai-chat/page.js

@@ -30,6 +30,7 @@ function AiChatPage() {
   const pollRef = useRef(null);
   const lastMessageIdRef = useRef(null);
   const fileInputRef = useRef(null);
+  const lastScrolledIdRef = useRef(null);
 
   useEffect(() => {
     if (!authLoading && !user) {
@@ -38,6 +39,10 @@ function AiChatPage() {
   }, [authLoading, user, router, conversationIdParam]);
 
   useEffect(() => {
+    if (messages.length === 0) return;
+    const lastMsg = messages[messages.length - 1];
+    if (lastMsg.id === lastScrolledIdRef.current) return;
+    lastScrolledIdRef.current = lastMsg.id;
     const area = messagesAreaRef.current;
     if (!area) return;
     const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;

web/app/chat/page.js

@@ -30,6 +30,7 @@ function ChatPage() {
   const pollRef = useRef(null);
   const lastMessageIdRef = useRef(null);
   const fileInputRef = useRef(null);
+  const lastScrolledIdRef = useRef(null);
 
   useEffect(() => {
     if (!authLoading && !user) {
@@ -38,6 +39,10 @@ function ChatPage() {
   }, [authLoading, user, router, conversationIdParam]);
 
   useEffect(() => {
+    if (messages.length === 0) return;
+    const lastMsg = messages[messages.length - 1];
+    if (lastMsg.id === lastScrolledIdRef.current) return;
+    lastScrolledIdRef.current = lastMsg.id;
     const area = messagesAreaRef.current;
     if (!area) return;
     const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;

web/app/page.js

@@ -15,7 +15,6 @@ const navImages = [
   {id: "nav-adopt", src: "/images/home/navimages/adopt.jpg", alt: "Adopt a Pet", link: "/adopt", title: "Adopt a Pet"},
   {id: "nav-products", src: "/images/home/navimages/store.jpg", alt: "Online Store", link: "/products", title: "Online Store"},
   {id: "nav-appointments", src: "/images/home/navimages/appointments.jpg", alt: "Appointments", link: "/appointments", title: "Appointments"},
-  {id: "nav-about", src: "/images/home/navimages/about.jpg", alt: "About Us", link: "/about", title: "About Us"},
 ];
 
 export default function Home() {
@@ -76,6 +75,34 @@ export default function Home() {
           ))}
         </div>
       </section>
+
+      {/* About Us */}
+      <section className="info-page">
+        <div className="info-hero">
+          <h2 className="info-title">About Leon&apos;s Pet Store</h2>
+          <p className="info-subtitle">Your trusted local destination for pet care, adoption, and supplies — built on a love for animals and community.</p>
+          <div className="title-decoration"></div>
+        </div>
+        <div className="info-content">
+          <div className="info-card">
+            <h3>What We Do</h3>
+            <p>Leon&apos;s Pet Store is a full-service pet shop offering adoptions, grooming, veterinary appointments, and a wide range of supplies to keep your pets happy and healthy.</p>
+          </div>
+          <div className="info-card">
+            <h3>Our Focus</h3>
+            <ul className="info-list">
+              <li>Support responsible pet adoption</li>
+              <li>Provide grooming and care services</li>
+              <li>Offer reliable pet supplies</li>
+              <li>Create a friendly customer experience</li>
+            </ul>
+          </div>
+          <div className="info-card">
+            <h3>Visit the Store</h3>
+            <p>Come visit us in person or explore our services online. Whether you&apos;re a first-time pet owner or a seasoned animal lover, we&apos;re here to help every step of the way.</p>
+          </div>
+        </div>
+      </section>
     </main>
   );
 }