261 lines
12 KiB
TypeScript
261 lines
12 KiB
TypeScript
"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; |