From 9fafb6393a6e12cdfb9d7e460055ab7a352f03ef Mon Sep 17 00:00:00 2001
From: Kavin Valli <mail@kavin.me>
Date: Thu, 26 Sep 2024 20:44:29 -0400
Subject: [PATCH] link pricing page buttons upgrade now (#2684)

---
 .../templates/pricing/EnterpriseCard.tsx         |  8 ++++++--
 .../components/templates/pricing/FreeCard.tsx    |  8 ++++++--
 .../components/templates/pricing/ScaleCard.tsx   |  7 +++++--
 bifrost/app/pricing/page.tsx                     | 16 ++++++++++++----
 .../templates/pricing/DeveloperCard.tsx          |  5 ++++-
 .../templates/pricing/EnterpriseCard.tsx         |  5 ++++-
 .../components/templates/pricing/ScaleCard.tsx   |  7 ++++++-
 7 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/bifrost/app/components/templates/pricing/EnterpriseCard.tsx b/bifrost/app/components/templates/pricing/EnterpriseCard.tsx
index 2d35b657a4..c99d624545 100644
--- a/bifrost/app/components/templates/pricing/EnterpriseCard.tsx
+++ b/bifrost/app/components/templates/pricing/EnterpriseCard.tsx
@@ -3,6 +3,7 @@ import { Col } from "@/components/common/col";
 import { Row } from "@/components/common/row";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { FeatureItem } from "./FeaturedItem";
+import Link from "next/link";
 
 const EnterpriseCard: React.FC = () => {
   return (
@@ -30,9 +31,12 @@ const EnterpriseCard: React.FC = () => {
           <FeatureItem title="SOC-2 Compliance" />
           <FeatureItem title="Dedicated support" />
         </Col>
-        <button className="bg-[#FFFFFF] text-slate-900 py-[12px] border border-slate-200 rounded-[4px] mt-[8px] text-[16px]">
+        <Link
+          href="/contact"
+          className="bg-[#FFFFFF] text-slate-900 py-[12px] border border-slate-200 rounded-[4px] mt-[8px] text-[16px] text-center"
+        >
           Contact sales
-        </button>
+        </Link>
       </Col>
     </Card>
   );
diff --git a/bifrost/app/components/templates/pricing/FreeCard.tsx b/bifrost/app/components/templates/pricing/FreeCard.tsx
index 10722703ee..db6030b8b8 100644
--- a/bifrost/app/components/templates/pricing/FreeCard.tsx
+++ b/bifrost/app/components/templates/pricing/FreeCard.tsx
@@ -3,6 +3,7 @@ import { Col } from "@/components/common/col";
 import { Row } from "@/components/common/row";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { FeatureItem } from "./FeaturedItem";
+import Link from "next/link";
 
 const FreeCard: React.FC = () => {
   return (
@@ -34,9 +35,12 @@ const FreeCard: React.FC = () => {
             description="No credit card required."
           />
         </Col>
-        <button className="bg-[#FFFFFF] text-slate-900 py-[12px] border border-slate-200 rounded-[4px] mt-[8px] text-[16px]">
+        <Link
+          className="bg-[#FFFFFF] text-slate-900 py-[12px] border border-slate-200 rounded-[4px] mt-[8px] text-[16px] text-center"
+          href="https://us.helicone.ai/signin"
+        >
           Get started
-        </button>
+        </Link>
       </Col>
     </Card>
   );
diff --git a/bifrost/app/components/templates/pricing/ScaleCard.tsx b/bifrost/app/components/templates/pricing/ScaleCard.tsx
index e053cad410..072c88ae7a 100644
--- a/bifrost/app/components/templates/pricing/ScaleCard.tsx
+++ b/bifrost/app/components/templates/pricing/ScaleCard.tsx
@@ -67,9 +67,12 @@ const ScaleCard: React.FC = () => {
             description="Support via email, Discord or Slack."
           />
         </Col>
-        <button className="bg-brand text-white py-[12px] rounded-[4px] mt-[8px] text-[16px] font-semibold">
+        <Link
+          href="https://us.helicone.ai/settings/billing"
+          className="bg-brand text-white py-[12px] rounded-[4px] mt-[8px] text-[16px] font-semibold text-center"
+        >
           Upgrade Now
-        </button>
+        </Link>
       </Col>
     </Card>
   );
diff --git a/bifrost/app/pricing/page.tsx b/bifrost/app/pricing/page.tsx
index faaac81b40..e93f2e2527 100644
--- a/bifrost/app/pricing/page.tsx
+++ b/bifrost/app/pricing/page.tsx
@@ -77,7 +77,11 @@ export default function Example() {
                 </Col>
                 <Row className="w-full h-[72px] px-[24px] items-center justify-between border-t text-slate-900 font-medium border-slate-200">
                   <span>Free</span>
-                  <Button variant={"outline"}>Start for Free</Button>
+                  <Button variant={"outline"} asChild>
+                    <Link href="https://us.helicone.ai/signin">
+                      Start for Free
+                    </Link>
+                  </Button>
                 </Row>
               </Col>
             </div>
@@ -98,8 +102,10 @@ export default function Example() {
                 </Col>
                 <Row className="w-full h-[97px] px-[24px] items-center justify-between border-t border-slate-200 text-slate-900 font-medium">
                   <span>Pro</span>
-                  <Button className="bg-brand text-white font-bold">
-                    Upgrade now
+                  <Button className="bg-brand text-white font-bold" asChild>
+                    <Link href="https://us.helicone.ai/settings/billing">
+                      Upgrade now
+                    </Link>
                   </Button>
                 </Row>
               </Col>
@@ -121,7 +127,9 @@ export default function Example() {
                 </Col>
                 <Row className=" w-full h-[72px] px-[24px] items-center justify-between border-t border-slate-200 text-slate-900 font-medium">
                   <span>Enterprise</span>
-                  <Button variant={"outline"}>Contact Sales</Button>
+                  <Button variant={"outline"} asChild>
+                    <Link href="/contact">Contact Sales</Link>
+                  </Button>
                 </Row>
               </Col>
             </div>
diff --git a/bifrost/components/templates/pricing/DeveloperCard.tsx b/bifrost/components/templates/pricing/DeveloperCard.tsx
index 1e54de52da..5a47eee463 100644
--- a/bifrost/components/templates/pricing/DeveloperCard.tsx
+++ b/bifrost/components/templates/pricing/DeveloperCard.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Col } from "@/components/common/col";
 import { Row } from "@/components/common/row";
+import Link from "next/link";
 
 const DeveloperCard = () => {
   return (
@@ -14,7 +15,9 @@ const DeveloperCard = () => {
         </Col>
         <Row className="w-full h-[72px] px-[24px] items-center justify-between border-t">
           <span>Developer</span>
-          <Button variant={"outline"}>Start for Free</Button>
+          <Button variant={"outline"} asChild>
+            <Link href="https://us.helicone.ai/signin">Start for Free</Link>
+          </Button>
         </Row>
       </Col>
     </div>
diff --git a/bifrost/components/templates/pricing/EnterpriseCard.tsx b/bifrost/components/templates/pricing/EnterpriseCard.tsx
index e7afc5c949..4586953fee 100644
--- a/bifrost/components/templates/pricing/EnterpriseCard.tsx
+++ b/bifrost/components/templates/pricing/EnterpriseCard.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Col } from "@/components/common/col";
 import { Row } from "@/components/common/row";
+import Link from "next/link";
 
 const EnterpriseCard = () => {
   return (
@@ -14,7 +15,9 @@ const EnterpriseCard = () => {
         </Col>
         <Row className="w-full h-[72px] px-[24px] items-center justify-between border-t">
           <span>Enterprise</span>
-          <Button variant={"outline"}>Contact Sales</Button>
+          <Button asChild variant={"outline"}>
+            <Link href="/contact">Contact Sales</Link>
+          </Button>
         </Row>
       </Col>
     </div>
diff --git a/bifrost/components/templates/pricing/ScaleCard.tsx b/bifrost/components/templates/pricing/ScaleCard.tsx
index a2245f2ac3..da5bc018e2 100644
--- a/bifrost/components/templates/pricing/ScaleCard.tsx
+++ b/bifrost/components/templates/pricing/ScaleCard.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Col } from "@/components/common/col";
 import { Row } from "@/components/common/row";
+import Link from "next/link";
 
 const ScaleCard = () => {
   return (
@@ -14,7 +15,11 @@ const ScaleCard = () => {
         </Col>
         <Row className="w-full h-[72px] px-[24px] items-center justify-between border-t">
           <span>Scale</span>
-          <Button className="bg-brand text-white">Upgrade now</Button>
+          <Button className="bg-brand text-white" asChild>
+            <Link href="https://us.helicone.ai/settings/billing">
+              Upgrade now
+            </Link>
+          </Button>
         </Row>
       </Col>
     </div>