refactor: extract MeetingButton component

- Create reusable MeetingButton component - Add size and text props for customization - Update Nav and Pricing to use MeetingButton - Adjust button styles and icon size in MeetingButton
ikumar200 · Jan 3, 2025 · a89f89d · a89f89d
1 parent 319ae9d
commit a89f89d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 52 deletions.
diff --git a/src/Challenges.tsx b/src/Challenges.tsx
@@ -6,6 +6,7 @@ import { Link } from "react-router-dom"
 import { Button } from "./components/ui/button"
 import { ArrowRight } from "lucide-react"
 import { cn } from "./utils"
+import MeetingButton from "./MeetingButton"
 // import { Badge } from "@/components/ui/badge"
 
 export default function Challenges() {
@@ -53,26 +54,7 @@ export default function Challenges() {
             If you're deploying agents and running into challenges relating to reliability, safety or performance, we'd love to chat.
           </p>
           <div>
-            <Link to="https://calendly.com/founders-asteroid-hhaf/30min">
-              <Button
-                size="lg"
-                className={cn(
-                  "relative group",
-                  "before:absolute before:inset-0 before:rounded-md before:bg-gradient-to-r before:from-indigo-500 before:to-purple-500",
-                  "before:opacity-100",
-                  "text-white",
-                  "transition-all duration-300",
-                  "hover:scale-105 active:scale-95",
-                  "shadow-lg shadow-indigo-500/25",
-                  "overflow-hidden"
-                )}
-              >
-                <span className="relative z-10 flex items-center font-bold tracking-wide">
-                  Get in touch
-                  <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform duration-300" size={20} />
-                </span>
-              </Button>
-            </Link>
+            <MeetingButton />
           </div>
         </div>
 

diff --git a/src/MeetingButton.tsx b/src/MeetingButton.tsx
@@ -0,0 +1,35 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ArrowRight } from "lucide-react"
+import { Link } from "react-router-dom"
+
+type MeetingButtonProps = {
+  size?: "sm" | "lg"
+  text?: string
+}
+
+export default function MeetingButton({ size = "sm", text = "Book a demo" }: MeetingButtonProps) {
+  return (
+    <Link to="https://calendly.com/founders-asteroid-hhaf/30min">
+      <Button
+        size={size}
+        className={cn(
+          "relative group",
+          "before:absolute before:inset-0 before:rounded-md before:bg-gradient-to-r before:from-indigo-500 before:to-purple-500",
+          "before:opacity-100",
+          "text-white",
+          "transition-all duration-300",
+          "hover:scale-105 active:scale-95",
+          "shadow-lg shadow-indigo-500/25",
+          "overflow-hidden"
+        )}
+      >
+        <span className="relative z-10 flex items-center font-semibold tracking-wide">
+          {text}
+          <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform duration-300" size={16} />
+        </span>
+      </Button>
+    </Link>
+  )
+}
diff --git a/src/Nav.tsx b/src/Nav.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/navigation-menu"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import MeetingButton from "./MeetingButton"
 
 const NavLink = motion(Link)
 
@@ -203,26 +204,7 @@ export default function Nav() {
           "transition-all duration-300",
           showCTA ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
         )}>
-          <Link to="https://calendly.com/founders-asteroid-hhaf/30min">
-            <Button
-              size="sm"
-              className={cn(
-                "relative group",
-                "before:absolute before:inset-0 before:rounded-md before:bg-gradient-to-r before:from-indigo-500 before:to-purple-500",
-                "before:opacity-100",
-                "text-white",
-                "transition-all duration-300",
-                "hover:scale-105 active:scale-95",
-                "shadow-lg shadow-indigo-500/25",
-                "overflow-hidden"
-              )}
-            >
-              <span className="relative z-10 flex items-center font-semibold tracking-wide">
-                Book a demo
-                <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform duration-300" size={16} />
-              </span>
-            </Button>
-          </Link>
+          <MeetingButton />
         </div>
       </div>
     </nav>

diff --git a/src/Pricing.tsx b/src/Pricing.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
 import Page from './components/Page'
 import { Link } from 'react-router-dom'
+import MeetingButton from './MeetingButton'
 const pricingPlans = [
   {
     name: "Developer",
@@ -36,7 +37,7 @@ const pricingPlans = [
       "Automated prompt optimization",
       "Dedicated Slack support channel",
     ],
-    buttonText: "Contact Sales",
+    buttonText: "Contact Us",
     buttonVariant: "primary",
     buttonHref: "mailto:[email protected]",
     highlighted: true,
@@ -54,7 +55,7 @@ const pricingPlans = [
       "Self-hosted deployment options",
       "Dedicated support engineer with SLA",
     ],
-    buttonText: "Contact Sales",
+    buttonText: "Contact Us",
     buttonVariant: "outline",
     buttonHref: "mailto:[email protected]",
     highlighted: false,
@@ -108,16 +109,10 @@ export default function PricingPage() {
               </CardContent>
               <CardFooter className="flex justify-end">
                 <Link to={plan.buttonHref}>
-                  <Button
-                    className={`w-full transition-all duration-300 
-                    ${plan.highlighted
-                        ? 'bg-primary text-primary-foreground hover:bg-primary/90 hover:scale-105'
-                        : 'transition-colors'
-                      }`}
-                    variant={plan.buttonVariant as any}
-                  >
-                    {plan.buttonText}
-                  </Button>
+                  <MeetingButton
+                    size="lg"
+                    text={plan.buttonText}
+                  />
                 </Link>
               </CardFooter>
             </Card>