love-ui 1.2.12 → 1.2.14

package/public/r/template-auth-one.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-one",
+  "type": "registry:block",
+  "title": "auth/one",
+  "description": "Page template \"auth/one\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/one/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/one/app/page.tsx",
+      "content": "import { AuthPage } from \"../components/auth-page\"\n\nexport default function Page() {\n  return <AuthPage />\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/one/components/auth-page.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/one/components/auth-page.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { Button } from \"@/ui/button\"\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/ui/input-group\"\nimport { AtSignIcon, ChevronLeftIcon } from \"lucide-react\"\n\nimport { FloatingPaths } from \"./floating-paths\"\nimport { WordmarkIcon } from \"./logo\"\n\nexport function AuthPage() {\n  return (\n    <main className=\"relative md:h-screen md:overflow-hidden lg:grid lg:grid-cols-2\">\n      <div className=\"relative hidden h-full flex-col border-r bg-secondary p-10 lg:flex dark:bg-secondary/20\">\n        <div className=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background\" />\n        <WordmarkIcon className=\"mr-auto h-5\" />\n        <div className=\"absolute inset-0\">\n          <FloatingPaths position={1} />\n          <FloatingPaths position={-1} />\n        </div>\n      </div>\n      <div className=\"relative flex min-h-screen flex-col justify-center p-4\">\n        <div\n          aria-hidden\n          className=\"absolute inset-0 isolate -z-10 opacity-60 contain-strict\"\n        >\n          <div className=\"absolute top-0 right-0 h-320 w-140 -translate-y-87.5 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,--theme(--color-foreground/.06)_0,hsla(0,0%,55%,.02)_50%,--theme(--color-foreground/.01)_80%)]\" />\n          <div className=\"absolute top-0 right-0 h-320 w-60 [translate:5%_-50%] rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]\" />\n          <div className=\"absolute top-0 right-0 h-320 w-60 -translate-y-87.5 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]\" />\n        </div>\n        <Button className=\"absolute top-7 left-5\" variant=\"ghost\">\n          <a href=\"#\">\n            <ChevronLeftIcon />\n            Home\n          </a>\n        </Button>\n        <div className=\"mx-auto space-y-4 sm:w-sm\">\n          <WordmarkIcon className=\"h-5 lg:hidden\" />\n          <div className=\"flex flex-col space-y-1\">\n            <h1 className=\"text-2xl font-bold tracking-wide\">\n              Sign In or Join Now!\n            </h1>\n            <p className=\"text-base text-muted-foreground\">\n              login or create your efferd account.\n            </p>\n          </div>\n          <div className=\"space-y-2\">\n            <Button className=\"w-full\" size=\"lg\" type=\"button\">\n              <GoogleIcon />\n              Continue with Google\n            </Button>\n            <Button className=\"w-full\" size=\"lg\" type=\"button\">\n              <AppleIcon />\n              Continue with Apple\n            </Button>\n            <Button className=\"w-full\" size=\"lg\" type=\"button\">\n              <GithubIcon />\n              Continue with GitHub\n            </Button>\n          </div>\n\n          <div className=\"flex w-full items-center justify-center\">\n            <div className=\"h-px w-full bg-border\" />\n            <span className=\"px-2 text-xs text-muted-foreground\">OR</span>\n            <div className=\"h-px w-full bg-border\" />\n          </div>\n\n          <form className=\"space-y-2\">\n            <p className=\"text-start text-xs text-muted-foreground\">\n              Enter your email address to sign in or create an account\n            </p>\n            <InputGroup>\n              <InputGroupInput\n                placeholder=\"your.email@example.com\"\n                type=\"email\"\n              />\n              <InputGroupAddon>\n                <AtSignIcon />\n              </InputGroupAddon>\n            </InputGroup>\n\n            <Button className=\"w-full\" type=\"button\">\n              Continue With Email\n            </Button>\n          </form>\n          <p className=\"mt-8 text-sm text-muted-foreground\">\n            By clicking continue, you agree to our{\" \"}\n            <a\n              className=\"underline underline-offset-4 hover:text-primary\"\n              href=\"#\"\n            >\n              Terms of Service\n            </a>{\" \"}\n            and{\" \"}\n            <a\n              className=\"underline underline-offset-4 hover:text-primary\"\n              href=\"#\"\n            >\n              Privacy Policy\n            </a>\n            .\n          </p>\n        </div>\n      </div>\n    </main>\n  )\n}\n\nconst GoogleIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    fill=\"currentColor\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <g>\n      <path d=\"M12.479,14.265v-3.279h11.049c0.108,0.571,0.164,1.247,0.164,1.979c0,2.46-0.672,5.502-2.84,7.669   C18.744,22.829,16.051,24,12.483,24C5.869,24,0.308,18.613,0.308,12S5.869,0,12.483,0c3.659,0,6.265,1.436,8.223,3.307L18.392,5.62   c-1.404-1.317-3.307-2.341-5.913-2.341C7.65,3.279,3.873,7.171,3.873,12s3.777,8.721,8.606,8.721c3.132,0,4.916-1.258,6.059-2.401   c0.927-0.927,1.537-2.251,1.777-4.059L12.479,14.265z\" />\n    </g>\n  </svg>\n)\n\nfunction AppleIcon({\n  fill = \"currentColor\",\n  ...props\n}: React.ComponentProps<\"svg\">) {\n  return (\n    <svg fill={fill} viewBox=\"0 0 24 24\" {...props}>\n      <g id=\"_Group_2\">\n        <g id=\"_Group_3\">\n          <path\n            d=\"M18.546,12.763c0.024-1.87,1.004-3.597,2.597-4.576c-1.009-1.442-2.64-2.323-4.399-2.378    c-1.851-0.194-3.645,1.107-4.588,1.107c-0.961,0-2.413-1.088-3.977-1.056C6.122,5.927,4.25,7.068,3.249,8.867    c-2.131,3.69-0.542,9.114,1.5,12.097c1.022,1.461,2.215,3.092,3.778,3.035c1.529-0.063,2.1-0.975,3.945-0.975    c1.828,0,2.364,0.975,3.958,0.938c1.64-0.027,2.674-1.467,3.66-2.942c0.734-1.041,1.299-2.191,1.673-3.408    C19.815,16.788,18.548,14.879,18.546,12.763z\"\n            id=\"_Path_\"\n          />\n          <path\n            d=\"M15.535,3.847C16.429,2.773,16.87,1.393,16.763,0c-1.366,0.144-2.629,0.797-3.535,1.829    c-0.895,1.019-1.349,2.351-1.261,3.705C13.352,5.548,14.667,4.926,15.535,3.847z\"\n            id=\"_Path_2\"\n          />\n        </g>\n      </g>\n    </svg>\n  )\n}\n\nconst GithubIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 1024 1024\" {...props}>\n    <path\n      clipRule=\"evenodd\"\n      d=\"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      transform=\"scale(64)\"\n    />\n  </svg>\n)\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/one/components/floating-paths.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/one/components/floating-paths.tsx",
+      "content": "import { motion } from \"motion/react\"\n\nexport function FloatingPaths({ position }: { position: number }) {\n  const paths = Array.from({ length: 36 }, (_, i) => ({\n    id: i,\n    d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${\n      380 - i * 5 * position\n    } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${\n      152 - i * 5 * position\n    } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${\n      684 - i * 5 * position\n    } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,\n    color: `rgba(15,23,42,${0.1 + i * 0.03})`,\n    width: 0.5 + i * 0.03,\n  }))\n\n  return (\n    <div className=\"pointer-events-none absolute inset-0\">\n      <svg\n        className=\"h-full w-full text-slate-950 dark:text-white\"\n        fill=\"none\"\n        viewBox=\"0 0 696 316\"\n      >\n        <title>Background Paths</title>\n        {paths.map((path) => (\n          <motion.path\n            animate={{\n              pathLength: 1,\n              opacity: [0.3, 0.6, 0.3],\n              pathOffset: [0, 1, 0],\n            }}\n            d={path.d}\n            initial={{ pathLength: 0.3, opacity: 0.6 }}\n            key={path.id}\n            stroke=\"currentColor\"\n            strokeOpacity={0.1 + path.id * 0.03}\n            strokeWidth={path.width}\n            transition={{\n              duration: 20 + Math.random() * 10,\n              repeat: Number.POSITIVE_INFINITY,\n              ease: \"linear\",\n            }}\n          />\n        ))}\n      </svg>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/one/components/logo.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/one/components/logo.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function WordmarkIcon({ className }: { className?: string }) {\n  return (\n    <span\n      className={cn(\n        \"font-heading text-xl tracking-tight text-foreground\",\n        className\n      )}\n    >\n      <span className=\"font-semibold\">love</span>{\" \"}\n      <span className=\"text-muted-foreground\">ui</span>\n    </span>\n  )\n}\n\nexport function LogoLink({ className }: { className?: string }) {\n  return (\n    <Link href=\"/\" className={cn(\"inline-flex items-center\", className)}>\n      <WordmarkIcon />\n    </Link>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/input-group.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/one"
+  }
+}

