From c409893fd4d7add6a095e3095021083729d95b75 Mon Sep 17 00:00:00 2001
From: "Eng. Elias" <eng.elias.owis@gmail.com>
Date: Fri, 1 Mar 2024 12:51:44 +0400
Subject: [PATCH] CrewAI Visualizer Hero Page

---
 package-lock.json           |  46 ++++--
 package.json                |   1 +
 src/app/page.tsx            |   8 +-
 src/components/side_nav.tsx |   2 +-
 src/components/ui/hero.tsx  | 288 ++++++++++++++++++++++++++++++++++++
 5 files changed, 328 insertions(+), 17 deletions(-)
 create mode 100644 src/components/ui/hero.tsx

diff --git a/package-lock.json b/package-lock.json
index bd9b5b9..e9896a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@as-integrations/next": "^3.0.0",
         "@material-tailwind/react": "^2.1.9",
         "@prisma/client": "^5.9.1",
+        "framer-motion": "^11.0.8",
         "graphql": "^16.8.1",
         "next": "14.1.0",
         "node-calls-python": "^1.8.2",
@@ -1261,6 +1262,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@material-tailwind/react/node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@motionone/animation": {
       "version": "10.17.0",
       "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
@@ -3886,23 +3907,26 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
-      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "version": "11.0.8",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.8.tgz",
+      "integrity": "sha512-1KSGNuqe1qZkS/SWQlDnqK2VCVzRVEoval379j0FiUBJAZoqgwyvqFkfvJbgW2IPFo4wX16K+M0k5jO23lCIjA==",
       "dependencies": {
-        "@motionone/dom": "10.12.0",
-        "framesync": "6.0.1",
-        "hey-listen": "^1.0.8",
-        "popmotion": "11.0.3",
-        "style-value-types": "5.0.0",
-        "tslib": "^2.1.0"
+        "tslib": "^2.4.0"
       },
       "optionalDependencies": {
         "@emotion/is-prop-valid": "^0.8.2"
       },
       "peerDependencies": {
-        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
-        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/framesync": {
diff --git a/package.json b/package.json
index da74cdd..596c593 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@as-integrations/next": "^3.0.0",
     "@material-tailwind/react": "^2.1.9",
     "@prisma/client": "^5.9.1",
+    "framer-motion": "^11.0.8",
     "graphql": "^16.8.1",
     "next": "14.1.0",
     "node-calls-python": "^1.8.2",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4793eb2..f4d6032 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,5 @@
+import { HeroSection } from "@/components/ui/hero";
+
 export default function Home() {
-  return (
-    <div>
-      <h1>Welcome to CrewAI Visualizer</h1>
-    </div>
-  );
+  return <HeroSection />;
 }
diff --git a/src/components/side_nav.tsx b/src/components/side_nav.tsx
index 2bb65ae..feac95c 100644
--- a/src/components/side_nav.tsx
+++ b/src/components/side_nav.tsx
@@ -46,7 +46,7 @@ const SideNav = () => {
             isAgentsActive ? "font-bold" : ""
           }`}
         >
-          Agents
+          Crew
         </span>
       </Link>
     </div>
diff --git a/src/components/ui/hero.tsx b/src/components/ui/hero.tsx
new file mode 100644
index 0000000..b625e92
--- /dev/null
+++ b/src/components/ui/hero.tsx
@@ -0,0 +1,288 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+const grad1 = {
+  initial: {
+    x1: "0%",
+    x2: "0%",
+    y1: "80%",
+    y2: "100%",
+  },
+  animate: {
+    x1: ["0%", "0%", "200%"],
+    x2: ["0%", "0%", "180%"],
+    y1: ["80%", "0%", "0%"],
+    y2: ["100%", "20%", "20%"],
+  },
+};
+
+const grad2 = {
+  initial: {
+    x1: "0%",
+    x2: "0%",
+    y1: "80%",
+    y2: "100%",
+  },
+  animate: {
+    x1: ["20%", "100%", "100%"],
+    x2: ["0%", "90%", "90%"],
+    y1: ["80%", "80%", "-20%"],
+    y2: ["100%", "100%", "0%"],
+  },
+};
+const grad3 = {
+  initial: {
+    x1: "0%",
+    x2: "0%",
+    y1: "80%",
+    y2: "100%",
+  },
+  animate: {
+    x1: ["20%", "100%", "100%"],
+    x2: ["0%", "90%", "90%"],
+    y1: ["80%", "80%", "-20%"],
+    y2: ["100%", "100%", "0%"],
+  },
+};
+const grad4 = {
+  initial: {
+    x1: "40%",
+    x2: "50%",
+    y1: "160%",
+    y2: "180%",
+  },
+  animate: {
+    x1: "0%",
+    x2: "10%",
+    y1: "-40%",
+    y2: "-20%",
+  },
+};
+const grad5 = {
+  initial: {
+    x1: "-40%",
+    x2: "-10%",
+    y1: "0%",
+    y2: "20%",
+  },
+  animate: {
+    x1: ["40%", "0%", "0%"],
+    x2: ["10%", "0%", "0%"],
+    y1: ["0%", "0%", "180%"],
+    y2: ["20%", "20%", "200%"],
+  },
+};
+export const HeroSection = () => {
+  return (
+    <div className="flex h-[40rem] relative items-center justify-center antialiased bg-slate-950 overflow-hidden">
+      <Link
+        href="/agents"
+        className="bg-slate-800 w-[320px] z-40 h-[120px] no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6  text-white inline-block"
+      >
+        <span className="absolute inset-0 overflow-hidden rounded-full">
+          <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+        </span>
+        <div className="relative w-[320px] text-center pt-5 space-x-2 h-[120px]  items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 ">
+          <span className="md:text-2xl text-base block bg-clip-text bg-gradient-to-r from-neutral-300 via-neutral-600 to-neutral-300 text-blue-500">
+            CrewAI Visualizer
+          </span>
+          <span className="text-base block bg-clip-text bg-gradient-to-r from-neutral-300 via-neutral-600 to-neutral-300">
+            Build your Crew and do your Missions efficiantly
+          </span>
+        </div>
+      </Link>
+      {/* Core SVGs component */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <SVGs />
+      </div>
+    </div>
+  );
+};
+
+export const SVGs = () => {
+  return (
+    <svg
+      width="858"
+      height="434"
+      viewBox="0 0 858 434"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="flex flex-shrink-0"
+    >
+      <path
+        d="M269 220.5H16.5C10.9772 220.5 6.5 224.977 6.5 230.5V398.5"
+        stroke="var(--slate-800)"
+      />
+      <path
+        d="M568 200H841C846.523 200 851 195.523 851 190V40"
+        stroke="var(--slate-800)"
+      />
+      <path
+        d="M425.5 274V333C425.5 338.523 421.023 343 415.5 343H152C146.477 343 142 347.477 142 353V426.5"
+        stroke="var(--slate-800)"
+      />
+      <path
+        d="M493 274V333.226C493 338.749 497.477 343.226 503 343.226H760C765.523 343.226 770 347.703 770 353.226V427"
+        stroke="var(--slate-800)"
+      />
+      <path
+        d="M380 168V17C380 11.4772 384.477 7 390 7H414"
+        stroke="var(--slate-800)"
+      />
+
+      {/* Gradient Beams */}
+
+      <path
+        d="M269 220.5H16.5C10.9772 220.5 6.5 224.977 6.5 230.5V398.5"
+        stroke="url(#grad1)"
+      />
+      <path
+        d="M568 200H841C846.523 200 851 195.523 851 190V40"
+        stroke="url(#grad2)"
+      />
+      <path
+        d="M425.5 274V333C425.5 338.523 421.023 343 415.5 343H152C146.477 343 142 347.477 142 353V426.5"
+        stroke="url(#grad3)"
+      />
+      <path
+        d="M493 274V333.226C493 338.749 497.477 343.226 503 343.226H760C765.523 343.226 770 347.703 770 353.226V427"
+        stroke="url(#grad4)"
+      />
+      <path
+        d="M380 168V17C380 11.4772 384.477 7 390 7H414"
+        stroke="url(#grad5)"
+      />
+
+      <defs>
+        <motion.linearGradient
+          variants={grad5}
+          animate="animate"
+          initial="initial"
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            repeatType: "loop",
+            ease: "linear",
+            repeatDelay: 2,
+            delay: Math.random() * 2,
+          }}
+          id="grad5"
+        >
+          <GradientColors />
+        </motion.linearGradient>
+        <motion.linearGradient
+          variants={grad1}
+          animate="animate"
+          initial="initial"
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            repeatType: "loop",
+            ease: "linear",
+            repeatDelay: 2,
+            delay: Math.random() * 2,
+          }}
+          id="grad1"
+        >
+          <GradientColors />
+        </motion.linearGradient>
+        <motion.linearGradient
+          variants={grad2}
+          animate="animate"
+          initial="initial"
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            repeatType: "loop",
+            ease: "linear",
+            repeatDelay: 3,
+            delay: Math.random() * 2,
+          }}
+          id="grad2"
+        >
+          <GradientColors />
+        </motion.linearGradient>
+        <motion.linearGradient
+          variants={grad3}
+          animate="animate"
+          initial="initial"
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            repeatType: "loop",
+            ease: "linear",
+            repeatDelay: 2,
+            delay: Math.random() * 2,
+          }}
+          id="grad3"
+        >
+          <GradientColors />
+        </motion.linearGradient>
+        <motion.linearGradient
+          variants={grad4}
+          animate="animate"
+          initial="initial"
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            repeatType: "loop",
+            ease: "linear",
+            repeatDelay: 2,
+            delay: Math.random() * 2,
+          }}
+          id="grad4"
+        >
+          <GradientColors />
+        </motion.linearGradient>
+      </defs>
+      <circle
+        cx="851"
+        cy="34"
+        r="6.5"
+        fill="var(--slate-700)"
+        stroke="var(--slate-600)"
+      />
+      <circle
+        cx="770"
+        cy="427"
+        r="6.5"
+        fill="var(--slate-700)"
+        stroke="var(--slate-600)"
+      />
+      <circle
+        cx="142"
+        cy="427"
+        r="6.5"
+        fill="var(--slate-700)"
+        stroke="var(--slate-600)"
+      />
+      <circle
+        cx="6.5"
+        cy="398.5"
+        r="6"
+        fill="var(--slate-700)"
+        stroke="var(--slate-600)"
+      />
+      <circle
+        cx="420.5"
+        cy="6.5"
+        r="6"
+        fill="var(--slate-700)"
+        stroke="var(--slate-600)"
+      />
+    </svg>
+  );
+};
+const GradientColors = () => {
+  return (
+    <>
+      <stop stopColor="#18CCFC" stopOpacity="0"></stop>
+      <stop stopColor="#18CCFC"></stop>
+      <stop offset="0.325" stopColor="#6344F5"></stop>
+      <stop offset="1" stopColor="#AE48FF" stopOpacity="0"></stop>
+    </>
+  );
+};