saas-forge 0.0.1

package/packages/ui/src/components/aceternity/sparkles.tsx

@@ -0,0 +1,434 @@
+"use client";
+import React, { useId, useMemo } from "react";
+import { useEffect, useState } from "react";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import type { Container, SingleOrMultiple } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+import { motion, useAnimation } from "motion/react";
+import { cn } from "../../lib/utils";
+
+type ParticlesProps = {
+  id?: string;
+  className?: string;
+  background?: string;
+  particleSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  speed?: number;
+  particleColor?: string;
+  particleDensity?: number;
+};
+export const SparklesCore = (props: ParticlesProps) => {
+  const {
+    id,
+    className,
+    background,
+    minSize,
+    maxSize,
+    speed,
+    particleColor,
+    particleDensity,
+  } = props;
+  const [init, setInit] = useState(false);
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+  const controls = useAnimation();
+
+  const particlesLoaded = async (container?: Container) => {
+    if (container) {
+      controls.start({
+        opacity: 1,
+        transition: {
+          duration: 1,
+        },
+      });
+    }
+  };
+
+  const generatedId = useId();
+  return (
+    <motion.div animate={controls} className={cn("opacity-0", className)}>
+      {init && (
+        <Particles
+          id={id || generatedId}
+          className={cn("h-full w-full")}
+          particlesLoaded={particlesLoaded}
+          options={{
+            background: {
+              color: {
+                value: background || "#0d47a1",
+              },
+            },
+            fullScreen: {
+              enable: false,
+              zIndex: 1,
+            },
+
+            fpsLimit: 120,
+            interactivity: {
+              events: {
+                onClick: {
+                  enable: true,
+                  mode: "push",
+                },
+                onHover: {
+                  enable: false,
+                  mode: "repulse",
+                },
+                resize: true as any,
+              },
+              modes: {
+                push: {
+                  quantity: 4,
+                },
+                repulse: {
+                  distance: 200,
+                  duration: 0.4,
+                },
+              },
+            },
+            particles: {
+              bounce: {
+                horizontal: {
+                  value: 1,
+                },
+                vertical: {
+                  value: 1,
+                },
+              },
+              collisions: {
+                absorb: {
+                  speed: 2,
+                },
+                bounce: {
+                  horizontal: {
+                    value: 1,
+                  },
+                  vertical: {
+                    value: 1,
+                  },
+                },
+                enable: false,
+                maxSpeed: 50,
+                mode: "bounce",
+                overlap: {
+                  enable: true,
+                  retries: 0,
+                },
+              },
+              color: {
+                value: particleColor || "#ffffff",
+                animation: {
+                  h: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                  s: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                  l: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                },
+              },
+              effect: {
+                close: true,
+                fill: true,
+                options: {},
+                type: {} as SingleOrMultiple<string> | undefined,
+              },
+              groups: {},
+              move: {
+                angle: {
+                  offset: 0,
+                  value: 90,
+                },
+                attract: {
+                  distance: 200,
+                  enable: false,
+                  rotate: {
+                    x: 3000,
+                    y: 3000,
+                  },
+                },
+                center: {
+                  x: 50,
+                  y: 50,
+                  mode: "percent",
+                  radius: 0,
+                },
+                decay: 0,
+                distance: {},
+                direction: "none",
+                drift: 0,
+                enable: true,
+                gravity: {
+                  acceleration: 9.81,
+                  enable: false,
+                  inverse: false,
+                  maxSpeed: 50,
+                },
+                path: {
+                  clamp: true,
+                  delay: {
+                    value: 0,
+                  },
+                  enable: false,
+                  options: {},
+                },
+                outModes: {
+                  default: "out",
+                },
+                random: false,
+                size: false,
+                speed: {
+                  min: 0.1,
+                  max: 1,
+                },
+                spin: {
+                  acceleration: 0,
+                  enable: false,
+                },
+                straight: false,
+                trail: {
+                  enable: false,
+                  length: 10,
+                  fill: {},
+                },
+                vibrate: false,
+                warp: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  width: 400,
+                  height: 400,
+                },
+                limit: {
+                  mode: "delete",
+                  value: 0,
+                },
+                value: particleDensity || 120,
+              },
+              opacity: {
+                value: {
+                  min: 0.1,
+                  max: 1,
+                },
+                animation: {
+                  count: 0,
+                  enable: true,
+                  speed: speed || 4,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                  mode: "auto",
+                  startValue: "random",
+                  destroy: "none",
+                },
+              },
+              reduceDuplicates: false,
+              shadow: {
+                blur: 0,
+                color: {
+                  value: "#000",
+                },
+                enable: false,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+              shape: {
+                close: true,
+                fill: true,
+                options: {},
+                type: "circle",
+              },
+              size: {
+                value: {
+                  min: minSize || 1,
+                  max: maxSize || 3,
+                },
+                animation: {
+                  count: 0,
+                  enable: false,
+                  speed: 5,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                  mode: "auto",
+                  startValue: "random",
+                  destroy: "none",
+                },
+              },
+              stroke: {
+                width: 0,
+              },
+              zIndex: {
+                value: 0,
+                opacityRate: 1,
+                sizeRate: 1,
+                velocityRate: 1,
+              },
+              destroy: {
+                bounds: {},
+                mode: "none",
+                split: {
+                  count: 1,
+                  factor: {
+                    value: 3,
+                  },
+                  rate: {
+                    value: {
+                      min: 4,
+                      max: 9,
+                    },
+                  },
+                  sizeOffset: true,
+                },
+              },
+              roll: {
+                darken: {
+                  enable: false,
+                  value: 0,
+                },
+                enable: false,
+                enlighten: {
+                  enable: false,
+                  value: 0,
+                },
+                mode: "vertical",
+                speed: 25,
+              },
+              tilt: {
+                value: 0,
+                animation: {
+                  enable: false,
+                  speed: 0,
+                  decay: 0,
+                  sync: false,
+                },
+                direction: "clockwise",
+                enable: false,
+              },
+              twinkle: {
+                lines: {
+                  enable: false,
+                  frequency: 0.05,
+                  opacity: 1,
+                },
+                particles: {
+                  enable: false,
+                  frequency: 0.05,
+                  opacity: 1,
+                },
+              },
+              wobble: {
+                distance: 5,
+                enable: false,
+                speed: {
+                  angle: 50,
+                  move: 10,
+                },
+              },
+              life: {
+                count: 0,
+                delay: {
+                  value: 0,
+                  sync: false,
+                },
+                duration: {
+                  value: 0,
+                  sync: false,
+                },
+              },
+              rotate: {
+                value: 0,
+                animation: {
+                  enable: false,
+                  speed: 0,
+                  decay: 0,
+                  sync: false,
+                },
+                direction: "clockwise",
+                path: false,
+              },
+              orbit: {
+                animation: {
+                  count: 0,
+                  enable: false,
+                  speed: 1,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                },
+                enable: false,
+                opacity: 1,
+                rotation: {
+                  value: 45,
+                },
+                width: 1,
+              },
+              links: {
+                blink: false,
+                color: {
+                  value: "#fff",
+                },
+                consent: false,
+                distance: 100,
+                enable: false,
+                frequency: 1,
+                opacity: 1,
+                shadow: {
+                  blur: 5,
+                  color: {
+                    value: "#000",
+                  },
+                  enable: false,
+                },
+                triangles: {
+                  enable: false,
+                  frequency: 1,
+                },
+                width: 1,
+                warp: false,
+              },
+              repulse: {
+                value: 0,
+                enabled: false,
+                distance: 1,
+                duration: 1,
+                factor: 1,
+                speed: 1,
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      )}
+    </motion.div>
+  );
+};

package/packages/ui/src/components/aceternity/spotlight-new.tsx

@@ -0,0 +1,128 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+
+type SpotlightProps = {
+  gradientFirst?: string;
+  gradientSecond?: string;
+  gradientThird?: string;
+  translateY?: number;
+  width?: number;
+  height?: number;
+  smallWidth?: number;
+  duration?: number;
+  xOffset?: number;
+};
+
+export const Spotlight = ({
+  gradientFirst = "radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .02) 50%, hsla(210, 100%, 45%, 0) 80%)",
+  gradientSecond = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)",
+  gradientThird = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)",
+  translateY = -350,
+  width = 560,
+  height = 1380,
+  smallWidth = 240,
+  duration = 7,
+  xOffset = 100,
+}: SpotlightProps = {}) => {
+  return (
+    <motion.div
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+      }}
+      transition={{
+        duration: 1.5,
+      }}
+      className="pointer-events-none absolute inset-0 h-full w-full "
+    >
+      <motion.div
+        animate={{
+          x: [0, xOffset, 0],
+        }}
+        transition={{
+          duration,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "easeInOut",
+        }}
+        className="absolute top-0 left-0 w-screen h-screen z-40 pointer-events-none"
+      >
+        <div
+          style={{
+            transform: `translateY(${translateY}px) rotate(-45deg)`,
+            background: gradientFirst,
+            width: `${width}px`,
+            height: `${height}px`,
+          }}
+          className={`absolute top-0 left-0`}
+        />
+
+        <div
+          style={{
+            transform: "rotate(-45deg) translate(5%, -50%)",
+            background: gradientSecond,
+            width: `${smallWidth}px`,
+            height: `${height}px`,
+          }}
+          className={`absolute top-0 left-0 origin-top-left`}
+        />
+
+        <div
+          style={{
+            transform: "rotate(-45deg) translate(-180%, -70%)",
+            background: gradientThird,
+            width: `${smallWidth}px`,
+            height: `${height}px`,
+          }}
+          className={`absolute top-0 left-0 origin-top-left`}
+        />
+      </motion.div>
+
+      <motion.div
+        animate={{
+          x: [0, -xOffset, 0],
+        }}
+        transition={{
+          duration,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "easeInOut",
+        }}
+        className="absolute top-0 right-0 w-screen h-screen z-40 pointer-events-none"
+      >
+        <div
+          style={{
+            transform: `translateY(${translateY}px) rotate(45deg)`,
+            background: gradientFirst,
+            width: `${width}px`,
+            height: `${height}px`,
+          }}
+          className={`absolute top-0 right-0`}
+        />
+
+        <div
+          style={{
+            transform: "rotate(45deg) translate(-5%, -50%)",
+            background: gradientSecond,
+            width: `${smallWidth}px`,
+            height: `${height}px`,
+          }}
+          className={`absolute top-0 right-0 origin-top-right`}
+        />
+
+        <div
+          style={{
+            transform: "rotate(45deg) translate(180%, -70%)",
+            background: gradientThird,
+            width: `${smallWidth}px`,
+            height: `${height}px`,
+          }}
+          className={`absolute top-0 right-0 origin-top-right`}
+        />
+      </motion.div>
+    </motion.div>
+  );
+};

