Components
Starting preview...
Glassmorphism Background A sleek, frosted-glass effect with soft blurring and light transparency to create a modern, layered look. 3D Tilt on Hover Adds depth and motion to the card using subtle perspective shifts, mimicking real-world interaction. Glow Effects A faint, elegant glow accentuates edges and calls to action, making the component feel alive and interactive. Smooth Transitions All hover and layout animations use cubic-bezier timing for a fluid and polished experience. Parallax Image Layering The featured image subtly shifts as users move the cursor, creating a premium feel. Badging System Stylish corner tags like "New", "Sale", or "Exclusive" to highlight special product statuses. Interactive Hover States Buttons and elements react with sleek animations and color shifts to guide user action. Typography Focused on Fashion A curated blend of elegant serif titles and clean sans-serif text creates contrast and hierarchy, aligning with modern fashion design trends.
@nakulgupta2004
npx shadcn@latest add https://21st.dev/r/nakulgupta2004/amazing-cardimport * as React from "react";
import { AmazingCard, FashionCardDemo } from "@/components/ui/amazing-card";
// Demo variant showing a single card
export function SingleCardDemo() {
return (
<div className="min-h-screen flex items-center justify-center p-6">
<div className="max-w-[280px]">
<AmazingCard
image="https://images.unsplash.com/photo-1545911825-6bfa5b0c34a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
title="Premium Wool Sweater"
description="Soft and warm premium wool sweater for the coldest winter days."
price="$129.99"
badge="limited"
badgeColor="limited"
/>
</div>
</div>
);
}
// Demo variant showcasing different aspect ratios
export function AspectRatioDemo() {
return (
<div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
<AmazingCard
image="https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
title="Men's Blazer"
price="$199.99"
aspect="portrait"
/>
<AmazingCard
image="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1036&q=80"
title="Designer Sunglasses"
price="$89.99"
aspect="square"
/>
<AmazingCard
image="https://images.unsplash.com/photo-1519415943484-9fa1873496d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
title="Watch Collection"
price="$299.99"
aspect="landscape"
/>
</div>
);
}
// Export all demo variants
export { SingleCardDemo, AspectRatioDemo, FashionCardDemo };
// This component is for local development preview only
const Index = () => {
return (
<div className="min-h-screen">
<AspectRatioDemo />
</div>
);
};
export default Index;