import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Shield, EyeOff, Lock } from "lucide-react"; import { motion } from "framer-motion"; export default function HidePaymentsPage() { return ( <div className="min-h-screen bg-white flex flex-col items-center px-4 py-8"> {/* Hero Section */} <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-center max-w-lg" > <h1 className="text-2xl font-bold mb-2">🔒 Your Payments, Your Privacy</h1> <p className="text-gray-600 mb-4"> Keep your transactions private with <span className="font-semibold">Hide Payments</span>. </p> <Button className="rounded-2xl px-6 py-2 text-base">Try Hide Payments</Button> </motion.div> {/* Why Use Section */} <div className="mt-10 grid gap-4 max-w-lg w-full"> <h2 className="text-lg font-semibold text-center mb-2">Why Use Hide Payments?</h2> <Card className="shadow-md rounded-2xl"> <CardContent className="flex items-center gap-3 p-4"> <EyeOff className="text-blue-600" /> <p className="text-gray-700">Hide selected transactions in your passbook.</p> </CardContent> </Card> <Card className="shadow-md rounded-2xl"> <CardContent className="flex items-center gap-3 p-4"> <Lock className="text-green-600" /> <p className="text-gray-700">Hidden payments are secure & visible only to you.</p> </CardContent> </Card> <Card className="shadow-md rounded-2xl"> <CardContent className="flex items-center gap-3 p-4"> <Shield className="text-purple-600" /> <p className="text-gray-700">Unhide anytime in just with secure check.</p> </CardContent> </Card> </div> {/* How It Works */} <div className="mt-10 max-w-lg w-full text-center"> <h2 className="text-lg font-semibold mb-3">How It Works</h2> <ol className="space-y-3 text-gray-700 text-left"> <li>1️⃣ Go to <span className="font-medium">Passbook</span></li> <li>2️⃣ Select the transaction you want to hide</li> <li>3️⃣LeftSwipe & Tap <span className="font-medium">Hide Payment</span> → Done!</li> </ol> <p className="mt-2 text-sm text-gray-500">(You can unhide anytimewith secure check)</p> </div> {/* Trust Section */} <div className="mt-10 max-w-lg text-center"> <h2 className="text-lg font-semibold mb-2">Safe & Trusted</h2> <p className="text-gray-600"> Hidden payments are encrypted & secure. Paytm is trusted by <b>45 Cr+ Indians</b>. </p </div> {/* Final CTA */} <div className="mt-10"> <Button className="rounded-2xl px-6 py-2 text-base">Make Payment & Use Hide Payments Now</Button> </div> </div> ); }