TheRealToxicDev / Comparisons.tsx

"use client"; import "./global.scss"; import "atropos/css"; import { FC } from "react"; import { cn } from "@/lib/utils"; import Atropos from "atropos/react"; import { BorderBeam } from "@/components/magicui/border-beam"; import GridPattern from "@/components/magicui/bg/grid-pattern"; import { motion, Variants } from "framer-motion"; import { DATA_COMPARISON_LIST } from "@/data/comparisonList"; import { Montserrat } from "next/font/google"; const montserrat = Montserrat({ subsets: ["latin"], weight: ["400", "700"], }); const variants: Variants = { offscreen: { y: 20, opacity: 0, }, onscreen: (custom: number) => ({ y: 0, opacity: 1, transition: { delay: custom * 0.1, duration: 0.4, }, }), }; export const ComparisonTable: FC = () => { return ( <section className="py-24 bg-black relative"> <GridPattern width={50} height={50} strokeDasharray={0} x={-1} y={-1} className={cn( "[mask-image:radial-gradient(450px_circle_at_center,white,transparent)] sm:[mask-image:radial-gradient(650px_circle_at_center,white,transparent)] stroke-borderDark/40" )} /> <div className="container mx-auto px-4"> <motion.article initial="offscreen" whileInView="onscreen" viewport={{ once: true }} className="grid gap-3 justify-center items-center text-center" > <motion.h2 custom={1} variants={variants} style={montserrat.style} className="text-3xl lg:text-[32px] tracking-tight font-bold text-transparent bg-clip-text bg-gradient-to-b from-black to-white mb-8" > How we compare to other password managers </motion.h2> </motion.article> <Atropos rotateTouch={false} highlight={false} shadow={false} className="bg-transparent" rotateXMax={5} rotateYMax={5} activeOffset={15} > <div className="relative border-1 border-borderDark rounded-2xl overflow-hidden bg-black"> <div className="relative z-10 p-4"> <table className="min-w-full bg-black text-white"> <thead> <tr> <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> Password Manager </th> <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> Vaultify </th> <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> LastPass </th> <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> 1Password </th> <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> Dashlane </th> </tr> </thead> <tbody className="divide-y divide-zinc-300"> {DATA_COMPARISON_LIST?.map((item, index) => ( <tr key={index}> <td className="py-3 px-4 text-sm text-zinc-400">{item.feature}</td> <td className="py-3 px-4 text-sm text-zinc-400">{item.vaultify ? "✅" : "❌"}</td> <td className="py-3 px-4 text-sm text-zinc-400">{item.lastpass ? "✅" : "❌"}</td> <td className="py-3 px-4 text-sm text-zinc-400">{item.onepass ? "✅" : "❌"}</td> <td className="py-3 px-4 text-sm text-zinc-400">{item.dashlane ? "✅" : "❌"}</td> </tr> ))} </tbody> </table> <BorderBeam colorFrom="#0072F5" colorTo="#FFF" size={200} /> </div> </div> </Atropos> </div> </section> ); };