"use client" import { useState } from "react" import { motion } from "framer-motion" /** * CryptoStake Component * * A component that allows users to stake USDC cryptocurrency * with a fixed APR and lock-in period. */ export function CryptoStake() { // State for input value const [stakeAmount, setStakeAmount] = useState("") // Fixed values from the design const apr = 24 const lockPeriod = 30 // days const availableBalance = 500 // USDC const totalStaked = "50,000" // USDC // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.4 }, }, } const buttonVariants = { initial: { scale: 1 }, hover: { scale: 1.02, transition: { duration: 0.2 } }, tap: { scale: 0.98, transition: { duration: 0.1 } }, } const iconVariants = { hidden: { scale: 0.8, opacity: 0 }, visible: { scale: 1, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.1 } }, } return ( {/* Header with icon */} $

Stake USDC

{/* APR Display */}

{apr}% APR

{/* Available Balance */} Avl. balance: {availableBalance} USDC {/* Stake Amount Input */}

setStakeAmount(e.target.value)} placeholder="Enter amount" className="bg-transparent border-none outline-none w-full text-white placeholder-gray-500" />

{/* Staking Details */}

Lock in time

{lockPeriod} Days

Total Staked

{totalStaked} USDC

{/* Stake Button */} Stake USDC ) }

Crypto Stake

Stake USDC