75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef } from "react";
|
|
import gsap from "gsap";
|
|
import { useGSAP } from "@gsap/react";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
gsap.registerPlugin(useGSAP, ScrollTrigger);
|
|
|
|
const features = [
|
|
{
|
|
title: "Multi-track Leveling",
|
|
description:
|
|
"Create distinct leveling paths for different roles or activities. Perfect for complex community structures.",
|
|
},
|
|
{
|
|
title: "Coming Soon",
|
|
description:
|
|
"More features will be added in the future."
|
|
},
|
|
];
|
|
|
|
const Features = () => {
|
|
const container = useRef(null);
|
|
|
|
useGSAP(
|
|
() => {
|
|
const cards = gsap.utils.toArray(".feature-card");
|
|
|
|
cards.forEach((card: any, index) => {
|
|
gsap.from(card, {
|
|
scrollTrigger: {
|
|
trigger: card,
|
|
start: "top 85%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
y: 50,
|
|
opacity: 0,
|
|
duration: 0.8,
|
|
delay: index * 0.2,
|
|
ease: "power3.out",
|
|
});
|
|
});
|
|
},
|
|
{ scope: container }
|
|
);
|
|
|
|
return (
|
|
<section ref={container} className="py-32 relative z-10">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="text-4xl font-bold text-center mb-16 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
|
|
Why Void Sentinel?
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="feature-card p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-primary/50 transition-colors backdrop-blur-sm"
|
|
>
|
|
<h3 className="text-xl font-semibold mb-3 text-white">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Features;
|