About
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.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card to your project and fits it to your theme.
Code
How Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
// 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://cdn.21st.dev/assets/mirror/ad/ad826b9a6714a4a22f0cee591e20c764d475dc3b3af3bda1d24e8356cb35a08a.jpg"
className="font-sans"
/>
</div>
);
};
export default TravelRouteCardDemo;