TheRealToxicDev revised this gist . Go to revision
1 file changed, 114 insertions
Comparisons.tsx(file created)
| @@ -0,0 +1,114 @@ | |||
| 1 | + | "use client"; | |
| 2 | + | ||
| 3 | + | import "./global.scss"; | |
| 4 | + | import "atropos/css"; | |
| 5 | + | ||
| 6 | + | import { FC } from "react"; | |
| 7 | + | import { cn } from "@/lib/utils"; | |
| 8 | + | import Atropos from "atropos/react"; | |
| 9 | + | import { BorderBeam } from "@/components/magicui/border-beam"; | |
| 10 | + | import GridPattern from "@/components/magicui/bg/grid-pattern"; | |
| 11 | + | import { motion, Variants } from "framer-motion"; | |
| 12 | + | import { DATA_COMPARISON_LIST } from "@/data/comparisonList"; | |
| 13 | + | import { Montserrat } from "next/font/google"; | |
| 14 | + | ||
| 15 | + | const montserrat = Montserrat({ | |
| 16 | + | subsets: ["latin"], | |
| 17 | + | weight: ["400", "700"], | |
| 18 | + | }); | |
| 19 | + | ||
| 20 | + | const variants: Variants = { | |
| 21 | + | offscreen: { | |
| 22 | + | y: 20, | |
| 23 | + | opacity: 0, | |
| 24 | + | }, | |
| 25 | + | onscreen: (custom: number) => ({ | |
| 26 | + | y: 0, | |
| 27 | + | opacity: 1, | |
| 28 | + | transition: { | |
| 29 | + | delay: custom * 0.1, | |
| 30 | + | duration: 0.4, | |
| 31 | + | }, | |
| 32 | + | }), | |
| 33 | + | }; | |
| 34 | + | ||
| 35 | + | export const ComparisonTable: FC = () => { | |
| 36 | + | return ( | |
| 37 | + | <section className="py-24 bg-black relative"> | |
| 38 | + | <GridPattern | |
| 39 | + | width={50} | |
| 40 | + | height={50} | |
| 41 | + | strokeDasharray={0} | |
| 42 | + | x={-1} | |
| 43 | + | y={-1} | |
| 44 | + | className={cn( | |
| 45 | + | "[mask-image:radial-gradient(450px_circle_at_center,white,transparent)] sm:[mask-image:radial-gradient(650px_circle_at_center,white,transparent)] stroke-borderDark/40" | |
| 46 | + | )} | |
| 47 | + | /> | |
| 48 | + | <div className="container mx-auto px-4"> | |
| 49 | + | <motion.article | |
| 50 | + | initial="offscreen" | |
| 51 | + | whileInView="onscreen" | |
| 52 | + | viewport={{ once: true }} | |
| 53 | + | className="grid gap-3 justify-center items-center text-center" | |
| 54 | + | > | |
| 55 | + | <motion.h2 | |
| 56 | + | custom={1} | |
| 57 | + | variants={variants} | |
| 58 | + | style={montserrat.style} | |
| 59 | + | 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" | |
| 60 | + | > | |
| 61 | + | How we compare to other password managers | |
| 62 | + | </motion.h2> | |
| 63 | + | </motion.article> | |
| 64 | + | <Atropos | |
| 65 | + | rotateTouch={false} | |
| 66 | + | highlight={false} | |
| 67 | + | shadow={false} | |
| 68 | + | className="bg-transparent" | |
| 69 | + | rotateXMax={5} | |
| 70 | + | rotateYMax={5} | |
| 71 | + | activeOffset={15} | |
| 72 | + | > | |
| 73 | + | <div className="relative border-1 border-borderDark rounded-2xl overflow-hidden bg-black"> | |
| 74 | + | <div className="relative z-10 p-4"> | |
| 75 | + | <table className="min-w-full bg-black text-white"> | |
| 76 | + | <thead> | |
| 77 | + | <tr> | |
| 78 | + | <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> | |
| 79 | + | Password Manager | |
| 80 | + | </th> | |
| 81 | + | <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> | |
| 82 | + | Vaultify | |
| 83 | + | </th> | |
| 84 | + | <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> | |
| 85 | + | LastPass | |
| 86 | + | </th> | |
| 87 | + | <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> | |
| 88 | + | 1Password | |
| 89 | + | </th> | |
| 90 | + | <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300"> | |
| 91 | + | Dashlane | |
| 92 | + | </th> | |
| 93 | + | </tr> | |
| 94 | + | </thead> | |
| 95 | + | <tbody className="divide-y divide-zinc-300"> | |
| 96 | + | {DATA_COMPARISON_LIST?.map((item, index) => ( | |
| 97 | + | <tr key={index}> | |
| 98 | + | <td className="py-3 px-4 text-sm text-zinc-400">{item.feature}</td> | |
| 99 | + | <td className="py-3 px-4 text-sm text-zinc-400">{item.vaultify ? "✅" : "❌"}</td> | |
| 100 | + | <td className="py-3 px-4 text-sm text-zinc-400">{item.lastpass ? "✅" : "❌"}</td> | |
| 101 | + | <td className="py-3 px-4 text-sm text-zinc-400">{item.onepass ? "✅" : "❌"}</td> | |
| 102 | + | <td className="py-3 px-4 text-sm text-zinc-400">{item.dashlane ? "✅" : "❌"}</td> | |
| 103 | + | </tr> | |
| 104 | + | ))} | |
| 105 | + | </tbody> | |
| 106 | + | </table> | |
| 107 | + | <BorderBeam colorFrom="#0072F5" colorTo="#FFF" size={200} /> | |
| 108 | + | </div> | |
| 109 | + | </div> | |
| 110 | + | </Atropos> | |
| 111 | + | </div> | |
| 112 | + | </section> | |
| 113 | + | ); | |
| 114 | + | }; | |
Newer
Older