"use client" import React, { useState } from "react" import { motion, AnimatePresence, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" import { HugeiconsIcon } from "@hugeicons/react" import { ArrowLeft01Icon, Tick02Icon, ArrowLeft02Icon, } from "@hugeicons/core-free-icons" import { SlideToUnlock, SlideToUnlockHandle, SlideToUnlockText, SlideToUnlockTrack, } from "./slide-subscribe-unlock" import { ShimmeringText } from "./slide-subscribe-shimmer" interface PricingOption { id: string title: string price: string trial: string yearlyPrice?: string } const pricingOptions: PricingOption[] = [ { id: "pro-yearly", title: "سالانه", price: "۹۹٬۰۰۰ تومان/ماه", trial: "۱۴ روز آزمایش رایگان", yearlyPrice: "۸۹۸٬۰۰۰ تومان/سال", }, { id: "pro-monthly", title: "ماهانه", price: "۱۴۹٬۰۰۰ تومان/ماه", trial: "۷ روز آزمایش رایگان", }, { id: "enterprise", title: "سازمانی", price: "توافقی", trial: "برای قیمت تماس بگیرید", }, ] const easeOut = [0.32, 0.72, 0, 1] as const export default function SlideSubscribe() { const [selected, setSelected] = useState("pro-yearly") const [isUnlocked, setIsUnlocked] = useState(false) const reduce = useReducedMotion() ?? false return (

{!isUnlocked ? (

{pricingOptions.map((option) => ( setSelected(option.id)} /> ))}

بدون ریسک. هر وقت خواستید با یک کلیک لغو کنید.

) : (

اشتراک شما فعال شد دوره آزمایشی اشتراک شما شروع شد. برای ادامه، ایمیلتان را بررسی کنید.

)}

{!isUnlocked ? ( setIsUnlocked(true)} className="w-full overflow-hidden rounded-2xl bg-primary p-1 shadow-lg ring-0" > {({ isDragging }) => ( )} ) : ( setIsUnlocked(false)} className={cn( "group flex h-14 w-full cursor-pointer items-center justify-center gap-2 rounded-2xl font-medium shadow-md", "bg-primary text-primary-foreground", )} > بازگشت به داشبورد )}

) } function PricingCard({ option, isSelected, onSelect, }: { option: PricingOption isSelected: boolean onSelect: () => void }) { return ( ) }

{option.title}