Merge pull request #28 from ildecimo/develop

howto videos
ildecimo · Aug 15, 2023 · bc0fcac · bc0fcac
2 parents 7e3291a + 6bed2ff
commit bc0fcac
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 3 deletions.
diff --git a/public/videos/generate-emails.mp4 b/public/videos/generate-emails.mp4
diff --git a/public/videos/navigate-products.mp4 b/public/videos/navigate-products.mp4
diff --git a/public/videos/open-app.mp4 b/public/videos/open-app.mp4
diff --git a/public/videos/status-reviews.mp4 b/public/videos/status-reviews.mp4
diff --git a/public/videos/view-ai-suggestions.mp4 b/public/videos/view-ai-suggestions.mp4
diff --git a/src/components/HomePage.tsx b/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>

diff --git a/src/components/HomePage/Header.tsx b/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"
                 >

diff --git a/src/components/HomePage/MobileMenu.tsx b/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"

diff --git a/src/components/HomePage/Video.tsx b/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>
+  );
+}