feat: hover micro-interactions on cards, steps and CTA arrow
Disciplinas cards and Mecanismo/ComoEmpezar steps get a subtle lift + border intensify on hover; the CTA arrow slides right. All gated with motion-reduce so prefers-reduced-motion users see no movement. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
683df7eb4a
commit
43644355ea
4 files changed
+9
-5
No files matched your search
@@ -19,7 +19,8 @@ export function ComoEmpezar() {
|
||||
<motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||
className="mt-12 grid gap-10 md:grid-cols-3">
|
||||
{comoEmpezar.steps.map((step) => (
|
||||
<motion.li key={step.n} variants={fadeInUp} className="border-t border-gold/30 pt-6">
|
||||
<motion.li key={step.n} variants={fadeInUp}
|
||||
className="border-t border-gold/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold/70 motion-reduce:transform-none motion-reduce:transition-none">
|
||||
<div className="font-serif italic font-black text-5xl md:text-6xl text-gold leading-none">{step.n}</div>
|
||||
<h3 className="mt-4 font-sans font-bold text-xl text-ink">{step.name}</h3>
|
||||
<p className="mt-3 text-muted leading-relaxed">{step.desc}</p>
|
||||
|
||||
@@ -18,7 +18,8 @@ export function Disciplinas() {
|
||||
<motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||
className="mt-12 grid gap-8 md:grid-cols-3 list-none p-0">
|
||||
{disciplinas.items.map((item) => (
|
||||
<motion.li key={item.name} variants={fadeInUp} className="border-t-2 border-gold pt-5">
|
||||
<motion.li key={item.name} variants={fadeInUp}
|
||||
className="border-t-2 border-gold pt-5 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-deep motion-reduce:transform-none motion-reduce:transition-none">
|
||||
<h3 className="font-serif italic font-bold text-2xl text-ink">{item.name}</h3>
|
||||
<p className="mt-3 text-muted leading-relaxed">{item.desc}</p>
|
||||
</motion.li>
|
||||
|
||||
@@ -17,7 +17,8 @@ export function Mecanismo() {
|
||||
<motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||
className="mt-12 grid gap-10 md:grid-cols-3">
|
||||
{mecanismo.steps.map((step) => (
|
||||
<motion.li key={step.n} variants={fadeInUp} className="border-t border-gold-bright/30 pt-6">
|
||||
<motion.li key={step.n} variants={fadeInUp}
|
||||
className="border-t border-gold-bright/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-bright/70 motion-reduce:transform-none motion-reduce:transition-none">
|
||||
<div className="font-serif italic font-black text-5xl md:text-6xl text-gold-bright leading-none">{step.n}</div>
|
||||
<h3 className="mt-4 font-sans font-bold text-xl">{step.name}</h3>
|
||||
<p className="mt-3 text-muted-dark leading-relaxed">{step.desc}</p>
|
||||
|
||||
Reference in new issue
Block a user