Added all pics. Updated navbar links + scroll. Redirect to touchnet s…

…tore works

frontend/public/sitemap.xml

@@ -6,13 +6,4 @@
         <priority>1.0</priority>
     </url>
     <url>
-        <loc>https://laughlab.org/about</loc>
-        <changefreq>weekly</changefreq>
-        <priority>0.8</priority>
-    </url>
-    <url>
-        <loc>https://laughlab.org/contact</loc>
-        <changefreq>monthly</changefreq>
-        <priority>0.5</priority>
-    </url>
 </urlset>

frontend/src/App.tsx

@@ -1,27 +1,27 @@
 import './App.css';
 import './index.css';
 import 'tailwindcss/tailwind.css';
-import { HashRouter, Routes, Route } from 'react-router-dom';
+import { HashRouter, Routes, Route, } from 'react-router-dom';
 
 import Navbar from './components/navbar.jsx';
 import CustomerPage from './pages/customer.tsx';
-import BusinessPage from './pages/business.tsx';
-import AboutPage from './pages/about.tsx';
+// import BusinessPage from './pages/business.tsx';
+// import AboutPage from './pages/about.tsx';
 
 function App() {
 
 
   return (
     <div className="overscroll-hidden">
-      <Navbar />
+      {/* <Navbar /> */}
       <HashRouter>
         <Routes>
           <Route path="/" element={< CustomerPage/>}>
           </Route>
-          <Route path="/business" element={< BusinessPage/>}>
+          {/* <Route path="/business" element={< BusinessPage/>}>
           </Route>
           <Route path="/about" element={< AboutPage/>}>
-          </Route>
+          </Route> */}
         </Routes>
       </HashRouter>
     </div>

frontend/src/components/featuredproducts.tsx

@@ -13,15 +13,15 @@ const FeaturedProducts: React.FC = () => {
           </Link>
           <div className="grid gap-2.5 relative group">
             <img
-              alt="am i the problem?"
+              alt="Go Piss Girl"
               className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
               height={400}
-              src="https://placehold.co/600"
+              src="src/assets/products/Go-Piss-girl-Solo.png"
               width={400}
             />
             <div className="grid gap-1.5 p-4">
-              <h3 className="font-semibold">am i the problem?</h3>
-              <p className="text-sm leading-none">Am i the problem? is a 2 ounce bottle of hand sanitizer that is lightly scented with eucalyptus essential oils.</p>
+              <h3 className="font-semibold" id='product'>Go piss girl</h3>
+              <p className="text-sm leading-none">Go Piss Girl is a 2 ounce bottle of hand sanitizer that is lightly scented with lemon essential oils.</p>
               <h4 className="font-semibold">$4</h4>
             </div>
           </div>

frontend/src/components/navbar.tsx

@@ -3,13 +3,24 @@ import 'tailwindcss/tailwind.css';
 import '../index.css';
 import '../App.css';
 
-const Navbar: React.FC = () => {
+interface Navbar {
+  scrollToSection: (sectionId: string) => void;
+}
+
+const Navbar: React.FC<Navbar> = ({ scrollToSection }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
 
+  const handleLinkClick = (sectionId: string, event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault(); // Prevent default behavior of the link
+    scrollToSection(sectionId);
+  };
+
+
+
   return (
     <div>
       <nav className="bg-white border-gray-200 dark:bg-gray-900">
@@ -27,11 +38,17 @@ const Navbar: React.FC = () => {
           <div className={`w-full md:block md:w-auto ${isOpen ? '' : 'hidden'}`} id="navbar-default">
             <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
               <li>
-                <a href="/" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" aria-current="page">Home</a>
+                <a href="/" onClick={(e) => handleLinkClick('', e)} className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" aria-current="page">Home</a>
               </li>
               <li>
-                <a href="/about" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
+                <a href="#product" onClick={(e) => handleLinkClick('product', e)} className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Products</a>
               </li>
+              <li>
+                <a href="#table" onClick={(e) => handleLinkClick('table', e)} className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Table Schedule</a>
+              </li>
+              {/* <li>
+                <a href="/about" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
+              </li> */}
 
               {/* <li>
                 <a href="/business" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Business</a>

frontend/src/components/popularproducts.tsx

@@ -1,26 +1,31 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+
+
+
+
 const Products: React.FC = () => {
 
   return (
     <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 items-start">
 
+      {/* am i the problem? */}
       <div className="relative group">
         <Link className="absolute inset-0 z-10" to="#">
           <span className="sr-only">View</span>
         </Link>
         <div className="grid gap-2.5 relative group">
           <img
-            alt="Technically Alcohol"
+            alt="am i the problem?"
             className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
             height={400}
-            src="https://placehold.co/600"
+            src="src/assets/products/Am-I-the-problem-Solo.png"
             width={400}
           />
           <div className="grid gap-1.5 p-4">
-            <h3 className="font-semibold">Technically Alcohol</h3>
-            <p className="text-sm leading-none">Technically Alcohol is a 2 ounce bottle of hand sanitizer, killing 99.9% of germs in as little as 15 seconds while on the go.</p>
+            <h3 className="font-semibold">am i the problem?</h3>
+            <p className="text-sm leading-none">am i the problem? is a 2 ounce bottle of hand sanitizer that is lightly scented with eucalyptus essential oils.</p>
             <h4 className="font-semibold">$4</h4>
           </div>
         </div>
@@ -29,6 +34,7 @@ const Products: React.FC = () => {
         </div>
       </div>
 
+      {/* child of divorce */}
       <div className="relative group">
         <Link className="absolute inset-0 z-10" to="#">
           <span className="sr-only">View</span>
@@ -38,19 +44,21 @@ const Products: React.FC = () => {
             alt="Child of Divorce"
             className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
             height={400}
-            src="https://placehold.co/600"
+            src="src/assets/products/Child-of-Divorce-Solo.png"
             width={400}
           />
           <div className="grid gap-1.5 p-4">
             <h3 className="font-semibold">Child of Divorce</h3>
-            <p className="text-sm leading-none">Child of Divorce is a 2 ounce bottle of hand sanitizer that is lightly scented with peppermint essential oils.</p>
+            <p className="text-sm leading-none">Child of Divorce is a 2 ounce bottle of hand sanitizer that is lightly scented with peppermint essential oils.<div>&nbsp;</div></p>
             <h4 className="font-semibold">$4</h4>
           </div>
         </div>
         <div className="btn bg-blue-950 my-2 py-3 rounded z-20 text-white hover:">
           Buy now! ➡️
         </div>
       </div>
+
+      {/* shield potion */}
       <div className="relative group">
         <Link className="absolute inset-0 z-10" to="#">
           <span className="sr-only">View</span>
@@ -60,41 +68,45 @@ const Products: React.FC = () => {
             alt="Shield Potion"
             className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
             height={400}
-            src="https://placehold.co/600"
+            src="src/assets/products/Shield-potion-Solo.png"
             width={400}
           />
           <div className="grid gap-1.5 p-4">
             <h3 className="font-semibold">Shield Potion</h3>
-            <p className="text-sm leading-none">Shield Potion is a 2 ounce bottle of hand sanitizer that is lightly scented with bergamot essential oils.</p>
+            <p className="text-sm leading-none">Shield Potion is a 2 ounce bottle of hand sanitizer that is lightly scented with bergamot essential oils.<div>&nbsp;</div></p>
             <h4 className="font-semibold">$4</h4>
           </div>
         </div>
         <div className="btn bg-blue-950 my-2 py-3 rounded z-20 text-white hover:">
           Buy now! ➡️
         </div>
       </div>
+
+      {/* technically alcohol */}
       <div className="relative group">
         <Link className="absolute inset-0 z-10" to="#">
           <span className="sr-only">View</span>
         </Link>
         <div className="grid gap-2.5 relative group">
           <img
-            alt="Go Piss Girl"
+            alt="Technically Alcohol"
             className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
             height={400}
-            src="https://placehold.co/600"
+            src="src/assets/products/Technically-Alc-Solo.png"
             width={400}
           />
           <div className="grid gap-1.5 p-4">
-            <h3 className="font-semibold">Go piss girl</h3>
-            <p className="text-sm leading-none">Go Piss Girl is a 2 ounce bottle of hand sanitizer that is lightly scented with lemon essential oils.</p>
+            <h3 className="font-semibold">Technically Alcohol</h3>
+            <p className="text-sm leading-none">Technically Alcohol is a 2 ounce bottle of hand sanitizer, killing 99.9% of germs in as little as 15 seconds while on the go.</p>
             <h4 className="font-semibold">$4</h4>
           </div>
         </div>
         <div className="btn bg-blue-950 my-2 py-3 rounded z-20 text-white hover:">
           Buy now! ➡️
         </div>
       </div>
+
+      {/* wine wednesday */}
       <div className="relative group">
         <Link className="absolute inset-0 z-10" to="#">
           <span className="sr-only">View</span>
@@ -104,7 +116,7 @@ const Products: React.FC = () => {
             alt="Wine Wednesday"
             className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
             height={400}
-            src="https://placehold.co/600"
+            src="src/assets/products/Wine-Wednesday-Solo.png"
             width={400}
           />
           <div className="grid gap-1.5 p-4">

frontend/src/components/popup.tsx

@@ -4,9 +4,10 @@ const Popup = () => {
   return (
     <div className='absolute z-30'>
       <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-        <div className="bg-white p-4 rounded shadow-lg m-8">
+        <div className="bg-white p-4 rounded shadow-lg m-8 mb-0">
           {/* if possible make an svg spinning animation that is in the shape of a hand sanitizer bottle and changes color each spin */}
-          <h1 className="h1 m-8">You will be redirected to our ordering website: Touchnet</h1>
+          <h1 className="h1 m-8">You will be redirected to our TouchNet ordering store soon!</h1>
+          <a className='text-sm link mb-8 block text-blue-500'>https://secure.touchnet.net/C20159_ustores/web/store_cat.jsp?STOREID=148&CATID=698</a>
           <div className="lds-spinner m-8"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
         </div>
       </div>

frontend/src/components/splash.tsx

@@ -4,7 +4,7 @@ const Splash: React.FC = () => {
   return (
     <div>
       {/* Your component content goes here */}
-      <img className='rounded-lg object-cover w-full py-5' src="https://placehold.co/1600x400" alt="" />
+      <img className='rounded-lg object-cover w-full max-h-400 py-5' src="src/assets/Table-Banner.png" alt="" />
     </div>
   );
 };

frontend/src/pages/customer.tsx

@@ -2,23 +2,29 @@ import 'tailwindcss/tailwind.css';
 
 import { useState, useEffect } from 'react';
 
-
+import Navbar from '../components/navbar.jsx';
 import Splash from '../components/splash.tsx';
 import FeaturedProducts from '../components/featuredproducts.tsx';
 import PopularProducts from '../components/popularproducts.tsx';
 import Popup from '../components/popup.tsx';
 import Footer from '../components/footer.tsx';
 
-
 const CustomerPage: React.FC = () => {
   const [popupState, setPopupState] = useState(false);
 
+  const scrollToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   useEffect(() => {
     if (popupState) {
       const timeoutId = setTimeout(() => {
         setPopupState(false);
-        window.open('https://amazon.com', '_blank');
-      }, 1500); // 1500 milliseconds = 1.5 seconds
+        window.open('https://secure.touchnet.net/C20159_ustores/web/store_cat.jsp?STOREID=148&CATID=698', '_blank');
+      }, 2000); // 2000 milliseconds = 2 seconds
 
       return () => clearTimeout(timeoutId);
     }
@@ -31,11 +37,13 @@ const CustomerPage: React.FC = () => {
   return (
     //this is the main page for laughlab.org
     <div>
-      {/* <Navbar/> */}
+      <Navbar scrollToSection={scrollToSection} />
       <Splash />
       {/* Pop is absolute positioned so no matter where */}
       {popupState && <Popup />}
-      <h1 className='h1 mb-1 mt-1 text-4xl  font-extrabold text-gray-900 py-6'>Limited-Time Offer! </h1>
+      <h1 id='product' className='h1 mb-1 mt-1 text-4xl font-extrabold text-gray-900 pt-6'> Featured Product!</h1>
+      <p className='pb-6'>Buy our products online for a quick pickup at our table!</p>
+      {/* Limited-Time Offer! */}
       {/* [for showing the new drop(s)] [countdown timer here] */}
       {/* <div className="flex justify-center"></div> */}
       <div onClick={handleClick} className='pb-5'>
@@ -50,7 +58,7 @@ const CustomerPage: React.FC = () => {
 
 
       {/* Table */}
-      <h1 className='h1 mb-1 mt-1 text-4xl  font-extrabold text-gray-900 pt-6 pb-1'>Our Table Schedule</h1>
+      <h1 id='table' className='h1 mb-1 mt-1 text-4xl  font-extrabold text-gray-900 pt-6 pb-1'>Our Table Schedule</h1>
       <p className='pb-6'>You can find us in-person on the OSU campus at these times!</p>
 
       <div className="overflow-x-auto">