package/public/r/template-auth-seven.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-seven",
+  "type": "registry:block",
+  "title": "auth/seven",
+  "description": "Page template \"auth/seven\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/seven/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/seven/app/page.tsx",
+      "content": "import Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport { Card } from \"@/ui/card\"\nimport { Input } from \"@/ui/input\"\nimport { Label } from \"@/ui/label\"\n\nexport default function SignUp() {\n  return (\n    <section className=\"flex grid min-h-screen grid-rows-[auto_1fr] bg-background px-4 py-16 md:py-24\">\n      <div className=\"m-auto w-full max-w-sm\">\n        <div className=\"text-center\">\n          <h1 className=\"text-4xl font-medium\">Create an account</h1>\n          <p className=\"mt-2 text-sm text-muted-foreground\">\n            Get started with your free account today\n          </p>\n        </div>\n        <Card variant=\"outline\" className=\"mt-6 p-8\">\n          <form action=\"\" className=\"space-y-5\">\n            <div className=\"space-y-3\">\n              <Label htmlFor=\"email\" className=\"text-sm\">\n                Email\n              </Label>\n              <Input\n                type=\"email\"\n                id=\"email\"\n                name=\"email\"\n                placeholder=\"you@example.com\"\n                required\n              />\n            </div>\n\n            <div className=\"space-y-3\">\n              <Label htmlFor=\"password\" className=\"text-sm\">\n                Password\n              </Label>\n              <Input type=\"password\" id=\"password\" name=\"password\" required />\n            </div>\n\n            <Button className=\"w-full\">Create Account</Button>\n          </form>\n\n          <div className=\"my-6 flex items-center gap-3\">\n            <hr className=\"flex-1\" />\n            <span className=\"text-xs text-muted-foreground\">\n              or continue with\n            </span>\n            <hr className=\"flex-1\" />\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Button type=\"button\" variant=\"outline\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"size-4\"\n                viewBox=\"0 0 256 262\"\n              >\n                <path\n                  fill=\"#4285f4\"\n                  d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n                ></path>\n                <path\n                  fill=\"#34a853\"\n                  d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n                ></path>\n                <path\n                  fill=\"#fbbc05\"\n                  d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n                ></path>\n                <path\n                  fill=\"#eb4335\"\n                  d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n                ></path>\n              </svg>\n              <span>Google</span>\n            </Button>\n            <Button type=\"button\" variant=\"outline\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"size-4\"\n                viewBox=\"0 0 256 256\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M128 0C57.317 0 0 57.317 0 128c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.117-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128C256 57.317 198.683 0 128 0\"\n                />\n              </svg>\n              <span>GitHub</span>\n            </Button>\n          </div>\n        </Card>\n\n        <p className=\"mt-6 text-center text-sm text-muted-foreground\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"font-medium text-primary hover:underline\">\n            Sign in\n          </Link>\n        </p>\n      </div>\n    </section>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/card.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/label.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/seven"
+  }
+}

package/public/r/template-auth-six.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-six",
+  "type": "registry:block",
+  "title": "auth/six",
+  "description": "Page template \"auth/six\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/six/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/six/app/page.tsx",
+      "content": "import Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport { Input } from \"@/ui/input\"\nimport { Label } from \"@/ui/label\"\n\nexport default function Login() {\n  return (\n    <section className=\"flex min-h-screen bg-background px-4 py-16 md:py-24\">\n      <div className=\"m-auto w-full max-w-xs\">\n        <div className=\"text-center\">\n          <h1 className=\"mt-3 text-4xl font-medium\">Sign in</h1>\n        </div>\n\n        <form action=\"\" className=\"mt-12 space-y-4\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\" className=\"text-sm\">\n              Email\n            </Label>\n            <Input\n              type=\"email\"\n              id=\"email\"\n              name=\"email\"\n              placeholder=\"you@example.com\"\n              required\n            />\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"password\" className=\"text-sm\">\n              Password\n            </Label>\n            <Input type=\"password\" id=\"password\" name=\"password\" required />\n          </div>\n\n          <Button className=\"w-full\">Continue</Button>\n        </form>\n\n        <div className=\"mt-6 space-y-3 border-t pt-6\">\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 262\"\n            >\n              <path\n                fill=\"#4285f4\"\n                d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n              ></path>\n              <path\n                fill=\"#34a853\"\n                d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n              ></path>\n              <path\n                fill=\"#fbbc05\"\n                d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n              ></path>\n              <path\n                fill=\"#eb4335\"\n                d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n              ></path>\n            </svg>\n            <span>Google</span>\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 256\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M128 0C57.317 0 0 57.317 0 128c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.117-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128C256 57.317 198.683 0 128 0\"\n              />\n            </svg>\n            <span>GitHub</span>\n          </Button>\n        </div>\n\n        <div className=\"mt-8 text-center\">\n          <Link\n            href=\"#\"\n            className=\"text-sm text-muted-foreground hover:underline\"\n          >\n            Forgot password?\n          </Link>\n        </div>\n\n        <p className=\"mt-6 text-center text-sm text-muted-foreground\">\n          New here?{\" \"}\n          <Link href=\"#\" className=\"font-medium text-primary hover:underline\">\n            Create account\n          </Link>\n        </p>\n      </div>\n    </section>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/label.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/six"
+  }
+}

