Merge pull request #70 from IRISX-AI/feat-fix/about-page-re-chore

Feat fix/about page re chore

Author: 201Harsh

client/app/Components/UI/IrisHero.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { Command, Download, FileCode2, ArrowRight, Mic } from "lucide-react";
 import MagneticButton from "../../utils/MagneticButton";
 import GhostEther from "../GhostEther";
-import RippleGrid from "../../constants/RippleGrid";
+import FloatingLines from "../core/FloationgLines";
 
 interface IrisHeroProps {
   heroTextRef: React.RefObject<HTMLDivElement | null>;
@@ -24,19 +24,16 @@ export default function IrisHero({
         className="hero-section sticky top-0 h-screen w-full flex flex-col justify-center items-center z-0 overflow-hidden bg-black"
       >
         <div className="hidden md:block w-full h-full absolute inset-0 z-0 bg-black">
-          <RippleGrid
-            enableRainbow={false}
-            gridColor="#0f8218"
-            rippleIntensity={0.05}
-            gridSize={10}
-            gridThickness={5}
-            mouseInteraction={true}
-            mouseInteractionRadius={2}
-            opacity={0.8}
-            fadeDistance={1.5}
-            vignetteStrength={5}
-            glowIntensity={0.9}
-            gridRotation={0}
+          <FloatingLines
+            enabledWaves={["top", "middle", "bottom"]}
+            lineCount={6}
+            lineDistance={8}
+            bendRadius={8}
+            bendStrength={-2}
+            interactive
+            parallax={true}
+            animationSpeed={1}
+            linesGradient={["#24d307", "#144f01", "#2a8f2c"]}
           />
         </div>
         <div

client/app/Components/core/Cover.tsx

@@ -0,0 +1,228 @@
+"use client";
+import React, { useEffect, useId, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { useRef } from "react";
+import { SparklesCore } from "./sparkles";
+import { cn } from "@/app/lib/utils";
+
+export const Cover = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  const [hovered, setHovered] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [beamPositions, setBeamPositions] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (ref.current) {
+      setContainerWidth(ref.current?.clientWidth ?? 0);
+
+      const height = ref.current?.clientHeight ?? 0;
+      const numberOfBeams = Math.floor(height / 10); // Adjust the divisor to control the spacing
+      const positions = Array.from(
+        { length: numberOfBeams },
+        (_, i) => (i + 1) * (height / (numberOfBeams + 1)),
+      );
+      setBeamPositions(positions);
+    }
+  }, [ref.current]);
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      ref={ref}
+      className="relative hover:bg-[#0ac529] cursor-pointer group/cover inline-block dark:bg-green-950 bg-black px-2 py-2  transition duration-200 rounded-sm"
+    >
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              opacity: {
+                duration: 0.2,
+              },
+            }}
+            className="h-full w-full overflow-hidden absolute inset-0"
+          >
+            <motion.div
+              animate={{
+                translateX: ["-50%", "0%"],
+              }}
+              transition={{
+                translateX: {
+                  duration: 10,
+                  ease: "linear",
+                  repeat: Infinity,
+                },
+              }}
+              className="w-[200%] h-full flex"
+            >
+              <SparklesCore
+                background="transparent"
+                minSize={0.4}
+                maxSize={1}
+                particleDensity={500}
+                className="w-full h-full"
+                particleColor="#000"
+              />
+              <SparklesCore
+                background="transparent"
+                minSize={0.4}
+                maxSize={1}
+                particleDensity={500}
+                className="w-full h-full"
+                particleColor="#000"
+              />
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      {beamPositions.map((position, index) => (
+        <Beam
+          key={index}
+          hovered={hovered}
+          duration={Math.random() * 2 + 1}
+          delay={Math.random() * 2 + 1}
+          width={containerWidth}
+          style={{
+            top: `${position}px`,
+          }}
+        />
+      ))}
+      <motion.span
+        key={String(hovered)}
+        animate={{
+          scale: hovered ? 0.8 : 1,
+          x: hovered ? [0, -30, 30, -30, 30, 0] : 0,
+          y: hovered ? [0, 30, -30, 30, -30, 0] : 0,
+        }}
+        exit={{
+          filter: "none",
+          scale: 1,
+          x: 0,
+          y: 0,
+        }}
+        transition={{
+          duration: 0.2,
+          x: {
+            duration: 0.2,
+            repeat: Infinity,
+            repeatType: "loop",
+          },
+          y: {
+            duration: 0.2,
+            repeat: Infinity,
+            repeatType: "loop",
+          },
+          scale: {
+            duration: 0.2,
+          },
+          filter: {
+            duration: 0.2,
+          },
+        }}
+        className={cn(
+          "dark:text-white inline-block  text-neutral-900 relative z-20 group-hover/cover:text-black transition duration-200",
+          className,
+        )}
+      >
+        {children}
+      </motion.span>
+      <CircleIcon className="absolute -right-0.5 -top-0.5" />
+      <CircleIcon className="absolute -bottom-0.5 -right-0.5" delay={0.4} />
+      <CircleIcon className="absolute -left-0.5 -top-0.5" delay={0.8} />
+      <CircleIcon className="absolute -bottom-0.5 -left-0.5" delay={1.6} />
+    </div>
+  );
+};
+
+export const Beam = ({
+  className,
+  delay,
+  duration,
+  hovered,
+  width = 600,
+  ...svgProps
+}: {
+  className?: string;
+  delay?: number;
+  duration?: number;
+  hovered?: boolean;
+  width?: number;
+} & React.ComponentProps<typeof motion.svg>) => {
+  const id = useId();
+
+  return (
+    <motion.svg
+      width={width ?? "600"}
+      height="1"
+      viewBox={`0 0 ${width ?? "600"} 1`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("absolute inset-x-0 w-full", className)}
+      {...svgProps}
+    >
+      <motion.path
+        d={`M0 0.5H${width ?? "600"}`}
+        stroke={`url(#svgGradient-${id})`}
+      />
+
+      <defs>
+        <motion.linearGradient
+          id={`svgGradient-${id}`}
+          key={String(hovered)}
+          gradientUnits="userSpaceOnUse"
+          initial={{
+            x1: "0%",
+            x2: hovered ? "-10%" : "-5%",
+            y1: 0,
+            y2: 0,
+          }}
+          animate={{
+            x1: "110%",
+            x2: hovered ? "100%" : "105%",
+            y1: 0,
+            y2: 0,
+          }}
+          transition={{
+            duration: hovered ? 0.5 : (duration ?? 2),
+            ease: "linear",
+            repeat: Infinity,
+            delay: hovered ? Math.random() * (1 - 0.2) + 0.2 : 0,
+            repeatDelay: hovered ? Math.random() * (2 - 1) + 1 : (delay ?? 1),
+          }}
+        >
+          <stop stopColor="#2EB9DF" stopOpacity="0" />
+          <stop stopColor="#3b82f6" />
+          <stop offset="1" stopColor="#3b82f6" stopOpacity="0" />
+        </motion.linearGradient>
+      </defs>
+    </motion.svg>
+  );
+};
+
+export const CircleIcon = ({
+  className,
+  delay,
+}: {
+  className?: string;
+  delay?: number;
+}) => {
+  return (
+    <div
+      className={cn(
+        `pointer-events-none animate-pulse group-hover/cover:hidden group-hover/cover:opacity-100 group h-2 w-2 rounded-full bg-neutral-600 dark:bg-black opacity-20 group-hover/cover:bg-black`,
+        className,
+      )}
+    ></div>
+  );
+};