"use client";
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { ChevronDown, ChevronUp, Check, HelpCircle, ShieldCheck, Zap, Smartphone, Globe } from 'lucide-react';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';
const PricingCard = ({ title, description, features }) => {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="group relative border border-gray-800 rounded-xl p-8 bg-gray-900/20 transition-all duration-500 overflow-hidden hover:scale-105"
>
<div className="relative z-10">
<h3 className="text-2xl font-semibold text-white mb-4">{title}</h3>
<p className="text-gray-400 mb-6">{description}</p>
<div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
<div className="space-y-4">
{features.map((feature, index) => (
<div key={index} className="flex items-center gap-5">
<Check className="w-5 h-5 text-purple-500" />
<span className="text-gray-300">{feature}</span>
</div>
))}
</div>
<div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
<div className="w-full py-4 flex items-center justify-between">
<p className="text-gray-300">For Price : </p>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.98 }}
className="px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500 w-fit"
>
Contact Us
</motion.button>
</div>
</div>
<motion.div
className="absolute inset-0 rounded-2xl transition-opacity duration-500
bg-gradient-to-br from-pink-500/50 to-purple-500/50
opacity-0 blur-3xl scale-125
group-hover:opacity-20"
/>
</motion.div>
);
};
const FAQ = ({ question, answer }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<motion.div
className="border-b border-gray-800 py-4"
initial={false}
>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex justify-between items-center w-full text-left"
>
<span className="text-white text-lg">{question}</span>
{isOpen ? (
<ChevronUp className="w-5 h-5 text-purple-500" />
) : (
<ChevronDown className="w-5 h-5 text-purple-500" />
)}
</button>
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 }}
transition={{ duration: 0.3 }}
className="overflow-hidden"
>
<p className="text-gray-400 pt-4">{answer}</p>
</motion.div>
</motion.div>
);
};
const PricingPage = () => {
const pricingPlans = [
{
title: "Basic",
description: "We consider all the drivers of time & change gives the blocks.",
features: [
"Full Access to Copler",
"100 GB Free Storage",
"Unlimited Visitors",
"10 Agents",
"Live Chat Support"
]
},
{
title: "Premium",
description: "We consider all the drivers of time & change gives the blocks.",
features: [
"Full Access to Copler",
"100 GB Free Storage",
"Unlimited Visitors",
"10 Agents",
"Live Chat Support"
]
}
];
const faqs = [
{
question: "How many items are there in this list?",
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
},
{
question: "Can you describe Newleaf in just one sentence?",
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
},
{
question: "Can I use this template for my client?",
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
},
{
question: "Do you offer templates in other categories?",
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
},
{
question: "Do I need to credit you when I use this template?",
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
}
];
return (
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
<Navbar />
{/* Hero Section */}
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-6xl mx-auto text-center pt-20"
>
<motion.h1 className="text-7xl text-white mb-6">
Pricing
<span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">
{" "}Plans{" "}
</span>
</motion.h1>
<motion.p className="text-gray-400 text-xl max-w-3xl mx-auto">
Efficiently manage and resolve customer issues, improve satisfaction and boost your bottom line with our all-in-one customer support solution.
</motion.p>
</motion.section>
{/* Pricing Cards */}
<motion.section className="max-w-6xl mx-auto">
<div className="grid md:grid-cols-2 gap-8">
{pricingPlans.map((plan, index) => (
<PricingCard key={index} {...plan} />
))}
</div>
</motion.section>
{/* Features Section */}
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-6xl mx-auto"
>
<h2 className="text-4xl text-white mb-8">Features you don't want to miss</h2>
<div className="grid md:grid-cols-2 gap-8">
{[
{
title: "Secure Payments",
desc: "Ensure end-to-end security for all your transactions with industry-leading encryption.",
icon: <ShieldCheck className="w-8 h-8 text-white" />,
gradient: "from-blue-500 to-cyan-500",
},
{
title: "Fast Transactions",
desc: "Process payments in seconds, reducing wait times and improving efficiency.",
icon: <Zap className="w-8 h-8 text-white" />,
gradient: "from-pink-500 to-red-500",
},
{
title: "User-Friendly Interface",
desc: "Designed with simplicity in mind, making transactions seamless for everyone.",
icon: <Smartphone className="w-8 h-8 text-white" />,
gradient: "from-green-500 to-teal-500",
},
{
title: "Global Accessibility",
desc: "Access and send payments from anywhere in the world, instantly.",
icon: <Globe className="w-8 h-8 text-white" />,
gradient: "from-yellow-500 to-orange-500",
},
].map((feature, index) => (
<div
key={index}
className="relative p-6 border border-gray-800 rounded-xl bg-gray-900/20 transition-all duration-500 group overflow-hidden flex items-start gap-4"
>
{/* Icon Container */}
<div className={`p-3 bg-gray-900 rounded-lg ${feature.gradient}`}>{feature.icon}</div>
{/* Text Content */}
<div>
<h3 className={`text-xl font-medium text-transparent bg-clip-text bg-gradient-to-r ${feature.gradient}`}>
{feature.title}
</h3>
<p className="text-gray-400">{feature.desc}</p>
</div>
{/* Soft Glow Effect */}
<div
className={`absolute inset-0 rounded-xl opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20 bg-gradient-to-br ${feature.gradient}`}
/>
</div>
))}
</div>
</motion.section>
<motion.div>
<p className="max-w-6xl mx-auto text-gray-400">
Efficiently manage and resolve customer issues, improve satisfaction and boost your bottom line with our all-in-one customer support solution. Get the safest way of making online payment & save countless hours of losing money.
</p>
{/* <motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.98 }}
className="px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500 w-fit"
>
Contact Us
</motion.button> */}
</motion.div>
{/* FAQ Section */}
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-6xl mx-auto"
>
<div className="grid md:grid-cols-2 gap-16">
<div>
<h2 className="text-4xl text-white mb-8 flex items-start gap-3">
<HelpCircle className="w-8 h-8 text-purple-500" />
Get answers to some common questions!
</h2>
<p className="text-gray-400">
We've curated answers to some of our most frequently asked questions to help you find the information you need quickly and easily.
</p>
</div>
<div className="space-y-2">
{faqs.map((faq, index) => (
<FAQ key={index} {...faq} />
))}
</div>
</div>
</motion.section>
<Footer />
</div>
);
};
export default PricingPage;