bam

.github/workflows/vrt.yml

@@ -1,4 +1,3 @@
-
 on: [push]
 
 jobs:
@@ -25,6 +24,6 @@ jobs:
         run: npm run start &
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.4.0
+        uses: lost-pixel/lost-pixel@v3.14.0
         env:
           LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}`

lostpixel.config.ts

@@ -8,6 +8,7 @@ export const config: CustomProjectConfig = {
         path: "/pricing",
         name: "pricing",
       },
+      { path: "/cta", name: "cta" },
     ],
     baseUrl: "http://172.17.0.1:3000",
   },

package.json

@@ -15,7 +15,7 @@
     "@trpc/react-query": "^10.18.0",
     "@trpc/server": "^10.18.0",
     "clsx": "^1.2.1",
-    "lost-pixel": "^3.4.0",
+    "lost-pixel": "^3.14.0",
     "next": "^13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/components/button.tsx

@@ -1,13 +1,15 @@
 type Props = {
   label: string;
   onClick?: () => unknown;
+  style?: React.CSSProperties;
 };
 
-export const Button = ({ label, onClick = () => null }: Props) => {
+export const Button = ({ label, onClick = () => null, style }: Props) => {
   return (
     <button
       onClick={onClick}
       className="transform rounded-md bg-blue-600 px-8 py-2 capitalize tracking-wide text-white transition-colors duration-200 hover:bg-blue-500 focus:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+      style={style}
     >
       {label}
     </button>

src/pages/cta.tsx

@@ -0,0 +1,29 @@
+import { useRouter } from "next/router";
+import { Button } from "../components/button";
+import Shell from "../components/shell";
+
+export const Home = () => {
+  const router = useRouter();
+
+  return (
+    <Shell title="Home">
+      <main className="flex min-h-screen flex-col items-center justify-center bg-gray-900">
+        <div className="container flex flex-col items-center justify-center gap-2 px-4 py-16 "></div>
+        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
+          CTA
+        </h1>
+        <div className="container flex flex-col items-center justify-center py-16">
+          <Button
+            style={{
+              background: "salmon",
+            }}
+            label={"Get Started"}
+            onClick={() => void router.push("/pricing")}
+          />
+        </div>
+      </main>
+    </Shell>
+  );
+};
+
+export default Home;

tsconfig.json

@@ -27,7 +27,8 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.cjs",
-    "**/*.mjs"
+    "**/*.mjs",
+    "./lostpixel.config.ts"
   ],
   "exclude": ["node_modules", "lostpixel.config.ts"]
 }