From 3408c157529334b3bfbac1ec1b6ce7225b3e2919 Mon Sep 17 00:00:00 2001 From: Kinfe123 Date: Wed, 26 Jun 2024 10:18:27 +0300 Subject: [PATCH] fix: adding self hostable --- .../(landing)/CardPatterns/AnimatedBeam.tsx | 186 +++++++ .../CardPatterns/AnimatedBeamWithOutput.tsx | 494 ++++++++++++++++++ apps/web/app/(landing)/Features/index.tsx | 64 ++- apps/web/public/logo.svg | 2 +- 4 files changed, 740 insertions(+), 6 deletions(-) create mode 100644 apps/web/app/(landing)/CardPatterns/AnimatedBeam.tsx create mode 100644 apps/web/app/(landing)/CardPatterns/AnimatedBeamWithOutput.tsx diff --git a/apps/web/app/(landing)/CardPatterns/AnimatedBeam.tsx b/apps/web/app/(landing)/CardPatterns/AnimatedBeam.tsx new file mode 100644 index 00000000..59e1e002 --- /dev/null +++ b/apps/web/app/(landing)/CardPatterns/AnimatedBeam.tsx @@ -0,0 +1,186 @@ +"use client"; + +import { cn } from "@repo/ui/lib/utils"; +import { motion } from "framer-motion"; +import { RefObject, useEffect, useId, useState } from "react"; + +export interface AnimatedBeamProps { + className?: string; + containerRef: RefObject; // Container ref + fromRef: RefObject; + toRef: RefObject; + curvature?: number; + reverse?: boolean; + pathColor?: string; + pathWidth?: number; + pathOpacity?: number; + gradientStartColor?: string; + gradientStopColor?: string; + delay?: number; + duration?: number; + startXOffset?: number; + startYOffset?: number; + endXOffset?: number; + endYOffset?: number; +} + +export const AnimatedBeam: React.FC = ({ + className, + containerRef, + fromRef, + toRef, + curvature = 0, + reverse = false, // Include the reverse prop + duration = Math.random() * 3 + 4, + delay = 0, + pathColor = "gray", + pathWidth = 2, + pathOpacity = 0.2, + gradientStartColor = "#ffaa40", + gradientStopColor = "#9c40ff", + startXOffset = 0, + startYOffset = 0, + endXOffset = 0, + endYOffset = 0, +}) => { + const id = useId(); + const [pathD, setPathD] = useState(""); + const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 }); + + // Calculate the gradient coordinates based on the reverse prop + const gradientCoordinates = reverse + ? { + x1: ["90%", "-10%"], + x2: ["100%", "0%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + } + : { + x1: ["10%", "110%"], + x2: ["0%", "100%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + }; + + useEffect(() => { + const updatePath = () => { + if (containerRef.current && fromRef.current && toRef.current) { + const containerRect = containerRef.current.getBoundingClientRect(); + const rectA = fromRef.current.getBoundingClientRect(); + const rectB = toRef.current.getBoundingClientRect(); + + const svgWidth = containerRect.width; + const svgHeight = containerRect.height; + setSvgDimensions({ width: svgWidth, height: svgHeight }); + + const startX = + rectA.left - containerRect.left + rectA.width / 2 + startXOffset; + const startY = + rectA.top - containerRect.top + rectA.height / 2 + startYOffset; + const endX = + rectB.left - containerRect.left + rectB.width / 2 + endXOffset; + const endY = + rectB.top - containerRect.top + rectB.height / 2 + endYOffset; + + const controlY = startY - curvature; + const d = `M ${startX},${startY} Q ${(startX + endX) / 2 + },${controlY} ${endX},${endY}`; + setPathD(d); + } + }; + + // Initialize ResizeObserver + const resizeObserver = new ResizeObserver((entries) => { + // For all entries, recalculate the path + for (let entry of entries) { + updatePath(); + } + }); + + // Observe the container element + if (containerRef.current) { + resizeObserver.observe(containerRef.current); + } + + // Call the updatePath initially to set the initial path + updatePath(); + + // Clean up the observer on component unmount + return () => { + resizeObserver.disconnect(); + }; + }, [ + containerRef, + fromRef, + toRef, + curvature, + startXOffset, + startYOffset, + endXOffset, + endYOffset, + ]); + + return ( + + + + + + + + + + + + + ); +}; diff --git a/apps/web/app/(landing)/CardPatterns/AnimatedBeamWithOutput.tsx b/apps/web/app/(landing)/CardPatterns/AnimatedBeamWithOutput.tsx new file mode 100644 index 00000000..94774ec2 --- /dev/null +++ b/apps/web/app/(landing)/CardPatterns/AnimatedBeamWithOutput.tsx @@ -0,0 +1,494 @@ +"use client"; +import { cn } from "@repo/ui/lib/utils"; +import { AnimatedBeam } from "./AnimatedBeam"; +import React, { forwardRef, useRef } from "react"; +import Logo from "../../../public/logo.svg"; +import Image from "next/image"; +const Circle = forwardRef< + HTMLDivElement, + { className?: string; children?: React.ReactNode } +>(({ className, children }, ref) => { + return ( +
+ {children} +
+ ); +}); + +export function AnimatedBeamShow() { + const containerRef = useRef(null); + const div1Ref = useRef(null); + const div2Ref = useRef(null); + const div3Ref = useRef(null); + const div4Ref = useRef(null); + const div5Ref = useRef(null); + const div6Ref = useRef(null); + const div7Ref = useRef(null); + + return ( +
+
+
+ + + + + + +
+
+ + + + + logo image + + + + +
+
+ + + + + + +
+
+ + + + + + + +
+ ); +} + +const Icons = { + notion: () => ( + + + + + ), + openai: () => ( + + + + ), + googleDrive: () => ( + + + + + + + + + ), + whatsapp: () => ( + + + + + + + + + + + + + + + + + ), + googleDocs: () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + zapier: () => ( + + + + + + + + + + + ), + messenger: () => ( + + + + + + + + + + + + + + + + ), +}; diff --git a/apps/web/app/(landing)/Features/index.tsx b/apps/web/app/(landing)/Features/index.tsx index 7f0ccd46..d764606e 100644 --- a/apps/web/app/(landing)/Features/index.tsx +++ b/apps/web/app/(landing)/Features/index.tsx @@ -2,6 +2,7 @@ import { CheckIcon, ChevronRight, GithubIcon } from "lucide-react"; import { Gradient } from "./features"; import Generating from "./generating"; import Image from "next/image"; +import { AnimatedBeamShow } from "../CardPatterns/AnimatedBeamWithOutput"; const Services = () => { return ( @@ -61,7 +62,7 @@ const Services = () => {
-
+
@@ -74,8 +75,8 @@ const Services = () => { />
-
-

+
+

Supermemory works everywhere you are.

@@ -155,8 +156,8 @@ const Services = () => { enjoy the benefits.

{" "} Star us on Github @@ -165,6 +166,59 @@ const Services = () => {

+
+ + +
+
+ +
+

+ Self hostable +

+

+ The world’s most powerful AI photo and video art generation + engine. What will you create? +

+
+ +
+ Scary robot +
+ + +
+
+
diff --git a/apps/web/public/logo.svg b/apps/web/public/logo.svg index 6081634d..cf499802 100644 --- a/apps/web/public/logo.svg +++ b/apps/web/public/logo.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file