Added video to home page

thefrontside · Dec 18, 2023 · a27f132 · a27f132
1 parent ae689e5
commit a27f132
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/www/routes/app.html.tsx b/www/routes/app.html.tsx
@@ -80,7 +80,7 @@ export function* useAppHtml({
             <nav aria-label="Site Nav" class="text-sm">
               <ul class="flex items-center sm:gap-1.5 gap-3 md:gap-16">
                 <li>
-                  <a href="/docs/introduction">Guides</a>
+                  <a href="/docs/installation">Guides</a>
                 </li>
                 <li>
                   <a href="https://deno.land/x/effection/mod.ts">API</a>

diff --git a/www/routes/index-route.tsx b/www/routes/index-route.tsx
@@ -45,19 +45,41 @@ export function indexRoute(): JSXHandler {
                   </a>
                   <p class="col-span-6 text-center">
                     <span class="inline-block bg-sky-100 text-blue-900 rounded py-2 px-4 w-fit border border-sky-200">
-                      December 18, 2023 - We're proud to announce the{" "}
+                      December 18, 2023 - We're proud to{" "}
                       <a
                         class="underline underline-offset-4"
                         href={announcementUrl}
                       >
-                        release of Effection 3.0.
+                        announce the release of Effection 3.0.
                       </a>
                     </span>
                   </p>
                 </div>
               </hgroup>
             </section>
 
+            <section class="my-20">
+              <hgroup class="mx-auto max-w-2xl lg:text-center">
+                <h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                  Latest video
+                </h2>
+                <p class="mt-6 text-lg leading-8 text-gray-600 mb-2">
+                  Watch Charles Lowell, the creator of Effection, explain
+                  Effection and answer frequenty asked questions.
+                </p>
+                <iframe
+                  class="mx-auto max-w-2xl"
+                  width={560}
+                  height={315}
+                  src="https://www.youtube.com/embed/lJDgpxRw5WA?si=rZuOYa_UWDdP1G_V"
+                  title="YouTube video player"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                ></iframe>
+              </hgroup>
+            </section>
+
             <section class="my-20 mx-auto max-w-7xl px-6 lg:px-8">
               <hgroup class="mx-auto max-w-2xl lg:text-center">
                 <h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
@@ -102,6 +124,7 @@ export function indexRoute(): JSXHandler {
                 </Feature>
               </div>
             </section>
+
             <section class="my-20">
               <hgroup class="mx-auto max-w-2xl lg:text-center">
                 <h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">