package/packages/ui/src/components/mdx/Alert.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { motion } from "framer-motion";
+import { Alert, AlertDescription, AlertTitle } from '@workspace/ui/components/shadcn/alert';
+
+const MdxAlert = ({children,title}:{children:React.ReactNode,title:string}) => {
+  return (
+    <Alert className="my-8">
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  )
+}
+
+export default MdxAlert

package/packages/ui/src/components/mdx/Badge.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import {Badge} from '@workspace/ui/components/shadcn/badge'
+
+const MdxBadge = ({children}:{children:React.ReactNode}) => {
+  return (
+    <Badge className="my-2 inline-block">{children}</Badge>
+  )
+}
+
+export default MdxBadge

package/packages/ui/src/components/mdx/blockquote.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const blockquote = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <blockquote className="border-l-[1px] border-primary pl-4 italic text-foreground/60 my-4">
+      {children}
+    </blockquote>
+  )
+}
+
+export default blockquote

package/packages/ui/src/components/mdx/code.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Card, CardContent } from '@workspace/ui/components/shadcn/card'
+
+const code = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Card className="bg-background/50 rounded-lg my-8 shadow-lg overflow-x-auto">
+    <CardContent className="p-4">
+      <pre className="text-sm text-foreground font-mono whitespace-pre-wrap break-words">
+        {children}
+      </pre>
+    </CardContent>
+  </Card>
+  )
+}
+
+export default code

