feat: demo

2025-12-09 12:27:43 +00:00 · 2024-09-16 13:53:41 +03:00
parent 1452de923f
commit c945d1ba95
104 changed files with 20586 additions and 227 deletions
--- a/demo/nextjs/app/features.tsx
+++ b/demo/nextjs/app/features.tsx
@@ -0,0 +1,99 @@
+"use client";
+import React from "react";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Logo } from "@/components/logo";
+
+export function Features() {
+    return (
+        <>
+            <div className="flex flex-col lg:flex-row bg-white dark:bg-black w-full gap-4 mx-auto px-8">
+                <Card title="BetterAuth" icon={<Logo className=" w-44" />}>
+                </Card>
+            </div>
+        </>
+    );
+}
+
+const Card = ({
+    title,
+    icon,
+    children,
+}: {
+    title: string;
+    icon: React.ReactNode;
+    children?: React.ReactNode;
+}) => {
+    const [hovered, setHovered] = React.useState(false);
+    return (
+        <div
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+            className="border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2]  max-w-sm w-full mx-auto p-4 relative h-[18rem]"
+        >
+            <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
+            <Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
+            <Icon className="absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black" />
+            <Icon className="absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black" />
+
+            <AnimatePresence>
+                {hovered && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="h-full w-full absolute inset-0"
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <div className="relative z-20">
+                <div className="text-center group-hover/canvas-card:-translate-y-4 group-hover/canvas-card:opacity-0 transition duration-200 w-full  mx-auto flex items-center justify-center">
+                    {icon}
+                </div>
+                <h2 className="dark:text-white text-xl opacity-0 group-hover/canvas-card:opacity-100 relative z-10 text-black mt-4  font-bold group-hover/canvas-card:text-white group-hover/canvas-card:-translate-y-2 transition duration-200">
+                    {title}
+                </h2>
+            </div>
+        </div>
+    );
+};
+
+const AceternityIcon = () => {
+    return (
+        <svg
+            width="66"
+            height="65"
+            viewBox="0 0 66 65"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-10 w-10 text-black dark:text-white group-hover/canvas-card:text-white "
+        >
+            <path
+                d="M8 8.05571C8 8.05571 54.9009 18.1782 57.8687 30.062C60.8365 41.9458 9.05432 57.4696 9.05432 57.4696"
+                stroke="currentColor"
+                strokeWidth="15"
+                strokeMiterlimit="3.86874"
+                strokeLinecap="round"
+                style={{ mixBlendMode: "darken" }}
+            />
+        </svg>
+    );
+};
+
+export const Icon = ({ className, ...rest }: any) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+            className={className}
+            {...rest}
+        >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+        </svg>
+    );
+};