Add landing page CTA

Add a final download-focused CTA section to the home page.

Author: ComputelessComputer

apps/web/src/routes/index.tsx

@@ -346,21 +346,7 @@ function Component() {
             </p>
             <div className="mt-8 flex flex-wrap gap-x-5 gap-y-3 text-sm">
               <DownloadButton />
-              <a
-                href="https://github.com/fastrepl/anarlog"
-                className="inline-flex items-center gap-2 rounded-full border border-[#d8d0c5] px-5 py-3 font-medium text-[#181613] transition-colors hover:border-[#b8aea0] hover:bg-[#f7f4ef]"
-              >
-                <img
-                  src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"
-                  alt=""
-                  className="size-4"
-                  aria-hidden="true"
-                />
-                <span>GitHub</span>
-                <span className="text-[#756b5d]">
-                  {formattedGithubStars} stars
-                </span>
-              </a>
+              <GitHubButton formattedGithubStars={formattedGithubStars} />
             </div>
           </section>
 
@@ -392,6 +378,8 @@ function Component() {
               </div>
             </div>
           </section>
+
+          <FinalCtaSection formattedGithubStars={formattedGithubStars} />
         </div>
       </div>
 
@@ -400,6 +388,52 @@ function Component() {
   );
 }
 
+function FinalCtaSection({
+  formattedGithubStars,
+}: {
+  formattedGithubStars: string;
+}) {
+  return (
+    <section className="relative left-1/2 mt-6 w-screen -translate-x-1/2 py-16 md:py-20">
+      <div className="mx-auto max-w-[700px] px-5 md:px-8">
+        <h2 className="font-hand max-w-3xl text-5xl leading-[0.98] font-semibold tracking-normal text-balance text-[#181613] md:text-7xl">
+          Keep your meeting notes yours.
+        </h2>
+        <p className="mt-6 max-w-2xl text-lg leading-8 text-[#4f4940]">
+          Download Anarlog for macOS and turn private meeting notes into useful
+          summaries without adding a bot to the room.
+        </p>
+        <div className="mt-8 flex flex-wrap gap-x-5 gap-y-3 text-sm">
+          <DownloadButton />
+          <GitHubButton formattedGithubStars={formattedGithubStars} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function GitHubButton({
+  formattedGithubStars,
+}: {
+  formattedGithubStars: string;
+}) {
+  return (
+    <a
+      href="https://github.com/fastrepl/anarlog"
+      className="inline-flex items-center gap-2 rounded-full border border-[#d8d0c5] px-5 py-3 font-medium text-[#181613] transition-colors hover:border-[#b8aea0] hover:bg-[#f7f4ef]"
+    >
+      <img
+        src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"
+        alt=""
+        className="size-4"
+        aria-hidden="true"
+      />
+      <span>GitHub</span>
+      <span className="text-[#756b5d]">{formattedGithubStars} stars</span>
+    </a>
+  );
+}
+
 function CredibilityLogoMarquee() {
   return (
     <section className="py-8" aria-labelledby="credibility-heading">