package/packages/ui/src/components/mdx/h1.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { motion } from "framer-motion";
+
+
+const h1 = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.h1
+    initial={{ opacity: 0, scale: 0.95 }}
+    animate={{ opacity: 1, scale: 1 }}
+    transition={{ duration: 0.5 }}
+    className="text-5xl font-serif font-bold  my-6"
+  >
+    {children}
+  </motion.h1>
+  )
+}
+
+export default h1

package/packages/ui/src/components/mdx/h2.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { motion } from "framer-motion";
+
+
+const h2 = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.h2
+    initial={{ opacity: 0, scale: 0.95 }}
+    animate={{ opacity: 1, scale: 1 }}
+    transition={{ duration: 0.5 }}
+    className="text-3xl font-serif font-bold  my-4"
+  >
+    {children}
+  </motion.h2>
+  )
+}
+
+export default h2

package/packages/ui/src/components/mdx/h3.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { motion } from "framer-motion";
+
+
+const h3 = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.h3
+    initial={{ opacity: 0, scale: 0.95 }}
+    animate={{ opacity: 1, scale: 1 }}
+    transition={{ duration: 0.5 }}
+    className="text-2xl font-serif font-semibold  my-3"
+  >
+    {children}
+  </motion.h3>
+  )
+}
+
+export default h3

package/packages/ui/src/components/mdx/hr.tsx

@@ -0,0 +1,7 @@
+import { Separator } from "@workspace/ui/components/shadcn/separator";
+
+const MdxSeparator = () => (
+    <Separator className="my-8" />
+  );
+  
+export default MdxSeparator

package/packages/ui/src/components/mdx/li.tsx

@@ -0,0 +1,7 @@
+const Li = ({ children }: { children: React.ReactNode }) => (
+    <li className="my-2">
+      {children}
+    </li>
+  );
+
+export default Li