Ui enhancemet pricing section

Author: hanuchaudhary

app/page.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function LandingEmerlandButton({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <button className="border-emerald-600 hover:bg-emerald-600 transition-colors duration-300 border px-4 py-2 font-semibold rounded-xl text-sm">
+      {children}
+    </button>
+  );
+}

components/LandingComponents/LandingEmerlandButton.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import React from "react";
+import { motion } from "framer-motion";
+import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
+import LandingEmerlandButton from "./LandingEmerlandButton";
+
+export interface PricingCardProps {
+  title: string;
+  description: string;
+  price: string;
+  features: string[];
+  classname?: string;
+}
+
+export default function PricingCard({
+  title,
+  description,
+  price,
+  features,
+  classname
+}: PricingCardProps) {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.05 }}
+    >
+      <Card className={`${classname} rounded-2xl h-full flex flex-col justify-between`}>
+        <CardHeader>
+          <motion.h1
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="text-emerald-600 text-xl font-semibold"
+          >
+            {title}
+          </motion.h1>
+        </CardHeader>
+
+        <CardContent>
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mb-10 flex flex-col items-start justify-center"
+          >
+            <div>
+              {price !== "Free" && (
+                <p className="text-sm text-neutral-200">
+                  pause or cancel anytime
+                </p>
+              )}
+              <h1 className="text-4xl font-bold pb-4">{price}</h1>
+            </div>
+            <p className="description text-xs text-neutral-200">{description}</p>
+          </motion.div>
+          <motion.ul className="space-y-1">
+            {features.map((feature, index) => (
+              <motion.li
+                key={feature}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.1 }}
+                className="flex gap-2 text-sm"
+              >
+                <img src="/pricingtick.svg" alt="" /> <span>{feature}</span>
+              </motion.li>
+            ))}
+          </motion.ul>
+        </CardContent>
+        <CardFooter>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+          >
+            {price !== "Free" ? (
+              <LandingEmerlandButton>Buy Now</LandingEmerlandButton>
+            ) : (
+              <LandingEmerlandButton>Start Free Trial</LandingEmerlandButton>
+            )}
+          </motion.div>
+        </CardFooter>
+      </Card>
+    </motion.div>
+  );
+}
+

components/LandingComponents/PricingCard.tsx

@@ -18,6 +18,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        
       },
       size: {
         default: "h-10 px-4 py-2",

components/ui/button.tsx

@@ -17,7 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.5.1",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^11.16.0",
     "lucide-react": "^0.469.0",
     "next": "15.1.2",
     "react": "^19.0.0",