package/public/r/template-auth-three.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-three",
+  "type": "registry:block",
+  "title": "auth/three",
+  "description": "Page template \"auth/three\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/three/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/three/app/page.tsx",
+      "content": "import { GradientMesh } from \"../components/gradient-mesh\"\nimport { LoginForm } from \"../components/login-form\"\nimport { WordmarkIcon } from \"../components/logo\"\n\nexport default function Page() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <WordmarkIcon className=\"mr-auto h-5\" />\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <GradientMesh\n          colors={[\"#ffffff\", \"#000000\", \"#000000\"]}\n          distortion={3}\n          swirl={0.5}\n          speed={1}\n          rotation={90}\n          waveAmp={0.1}\n          waveFreq={7}\n          waveSpeed={0.2}\n          grain={0.06}\n        />\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/three/components/gradient-mesh.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/three/components/gradient-mesh.tsx",
+      "content": "\"use client\"\n\nimport React, { useEffect, useRef } from \"react\"\nimport { Color, Mesh, Program, Renderer, Triangle } from \"ogl\"\n\n// Vertex shader\nconst vert = `\nattribute vec2 uv;\nattribute vec2 position;\n\nvarying vec2 vUv;\n\nvoid main() {\n    vUv = uv;\n    gl_Position = vec4(position, 0, 1);\n}\n`\n\n// Fragment shader with water effect\nconst frag = (distortion: number) => `\nprecision highp float;\n\nuniform float uTime;\nuniform float uSwirl;\nuniform float uSpeed;\nuniform float uScale;\nuniform float uOffsetX;\nuniform float uOffsetY;\nuniform float uRotation;\nuniform float uWaveAmp;\nuniform float uWaveFreq;\nuniform float uWaveSpeed;\nuniform float uGrain;\nuniform vec3 uColorA;\nuniform vec3 uColorB;\nuniform vec3 uColorC;\nuniform vec3 uResolution;\n\nvarying vec2 vUv;\n\n// 2D noise-like wave\nfloat wave(vec2 uv, float freq, float speed, float time) {\n    return sin(uv.x * freq + time * speed) * cos(uv.y * freq + time * speed);\n}\n\n// Simple random noise\nfloat random(vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n}\n\n// Color Dodge blending\nvec3 colorDodge(vec3 base, vec3 blend) {\n    return min(base / (1.0 - blend + 0.0001), 1.0);\n}\n\nvoid main() {\n    float mr = min(uResolution.x, uResolution.y);\n    vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr;\n\n    // Scale and offset\n    uv = uv * uScale + vec2(uOffsetX, uOffsetY);\n\n    // Rotation\n    float cosR = cos(uRotation);\n    float sinR = sin(uRotation);\n    uv = vec2(\n        uv.x * cosR - uv.y * sinR,\n        uv.x * sinR + uv.y * cosR\n    );\n\n    // Water waves\n    uv.x += wave(uv, uWaveFreq, uWaveSpeed, uTime) * uWaveAmp;\n    uv.y += wave(uv + 10.0, uWaveFreq * 1.5, uWaveSpeed * 0.8, uTime) * uWaveAmp * 0.5;\n\n    // Swirl\n    float angle = atan(uv.y, uv.x);\n    float radius = length(uv);\n    angle += uSwirl * radius;\n    uv = vec2(cos(angle), sin(angle)) * radius;\n\n    // Distortion loop\n    float d = -uTime * 0.5 * uSpeed;\n    float a = 0.0;\n    for (float i = 0.0; i < ${distortion.toFixed(1)}; ++i) {\n        a += cos(i - d - a * uv.x);\n        d += sin(uv.y * i + a);\n    }\n    d += uTime * 0.5 * uSpeed;\n\n    // Base color mixing\n    float mix1 = (sin(d) + 1.0) * 0.5;\n    float mix2 = (cos(a) + 1.0) * 0.5;\n    vec3 col = mix(uColorA, uColorB, mix1);\n    col = mix(col, uColorC, mix2);\n\n    // Grain using Color Dodge\n    float grain = (random(gl_FragCoord.xy + uTime) - 0.5) * uGrain;\n    vec3 grainCol = vec3(0.5 + grain); // grayish grain\n    col = colorDodge(col, grainCol);\n\n    gl_FragColor = vec4(col, 1.0);\n}\n`\n\ninterface NovatrixProps {\n  colors?: string[]\n  distortion?: number\n  swirl?: number\n  speed?: number\n  scale?: number\n  offsetX?: number\n  offsetY?: number\n  rotation?: number\n  waveAmp?: number\n  waveFreq?: number\n  waveSpeed?: number\n  grain?: number // NEW\n}\n\n// Convert hex to normalized RGB\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const cleanHex = hex.replace(\"#\", \"\")\n  const r = parseInt(cleanHex.substring(0, 2), 16) / 255\n  const g = parseInt(cleanHex.substring(2, 4), 16) / 255\n  const b = parseInt(cleanHex.substring(4, 6), 16) / 255\n  return [r, g, b]\n}\n\nexport function GradientMesh(props: NovatrixProps) {\n  const ctnDom = useRef<HTMLDivElement>(null)\n  const {\n    colors = [\"#3b2a8d\", \"#aaa7d7\", \"#f75092\"],\n    distortion = 5,\n    swirl = 0.5,\n    speed = 1.0,\n    scale = 1,\n    offsetX = 0.0,\n    offsetY = 0.0,\n    rotation = 90,\n    waveAmp = 0.1,\n    waveFreq = 10.0,\n    waveSpeed = 0.2,\n    grain = 0.06,\n    ...rest\n  } = props\n\n  useEffect(() => {\n    if (!ctnDom.current) return\n\n    const ctn = ctnDom.current\n    const renderer = new Renderer()\n    const gl = renderer.gl\n    gl.clearColor(0, 0, 0, 1)\n\n    function resize() {\n      renderer.setSize(ctn.offsetWidth, ctn.offsetHeight)\n    }\n    window.addEventListener(\"resize\", resize, false)\n    resize()\n\n    const geometry = new Triangle(gl)\n\n    const rgbColors = colors.slice(0, 3).map(hexToRgb)\n    const uniforms: any = {\n      uTime: { value: 0 },\n      uSwirl: { value: swirl },\n      uSpeed: { value: speed },\n      uScale: { value: scale },\n      uOffsetX: { value: offsetX },\n      uOffsetY: { value: offsetY },\n      uRotation: { value: rotation },\n      uWaveAmp: { value: waveAmp },\n      uWaveFreq: { value: waveFreq },\n      uWaveSpeed: { value: waveSpeed },\n      uResolution: {\n        value: new Color(\n          gl.canvas.width,\n          gl.canvas.height,\n          gl.canvas.width / gl.canvas.height\n        ),\n      },\n      uGrain: { value: grain },\n    }\n\n    const labels = [\"A\", \"B\", \"C\"]\n    rgbColors.forEach((c, i) => {\n      uniforms[`uColor${labels[i]}`] = { value: new Color(...c) }\n    })\n\n    const program = new Program(gl, {\n      vertex: vert,\n      fragment: frag(distortion),\n      uniforms,\n    })\n\n    const mesh = new Mesh(gl, { geometry, program })\n\n    let animateId: number\n    function update(t: number) {\n      animateId = requestAnimationFrame(update)\n      program.uniforms.uTime.value = t * 0.001\n      renderer.render({ scene: mesh })\n    }\n    animateId = requestAnimationFrame(update)\n\n    ctn.appendChild(gl.canvas)\n\n    return () => {\n      cancelAnimationFrame(animateId)\n      window.removeEventListener(\"resize\", resize)\n      ctn.removeChild(gl.canvas)\n      gl.getExtension(\"WEBGL_lose_context\")?.loseContext()\n    }\n  }, [\n    colors,\n    distortion,\n    swirl,\n    speed,\n    scale,\n    offsetX,\n    offsetY,\n    rotation,\n    waveAmp,\n    waveFreq,\n    waveSpeed,\n  ])\n\n  return (\n    <div\n      ref={ctnDom}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        position: \"absolute\",\n        overflow: \"hidden\",\n      }}\n      {...rest}\n    />\n  )\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/three/components/login-form.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/three/components/login-form.tsx",
+      "content": "import { Button } from \"@/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/ui/field-2\"\nimport { Input } from \"@/ui/input\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/three/components/logo.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/three/components/logo.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function WordmarkIcon({ className }: { className?: string }) {\n  return (\n    <span\n      className={cn(\n        \"font-heading text-xl tracking-tight text-foreground\",\n        className\n      )}\n    >\n      <span className=\"font-semibold\">love</span>{\" \"}\n      <span className=\"text-muted-foreground\">ui</span>\n    </span>\n  )\n}\n\nexport function LogoLink({ className }: { className?: string }) {\n  return (\n    <Link href=\"/\" className={cn(\"inline-flex items-center\", className)}>\n      <WordmarkIcon />\n    </Link>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "dependencies": [
+    "ogl"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/field-2.json",
+    "https://www.loveui.dev/r/input.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/three"
+  }
+}

