From 2cca2bc599fa4609fb33ce37207996eaa1b0b7c1 Mon Sep 17 00:00:00 2001
From: Pontus Abrahamsson <pontus@lostisland.co>
Date: Fri, 25 Oct 2024 08:51:50 +0200
Subject: [PATCH] Add invoice template

---
 .../src/app/components/invoice/page.tsx       |  5 +-
 apps/website/src/app/components/page.tsx      | 51 ++++++++++++-------
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/apps/website/src/app/components/invoice/page.tsx b/apps/website/src/app/components/invoice/page.tsx
index d8913d5db..1a1cea425 100644
--- a/apps/website/src/app/components/invoice/page.tsx
+++ b/apps/website/src/app/components/invoice/page.tsx
@@ -1,4 +1,6 @@
 import type { Metadata } from "next";
+import Image from "next/image";
+import invoice from "public/images/update/invoice-pdf/pdf-invoice.jpg";
 
 export const metadata: Metadata = {
   title: "React PDF Invoice Template | Midday",
@@ -8,6 +10,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className="container mt-24 max-w-[540px]">
+      <Image src={invoice} alt="Invoice" />
       <div className="mt-8">
         <div className="border bg-card text-card-foreground shadow-sm">
           <div className="flex flex-col space-y-1.5 p-6">
@@ -18,7 +21,7 @@ export default function Page() {
           </div>
           <div className="p-6 pt-0">
             <a
-              href="https://go.midday.ai/editor-code"
+              href="https://go.midday.ai/inv"
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
diff --git a/apps/website/src/app/components/page.tsx b/apps/website/src/app/components/page.tsx
index 42a04e134..6c71c76aa 100644
--- a/apps/website/src/app/components/page.tsx
+++ b/apps/website/src/app/components/page.tsx
@@ -1,4 +1,6 @@
+import { Button } from "@midday/ui/button";
 import { Card } from "@midday/ui/card";
+import { cn } from "@midday/ui/cn";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -18,6 +20,7 @@ const components = [
     description: "A rich text editor with AI tools powered by Vercel AI SDK.",
     image: editor,
     href: "/components/editor",
+    className: "mt-24",
     ready: true,
   },
   {
@@ -40,7 +43,7 @@ const components = [
 export default function Page() {
   return (
     <div className="container mb-52">
-      <div className="mb-40">
+      <div className="mb-40 flex flex-col items-center">
         <h1 className="mt-24 font-medium text-center text-[55px] md:text-[170px] mb-2 leading-none text-stroke">
           Components
         </h1>
@@ -50,28 +53,38 @@ export default function Page() {
             A collection of open-source components based on Midday features.
           </p>
         </div>
+
+        <a href="https://git.new/midday" target="_blank" rel="noreferrer">
+          <Button className="mt-8">View on Github</Button>
+        </a>
       </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8">
-        {components.map(({ name, description, image, href, ready }) => (
-          <Link href={href} key={name} className="flex">
-            <Card className="p-6 flex flex-col">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-semibold">{name}</h2>
-                {!ready && (
-                  <span className="text-[#F5F5F3] border border-border rounded-full text-[10px] font-mono px-1.5 py-1 bg-[#1D1D1D]">
-                    Coming soon
-                  </span>
-                )}
-              </div>
-              <p className="text-sm text-[#878787]">{description}</p>
+        {components.map(
+          ({ name, description, image, href, ready, className }) => (
+            <Link href={href} key={name} className="flex">
+              <Card className="p-6 flex flex-col group">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-lg font-semibold">{name}</h2>
+                  {!ready && (
+                    <span className="text-[#F5F5F3] border border-border rounded-full text-[10px] font-mono px-1.5 py-1 bg-[#1D1D1D]">
+                      Coming soon
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm text-[#878787]">{description}</p>
 
-              <div className="flex justify-center mt-6">
-                <Image src={image} alt={name} />
-              </div>
-            </Card>
-          </Link>
-        ))}
+                <div className={cn("flex justify-center mt-6", className)}>
+                  <Image
+                    src={image}
+                    alt={name}
+                    className="transition-transform duration-300 group-hover:-translate-y-2"
+                  />
+                </div>
+              </Card>
+            </Link>
+          ),
+        )}
       </div>
     </div>
   );