From a50a4d2d17218a1864888d035fd6cd7d127ff61d Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Mon, 26 Apr 2021 21:19:48 -0500
Subject: [PATCH] Add price check links to app layout

---
 pages-eleventy/app.11ty.js | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/pages-eleventy/app.11ty.js b/pages-eleventy/app.11ty.js
index ee03bf3..94e10ed 100644
--- a/pages-eleventy/app.11ty.js
+++ b/pages-eleventy/app.11ty.js
@@ -109,19 +109,19 @@ export class AppTemplate {
 
         return /* html */`
             <section class="container py-32">
-                <div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0">
+                <div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0 space-y-8">
                     <h1 class="title text-sm md:text-2xl font-bold">
                         ${ data.mainHeading }
                     </h1>
-                    <h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
+                    <h2 class="subtitle text-2xl md:text-5xl font-bold">
                         ${ app.text }
                     </h2>
 
                     <div class="subscribe">
-                        <iframe src="/embed-subscribe" loading="lazy" style="width: 350px; height: 150px;" class="-my-8"></iframe>
+                        <iframe src="/embed-subscribe" loading="lazy" style="width: 350px; height: 150px;" class="-my-10"></iframe>
                     </div>
 
-                    <div class="links space-y-6 sm:space-x-6 mb-8">
+                    <div class="links space-y-6 sm:space-x-6">
                         ${ relatedLinksHtml }
                     </div>
 
@@ -129,15 +129,19 @@ export class AppTemplate {
                         <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                             Device Support
                         </h2>
-                        <div class="device-support-apps overflow-x-auto overflow-y-visible md:whitespace-no-wrap py-2 space-x-2 space-y-3">
+                        <div class="device-support-apps md:inline-flex max-w-4xl overflow-x-auto overflow-y-visible md:whitespace-no-wrap border rounded-lg divide-y md:divide-y-0 md:divide-x divide-gray-700 space-y-3 md:space-y-0 py-4 px-3">
 
                             ${ appDeviceSupport.map( device => /* html */`
-                                <a
-                                    href="${ device.endpoint }"
-                                    role="button"
-                                    class="relative inline-flex items-center leading-5 font-bold text-white border border-transparent focus:outline-none focus:border-indigo-600 neumorphic-shadow-inner bg-darker hover:bg-indigo-400 active:bg-indigo-600 transition duration-150 ease-in-out text-xs rounded-lg px-4 py-2"
-                                    aria-label="${ device.ariaLabel }"
-                                >${ device.emoji } ${ device.name }</a>
+                                <div class="device-container w-full md:w-auto inline-flex flex-col space-y-2 px-2">
+                                    <a
+                                        href="${ device.endpoint }"
+                                        role="button"
+                                        class="device-link block rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow p-2"
+                                        aria-label="${ device.ariaLabel }"
+                                    >${ device.emoji } ${ device.name }</a>
+
+                                    <a href="${ device.amazonUrl }" target="_blank" class="underline text-xs pb-3" rel="noopener">Check Pricing</a>
+                                </div>
                             `).join('') }
 
                         </div>