Joyboy/cost calculator

src/app/pricing/page.tsx

@@ -5,10 +5,9 @@ import { draftMode } from 'next/headers'
 import { pricingPageFragment } from '~/lib/basehub-queries'
 import { Footer } from '~/components/Footer'
 import { PricingFAQ } from '~/components/pricing/PricingFAQ'
-import { CostCalculator } from '~/components/pricing/sections/CostCalculator'
-import { featureFlags } from '~/lib/feature-flags'
 import { Metadata, Viewport } from 'next/types'
 import { Header } from '~/components/layout/header'
+import { Calculator } from '~/components/pricing/sections/cost-calculator'
 
 export const metadata: Metadata = {
   title: 'Pricing'
@@ -32,7 +31,7 @@ export default function Home() {
             <main>
               <Header variant="dark" />
               <PricingHero {...pricingPage} />
-              {featureFlags.showCalculator && <CostCalculator />}
+              <Calculator />
               <PricingTable />
               <PricingFAQ {...pricingPage} />
             </main>

src/components/icons/credit-card.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+const CreditCardIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" {...props}>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.269}
+      d="M15.67 3.072H2.33c-.818 0-1.482.664-1.482 1.482v8.892c0 .819.664 1.482 1.482 1.482H15.67c.819 0 1.482-.663 1.482-1.482V4.554c0-.818-.663-1.482-1.482-1.482ZM.85 7.519H17.15"
+    />
+  </svg>
+)
+export default CreditCardIcon

src/components/icons/info.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+const InfoIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" fill="none" {...props}>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7.5 14.25a6.25 6.25 0 1 0 0-12.5 6.25 6.25 0 0 0 0 12.5ZM7.5 10.5V8M7.5 5.5h.006"
+    />
+  </svg>
+)
+export default InfoIcon

src/components/pricing/sections/cost-calculator/cost-calculator.module.scss

@@ -0,0 +1,66 @@
+.tooltip-content {
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-state='delayed-open'][data-side='top'] {
+    animation-name: slideDownAndFade;
+  }
+  &[data-state='delayed-open'][data-side='right'] {
+    animation-name: slideLeftAndFade;
+  }
+  &[data-state='delayed-open'][data-side='bottom'] {
+    animation-name: slideUpAndFade;
+  }
+  &[data-state='delayed-open'][data-side='left'] {
+    animation-name: slideRightAndFade;
+  }
+}
+
+.cypress-card-gr {
+  background: linear-gradient(148deg, #fff 2.94%, rgba(229, 231, 235, 0.86) 177.85%);
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}