package/public/r/template-auth-two.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-two",
+  "type": "registry:block",
+  "title": "auth/two",
+  "description": "Page template \"auth/two\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/two/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/two/app/page.tsx",
+      "content": "import { LoginForm } from \"../components/login-form\"\nimport { ShaderRipple } from \"../components/shader-ripple\"\n\nexport default function Page() {\n  return (\n    <div className=\"relative flex h-screen items-center justify-center\">\n      <div className=\"relative z-10 w-full max-w-sm\">\n        <LoginForm />\n      </div>\n      <ShaderRipple className=\"absolute inset-0 -z-0 h-screen\" />\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/two/components/login-form.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/two/components/login-form.tsx",
+      "content": "import { Button } from \"@/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/ui/card\"\nimport { Input } from \"@/ui/input\"\nimport { Label } from \"@/ui/label\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </div>\n              <div className=\"grid gap-3\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Button className=\"w-full\">Login</Button>\n                <Button variant=\"outline\" className=\"w-full\">\n                  Login with Google\n                </Button>\n              </div>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/auth/two/components/shader-ripple.tsx",
+      "type": "registry:component",
+      "target": "components/page-templates/auth/two/components/shader-ripple.tsx",
+      "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\n//@ts-nocheck\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport * as THREE from \"three\"\n\ninterface ShaderRippleProps {\n  speed?: number\n  lineWidth?: number\n  rippleCount?: number\n  colorLayers?: number\n  backgroundColor?: string\n  rotation?: number\n  timeScale?: number\n  opacity?: number\n  waveIntensity?: number\n  animationSpeed?: number\n  loopDuration?: number\n  scale?: number\n  color1?: string\n  color2?: string\n  color3?: string\n  mod?: number\n  className?: string\n}\n\nexport function ShaderRipple({\n  speed = 0.05,\n  lineWidth = 0.002,\n  rippleCount = 8,\n  colorLayers = 3,\n  backgroundColor = \"transparent\",\n  rotation = 135,\n  timeScale = 0.5,\n  opacity = 1.0,\n  waveIntensity = 0,\n  animationSpeed = 1.0,\n  loopDuration = 0.7,\n  scale = 1,\n  color1 = \"#FF00FF\",\n  color2 = \"#FF00FF\",\n  color3 = \"#FF6EC7\",\n  mod = 0.2,\n  className = \"\",\n}: ShaderRippleProps) {\n  // Convert degrees to radians\n  const rotationRadians = (rotation * Math.PI) / 180\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const sceneRef = useRef<{\n    camera: THREE.Camera\n    scene: THREE.Scene\n    renderer: THREE.WebGLRenderer\n    uniforms: any\n    animationId: number\n  } | null>(null)\n\n  // Convert hex color to vec3\n  const hexToVec3 = (hex: string) => {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n    return result\n      ? new THREE.Vector3(\n          parseInt(result[1], 16) / 255,\n          parseInt(result[2], 16) / 255,\n          parseInt(result[3], 16) / 255\n        )\n      : new THREE.Vector3(1, 0, 0)\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const container = containerRef.current\n\n    const vertexShader = `\n      void main() {\n        gl_Position = vec4( position, 1.0 );\n      }\n    `\n\n    const fragmentShader = `\n      #define TWO_PI 6.2831853072\n      #define PI 3.14159265359\n\n      precision highp float;\n      uniform vec2 resolution;\n      uniform float time;\n      uniform float lineWidth;\n      uniform int rippleCount;\n      uniform int colorLayers;\n      uniform float rotation;\n      uniform float timeScale;\n      uniform float opacity;\n      uniform float waveIntensity;\n      uniform float scale;\n      uniform vec3 color1;\n      uniform vec3 color2;\n      uniform vec3 color3;\n      uniform float loopDuration;\n      uniform float modValue;\n\n      vec2 rotate(vec2 v, float a) {\n        float s = sin(a);\n        float c = cos(a);\n        mat2 m = mat2(c, -s, s, c);\n        return m * v;\n      }\n\n      // Smooth easing function (ease-in-out)\n      float easeInOutCubic(float t) {\n        return t < 0.5 ? 4.0 * t * t * t : 1.0 - pow(-2.0 * t + 2.0, 3.0) / 2.0;\n      }\n\n      void main(void) {\n        vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);\n        \n        // Apply scale\n        uv = uv / scale;\n        \n        // Apply rotation\n        uv = rotate(uv, rotation);\n        \n        // Add wave distortion\n        uv.x += sin(uv.y * 5.0 + time * timeScale * 0.1) * waveIntensity;\n        uv.y += cos(uv.x * 5.0 + time * timeScale * 0.1) * waveIntensity;\n        \n        // Normalize time to loop duration\n        float t = mod(time * timeScale * 0.05, loopDuration);\n        \n        // Calculate smooth fade factor (0 to 1 to 0)\n        float fadeProgress = t / loopDuration;\n        float smoothFade = sin(fadeProgress * PI);\n        smoothFade = easeInOutCubic(smoothFade);\n\n        vec3 finalColor = vec3(0.0);\n        float totalIntensity = 0.0;\n        \n        for(int j = 0; j < 5; j++){\n          if(j >= colorLayers) break;\n          \n          vec3 layerColor;\n          if(j == 0) layerColor = color1;\n          else if(j == 1) layerColor = color2;\n          else layerColor = color3;\n          \n          float intensity = 0.0;\n          for(int i = 0; i < 20; i++){\n            if(i >= rippleCount) break;\n            float rippleTime = fract(t + float(i)*0.01 - 0.01*float(j));\n            // Start from 0 size and expand outward with easing\n            float rippleRadius = rippleTime * rippleTime * 8.0;\n            intensity += lineWidth*float(i*i) / abs(rippleRadius - length(uv) + mod(uv.x+uv.y, modValue));\n          }\n          \n          finalColor += layerColor * intensity;\n          totalIntensity += intensity;\n        }\n        \n        // Normalize to prevent overly bright areas\n        if(totalIntensity > 0.0) {\n          finalColor = finalColor / max(totalIntensity * 0.3, 1.0);\n        }\n        \n        // Calculate alpha based on intensity for transparency\n        float alpha = min(totalIntensity * 0.2, 1.0) * opacity * smoothFade;\n        \n        gl_FragColor = vec4(finalColor * smoothFade, alpha);\n      }\n    `\n\n    const camera = new THREE.Camera()\n    camera.position.z = 1\n\n    const scene = new THREE.Scene()\n    const geometry = new THREE.PlaneGeometry(2, 2)\n\n    const uniforms = {\n      time: { type: \"f\", value: 1.0 },\n      resolution: { type: \"v2\", value: new THREE.Vector2() },\n      lineWidth: { type: \"f\", value: lineWidth },\n      rippleCount: { type: \"i\", value: rippleCount },\n      colorLayers: { type: \"i\", value: colorLayers },\n      rotation: { type: \"f\", value: rotationRadians },\n      timeScale: { type: \"f\", value: timeScale },\n      opacity: { type: \"f\", value: opacity },\n      waveIntensity: { type: \"f\", value: waveIntensity },\n      scale: { type: \"f\", value: scale },\n      color1: { type: \"v3\", value: hexToVec3(color1) },\n      color2: { type: \"v3\", value: hexToVec3(color2) },\n      color3: { type: \"v3\", value: hexToVec3(color3) },\n      loopDuration: { type: \"f\", value: loopDuration },\n      modValue: { type: \"f\", value: mod },\n    }\n\n    const material = new THREE.ShaderMaterial({\n      uniforms: uniforms,\n      vertexShader: vertexShader,\n      fragmentShader: fragmentShader,\n      transparent: true,\n      blending: THREE.AdditiveBlending,\n      depthWrite: false,\n    })\n\n    const mesh = new THREE.Mesh(geometry, material)\n    scene.add(mesh)\n\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })\n    renderer.setPixelRatio(window.devicePixelRatio)\n    renderer.setClearColor(0x000000, 0)\n\n    container.appendChild(renderer.domElement)\n\n    const onWindowResize = () => {\n      const width = container.clientWidth\n      const height = container.clientHeight\n      renderer.setSize(width, height)\n      uniforms.resolution.value.x = renderer.domElement.width\n      uniforms.resolution.value.y = renderer.domElement.height\n    }\n\n    onWindowResize()\n    window.addEventListener(\"resize\", onWindowResize, false)\n\n    const animate = () => {\n      const animationId = requestAnimationFrame(animate)\n      uniforms.time.value += speed * animationSpeed\n      renderer.render(scene, camera)\n\n      if (sceneRef.current) {\n        sceneRef.current.animationId = animationId\n      }\n    }\n\n    sceneRef.current = {\n      camera,\n      scene,\n      renderer,\n      uniforms,\n      animationId: 0,\n    }\n\n    animate()\n\n    return () => {\n      window.removeEventListener(\"resize\", onWindowResize)\n\n      if (sceneRef.current) {\n        cancelAnimationFrame(sceneRef.current.animationId)\n\n        if (container && sceneRef.current.renderer.domElement) {\n          container.removeChild(sceneRef.current.renderer.domElement)\n        }\n\n        sceneRef.current.renderer.dispose()\n        geometry.dispose()\n        material.dispose()\n      }\n    }\n  }, [\n    speed,\n    lineWidth,\n    rippleCount,\n    colorLayers,\n    rotation,\n    timeScale,\n    opacity,\n    waveIntensity,\n    animationSpeed,\n    loopDuration,\n    scale,\n    color1,\n    color2,\n    color3,\n    mod,\n  ])\n\n  return (\n    <div\n      ref={containerRef}\n      className={`h-full w-full ${className}`}\n      style={{\n        background: backgroundColor,\n        overflow: \"hidden\",\n      }}\n    />\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "dependencies": [
+    "three"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/card.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/label.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/two"
+  }
+}

