+
+
+ {upgradePlanData.map((item, index) => {
+ const IconComponent = item.icon;
+ return (
+
+
+
+
+
+
+
{item.title}
+
{item.description}
+
+
+
+ );
+ })}
+
+
+
+ {/* Centered Dot Navigation */}
+
+ {Array.from({ length: count }, (_, index) => (
+
+
+ );
+};
+
+export default UpgradePlanCarousel;
diff --git a/resources/js/modules/upgrade/upgrade-sheet.jsx b/resources/js/modules/upgrade/upgrade-sheet.jsx
new file mode 100644
index 0000000..a2e4774
--- /dev/null
+++ b/resources/js/modules/upgrade/upgrade-sheet.jsx
@@ -0,0 +1,198 @@
+// resources/js/Pages/User/Partials/upgrade-sheet.jsx
+import { SparklesText } from '@/components/magicui/sparkles-text';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { Spinner } from '@/components/ui/spinner.js';
+import { useMitt } from '@/plugins/MittContext';
+import CartIcon from '@/reusables/cart-icon.jsx';
+import CoinIcon from '@/reusables/coin-icon.jsx';
+import usePricingStore from '@/stores/PricingStore.js';
+import { useEffect, useState } from 'react';
+import UpgradePlanCarousel from './partials/upgrade-plan-carousel.tsx';
+
+const UpgradeSheet = () => {
+ const { subscription, one_times, isFetchingPricing, fetchPricing, isCheckingOut, checkoutSubscribe } = usePricingStore();
+
+ // State to control sheet visibility
+ const [isOpen, setIsOpen] = useState(false);
+
+ // Get mitt emitter
+ const emitter = useMitt();
+
+ useEffect(() => {
+ fetchPricing();
+ }, []);
+
+ // FAQ data array
+ const faqData = [
+ {
+ q: "What's included in the $4/m Personal Creator Plan?",
+ a: 'This $4/m plan includes 50 non-watermark videos for export (8¢ per video), which is sufficient for every creator to post almost twice a day.