Components
Vision Card Description: A visually striking card component that overlays text on a fading gradient, revealing a background image. It includes a subtle hover animation and supports both left and right text alignment for versatile use in hero sections or feature highlights.
Loading preview...
import { VisionCard } from '@/components/ui/card-10'; // Adjust this import path to where you save the component
export default function VisionCardDemo() {
return (
<div className="flex w-full flex-col items-center justify-center gap-8 bg-background p-4 antialiased md:p-8">
{/* Example 1: Text on the left (default) */}
<VisionCard
title="Tailored To Your Vision"
imageUrl="https://images.unsplash.com/photo-1495707800306-e240c5a0d65f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGV5ZXN8ZW58MHx8MHx8fDA%3D?q=80&w=1974&auto=format&fit=crop"
imageAlt="Close-up of a person's eye with a blue and brown iris."
direction="left"
aria-label="A card showing an eye with the text 'Tailored to your vision'"
/>
</div>
);
}