Components
Loading preview...
A versatile card component with an unorthodox shape. For the disclaimer, credit information, and Vue version, please visit https://namer-ui-for-vue.netlify.app/components/inflected-card This component (Next.js version) is also available on Namer UI https://namer-ui.netlify.app
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/inflected-card// InflectedCardDemo.tsx
// Demo showcase for the InflectedCard component
import React from "react";
import { InflectedCard } from "@/components/ui/inflected-card";
import {
FaApple,
FaAndroid,
FaArrowUp,
FaRegSmile,
FaMobileAlt,
FaTags,
FaCamera,
FaGift
} from "react-icons/fa";
const InflectedCardDemo = () => (
<section>
{/* DARK THEME CARDS */}
<div className="bg-[#0a0a0a] min-h-[300px] flex flex-wrap gap-8 items-center justify-center relative py-10 rounded-lg">
<InflectedCard
id="0"
image="https://images.pexels.com/photos/18525574/pexels-photo-18525574/free-photo-of-unboxing-iphone-15-pro-max-box-in-natural-titanium-color-mention-zana_qaradaghy-on-instagram-while-use-this-photo-follow-on-instagram-zana_qaradaghy.jpeg"
title="iPhone 15 Pro"
description="Titanium smartphone with an advanced camera system, offering stunning photography capabilities and a sleek design."
tags={[
{ name: "Pre-owned", textColor: "#f7f7ff", backgroundColor: "#00A6FB", rounding: 16 },
{ name: "50% off", textColor: "#242424", backgroundColor: "#f1f1f7", rounding: 16 },
]}
parentBackgroundColor="#050505"
onClick={(target, id) => console.log(`Clicked ${target} on card ${id}`)}
onHover={(target, id) => console.log(`Hovering over ${target} on card ${id}`)}
cardRounding={15}
fontSizes={{ title: "1.8rem", description: "1rem", tags: "0.85rem", price: "1.12rem" }}
margins={{ title: "0 0 7px 0", description: "0 0 18px 0", tags: "10px 0 0 0" }}
buttonIcon={<FaMobileAlt />}
buttonIconSize={32}
buttonIconColor="#ffffff"
buttonIconHoverColor="#EEEEEE"
buttonBackgroundColor="#00A6FB"
buttonBackgroundHoverColor="#0582CA"
maxWidth="500px"
price="$499"
priceTagTextColor="#0A0A0A"
oldPrice="$991"
oldPriceTextColor="#565656"
priceTagRounding="6px"
priceTagBackgroundColor="rgba(255,255,255,0.78)"
/>
</div>
{/* LIGHT THEME CARDS */}
<div className="bg-[#f8f8fa] min-h-[300px] flex flex-wrap gap-8 items-center justify-center relative p-10 rounded-lg mt-10">
{/* Card 1: iPhone 15 Pro, uses FaApple icon, EN */}
<InflectedCard
id="4"
image="https://images.pexels.com/photos/18525574/pexels-photo-18525574/free-photo-of-unboxing-iphone-15-pro-max-box-in-natural-titanium-color-mention-zana_qaradaghy-on-instagram-while-use-this-photo-follow-on-instagram-zana_qaradaghy.jpeg"
title="iPhone 15 Pro"
description="Titanium smartphone with an advanced camera system, offering stunning photography capabilities and a sleek design."
tags={[
{ name: "Brand new", textColor: "#181818", backgroundColor: "#E0C3FC", rounding: 5 },
{ name: "10% off", textColor: "#181818", backgroundColor: "#b49ad7", rounding: 5 }, // 20% darker than #f5e6ff
]}
parentBackgroundColor="#f8f8fa"
onClick={(target, id) => console.log(`Clicked ${target} on card ${id}`)}
onHover={(target, id) => console.log(`Hovering over ${target} on card ${id}`)}
cardRounding={15}
fontSizes={{ title: "1.8rem", description: "1rem", tags: "0.85rem", price: "0.84rem" }}
margins={{ title: "0 0 7px 0", description: "0 0 18px 0", tags: "10px 0 0 0" }}
buttonIcon={<FaApple />}
buttonIconSize={32}
buttonIconColor="#181818"
buttonIconHoverColor="#fff"
buttonBackgroundColor="#E0C3FC"
buttonBackgroundHoverColor="#bca1e7"
maxWidth="500px"
price="$1,079"
priceTagTextColor="#222"
oldPriceTextColor="#555"
oldPrice="$1,199"
priceTagRounding="25px"
priceTagBackgroundColor="#f5e6ff"
titleColor="#181818"
descriptionColor="#565656"
titleAlignment="center"
descriptionAlignment="center"
tagsAlignment="center"
imageHoverScale={1.4}
/>
{/* Card 2: Galaxy Flip 6, uses FaAndroid icon, HEBREW RTL */}
<InflectedCard
id="5"
image="https://images.unsplash.com/photo-1721864428881-dbabb9ea0017?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
title="סמסונג גלקסי פליפ 6"
description="טלפון מתקפל חדשני עם עיצוב דקיק, תצוגה גדולה, ומאפשר חוויית צפייה וסביבת עבודה מרובת משימות."
tags={[
{ name: "יד שניה", textColor: "#181818", backgroundColor: "#A2F9B8", rounding: 0 },
{ name: "50% הנחה", textColor: "#181818", backgroundColor: "#6ccf8f", rounding: 0 }, // 20% darker than #e1fbe6
]}
parentBackgroundColor="#f8f8fa"
onClick={(target, id) => console.log(`Clicked ${target} on card ${id}`)}
onHover={(target, id) => console.log(`Hovering over ${target} on card ${id}`)}
cardRounding={15}
fontSizes={{ title: "1.8rem", description: "1rem", tags: "0.85rem", price: "1.12rem" }}
margins={{ title: "0 0 7px 0", description: "0 0 18px 0", tags: "10px 0 0 0" }}
buttonIcon={<FaAndroid />}
buttonIconSize={32}
buttonIconColor="#181818"
buttonIconHoverColor="#fff"
buttonBackgroundColor="#A2F9B8"
buttonBackgroundHoverColor="#7ee6a2"
maxWidth="500px"
imageHoverZoom={1.1}
price="₪1,499"
priceTagTextColor="#181818"
oldPrice="₪2,999"
oldPriceTextColor="#565656"
priceTagRounding="6px"
priceTagBackgroundColor="#e1fbe6"
titleColor="#181818"
descriptionColor="#565656"
mirrored={true}
titleAlignment="right"
descriptionAlignment="right"
tagsAlignment="right"
/>
</div>
</section>
);
export { InflectedCardDemo };