remove pricing table
This commit is contained in:
Adspillar
parent
457d5227a5
commit
36b121a21e
4 changed files with 40 additions and 88 deletions
|
|
@ -3,7 +3,7 @@ export default function CommissionDetails() {
|
|||
<section className="py-24 px-6 bg-white">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#5b48b0] mb-6">
|
||||
Maximize Your Earnings
|
||||
</h2>
|
||||
<p className="text-xl text-gray-700 max-w-3xl mx-auto">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { useState } from "react"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import { useState, useRef, useEffect } from "react"
|
||||
|
||||
interface FAQItem {
|
||||
question: string
|
||||
|
|
@ -60,40 +59,46 @@ export function FAQ() {
|
|||
|
||||
{/* FAQ Items */}
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-all"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleFAQ(index)}
|
||||
className="w-full flex items-center justify-between p-6 text-left text-gray-900 bg-white hover:bg-gray-50 transition-colors duration-300"
|
||||
>
|
||||
<h3 className="text-lg md:text-xl font-semibold pr-4">{faq.question}</h3>
|
||||
<span
|
||||
className="w-8 h-8 flex items-center justify-center text-white font-bold rounded-full transition-all"
|
||||
style={{ backgroundColor: "#5e4bbf" }}
|
||||
>
|
||||
{openIndex === index ? "-" : "+"}
|
||||
</span>
|
||||
</button>
|
||||
{faqs.map((faq, index) => {
|
||||
const contentRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{openIndex === index && (
|
||||
<motion.div
|
||||
key="content"
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="px-6 pb-6 text-gray-700 leading-relaxed bg-white/50 backdrop-blur-md"
|
||||
const isOpen = openIndex === index
|
||||
const [height, setHeight] = useState("0px")
|
||||
|
||||
useEffect(() => {
|
||||
if (contentRef.current) {
|
||||
setHeight(isOpen ? `${contentRef.current.scrollHeight}px` : "0px")
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-all"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleFAQ(index)}
|
||||
className="w-full flex items-center justify-between p-6 text-left text-gray-900 bg-white hover:bg-gray-50 transition-colors duration-300"
|
||||
>
|
||||
<h3 className="text-lg md:text-xl font-semibold pr-4">{faq.question}</h3>
|
||||
<span
|
||||
className={`w-8 h-8 flex items-center justify-center text-white font-bold rounded-full transition-transform duration-300`}
|
||||
style={{ backgroundColor: "#5e4bbf", transform: isOpen ? "rotate(45deg)" : "rotate(0deg)" }}
|
||||
>
|
||||
<p>{faq.answer}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
))}
|
||||
+
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
ref={contentRef}
|
||||
style={{ height }}
|
||||
className="px-6 overflow-hidden transition-height duration-300 ease-in-out"
|
||||
>
|
||||
<p className="pb-6 text-gray-700 leading-relaxed bg-white/50 backdrop-blur-md">{faq.answer}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
export function PricingTable() {
|
||||
const rows = [
|
||||
{ referrals: "1 Referral", order: "1 monthly Gold Subscription", earn: "$24 / month" },
|
||||
{ referrals: "1 Referral", order: "1 monthly Diamond Subscription", earn: "$58 / month" },
|
||||
{ referrals: "2 Referrals", order: "2 monthly Gold Subscriptions", earn: "$48 / month" },
|
||||
{ referrals: "5 Referrals", order: "5 monthly Diamond Subscriptions", earn: "$290 / month" },
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="relative py-28 px-8 ">
|
||||
{/* Decorative Glow */}
|
||||
<div className="absolute -top-40 left-0 h-96 w-96 bg-white/10 blur-3xl" />
|
||||
<div className="absolute bottom-0 right-0 h-80 w-80 bg-white/10 blur-3xl" />
|
||||
|
||||
<div className="relative z-10 max-w-5xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-12 text-center text-white drop-shadow-lg">
|
||||
How much can you get paid?
|
||||
</h2>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse ">
|
||||
<thead>
|
||||
<tr className="bg-white/10 backdrop-blur-md border-b border-white/30">
|
||||
<th className="text-left py-4 px-6 text-white font-medium">Referrals:</th>
|
||||
<th className="text-left py-4 px-6 text-white font-medium">They order:</th>
|
||||
<th className="text-left py-4 px-6 text-white font-medium">You earn:</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className=" shadow-lg hover:bg-white/10 transition-all "
|
||||
>
|
||||
<td className="py-4 px-6 text-white">{row.referrals}</td>
|
||||
<td className="py-4 px-6 text-white">{row.order}</td>
|
||||
<td className="py-4 px-6 font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffffff] via-[#f0f0ff] to-[#b28eff]">
|
||||
{row.earn}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -9,7 +9,6 @@ import { HowItWorks } from "@/components/landing/HowItWorks";
|
|||
import { Navigation } from "@/components/landing/Navigation";
|
||||
import PartnerTypes from "@/components/landing/PartnerTypes";
|
||||
|
||||
import { PricingTable } from "@/components/landing/PricingTable";
|
||||
import Resources from "@/components/landing/Resources";
|
||||
import Stats from "@/components/landing/Stats";
|
||||
import { Testimonials } from "@/components/landing/Testimonials";
|
||||
|
|
@ -26,7 +25,6 @@ const Landing: React.FC = () => {
|
|||
<ThreeSteps/>
|
||||
<HowItWorks/>
|
||||
<CommissionDetails/>
|
||||
<PricingTable/>
|
||||
<WhoCanJoin/>
|
||||
<PartnerTypes/>
|
||||
<Benefits/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue