howto videos

src/components/HomePage.tsx

@@ -4,6 +4,7 @@ import '~/styles/home.css';
 
 import Footer from '~/components/HomePage/Footer';
 import Header from '~/components/HomePage/Header';
+import Video from '~/components/HomePage/Video';
 
 export const HomePage = () => {
   return (
@@ -15,7 +16,7 @@ export const HomePage = () => {
             {/* Hero content */}
             <div className="pb-12 pt-32 md:pb-20 md:pt-40">
               {/* Section header */}
-              <div className="pb-12 text-center md:pb-16">
+              <div className="pb-12 text-center md:pb-6">
                 <h1 className="leading-tighter mb-4 text-5xl font-extrabold tracking-tighter md:text-6xl">
                   Welcome to
                   <br />
@@ -25,6 +26,65 @@ export const HomePage = () => {
                 </h1>
               </div>
             </div>
+            <div className="my-10">
+              <h2 className="text-3xl font-semibold text-gray-700">
+                How to access Review Pulse App
+              </h2>
+              <div className="mt-2 text-xl">
+                <p className="pb-2 text-gray-600">
+                  Navigate to Products/View/Actions/ildecimo Review Pulse
+                </p>
+                <div className="overflow-hidden rounded-xl shadow-xl">
+                  <Video src="/videos/open-app.mp4" />
+                </div>
+              </div>
+
+              <h2 className="mt-12 text-3xl font-semibold text-gray-700">
+                How to view AI suggestions
+              </h2>
+              <div className="mt-2 text-xl">
+                <p className="pb-2 text-gray-600">Navigate to AI Explore</p>
+                <div className="overflow-hidden rounded-xl shadow-xl">
+                  <Video src="/videos/view-ai-suggestions.mp4" />
+                </div>
+              </div>
+
+              <h2 className="mt-12 text-3xl font-semibold text-gray-700">
+                Change the Review Status
+              </h2>
+              <div className="mt-2 text-xl">
+                <p className="pb-2 text-gray-600">
+                  Use the Approve / Disapprove / Set Pending buttons
+                </p>
+                <div className="overflow-hidden rounded-xl shadow-xl">
+                  <Video src="/videos/status-reviews.mp4" />
+                </div>
+              </div>
+
+              <h2 className="mt-12 text-3xl font-semibold text-gray-700">
+                Generate e-mails with AI
+              </h2>
+              <div className="mt-2 text-xl">
+                <p className="pb-2 text-gray-600">
+                  Use the Follow Up and Thank You buttons
+                </p>
+                <div className="overflow-hidden rounded-xl shadow-xl">
+                  <Video src="/videos/generate-emails.mp4" />
+                </div>
+              </div>
+
+              <h2 className="mt-12 text-3xl font-semibold text-gray-700">
+                Navigate to all products
+              </h2>
+              <div className="mt-2 text-xl">
+                <p className="pb-2 text-gray-600">
+                  Use the top breadcrumb to navigate to all products
+                </p>
+                <div className="overflow-hidden rounded-xl shadow-xl">
+                  <Video src="/videos/navigate-products.mp4" />
+                </div>
+              </div>
+            </div>
           </div>
         </section>
       </main>

src/components/HomePage/Header.tsx

@@ -38,7 +38,7 @@ export default function Header() {
             <ul className="flex grow flex-wrap items-center justify-end">
               <li>
                 <Link
-                  href="https://github.com/ildecimo/ReviewPulse"
+                  href="https://reviewpulse.ildecimo.com/"
                   className="btn-sm ml-3 bg-blue-800 text-white hover:bg-blue-700"
                   target="_blank"
                 >

src/components/HomePage/MobileMenu.tsx

@@ -75,7 +75,7 @@ export default function MobileMenu() {
           <ul className="px-5 py-2">
             <li>
               <Link
-                href="https://github.com/ildecimo/ReviewPulse"
+                href="https://reviewpulse.ildecimo.com/"
                 className="btn-sm my-2 w-full bg-blue-800 text-white hover:bg-blue-700"
                 onClick={() => setMobileNavOpen(false)}
                 target="_blank"

src/components/HomePage/Video.tsx

@@ -0,0 +1,11 @@
+interface VideoProps {
+  src: string;
+}
+
+export default function Video({ src }: VideoProps) {
+  return (
+    <video muted autoPlay loop>
+      <source src={src} type="video/mp4" />
+    </video>
+  );
+}