Components
Loading preview...
Travel Route Card A visually engaging card component to display travel route information with a like interaction. It uses framer-motion for smooth, staggered entrance animations and interactive feedback on hover and click.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/card-7// demo.tsx
import React from 'react';
import { TravelRouteCard } from '@/components/ui/card-7';
const TravelRouteCardDemo = () => {
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<TravelRouteCard
title="Rute dalam kota sekalian wisata"
author="By Pak Eko"
distance="12K"
initialLikes={1527}
imageUrl="https://plus.unsplash.com/premium_photo-1672046217997-4e40a3d7987d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzN8fHJ1bnxlbnwwfHwwfHx8MA%3D%3D?q=80&w=2542&auto=format&fit=crop"
className="font-sans"
/>
</div>
);
};
export default TravelRouteCardDemo;