Components
StarshipCard Component This component is a self-contained, animated card. It uses framer-motion for smooth animations and is styled with Tailwind CSS, adhering to shadcn/ui theme variables for perfect light/dark mode compatibility.
Loading preview...
import { StarshipCard } from "@/components/ui/starship-card-component"; // Adjust the import path as needed
/**
* A demo page to showcase the StarshipCard component.
*/
export default function StarshipCardDemo() {
return (
<div className="flex h-[100vh] w-full items-center justify-center bg-background p-4 md:p-8">
<StarshipCard
logoSrc="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/SpaceX-Logo.svg/2560px-SpaceX-Logo.svg.png" // White SpaceX logo
imageSrc="https://images.unsplash.com/photo-1628126235206-5260b9ea6441?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3BhY2VzaGlwfGVufDB8fDB8fHww"
title="Starship"
description="The Frontier of Multiplanetary Travel."
buttonText="Explore More"
buttonLink="#"
/>
</div>
);
}