Aceternity UI

// components/ui/parallax-hero-images.tsx "use client"; import React, { useEffect, useState, useMemo, useCallback, memo } from "react"; import { motion, useMotionValue, useSpring, useTransform, MotionValue, } from "motion/react"; import { cn } from "@/lib/utils"; type ImagePosition = { src: string; position: | "top-left" | "top-right" | "mid-left" | "mid-right" | "bottom-left" | "bottom-right" | "far-left" | "far-right"; depth: number; delay: number; }; const positionStyles: Record< ImagePosition["position"], { top: string; left?: string; right?: string } > = { "top-left": { top: "8%", left: "4%" }, "top-right": { top: "8%", right: "4%" }, "mid-left": { top: "38%", left: "6%" }, "mid-right": { top: "38%", right: "6%" }, "bottom-left": { top: "68%", left: "4%" }, "bottom-right": { top: "68%", right: "4%" }, "far-left": { top: "52%", left: "2%" }, "far-right": { top: "52%", right: "2%" },…

// components/ui/world-map.tsx "use client"; import { useRef } from "react"; import { motion } from "motion/react"; import DottedMap from "dotted-map"; import { useTheme } from "next-themes"; interface MapProps { dots?: Array<{ start: { lat: number; lng: number; label?: string }; end: { lat: number; lng: number; label?: string }; }>; lineColor?: string; } export default function WorldMap({ dots = [], lineColor = "#0ea5e9", }: MapProps) { const svgRef = useRef<SVGSVGElement>(null); const map = new DottedMap({ height: 100, grid: "diagonal" }); const { theme } = useTheme(); const svgMap = map.getSVG({ radius: 0.22, color: theme === "dark" ? "#FFFFFF40" : "#00000040", shape: "circle", backgroundColor: theme === "dark" ? "black" : "white", }); const projectPoint = (lat: number, lng: number) => { const x = (lng + 180) * (800 / 360); const y = (90 - lat) * (400 / 180); return { x, y }; }; cons…

// components/ui/file-upload.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; import { IconUpload } from "@tabler/icons-react"; import { useDropzone } from "react-dropzone"; const mainVariant = { initial: { x: 0, y: 0, }, animate: { x: 20, y: -20, opacity: 0.9, }, }; const secondaryVariant = { initial: { opacity: 0, }, animate: { opacity: 1, }, }; export const FileUpload = ({ onChange, }: { onChange?: (files: File[]) => void; }) => { const [files, setFiles] = useState<File[]>([]); const fileInputRef = useRef<HTMLInputElement>(null); const handleFileChange = (newFiles: File[]) => { setFiles((prevFiles) => [...prevFiles, ...newFiles]); onChange && onChange(newFiles); }; const handleClick = () => { fileInputRef.current?.click(); }; const { getRootProps, isDragActive } = useDropzone({ multiple: false,…