package/public/r/template-hero-eight.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-hero-eight",
+  "type": "registry:block",
+  "title": "hero/eight",
+  "description": "Page template \"hero/eight\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/hero/eight/index.tsx",
+      "type": "registry:file",
+      "target": "components/page-templates/hero/eight/index.tsx",
+      "content": "import React from \"react\"\nimport { AnimatedGroup } from \"@/motion-primitives/animated-group\"\nimport { TextEffect } from \"@/motion-primitives/text-effect\"\nimport { Button } from \"@/ui/button\"\nimport { Mail, SendHorizontal } from \"lucide-react\"\n\nimport { LogoCloud } from \"./logo-cloud\"\n\nconst transitionVariants = {\n  item: {\n    hidden: {\n      opacity: 0,\n      filter: \"blur(12px)\",\n      y: 12,\n    },\n    visible: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      y: 0,\n      transition: {\n        type: \"spring\",\n        bounce: 0.3,\n        duration: 1.5,\n      },\n    },\n  },\n}\n\nexport default function HeroSection() {\n  return (\n    <>\n      <main className=\"overflow-hidden [--color-primary-foreground:var(--color-white)] [--color-primary:var(--color-green-600)]\">\n        <section>\n          <div className=\"relative mx-auto max-w-6xl px-6 pt-32 pb-20 lg:pt-48\">\n            <div className=\"relative z-10 mx-auto max-w-4xl text-center\">\n              <TextEffect\n                preset=\"fade-in-blur\"\n                speedSegment={0.3}\n                as=\"h1\"\n                className=\"text-5xl font-medium text-balance md:text-6xl\"\n              >\n                Healthier UI delivery rhythm\n              </TextEffect>\n              <TextEffect\n                per=\"line\"\n                preset=\"fade-in-blur\"\n                speedSegment={0.3}\n                delay={0.5}\n                as=\"p\"\n                className=\"mx-auto mt-6 max-w-2xl text-lg text-pretty\"\n              >\n                LoveUI delivers highly customizable components for building\n                modern websites and applications that look and feel exactly\n                right.\n              </TextEffect>\n\n              <AnimatedGroup\n                variants={{\n                  container: {\n                    visible: {\n                      transition: {\n                        staggerChildren: 0.05,\n                        delayChildren: 0.75,\n                      },\n                    },\n                  },\n                  ...transitionVariants,\n                }}\n                className=\"mt-12\"\n              >\n                <form action=\"\" className=\"mx-auto max-w-sm\">\n                  <div className=\"relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.5rem)] border bg-background pr-2 shadow shadow-zinc-950/5 has-[input:focus]:ring-2 has-[input:focus]:ring-muted\">\n                    <Mail className=\"pointer-events-none absolute inset-y-0 left-4 my-auto size-4\" />\n\n                    <input\n                      placeholder=\"Your mail address\"\n                      className=\"h-12 w-full bg-transparent pl-12 focus:outline-none\"\n                      type=\"email\"\n                    />\n\n                    <div className=\"md:pr-1.5 lg:pr-0\">\n                      <Button\n                        aria-label=\"submit\"\n                        size=\"sm\"\n                        className=\"rounded-(--radius)\"\n                      >\n                        <span className=\"hidden md:block\">Get Started</span>\n                        <SendHorizontal\n                          className=\"relative mx-auto size-5 md:hidden\"\n                          strokeWidth={2}\n                        />\n                      </Button>\n                    </div>\n                  </div>\n                </form>\n\n                <div\n                  aria-hidden\n                  className=\"relative mx-auto mt-32 max-w-2xl bg-radial from-primary/50 to-transparent to-55% text-left dark:from-primary/25\"\n                >\n                  <div className=\"absolute inset-0 mx-auto w-80 -translate-x-3 -translate-y-12 rounded-[2rem] border border-border/50 bg-background [mask-image:linear-gradient(to_bottom,#000_50%,transparent_90%)] p-2 sm:-translate-x-6\">\n                    <div className=\"relative h-96 overflow-hidden rounded-[1.5rem] border p-2 pb-12 before:absolute before:inset-0 before:bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_6px)] before:opacity-50\"></div>\n                  </div>\n                  <div className=\"mx-auto w-80 translate-x-4 rounded-[2rem] border border-border/50 bg-muted [mask-image:linear-gradient(to_bottom,#000_50%,transparent_90%)] p-2 backdrop-blur-3xl sm:translate-x-8 dark:bg-background/50\">\n                    <div className=\"space-y-2 overflow-hidden rounded-[1.5rem] border bg-background p-2 shadow-xl dark:bg-white/5 dark:shadow-black dark:backdrop-blur-3xl\">\n                      <AppComponent />\n\n                      <div className=\"rounded-[1rem] bg-muted p-4 pb-16 dark:bg-white/5\"></div>\n                    </div>\n                  </div>\n                  <div className=\"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] [background-size:16px_16px] mix-blend-overlay dark:opacity-5\"></div>\n                </div>\n              </AnimatedGroup>\n            </div>\n          </div>\n        </section>\n        <LogoCloud />\n      </main>\n    </>\n  )\n}\n\nconst AppComponent = () => {\n  return (\n    <div className=\"relative space-y-3 rounded-[1rem] bg-white/5 p-4\">\n      <div className=\"flex items-center gap-1.5 text-orange-400\">\n        <svg\n          className=\"size-5\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 32 32\"\n        >\n          <g fill=\"none\">\n            <path\n              fill=\"#ff6723\"\n              d=\"M26 19.34c0 6.1-5.05 11.005-11.15 10.641c-6.269-.374-10.56-6.403-9.752-12.705c.489-3.833 2.286-7.12 4.242-9.67c.34-.445.689 3.136 1.038 2.742c.35-.405 3.594-6.019 4.722-7.991a.694.694 0 0 1 1.028-.213C18.394 3.854 26 10.277 26 19.34\"\n            ></path>\n            <path\n              fill=\"#ffb02e\"\n              d=\"M23 21.851c0 4.042-3.519 7.291-7.799 7.144c-4.62-.156-7.788-4.384-7.11-8.739C9.07 14.012 15.48 10 15.48 10S23 14.707 23 21.851\"\n            ></path>\n          </g>\n        </svg>\n        <div className=\"text-sm font-medium\">Blocks</div>\n      </div>\n      <div className=\"space-y-3\">\n        <div className=\"border-b border-white/10 pb-3 text-sm font-medium text-foreground\">\n          This year, your team ships more UI components on average than in 2023.\n        </div>\n        <div className=\"space-y-3\">\n          <div className=\"space-y-1\">\n            <div className=\"space-x-1\">\n              <span className=\"align-baseline text-xl font-medium text-foreground\">\n                8,081\n              </span>\n              <span className=\"text-xs text-muted-foreground\">Blocks/mo</span>\n            </div>\n            <div className=\"flex h-5 items-center rounded bg-gradient-to-l from-emerald-400 to-indigo-600 px-2 text-xs text-white\">\n              2024\n            </div>\n          </div>\n          <div className=\"space-y-1\">\n            <div className=\"space-x-1\">\n              <span className=\"align-baseline text-xl font-medium text-foreground\">\n                5,412\n              </span>\n              <span className=\"text-xs text-muted-foreground\">Blocks/mo</span>\n            </div>\n            <div className=\"flex h-5 w-2/3 items-center rounded bg-muted px-2 text-xs text-foreground dark:bg-white/20\">\n              2023\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/hero/eight/logo-cloud.tsx",
+      "type": "registry:file",
+      "target": "components/page-templates/hero/eight/logo-cloud.tsx",
+      "content": "import { InfiniteSlider } from \"@/motion-primitives/infinite-slider\"\nimport { ProgressiveBlur } from \"@/motion-primitives/progressive-blur\"\nimport { Claude } from \"@/ui/svgs/claude\"\nimport { Figma } from \"@/ui/svgs/figma\"\nimport { Firebase } from \"@/ui/svgs/firebase\"\nimport { Linear } from \"@/ui/svgs/linear\"\nimport { Slack } from \"@/ui/svgs/slack\"\nimport { Supabase } from \"@/ui/svgs/supabase\"\nimport { Twilio } from \"@/ui/svgs/twilio\"\nimport { Vercel } from \"@/ui/svgs/vercel\"\n\nexport const LogoCloud = () => {\n  return (\n    <section className=\"bg-background pb-16 md:pb-32\">\n      <div className=\"group relative m-auto max-w-6xl px-6\">\n        <div className=\"flex flex-col items-center md:flex-row\">\n          <div className=\"inline md:max-w-44 md:border-r md:pr-6\">\n            <p className=\"text-end text-sm\">Trusted by modern product teams</p>\n          </div>\n          <div className=\"relative py-6 md:w-[calc(100%-11rem)]\">\n            <InfiniteSlider speedOnHover={20} speed={40} gap={112}>\n              <div className=\"flex items-center gap-2\">\n                <Figma className=\"size-4 shrink-0\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Figma\n                </span>\n              </div>\n\n              <div className=\"flex items-center gap-2\">\n                <Firebase className=\"size-5 shrink-0\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Firebase\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Supabase className=\"size-4 shrink-0\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Supabase\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Linear className=\"size-4 shrink-0\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Linear\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Slack className=\"size-5 shrink-0\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Slack\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Twilio className=\"size-4 shrink-0\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Twilio\n                </span>\n              </div>\n\n              <div className=\"flex items-center gap-2\">\n                <Vercel className=\"size-4 shrink-0 text-foreground dark:text-white\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Vercel\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Claude className=\"size-5 shrink-0\" />\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  Claude\n                </span>\n              </div>\n            </InfiniteSlider>\n\n            <div className=\"absolute inset-y-0 left-0 w-20 bg-linear-to-r from-background\"></div>\n            <div className=\"absolute inset-y-0 right-0 w-20 bg-linear-to-l from-background\"></div>\n            <ProgressiveBlur\n              className=\"pointer-events-none absolute top-0 left-0 h-full w-20\"\n              direction=\"left\"\n              blurIntensity={1}\n            />\n            <ProgressiveBlur\n              className=\"pointer-events-none absolute top-0 right-0 h-full w-20\"\n              direction=\"right\"\n              blurIntensity={1}\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/claude.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/claude.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nconst Claude = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} preserveAspectRatio=\"xMidYMid\" viewBox=\"0 0 256 257\">\n    <path\n      fill=\"#D97757\"\n      d=\"m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z\"\n    />\n  </svg>\n)\n\nexport { Claude }\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/figma.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/figma.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nconst Figma = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 54 80\" fill=\"none\">\n    <g clipPath=\"url(#clip0_912_3)\">\n      <path\n        d=\"M13.3333 80.0002C20.6933 80.0002 26.6667 74.0268 26.6667 66.6668V53.3335H13.3333C5.97333 53.3335 0 59.3068 0 66.6668C0 74.0268 5.97333 80.0002 13.3333 80.0002Z\"\n        fill=\"#0ACF83\"\n      />\n      <path\n        d=\"M0 39.9998C0 32.6398 5.97333 26.6665 13.3333 26.6665H26.6667V53.3332H13.3333C5.97333 53.3332 0 47.3598 0 39.9998Z\"\n        fill=\"#A259FF\"\n      />\n      <path\n        d=\"M0 13.3333C0 5.97333 5.97333 0 13.3333 0H26.6667V26.6667H13.3333C5.97333 26.6667 0 20.6933 0 13.3333Z\"\n        fill=\"#F24E1E\"\n      />\n      <path\n        d=\"M26.6667 0H40.0001C47.3601 0 53.3334 5.97333 53.3334 13.3333C53.3334 20.6933 47.3601 26.6667 40.0001 26.6667H26.6667V0Z\"\n        fill=\"#FF7262\"\n      />\n      <path\n        d=\"M53.3334 39.9998C53.3334 47.3598 47.3601 53.3332 40.0001 53.3332C32.6401 53.3332 26.6667 47.3598 26.6667 39.9998C26.6667 32.6398 32.6401 26.6665 40.0001 26.6665C47.3601 26.6665 53.3334 32.6398 53.3334 39.9998Z\"\n        fill=\"#1ABCFE\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_912_3\">\n        <rect width=\"53.3333\" height=\"80\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n)\n\nexport { Figma }\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/firebase.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/firebase.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nconst Firebase = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} fill=\"none\" viewBox=\"0 0 600 600\">\n    <path\n      fill=\"#FF9100\"\n      d=\"M213.918 560.499c23.248 9.357 48.469 14.909 74.952 15.834 35.84 1.252 69.922-6.158 100.391-20.234-36.537-14.355-69.627-35.348-97.869-61.448-18.306 29.31-45.382 52.462-77.474 65.848Z\"\n    />\n    <path\n      fill=\"#FFC400\"\n      d=\"M291.389 494.66c-64.466-59.622-103.574-145.917-100.269-240.568.108-3.073.27-6.145.46-9.216a166.993 166.993 0 0 0-36.004-5.241 167.001 167.001 0 0 0-51.183 6.153c-17.21 30.145-27.594 64.733-28.888 101.781-3.339 95.611 54.522 179.154 138.409 212.939 32.093-13.387 59.168-36.51 77.475-65.848Z\"\n    />\n    <path\n      fill=\"#FF9100\"\n      d=\"M291.39 494.657c14.988-23.986 24.075-52.106 25.133-82.403 2.783-79.695-50.792-148.251-124.942-167.381-.19 3.071-.352 6.143-.46 9.216-3.305 94.651 35.803 180.946 100.269 240.568Z\"\n    />\n    <path\n      fill=\"#DD2C00\"\n      d=\"M308.231 20.858C266 54.691 232.652 99.302 212.475 150.693c-11.551 29.436-18.81 61.055-20.929 94.2 74.15 19.13 127.726 87.686 124.943 167.38-1.058 30.297-10.172 58.39-25.134 82.404 28.24 26.127 61.331 47.093 97.868 61.447 73.337-33.9 125.37-106.846 128.383-193.127 1.952-55.901-19.526-105.724-49.875-147.778-32.051-44.477-159.5-194.36-159.5-194.36Z\"\n    />\n  </svg>\n)\n\nexport { Firebase }\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/linear.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/linear.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nconst Linear = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} fill=\"none\" viewBox=\"0 0 100 100\">\n    <path\n      fill=\"#5E6AD2\"\n      d=\"M1.225 61.523c-.222-.949.908-1.546 1.597-.857l36.512 36.512c.69.69.092 1.82-.857 1.597-18.425-4.323-32.93-18.827-37.252-37.252ZM.002 46.889a.99.99 0 0 0 .29.76L52.35 99.71c.201.2.478.307.76.29 2.37-.149 4.695-.46 6.963-.927.765-.157 1.03-1.096.478-1.648L2.576 39.448c-.552-.551-1.491-.286-1.648.479a50.067 50.067 0 0 0-.926 6.962ZM4.21 29.705a.988.988 0 0 0 .208 1.1l64.776 64.776c.289.29.726.375 1.1.208a49.908 49.908 0 0 0 5.185-2.684.981.981 0 0 0 .183-1.54L8.436 24.336a.981.981 0 0 0-1.541.183 49.896 49.896 0 0 0-2.684 5.185Zm8.448-11.631a.986.986 0 0 1-.045-1.354C21.78 6.46 35.111 0 49.952 0 77.592 0 100 22.407 100 50.048c0 14.84-6.46 28.172-16.72 37.338a.986.986 0 0 1-1.354-.045L12.659 18.074Z\"\n    />\n  </svg>\n)\n\nexport { Linear }\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/slack.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/slack.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nconst Slack = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 2447.6 2452.5\">\n    <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n      <path\n        d=\"m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z\"\n        fill=\"#36c5f0\"\n      />\n      <path\n        d=\"m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z\"\n        fill=\"#2eb67d\"\n      />\n      <path\n        d=\"m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z\"\n        fill=\"#ecb22e\"\n      />\n      <path\n        d=\"m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0\"\n        fill=\"#e01e5a\"\n      />\n    </g>\n  </svg>\n)\n\nexport { Slack }\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/supabase.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/supabase.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nconst Supabase = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 109 113\" fill=\"none\">\n    <path\n      d=\"M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z\"\n      fill=\"url(#paint0_linear)\"\n    />\n    <path\n      d=\"M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z\"\n      fill=\"url(#paint1_linear)\"\n      fillOpacity=\"0.2\"\n    />\n    <path\n      d=\"M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z\"\n      fill=\"#3ECF8E\"\n    />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear\"\n        x1=\"53.9738\"\n        y1=\"54.974\"\n        x2=\"94.1635\"\n        y2=\"71.8295\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#249361\" />\n        <stop offset=\"1\" stopColor=\"#3ECF8E\" />\n      </linearGradient>\n      <linearGradient\n        id=\"paint1_linear\"\n        x1=\"36.1558\"\n        y1=\"30.578\"\n        x2=\"54.4844\"\n        y2=\"65.0806\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop />\n        <stop offset=\"1\" stopOpacity=\"0\" />\n      </linearGradient>\n    </defs>\n  </svg>\n)\n\nexport { Supabase }\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/twilio.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/twilio.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nconst Twilio = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 64 64\">\n    <g transform=\"translate(0 .047) scale(.93704)\" fill=\"#e31e26\">\n      <path d=\"M34.1 0C15.3 0 0 15.3 0 34.1s15.3 34.1 34.1 34.1C53 68.3 68.3 53 68.3 34.1S53 0 34.1 0zm0 59.3C20.3 59.3 9 48 9 34.1 9 20.3 20.3 9 34.1 9 48 9 59.3 20.3 59.3 34.1 59.3 48 48 59.3 34.1 59.3z\" />\n      <circle cx=\"42.6\" cy=\"25.6\" r=\"7.1\" />\n      <circle cx=\"42.6\" cy=\"42.6\" r=\"7.1\" />\n      <circle cx=\"25.6\" cy=\"42.6\" r=\"7.1\" />\n      <circle cx=\"25.6\" cy=\"25.6\" r=\"7.1\" />\n    </g>\n  </svg>\n)\n\nexport { Twilio }\n"
+    },
+    {
+      "path": "registry/default/ui/svgs/vercel.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/svgs/vercel.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nexport const Vercel = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 256 222\"\n    width=\"1em\"\n    height=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    preserveAspectRatio=\"xMidYMid\"\n    {...props}\n  >\n    <path fill=\"currentColor\" d=\"m128 0 128 221.705H0z\" />\n  </svg>\n)\n\nexport const VercelFull = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    aria-label=\"Vercel logotype\"\n    height=\"1em\"\n    role=\"img\"\n    viewBox=\"0 0 262 52\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M59.8019 52L29.9019 0L0.00190544 52H59.8019ZM89.9593 49.6328L114.947 2.36365H104.139L86.9018 36.6921L69.6647 2.36365H58.8564L83.8442 49.6328H89.9593ZM260.25 2.36365V49.6329H251.302V2.36365H260.25ZM210.442 31.99C210.442 28.3062 211.211 25.0661 212.749 22.2699C214.287 19.4737 216.431 17.321 219.181 15.812C221.93 14.3029 225.146 13.5484 228.828 13.5484C232.09 13.5484 235.026 14.2585 237.636 15.6788C240.245 17.0991 242.319 19.2074 243.857 22.0036C245.395 24.7998 246.187 28.2174 246.234 32.2564V34.3202H219.88C220.066 37.2496 220.928 39.5576 222.466 41.2442C224.051 42.8864 226.171 43.7075 228.828 43.7075C230.505 43.7075 232.043 43.2637 233.441 42.376C234.839 41.4883 235.888 40.2899 236.587 38.7808L245.745 39.4466C244.626 42.7754 242.529 45.4385 239.453 47.4358C236.377 49.4331 232.835 50.4317 228.828 50.4317C225.146 50.4317 221.93 49.6772 219.181 48.1681C216.431 46.6591 214.287 44.5064 212.749 41.7102C211.211 38.914 210.442 35.6739 210.442 31.99ZM237.006 28.6612C236.68 25.7762 235.771 23.668 234.28 22.3365C232.789 20.9606 230.971 20.2726 228.828 20.2726C226.358 20.2726 224.354 21.0049 222.816 22.4696C221.278 23.9343 220.322 25.9982 219.95 28.6612H237.006ZM195.347 22.3365C196.838 23.5348 197.77 25.1993 198.143 27.3297L207.371 26.8637C207.044 24.1562 206.089 21.8039 204.505 19.8066C202.92 17.8093 200.869 16.278 198.353 15.2128C195.883 14.1032 193.157 13.5484 190.174 13.5484C186.492 13.5484 183.277 14.3029 180.527 15.812C177.777 17.321 175.634 19.4737 174.096 22.2699C172.558 25.0661 171.789 28.3062 171.789 31.99C171.789 35.6739 172.558 38.914 174.096 41.7102C175.634 44.5064 177.777 46.6591 180.527 48.1681C183.277 49.6772 186.492 50.4317 190.174 50.4317C193.25 50.4317 196.046 49.8769 198.563 48.7673C201.079 47.6133 203.13 45.9933 204.714 43.9072C206.299 41.8212 207.254 39.38 207.58 36.5838L198.283 36.1844C197.957 38.5367 197.048 40.3565 195.557 41.6436C194.065 42.8864 192.271 43.5078 190.174 43.5078C187.285 43.5078 185.048 42.5091 183.463 40.5118C181.879 38.5145 181.086 35.6739 181.086 31.99C181.086 28.3062 181.879 25.4656 183.463 23.4683C185.048 21.471 187.285 20.4723 190.174 20.4723C192.178 20.4723 193.902 21.0937 195.347 22.3365ZM149.955 14.3457H158.281L158.522 21.1369C159.113 19.2146 159.935 17.7218 160.988 16.6585C162.514 15.1166 164.642 14.3457 167.371 14.3457H170.771V21.6146H167.302C165.359 21.6146 163.763 21.8789 162.514 22.4075C161.311 22.9362 160.386 23.7732 159.739 24.9186C159.137 26.064 158.837 27.5178 158.837 29.2799V49.6328H149.955V14.3457ZM111.548 22.2699C110.01 25.0661 109.241 28.3062 109.241 31.99C109.241 35.6739 110.01 38.914 111.548 41.7102C113.086 44.5064 115.229 46.6591 117.979 48.1681C120.729 49.6772 123.944 50.4317 127.626 50.4317C131.634 50.4317 135.176 49.4331 138.252 47.4358C141.327 45.4385 143.425 42.7754 144.543 39.4466L135.385 38.7808C134.686 40.2899 133.638 41.4883 132.24 42.376C130.842 43.2637 129.304 43.7075 127.626 43.7075C124.97 43.7075 122.849 42.8864 121.265 41.2442C119.727 39.5576 118.865 37.2496 118.678 34.3202H145.032V32.2564C144.986 28.2174 144.194 24.7998 142.656 22.0036C141.118 19.2074 139.044 17.0991 136.434 15.6788C133.824 14.2585 130.888 13.5484 127.626 13.5484C123.944 13.5484 120.729 14.3029 117.979 15.812C115.229 17.321 113.086 19.4737 111.548 22.2699ZM133.079 22.3365C134.57 23.668 135.479 25.7762 135.805 28.6612H118.748C119.121 25.9982 120.076 23.9343 121.614 22.4696C123.152 21.0049 125.156 20.2726 127.626 20.2726C129.77 20.2726 131.587 20.9606 133.079 22.3365Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "hero"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "hero/eight"
+  }
+}

