Revision of Comparisons.tsx

TheRealToxicDev revidoval tento gist 1737365927. Přejít na revizi

1 file changed, 114 insertions

Comparisons.tsx(vytvořil soubor)

		@@ -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	+	};

Novější Starší