Initial commit: add .gitignore and README

frontend/components/ui/AnimatedCard.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { cn } from "@/lib/utils";
+
+interface AnimatedCardProps {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+}
+
+export function AnimatedCard({
+  children,
+  className,
+  delay = 0,
+}: AnimatedCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!cardRef.current) return;
+
+    const ctx = gsap.context(() => {
+      gsap.from(cardRef.current, {
+        opacity: 0,
+        y: 30,
+        rotationX: -15,
+        duration: 0.8,
+        delay,
+        ease: "power3.out",
+      });
+    });
+
+    return () => ctx.revert();
+  }, [delay]);
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn(
+        "transform-gpu perspective-1000",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+

frontend/components/ui/ParallaxSection.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+interface ParallaxSectionProps {
+  children: React.ReactNode;
+  speed?: number;
+  className?: string;
+}
+
+export function ParallaxSection({
+  children,
+  speed = 0.5,
+  className = "",
+}: ParallaxSectionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current || typeof window === "undefined") return;
+
+    const element = ref.current;
+    gsap.to(element, {
+      y: -100 * speed,
+      ease: "none",
+      scrollTrigger: {
+        trigger: element,
+        start: "top bottom",
+        end: "bottom top",
+        scrub: true,
+      },
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.vars.trigger === element) {
+          trigger.kill();
+        }
+      });
+    };
+  }, [speed]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}

frontend/components/ui/ParticleBackground.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useRef } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Points, PointMaterial } from "@react-three/drei";
+import * as THREE from "three";
+
+function ParticleField() {
+  const ref = useRef<THREE.Points>(null);
+
+  // Generate random points in a sphere
+  const particleCount = 5000;
+  const positions = new Float32Array(particleCount * 3);
+  for (let i = 0; i < particleCount * 3; i += 3) {
+    const radius = Math.random() * 1.5;
+    const theta = Math.random() * Math.PI * 2;
+    const phi = Math.acos(Math.random() * 2 - 1);
+    
+    positions[i] = radius * Math.sin(phi) * Math.cos(theta);
+    positions[i + 1] = radius * Math.sin(phi) * Math.sin(theta);
+    positions[i + 2] = radius * Math.cos(phi);
+  }
+
+  useFrame((state, delta) => {
+    if (ref.current) {
+      ref.current.rotation.x -= delta / 10;
+      ref.current.rotation.y -= delta / 15;
+    }
+  });
+
+  return (
+    <group rotation={[0, 0, Math.PI / 4]}>
+      <Points ref={ref} positions={positions} stride={3} frustumCulled={false}>
+        <PointMaterial
+          transparent
+          color="#3b82f6"
+          size={0.005}
+          sizeAttenuation={true}
+          depthWrite={false}
+        />
+      </Points>
+    </group>
+  );
+}
+
+export function ParticleBackground() {
+  return (
+    <div className="fixed inset-0 -z-10 opacity-30 pointer-events-none">
+      <Canvas camera={{ position: [0, 0, 1] }}>
+        <ParticleField />
+      </Canvas>
+    </div>
+  );
+}