package/public/r/template-hero-eleven.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-hero-eleven",
+  "type": "registry:block",
+  "title": "hero/eleven",
+  "description": "Page template \"hero/eleven\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/hero/eleven/index.tsx",
+      "type": "registry:file",
+      "target": "components/page-templates/hero/eleven/index.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport { ArrowRight, Mail, Menu, SendHorizontal, X } from \"lucide-react\"\n\nconst menuItems = [\n  { name: \"Features\", href: \"#\" },\n  { name: \"Solution\", href: \"#\" },\n  { name: \"Pricing\", href: \"#\" },\n  { name: \"About\", href: \"#\" },\n]\n\nexport default function HeroSection() {\n  const [menuState, setMenuState] = useState(false)\n  return (\n    <>\n      <header>\n        <nav\n          data-state={menuState && \"active\"}\n          className=\"fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent\"\n        >\n          <div className=\"m-auto max-w-5xl px-6\">\n            <div className=\"flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4\">\n              <div className=\"flex w-full justify-between lg:w-auto\">\n                <button\n                  onClick={() => setMenuState(!menuState)}\n                  aria-label={menuState == true ? \"Close Menu\" : \"Open Menu\"}\n                  className=\"relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden\"\n                >\n                  <Menu className=\"m-auto size-6 duration-200 in-data-[state=active]:scale-0 in-data-[state=active]:rotate-180 in-data-[state=active]:opacity-0\" />\n                  <X className=\"absolute inset-0 m-auto size-6 scale-0 -rotate-180 opacity-0 duration-200 in-data-[state=active]:scale-100 in-data-[state=active]:rotate-0 in-data-[state=active]:opacity-100\" />\n                </button>\n              </div>\n\n              <div className=\"mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border bg-background p-6 shadow-2xl shadow-zinc-300/20 in-data-[state=active]:block md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none lg:in-data-[state=active]:flex dark:shadow-none dark:lg:bg-transparent\">\n                <div className=\"lg:pr-4\">\n                  <ul className=\"space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm\">\n                    {menuItems.map((item, index) => (\n                      <li key={index}>\n                        <Link\n                          href={item.href}\n                          className=\"block text-muted-foreground duration-150 hover:text-accent-foreground\"\n                        >\n                          <span>{item.name}</span>\n                        </Link>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n\n                <div className=\"flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6\">\n                  <Button asChild variant=\"outline\" size=\"sm\">\n                    <Link href=\"#\">\n                      <span>Login</span>\n                    </Link>\n                  </Button>\n\n                  <Button asChild size=\"sm\">\n                    <Link href=\"#\">\n                      <span>Login</span>\n                    </Link>\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </header>\n\n      <main>\n        <section className=\"overflow-hidden\">\n          <div className=\"relative mx-auto max-w-5xl px-6 py-28 lg:py-20\">\n            <div className=\"lg:flex lg:items-center lg:gap-12\">\n              <div className=\"relative z-10 mx-auto max-w-xl text-center lg:ml-0 lg:w-1/2 lg:text-left\">\n                <Link\n                  href=\"/\"\n                  className=\"mx-auto flex w-fit items-center gap-2 rounded-(--radius) border p-1 pr-3 lg:ml-0\"\n                >\n                  <span className=\"rounded-[calc(var(--radius)-0.25rem)] bg-muted px-2 py-1 text-xs\">\n                    New\n                  </span>\n                  <span className=\"text-sm\">Introduction LoveUI</span>\n                  <span className=\"block h-4 w-px bg-(--color-border)\"></span>\n\n                  <ArrowRight className=\"size-4\" />\n                </Link>\n\n                <h1 className=\"mt-10 text-4xl font-bold text-balance md:text-5xl xl:text-5xl\">\n                  Production-ready UI blocks for modern teams\n                </h1>\n                <p className=\"mt-8\">\n                  LoveUI helps teams ship polished interfaces faster with\n                  accessible components, flexible theming, and production-ready\n                  patterns.\n                </p>\n\n                <div>\n                  <form\n                    action=\"\"\n                    className=\"mx-auto my-10 max-w-sm lg:my-12 lg:mr-auto lg:ml-0\"\n                  >\n                    <div className=\"relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border bg-background pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2 has-[input:focus]:ring-muted\">\n                      <Mail className=\"text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5\" />\n\n                      <input\n                        placeholder=\"Your mail address\"\n                        className=\"h-14 w-full bg-transparent pl-12 focus:outline-none\"\n                        type=\"email\"\n                      />\n\n                      <div className=\"md:pr-1.5 lg:pr-0\">\n                        <Button\n                          aria-label=\"submit\"\n                          className=\"rounded-(--radius)\"\n                        >\n                          <span className=\"hidden md:block\">Get Started</span>\n                          <SendHorizontal\n                            className=\"relative mx-auto size-5 md:hidden\"\n                            strokeWidth={2}\n                          />\n                        </Button>\n                      </div>\n                    </div>\n                  </form>\n\n                  <ul className=\"list-inside list-disc space-y-2\">\n                    <li>Faster shipping</li>\n                    <li>Modern patterns</li>\n                    <li>100% customizable</li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n            <div className=\"absolute inset-0 -mx-4 rounded-3xl p-3 lg:col-span-3\">\n              <div className=\"relative\">\n                <div className=\"absolute -inset-17 z-1 bg-radial-[at_65%_25%] from-transparent to-background to-40%\"></div>\n                <Image\n                  className=\"hidden dark:block\"\n                  src=\"/music.png\"\n                  alt=\"app illustration\"\n                  width={2796}\n                  height={2008}\n                />\n                <Image\n                  className=\"dark:hidden\"\n                  src=\"/music-light.png\"\n                  alt=\"app illustration\"\n                  width={2796}\n                  height={2008}\n                />\n              </div>\n            </div>\n          </div>\n        </section>\n      </main>\n    </>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "hero"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "hero/eleven"
+  }
+}

