From 36b121a21e5cccaf0a6d2e86dacca24e7a74fa6e Mon Sep 17 00:00:00 2001
From: Adspillar <mask.shakill@gmail.com>
Date: Tue, 7 Oct 2025 14:54:55 +0600
Subject: [PATCH] remove pricing table

---
 src/components/landing/CommissionDetails.tsx |  2 +-
 src/components/landing/FAQ.tsx               | 73 +++++++++++---------
 src/components/landing/PricingTable.tsx      | 51 --------------
 src/pages/Landing.tsx                        |  2 -
 4 files changed, 40 insertions(+), 88 deletions(-)
 delete mode 100644 src/components/landing/PricingTable.tsx

diff --git a/src/components/landing/CommissionDetails.tsx b/src/components/landing/CommissionDetails.tsx
index 8aae21f..efc57da 100644
--- a/src/components/landing/CommissionDetails.tsx
+++ b/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">
diff --git a/src/components/landing/FAQ.tsx b/src/components/landing/FAQ.tsx
index 8e84325..6705259 100644
--- a/src/components/landing/FAQ.tsx
+++ b/src/components/landing/FAQ.tsx
@@ -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>
diff --git a/src/components/landing/PricingTable.tsx b/src/components/landing/PricingTable.tsx
deleted file mode 100644
index 6e3193a..0000000
--- a/src/components/landing/PricingTable.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index aa9468c..a06dcce 100644
--- a/src/pages/Landing.tsx
+++ b/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/>