Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-07 21:25:17 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: minor changes in animation

Browse Source
This commit is contained in:
eshanized
2025-01-11 22:57:03 +05:30
parent 995740c287
commit aa1bbe44b4
1 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/home/TestimonialCard.tsx
View File

@@ -13,33 +13,54 @@ export function TestimonialCard({ content, author, role, delay = 0 }: Testimonia
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ delay, duration: 0.6, ease: "easeOut" }} transition={{ delay, duration: 0.8, ease: "easeOut" }}
whileHover={{ whileHover={{
scale: 1.05, scale: 1.05,
boxShadow: "0 12px 24px rgba(0, 0, 0, 0.15)", boxShadow: "0 12px 24px rgba(0, 0, 0, 0.15)",
rotate: 2, // Add subtle rotation effect on hover
}} }}
className="relative bg-white rounded-xl shadow-lg p-8 transition-transform duration-300 group" className="relative bg-white rounded-xl shadow-lg p-8 transition-transform duration-300 group"
> >
{/* Floating quote icon */} {/* Floating quote icon */}
<div className="absolute -top-4 -right-4 bg-cornflower-blue/10 p-3 rounded-full"> <motion.div
className="absolute -top-4 -right-4 bg-cornflower-blue/10 p-3 rounded-full"
initial={{ scale: 0 }}
whileInView={{ scale: 1 }}
transition={{ delay: 0.3, duration: 0.5, ease: "easeOut" }}
>
<Quote className="h-10 w-10 text-cornflower-blue/40 group-hover:scale-110 transition-transform duration-300" /> <Quote className="h-10 w-10 text-cornflower-blue/40 group-hover:scale-110 transition-transform duration-300" />
</div> </motion.div>
{/* Testimonial content */} {/* Testimonial content */}
<p className="text-gray-600 text-lg leading-relaxed mb-6"> <motion.p
className="text-gray-600 text-lg leading-relaxed mb-6"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 0.2 + delay, duration: 0.8 }}
>
<span className="italic text-cornflower-blue/80 font-medium">“</span> <span className="italic text-cornflower-blue/80 font-medium">“</span>
{content} {content}
<span className="italic text-cornflower-blue/80 font-medium">”</span> <span className="italic text-cornflower-blue/80 font-medium">”</span>
</p> </motion.p>
{/* Author details */} {/* Author details */}
<div className="flex flex-col items-start"> <motion.div
className="flex flex-col items-start"
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 + delay, duration: 0.6 }}
>
<p className="text-gray-900 font-semibold text-lg">{author}</p> <p className="text-gray-900 font-semibold text-lg">{author}</p>
<p className="text-sm text-gray-500">{role}</p> <p className="text-sm text-gray-500">{role}</p>
</div> </motion.div>
{/* Subtle background gradient */} {/* Subtle background gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-cornflower-blue/5 via-cornflower-blue/10 to-cornflower-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-lg" /> <motion.div
className="absolute inset-0 bg-gradient-to-br from-cornflower-blue/5 via-cornflower-blue/10 to-cornflower-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-lg"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 0.5 + delay, duration: 0.6 }}
/>
</motion.div> </motion.div>
); );
} }