Chat Widget, changes in nav bar

Auto Scroll chat and changes in Nav bar

web/app/chat/page.js

@@ -32,10 +32,16 @@ function ChatPage() {
     }
   }, [authLoading, user, router, conversationIdParam]);
 
-  useEffect(() => {
+ const prevMsgLengthRef = useRef(0);
+
+useEffect(() => {
+  if (messages.length > prevMsgLengthRef.current) {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }
+  prevMsgLengthRef.current = messages.length;
   }, [messages]);
 
+
   const fetchMessages = useCallback(async (convId) => {
     if (!token || !convId) return;
     try {

web/app/globals.css

@@ -36,7 +36,7 @@ body {
   padding: 0.5rem 2rem;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  justify-content: space-between;
   min-height: 70px;
   /* border-radius: 0px 0px 10px 10px; */
 }
@@ -71,17 +71,18 @@ body {
 .nav-link {
   color: #2f2f2f;
   text-decoration: none;
-  font-size: 1.1rem;
-  font-weight: 700;
+  font-size: 1.05rem;
+  font-weight: 600;
   padding: 0.5rem 1rem;
-  border-radius: 4px;
-  transition: all 0.3s ease;
+  border-radius: 6px;
+  transition: background-color 0.25s ease, color 0.25s ease;
   position: relative;
 }
 
 /* Alternative Hover Effect - Background */
 .nav-link:hover {
-  background-color: rgba(255, 255, 255, 0.171);
+  background-color: rgba(255, 255, 255, 0.25);
+  
 }
 
 

web/app/page.js

@@ -15,7 +15,7 @@ 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 +76,42 @@ export default function Home() {
           ))}
         </div>
       </section>
+
+       {/* About Us Section */}
+      <section className="info-page">
+        <div className="info-hero">
+          <h2 className="info-title">About Leon&apos;s Pet Store</h2>
+          <p className="info-subtitle">Pet care, adoption support, grooming, and everyday essentials in one place.</p>
+          <div className="title-decoration"></div>
+        </div>
+
+        <div className="info-content">
+          <div className="info-card">
+            <h2>What We Do</h2>
+            <p>
+              Leon&apos;s Pet Store connects families with adoptable pets, helpful services, and quality products for day-to-day pet care.
+            </p>
+          </div>
+
+          <div className="info-card">
+            <h2>Our Focus</h2>
+            <ul className="info-list">
+              <li>Support responsible pet adoption</li>
+              <li>Provide grooming and care services</li>
+              <li>Offer reliable pet supplies and essentials</li>
+              <li>Create a friendly experience for customers and staff</li>
+            </ul>
+          </div>
+
+          <div className="info-card">
+            <h2>Visit the Store</h2>
+            <p>
+              Browse adoptable pets, schedule appointments, shop products, or contact the team for help finding the right fit for a pet and household.
+            </p>
+          </div>
+        </div>
+      </section>
+
     </main>
   );
 }