remove pricing table

src/components/landing/CommissionDetails.tsx

@@ -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">

src/components/landing/FAQ.tsx

@@ -1,5 +1,4 @@
-import { useState } from "react"
+import { useState, useRef, useEffect } from "react"
-import { motion, AnimatePresence } from "framer-motion"
 
 interface FAQItem {
   question: string
@@ -60,8 +59,20 @@ export function FAQ() {
 
         {/* FAQ Items */}
         <div className="space-y-4">
-          {faqs.map((faq, index) => (
+          {faqs.map((faq, index) => {
-            <motion.div
+            const contentRef = useRef<HTMLDivElement>(null)
+
+            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"
               >
@@ -71,29 +82,23 @@ export function FAQ() {
                 >
                   <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"
+                    className={`w-8 h-8 flex items-center justify-center text-white font-bold rounded-full transition-transform duration-300`}
-                  style={{ backgroundColor: "#5e4bbf" }}
+                    style={{ backgroundColor: "#5e4bbf", transform: isOpen ? "rotate(45deg)" : "rotate(0deg)" }}
                   >
-                  {openIndex === index ? "-" : "+"}
+                    +
                   </span>
                 </button>
 
-              <AnimatePresence initial={false}>
+                <div
-                {openIndex === index && (
+                  ref={contentRef}
-                  <motion.div
+                  style={{ height }}
-                    key="content"
+                  className="px-6 overflow-hidden transition-height duration-300 ease-in-out"
-                    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"
                 >
-                    <p>{faq.answer}</p>
+                  <p className="pb-6 text-gray-700 leading-relaxed bg-white/50 backdrop-blur-md">{faq.answer}</p>
-                  </motion.div>
+                </div>
-                )}
+              </div>
-              </AnimatePresence>
+            )
-            </motion.div>
+          })}
-          ))}
         </div>
       </div>
     </section>

src/components/landing/PricingTable.tsx

@@ -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>
-  )
-}

src/pages/Landing.tsx

@@ -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/>