Add Benchmarks hero

src/pages/benchmarks.astro

@@ -0,0 +1,120 @@
+---
+// Component Script:
+// You can write any JavaScript/TypeScript that you'd like here.
+// It will run during the build, but never in the browser.
+// All variables are available to use in the HTML template below.
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+
+import { DoesItAPI } from '~/helpers/api/client.js'
+
+import Layout from '../layouts/default.astro'
+import BgPlayer from '~/components/video/bg-player.vue'
+import LinkButton from '~/components/link-button.vue'
+
+const videosPage = await DoesItAPI.kind.tv(1).get()
+
+const video = videosPage.items[0]
+
+console.log('videos', video)
+
+---
+<Layout
+	headOptions={ {
+        title: `Benchmarks for ${ global.$config.processorsVerbiage } Processors and Apple Silicon - Does It ARM`,
+        description: `Apple Silicon benchmark, performance, and compatibility videos for Macs using the ${ global.$config.processorsVerbiage } processors.`,
+        // meta,
+        // link,
+        // structuredData: this.structuredData,
+
+        // domain,
+        pathname: '/benchmarks',
+    } }
+>
+
+    <main class="container relative md:static overflow-hidden md:overflow-visible pb-16">
+        <div class="flex flex-col items-center text-center space-y-12">
+            <BgPlayer
+                video={"video"}
+                class="absolute overflow-hidden w-2x-screen md:w-full pointer-events-none"
+            />
+
+            <div class="page-heading flex justify-start w-full">
+                <h1 class="title text-2xl leading-tight mt-12 mb-6">
+                    Benchmarks
+                </h1>
+            </div>
+
+            <div class="line-separator border-white border-t-2 mb-12" />
+
+            <a
+                href={ video.endpoint }
+            >
+                <div
+                    class="relative flex flex-col w-full justify-center items-center space-y-8 py-16 md:pt-0 md:pb-12 md:px-10"
+                >
+                    <div
+                        class="play-circle w-16 h-16 bg-white-2 bg-blur flex justify-center items-center outline-0 rounded-full ease"
+                    >
+                        <svg
+                            viewBox="0 0 18 18"
+                            style="width:24px;height:24px;margin-left:3px"
+                        >
+                            <path
+                                fill="currentColor"
+                                d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"
+                            />
+                        </svg>
+                    </div>
+                    <h2 class="title text-lg md:text-2xl font-bold">
+                        { video.name }
+                    </h2>
+                </div>
+            </a>
+
+            <!-- <div
+                class="features-apps w-full"
+            >
+                <hr class="w-full" >
+                <div class="featured-apps overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
+                    <LinkButton
+                        v-for="app in featuredApps"
+                        href={ "app.endpoint" }
+                        class="inline-block text-xs rounded-lg py-1 px-2"
+                        class-groups={{
+                            shadow: 'neumorphic-shadow-inner'
+                        }}
+                    >{ app.name }</LinkButton>
+                </div>
+            </div> -->
+
+
+            { /* <div
+                v-for="(row, key) in videoRows"
+                class={ `${ key }-videos w-full max-w-4xl` }
+            >
+                <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
+                    { row.heading }
+                </h2>
+                <!-- <pre class="text-left">{{ benchmarkVideos }}</pre> -->
+                <VideoRow
+                    videos={ "row.videos" }
+                />
+            </div> */ }
+
+        </div>
+    </main>
+
+	<!--
+
+	You can also use imported framework components directly in your markup!
+
+	Note: by default, these components are NOT interactive on the client.
+	The `:visible` directive tells Astro to make it interactive.
+
+	See https://docs.astro.build/core-concepts/component-hydration/
+
+	-->
+
+</Layout>