egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Links on homepage
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m29s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 52s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Eric Gullickson
2026-02-15 19:24:03 -06:00
parent bb48c55c2e
commit 1a9081c534
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/pages/HomePage/FeatureCard.tsx
View File

@@ -5,31 +5,34 @@ interface FeatureCardProps {
description: string;
imageSrc: string;
imageAlt: string;
href: string;
}
export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureCardProps) => {
export const FeatureCard = ({ title, description, imageSrc, imageAlt, href }: FeatureCardProps) => {
return (
<motion.div
className="group cursor-pointer"
className="group"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-50px' }}
transition={{ duration: 0.5 }}
whileHover={{ y: -5 }}
>
<div className="overflow-hidden rounded-lg bg-white/5 border border-white/10 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all duration-300">
<div className="relative h-56 overflow-hidden">
<img
src={imageSrc}
alt={imageAlt}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
<a href={href} className="block">
<div className="overflow-hidden rounded-lg bg-white/5 border border-white/10 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all duration-300">
<div className="relative h-56 overflow-hidden">
<img
src={imageSrc}
alt={imageAlt}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
</div>
<div className="p-6">
<h3 className="text-xl font-bold text-avus mb-2">{title}</h3>
<p className="text-titanio leading-relaxed">{description}</p>
</div>
</div>
<div className="p-6">
<h3 className="text-xl font-bold text-avus mb-2">{title}</h3>
<p className="text-titanio leading-relaxed">{description}</p>
</div>
</div>
</a>
</motion.div>
);
};