+ }
title="What is Battlesnake?"
desc="Battlesnake is a competitive game where your code is the controller. All you need is a web server that responds to the Battlesnake API."
- cta="What how it works"
+ cta="How it works?"
+ link="https://docs.battlesnake.com/"
/>
{
+ if (isInView) {
+ controls.start("visible");
+ }
+ }, [isInView, controls]);
+
+ // Different animation variants based on the card index for a staggered effect
+ const getVariants = () => {
+ // Alternate between slide-in directions based on index
+ const direction = index % 2 === 0 ? 1 : -1;
+
+ return {
+ hidden: {
+ opacity: 0,
+ x: 60 * direction,
+ y: 20,
+ },
+ visible: {
+ opacity: 1,
+ x: 0,
+ y: 0,
+ transition: {
+ type: "spring",
+ duration: 0.8,
+ delay: index * 0.2, // Stagger effect based on index
+ damping: 15,
+ stiffness: 100,
+ },
+ },
+ };
+ };
-function ServiceCard({ icon, title, desc, cta }) {
return (
-
-
{icon}
-
{title}
+
+
+
+
+
+ {icon}
+
+
+
+ {title}
+
+
{desc}
- {cta} →
-