"use client" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, cardHover, cardHoverTarget, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { formatPrice } from "@/lib/currency" import { Gift, Heart, MessageSquare, Calendar, Send, Sparkles, ChevronRight, Check, } from "lucide-react" const amounts = [42500, 85000, 170000, 255000, 340000, 850000] export default function GiftCards() { return (

Gift Cards

The perfect gift for any occasion

{["Classic", "Birthday", "Thank You"].map((design, di) => (

AN Gift Card

{design}

{design} Design

))}

Customize Your Gift Card

Select Amount

{amounts.map((amt) => ( ))}

From

Recipient Email

Message (optional)

</div>
              <div className="flex items-center gap-2">
                <Calendar className="size-4 text-muted-foreground" />
                <span className="text-sm text-muted-foreground">Deliver on a specific date</span>
              </div>
            </div>

<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total</p>
                <p className="text-2xl font-bold">{formatPrice(170000)}</p>
              </div>
              <div className="flex gap-2">
                <Button variant="outline"><Heart className="mr-2 size-4" />Add Personal Touch</Button>
                <Button><Send className="mr-2 size-4" />Send Gift Card</Button>
              </div>
            </div>
          </Card>
        </motion.div>

<div className="mt-6 flex items-center justify-center gap-6 text-sm text-muted-foreground">
          <span className="flex items-center gap-1"><Check className="size-3.5 text-green-500" />Instant delivery</span>
          <span className="flex items-center gap-1"><Check className="size-3.5 text-green-500" />No expiry</span>
          <span className="flex items-center gap-1"><Check className="size-3.5 text-green-500" />Redeem online or in-store</span>
        </div>

<div className="flex items-center justify-between text-sm text-muted-foreground">
          <p>© 2026 AN Store.</p>
          <div className="flex gap-4">
            <a href="#" className="hover:text-foreground">Gift Card Balance</a>
            <a href="#" className="hover:text-foreground">Terms</a>
          </div>
        </div>
      </div>
    </div>
  )
}
</article></body></html>