package/public/r/template-hero-five.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-hero-five",
+  "type": "registry:block",
+  "title": "hero/five",
+  "description": "Page template \"hero/five\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/hero/five/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/hero/five/app/page.tsx",
+      "content": "import HeroSection from \"../index\"\n\nexport default function Page() {\n  return <HeroSection />\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/hero/five/index.tsx",
+      "type": "registry:file",
+      "target": "components/page-templates/hero/five/index.tsx",
+      "content": "import React from \"react\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport {\n  AudioLines,\n  ChevronRight,\n  Github,\n  ImageIcon,\n  Lightbulb,\n  Mic2,\n  Paperclip,\n  Plus,\n  ShoppingBag,\n  Telescope,\n} from \"lucide-react\"\n\nexport default function HeroSection() {\n  return (\n    <>\n      <main className=\"overflow-hidden\">\n        <section className=\"bg-background\">\n          <div className=\"relative pt-16 pb-32\">\n            <div className=\"relative z-10 mx-auto w-full max-w-5xl px-6\">\n              <div className=\"pointer-events-none relative mx-auto aspect-3/2 max-w-xl mask-radial-from-35% mask-radial-to-75% opacity-75 mix-blend-darken\">\n                <div className=\"absolute inset-0 bg-background mix-blend-overlay\"></div>\n                <Image\n                  src=\"/page-templates/hero-bg.jpg\"\n                  alt=\"watch in dark\"\n                  className=\"not-dark:invert dark:mix-blend-lighten\"\n                  width={1340}\n                  height={560}\n                />\n              </div>\n              <div className=\"mx-auto mt-6 max-w-md text-center\">\n                <h1 className=\"font-serif text-4xl font-medium text-balance sm:text-5xl\">\n                  Ship faster. Design with LoveUI.\n                </h1>\n                <p className=\"mt-4 text-balance text-muted-foreground\">\n                  LoveUI is your all-in-one kit for shipping polished interfaces\n                  in your app.\n                </p>\n\n                <Button asChild className=\"mt-6 pr-1.5\">\n                  <Link href=\"#link\">\n                    <span className=\"text-nowrap\">Start Building</span>\n                    <ChevronRight className=\"opacity-50\" />\n                  </Link>\n                </Button>\n              </div>\n            </div>\n          </div>\n        </section>\n      </main>\n    </>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "hero"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "hero/five"
+  }
+}

