add template banner

app/partials/Template.tsx

@@ -0,0 +1,36 @@
+import { Link } from "@remix-run/react"
+import { posthog } from "posthog-js"
+import type { HTMLAttributes } from "react"
+import { Button } from "~/components/Button"
+import { Card } from "~/components/Card"
+import { H2 } from "~/components/Heading"
+import { FRAMER_TEMPLATE_URL } from "~/utils/constants"
+import { cx } from "~/utils/cva"
+
+export const Template = ({ className, ...props }: HTMLAttributes<HTMLElement>) => {
+  return (
+    <Card
+      className={cx("group/button rounded-lg md:flex-row md:items-stretch", className)}
+      asChild
+      {...props}
+    >
+      <Link to={FRAMER_TEMPLATE_URL} onClick={() => posthog.capture("template_clicked")}>
+        <div className="flex flex-col items-start flex-1 gap-4 lg:p-4">
+          <H2>Get this design as a Framer template</H2>
+
+          <p className="text-muted">
+            Clone this design in Framer and start building your own directory website. The template
+            includes animations, interactions, and code components. No design or code skills
+            required.
+          </p>
+
+          <Button size="lg" variant="fancy" className="mt-auto pointer-events-none">
+            Get the Aperto template
+          </Button>
+        </div>
+
+        <img src="/aperto.png" alt="" className="w-full h-auto flex-1 rounded-md md:w-1/2" />
+      </Link>
+    </Card>
+  )
+}

app/root.tsx

@@ -24,6 +24,7 @@ import posthog from "posthog-js"
 import stylesheet from "~/styles.css?url"
 import { prisma } from "./services.server/prisma"
 import { categoryManyPayload } from "./services.server/api"
+import { Template } from "./partials/Template"
 
 export const shouldRevalidate = () => {
   return false
@@ -121,7 +122,7 @@ export function Layout({ children }: PropsWithChildren) {
           <Container className="flex min-h-[calc(100dvh-var(--header-height))] mt-[calc(var(--header-top)+var(--header-height))] flex-col py-8 gap-8 md:gap-10 md:py-10 lg:gap-12 lg:py-12">
             {children}
 
-            <hr className="mt-auto peer-[[href]]:mt-0" />
+            <Template className="mt-auto peer-[[href]]:mt-0" />
 
             <Footer categories={data?.categories} />
           </Container>

app/utils/constants.ts

@@ -16,6 +16,7 @@ export const RSS_URL = `${SITE_URL}/rss.xml`
 export const TWITTER_URL = "https://x.com/ossalternative"
 export const TWITTER_AUTHOR_URL = "https://x.com/piotrkulpinski"
 export const GITHUB_URL = "https://github.com/piotrkulpinski/openalternative"
+export const FRAMER_TEMPLATE_URL = "https://r.baseline.supply/aperto-oa"
 
 export const LATEST_TOOLS_TRESHOLD = new Date(new Date().setDate(new Date().getDate() - 7))
 export const TOPICS_PER_PAGE = 150