added frontend + securing beta server invites

web/components/Features.tsx

@@ -0,0 +1,74 @@
+"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;