package/public/r/template-hero-four.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-hero-four",
+  "type": "registry:block",
+  "title": "hero/four",
+  "description": "Page template \"hero/four\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/hero/four/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/hero/four/app/page.tsx",
+      "content": "import HeroSection from \"../index\"\n\nexport default function Page() {\n  return <HeroSection />\n}\n"
+    },
+    {
+      "path": "registry/page-templates/default/templates/hero/four/index.tsx",
+      "type": "registry:file",
+      "target": "components/page-templates/hero/four/index.tsx",
+      "content": "import React from \"react\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport {\n  AudioLines,\n  ChevronRight,\n  Github,\n  ImageIcon,\n  Lightbulb,\n  Mic2,\n  Paperclip,\n  Plus,\n  ShoppingBag,\n  Telescope,\n} from \"lucide-react\"\n\nexport default function HeroSection() {\n  return (\n    <>\n      <main className=\"overflow-hidden\">\n        <section className=\"bg-background\">\n          <div className=\"relative py-32\">\n            <div className=\"absolute inset-0 aspect-2/3 mask-t-from-50% mask-radial-[75%_100%] mask-radial-from-45% mask-radial-to-75% mask-radial-at-top md:aspect-square lg:aspect-9/4 dark:opacity-5\">\n              <Image\n                src=\"/page-templates/hero-bg.jpg\"\n                alt=\"hero background\"\n                width={2268}\n                height={1740}\n                className=\"h-full w-full object-cover object-top\"\n              />\n            </div>\n            <div className=\"relative z-10 mx-auto w-full max-w-5xl px-6\">\n              <div\n                aria-hidden\n                className=\"mb-6 ml-auto max-w-3xl min-w-2xl scale-90 mask-radial-[75%_100%] mask-radial-from-65% mask-radial-to-90% mask-radial-at-left py-12 pl-6 perspective-near sm:mb-12 md:pl-12 lg:mb-20\"\n              >\n                <div className=\"relative flex h-56 -rotate-12 rotate-x-12 rotate-y-2 rotate-z-10 flex-col rounded-3xl border bg-muted py-4 pl-4\">\n                  <div className=\"absolute bottom-15 left-4 min-w-56 rounded-2xl bg-card p-1 shadow-xl ring-1 shadow-foreground/10 ring-border dark:shadow-black/25\">\n                    <div className=\"flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm hover:bg-muted [&>svg]:size-4 [&>svg]:opacity-65\">\n                      <Paperclip />\n                      <span>Add docs and assets</span>\n                    </div>\n                    <span className=\"mx-3 my-0.5 block h-px bg-[linear-gradient(90deg,var(--color-foreground)_1px,transparent_1px)] bg-size-[6px_1px] bg-bottom bg-repeat-x opacity-30 dark:opacity-15\" />\n                    <div className=\"flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm hover:bg-muted [&>svg]:size-4 [&>svg]:opacity-65\">\n                      <ImageIcon />\n                      <span>Create preview</span>\n                    </div>\n                    <div className=\"flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm hover:bg-muted [&>svg]:size-4 [&>svg]:opacity-65\">\n                      <Lightbulb />\n                      <span>Design ideas</span>\n                    </div>\n                    <div className=\"flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm hover:bg-muted [&>svg]:size-4 [&>svg]:opacity-65\">\n                      <Telescope />\n                      <span>Pattern search</span>\n                    </div>\n                    <div className=\"flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm hover:bg-muted [&>svg]:size-4 [&>svg]:opacity-65\">\n                      <ShoppingBag />\n                      <span>Template packs</span>\n                    </div>\n                    <div className=\"flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm hover:bg-muted [&>svg]:size-4 [&>svg]:opacity-65\">\n                      <Github />\n                      <span>Open source kits</span>\n                    </div>\n                  </div>\n\n                  <div className=\"mt-auto flex h-fit justify-between gap-3 rounded-full bg-card p-2 shadow-xs ring-1 shadow-foreground/6.5 ring-border dark:shadow-black/6.5\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"flex size-9 cursor-pointer rounded-full bg-muted *:m-auto *:size-4\">\n                        <Plus />\n                      </div>\n                      <div className=\"text-sm text-muted-foreground\">\n                        Ask LoveUI...\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-0.5\">\n                      <div className=\"flex size-9 cursor-pointer rounded-full *:m-auto *:size-4 hover:bg-muted\">\n                        <Mic2 />\n                      </div>\n                      <div className=\"flex size-9 cursor-pointer rounded-full bg-foreground text-background *:m-auto *:size-4 hover:brightness-110\">\n                        <AudioLines />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"mx-auto max-w-md text-center\">\n                <h1 className=\"font-serif text-4xl font-medium text-balance sm:text-5xl\">\n                  Ship faster. Design with LoveUI.\n                </h1>\n                <p className=\"mt-4 text-balance text-muted-foreground\">\n                  LoveUI is your all-in-one kit for shipping polished interfaces\n                  in your app.\n                </p>\n\n                <Button asChild className=\"mt-6 pr-1.5\">\n                  <Link href=\"#link\">\n                    <span className=\"text-nowrap\">Start Building</span>\n                    <ChevronRight className=\"opacity-50\" />\n                  </Link>\n                </Button>\n              </div>\n            </div>\n          </div>\n        </section>\n      </main>\n    </>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "hero"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "hero/four"
+  }
+}