feat(web): SEO/social cards, security headers, PWA icons, FAQ, status, get-involved, captions

site/layouts/index.html

@@ -6,16 +6,27 @@
     <p class="tagline">{{ .Params.hero.tagline }}</p>
     <p class="lead">{{ .Params.hero.lead }}</p>
     {{ .Content }}
+    {{ with .Site.GetPage "/about" }}
+    <p><a class="text-link" href="{{ .RelPermalink }}">{{ T "aboutCta" }} →</a></p>
+    {{ end }}
     {{ partial "store-badges.html" . }}
   </div>
-  {{ $shot := resources.Get (printf "screenshots/%s/inventory.png" $lang) }}
+  {{ $shot := resources.Get (printf "screenshots/%s/home.png" $lang) }}
   {{ with $shot }}
   <div class="hero-shot">
-    <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane inventory" loading="eager" /></div>
+    <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane" loading="eager" /></div>
   </div>
   {{ end }}
 </section>
 
+<section class="status">
+  <span class="badge-beta">{{ T "statusBadge" }}</span>
+  <div>
+    <h2>{{ T "statusTitle" }}</h2>
+    <p>{{ T "statusBody" }}</p>
+  </div>
+</section>
+
 <section class="pillars">
   {{ range .Params.pillars }}
   <article class="pillar">
@@ -33,10 +44,23 @@
     {{ range $s := $screens }}
       {{ $img := resources.Get (printf "screenshots/%s/%s.png" $lang $s) }}
       {{ with $img }}
-      <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane {{ $s }}" loading="lazy" /></div>
+      <figure class="phone-fig">
+        <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane {{ $s }}" loading="lazy" /></div>
+        <figcaption>{{ T (printf "screenCap%s" (title $s)) }}</figcaption>
+      </figure>
       {{ end }}
     {{ end }}
   </div>
+  {{ $rtl := resources.Get "screenshots/rtl/inventory.png" }}
+  {{ with $rtl }}
+  <div class="rtl-note">
+    <div class="phone phone-sm"><img src="{{ .RelPermalink }}" alt="Tane RTL" loading="lazy" dir="rtl" /></div>
+    <div>
+      <h3>{{ T "rtlNoteTitle" }}</h3>
+      <p>{{ T "rtlNoteBody" }}</p>
+    </div>
+  </div>
+  {{ end }}
 </section>
 
 <section class="values">
@@ -46,6 +70,41 @@
   </ul>
 </section>
 
+<section class="faq">
+  <h2>{{ T "faqTitle" }}</h2>
+  <dl>
+    <dt>{{ T "faqFreeQ" }}</dt><dd>{{ T "faqFreeA" }}</dd>
+    <dt>{{ T "faqAccountQ" }}</dt><dd>{{ T "faqAccountA" }}</dd>
+    <dt>{{ T "faqOfflineQ" }}</dt><dd>{{ T "faqOfflineA" }}</dd>
+    <dt>{{ T "faqLegalQ" }}</dt><dd>{{ T "faqLegalA" }} <a href="{{ "/legal/seeds/" | relLangURL }}">→</a></dd>
+    <dt>{{ T "faqDataQ" }}</dt><dd>{{ T "faqDataA" }} <a href="{{ "/legal/privacy/" | relLangURL }}">→</a></dd>
+  </dl>
+</section>
+
+<section class="collab">
+  <h2>{{ T "collabTitle" }}</h2>
+  <p class="lead">{{ T "collabIntro" }}</p>
+  <div class="collab-grid">
+    <article>
+      <h3>{{ with .Site.Params.weblateURL }}<a href="{{ . }}">{{ T "collabTranslateT" }}</a>{{ else }}{{ T "collabTranslateT" }}{{ end }}</h3>
+      <p>{{ T "collabTranslateB" }}</p>
+    </article>
+    <article>
+      <h3>{{ T "collabTestT" }}</h3>
+      <p>{{ T "collabTestB" }}</p>
+    </article>
+    <article>
+      <h3>{{ with .Site.Params.sourceURL }}<a href="{{ . }}">{{ T "collabCodeT" }}</a>{{ else }}{{ T "collabCodeT" }}{{ end }}</h3>
+      <p>{{ T "collabCodeB" }}</p>
+    </article>
+    <article>
+      <h3>{{ T "collabFundT" }}</h3>
+      <p>{{ T "collabFundB" }}</p>
+    </article>
+  </div>
+  <p><a class="badge" href="mailto:{{ .Site.Params.email }}">{{ T "collabContact" }}</a></p>
+</section>
+
 <section class="get-it" id="get">
   <h2>{{ T "getItTitle" }}</h2>
   {{ partial "store-badges.html" . }}