feat: Hero Button Animation, Portfolio Section, Footer Section

app/about/page.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, useEffect, useState } from "react";
+
+const MouseTrackingGlowEffect: React.FC = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setPosition({ x: event.clientX, y: event.clientY });
+    };
+
+    const handleMouseEnter = () => {
+      setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+      setIsHovered(false);
+    };
+
+    const container = containerRef.current;
+
+    if (container) {
+      container.addEventListener("mousemove", handleMouseMove);
+      container.addEventListener("mouseenter", handleMouseEnter);
+      container.addEventListener("mouseleave", handleMouseLeave);
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener("mousemove", handleMouseMove);
+        container.removeEventListener("mouseenter", handleMouseEnter);
+        container.removeEventListener("mouseleave", handleMouseLeave);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative w-screen h-screen overflow-hidden"
+    >
+      <div
+        className={`absolute top-0 left-0 w-64 h-64 bg-blue-500 rounded-full filter ${
+          isHovered ? "blur-xl" : "blur-none"
+        }`}
+        style={{
+          transform: `translate(${position.x - 32}px, ${position.y - 32}px)`,
+        }}
+      ></div>
+    </div>
+  );
+};
+
+export default MouseTrackingGlowEffect;

app/layout.tsx

@@ -1,16 +1,16 @@
 import "styles/tailwind.css"
 import "styles/custom.css"
 import Navbar from "components/Navbar/Navbar"
+import Footer from "components/Footer/Footer"
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-
+      <body className="bg-[#0f172a] ">
-
-      <body>
         <Navbar logoSrc="/images/image-removebg-preview (1).png" />
-
+        {children}
-        {children}</body>
+        <Footer />
+      </body>
     </html>
   )
 }

app/page.tsx

@@ -1,10 +1,16 @@
 "use client"
+import { Metadata } from "next"
 import { Button } from "components/Button/Button"
 import { InfiniteSlider } from "components/Slider/Slider"
 import Navbar from "components/Navbar/Navbar"
-import { FaArrowRight, FaFileCsv, FaHandPaper, FaNewspaper } from "react-icons/fa"
+import { LP_GRID_ITEMS } from "lp-items"
+import { FaArrowRight, FaFileCsv, FaNewspaper } from "react-icons/fa"
 import "../styles/custom.css"
+import { MdOutlineWeb } from "react-icons/md"
+import { TiTick } from "react-icons/ti"
 import { useState } from "react"
+import { MdOutlineAppSettingsAlt } from "react-icons/md"
+import { Glow, GlowCapture } from "@codaworks/react-glow"
 
 export default function Web() {
   const [hovered, setHovered] = useState(false)
@@ -12,14 +18,15 @@ export default function Web() {
     transform: hovered ? "translateX(2px)" : "none",
     transition: "transform .2s", // Optional: Smooth transition
   }
+
   return (
     <div>
-      <section className="h-[60%] bg-[#0f172a] pl-[15%] pr-[15%] ">
+      <section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
         <div
           className=" h-[80%] rounded-[3rem] pt-[10%]"
           style={{
             backgroundImage: `url('/images/glow-bottom.svg')`,
-            backgroundSize: "cover",
+            backgroundSize: "fill",
             backgroundPosition: "center",
             backgroundRepeat: "no-repeat",
           }}
@@ -29,22 +36,22 @@ export default function Web() {
               <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-5xl xl:text-6xl">
                 Experience the next dimension
               </h1>
-              <p className="mb-6 max-w-2xl font-light text-gray-200 text-slate-100 md:text-lg lg:mb-8 lg:text-xl">
+              <p className="mb-6 max-w-2xl font-light  text-gray-200 md:text-lg lg:mb-8 lg:text-xl">
                 Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software
                 solutions powered by AI.
               </p>
               <Button
                 href="https://github.com/Blazity/next-enterprise"
-                className="mr-3"
+                className="mr-3 "
                 intent="hero1"
                 size="hero1"
                 onMouseEnter={() => setHovered(true)}
                 onMouseLeave={() => setHovered(false)}
               >
-                <span className="">Get started</span>
+                <span>Get started</span>
                 <div className="ml-2">
                   <span>
-                    <FaArrowRight style={imgStyle} />
+                    <FaArrowRight style={imgStyle} className="text-orange-500" />
                   </span>
                 </div>
               </Button>
@@ -62,8 +69,7 @@ export default function Web() {
           <InfiniteSlider />
         </div>
       </section>
-
+      <section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
-      <section className="h-[100vh] bg-[#0f172a] pl-[15%] pr-[15%] ">
         <div
           className=" h-[60%] rounded-[3rem]"
           style={{
@@ -73,105 +79,247 @@ export default function Web() {
             backgroundRepeat: "no-repeat",
           }}
         >
-          <div>
+          <div className="flex w-[100%] items-center justify-around pb-[10vh] pt-[5vh]">
             <div className="mx-auto max-w-screen-xl px-4 py-8 lg:py-16">
               <div className="mx-auto text-left text-white">
                 <h4 className="bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 bg-clip-text pt-20 font-bold text-transparent ">
-                  About VizoleLabs
+                  About Vizole Labs
                 </h4>
-                <div className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
+                <div className="mb-4 max-w-2xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
                   <h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text text-transparent">
-                    Our Mission in Motion
+                    We are a new digital product development agency
                   </h2>
                 </div>
-                <h3 className="mr-90 text-slate-300">
+                <h3 className="mr-90 max-w-2xl text-slate-300">
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, totam culpa officia ad esse
+                  we're dedicated to bringing your ideas to life with innovative solutions tailored to your unique
+                  needs.
                 </h3>
-                <div>
+              </div>
-                  <ul className="grid w-1/3 md:grid-cols-1">
+
-                    <div className="mt-5 pt-2">
+              <div className="mx-auto mt-3 flex flex-col justify-around text-left text-white">
-                      <li>
+                <Button
-                        <input
+                  href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
-                          type="radio"
+                  intent="aboutUs"
-                          id="item01"
+                  size="hero1"
-                          name="items"
+                >
-                          value="item-01"
+                  <TiTick className="mr-2 h-5 w-5" />
-                          className="peer hidden"
+                  Expertise and Experience
-                          defaultChecked
+                </Button>
-                        />
+                <Button
-                        <label
+                  href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
-                          htmlFor="item01"
+                  intent="aboutUs"
-                          className="inline-flex w-full cursor-pointer items-center rounded-lg border border-gray-200 bg-transparent p-2 text-gray-500 hover:bg-homeBg2 peer-checked:border-blue-600 peer-checked:text-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:peer-checked:text-blue-500"
+                  size="hero1"
-                        >
+                >
-                          <FaNewspaper className="mr-2" />
+                  <TiTick className="mr-2 h-5 w-5" />
-                          <div className="block">
+                  Client-Centric Approach
-                            <div className="w-full">Section 01</div>
+                </Button>
-                          </div>
+                <Button
-                        </label>
+                  href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
-                      </li>
+                  intent="aboutUs"
-                    </div>
+                  size="hero1"
-                    <div className="pt-2">
+                >
-                      <li>
+                  <TiTick className="mr-2 h-5 w-5" />
-                        <input type="radio" id="item02" name="items" value="item-02" className="peer hidden" />
+                  Innovation at the Core
-                        <label
+                </Button>
-                          htmlFor="item02"
+              </div>
-                          className="inline-flex w-full cursor-pointer items-center rounded-lg border border-gray-200 bg-transparent p-2 text-gray-500 hover:bg-homeBg2 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500"
+            </div>
-                        >
+            <div>
-                          <FaNewspaper className="mr-2" />
+              <iframe
-                          <div className="block">
+                width="560"
-                            <div className="w-full">Section 02</div>
+                height="315"
-                          </div>
+                src="https://www.youtube.com/embed/_vhf0RZg0fg"
-                        </label>
+                title="YouTube video player"
-                      </li>
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    </div>
+              ></iframe>
-                    <div className="pt-2">
+            </div>
-                      <li>
+          </div>
-                        <input type="radio" id="item03" name="items" value="item-03" className="peer hidden" />
+        </div>
-                        <label
+      </section>
-                          htmlFor="item03"
+      <section className="mt-[3%] bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
-                          className="inline-flex w-full cursor-pointer items-center rounded-lg border border-gray-200 bg-transparent p-2 text-gray-500 hover:bg-homeBg2 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500"
+        <div className="flex flex-col items-center justify-around">
-                        >
+          <div className="mb-4 max-w-3xl text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
-                          <FaNewspaper className="mr-2" />
+            <h2 className="">Our Services</h2>
-                          <div className="block">
+          </div>
-                            <div className="w-full">Section 03</div>
+          <p className="mb-6 max-w-2xl text-center font-light text-gray-200 md:text-lg lg:mb-8 lg:text-xl">
-                          </div>
+            Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions
-                        </label>
+            powered by AI.
-                      </li>
+          </p>
-                    </div>
+        </div>
-                  </ul>
+        <div className="mt-10 grid max-w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2">
-                </div>
+          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+            <div className=" text-center">
+              <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
+                <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
+              </div>
+            </div>
+            <div className="flex h-full flex-col rounded-lg ">
+              <div className="mb-3 flex items-center ">
+                <h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
+                  Web Devlopment
+                </h2>
+              </div>
+              <div className="flex flex-grow flex-col justify-between">
+                <p className="text-base leading-relaxed text-gray-300">
+                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                  growth.
+                </p>
+                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    className="ml-2 h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7"></path>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+            <div className=" text-center">
+              <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
+                <MdOutlineAppSettingsAlt className="h-[80px] w-[80px] text-white" />
+              </div>
+            </div>
+            <div className="flex h-full flex-col rounded-lg ">
+              <div className="mb-3 flex items-center ">
+                <h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
+                  IOS / Android App Development
+                </h2>
+              </div>
+              <div className="flex flex-grow flex-col justify-between">
+                <p className="text-base leading-relaxed text-gray-300">
+                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                  growth.
+                </p>
+                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    className="ml-2 h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7"></path>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+            <div className=" text-center">
+              <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
+                <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
+              </div>
+            </div>
+            <div className="flex h-full flex-col rounded-lg ">
+              <div className="mb-3 flex items-center ">
+                <h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
+                  Web Devlopment
+                </h2>
+              </div>
+              <div className="flex flex-grow flex-col justify-between">
+                <p className="text-base leading-relaxed text-gray-300">
+                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                  growth.
+                </p>
+                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    className="ml-2 h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7"></path>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+            <div className=" text-center">
+              <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
+                <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
+              </div>
+            </div>
+            <div className="flex h-full flex-col rounded-lg ">
+              <div className="mb-3 flex items-center ">
+                <h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
+                  Web Devlopment
+                </h2>
+              </div>
+              <div className="flex flex-grow flex-col justify-between">
+                <p className="text-base leading-relaxed text-gray-300">
+                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                  growth.
+                </p>
+                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    className="ml-2 h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7"></path>
+                  </svg>
+                </a>
               </div>
             </div>
           </div>
         </div>
       </section>
-      <section className="h-[150vh] bg-[#0f172a] pl-[10%] pr-[10%] ">
+
+      <section className="h-[150vh] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
         <div className="mx-auto place-self-center text-center">
-          <h1 className="mb-4 text-4xl font-extrabold tracking-tight text-white md:text-5xl xl:text-6xl">
+          <div className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
-            Lorem. Ipsam.
+            <h1 className="">Our Portfolio</h1>
-          </h1>
+          </div>
-          <p className="text-2xl text-gray-600">
+          <p className="pl-5 pr-5 text-2xl text-white">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, veniam aperiam! Delectus, tempora, est
+            The showcase of our innovations. Dive in to explore our diverse range of projects and see how we’re driving
-            perferendis repellat explicabo nesciunt facere totam quod quos ratione distinctio? Voluptates in
+            digital transformation across industries.”
-            necessitatibus quam fugiat quo!
+          </p>
-          </p>
+          <div className="grid max-w-full grid-cols-3 gap-4 sm:grid-cols-1 md:grid-cols-3">
-        </div>
+            <div className="col-span-3 mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
-        <div className="grid grid-cols-3 gap-4">
+              <div
-          <div className="col-span-3 mt-10 h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
+                className=" h-[100%] rounded-[3rem]"
-            <div
+                style={{
-              className=" h-[100%] rounded-[3rem]"
+                  backgroundImage: `url('/images/glow-bottom.svg')`,
-              style={{
+                  backgroundSize: "cover",
-                backgroundImage: `url('/images/glow-bottom.svg')`,
+                  backgroundPosition: "center",
-                backgroundSize: "cover",
+                  backgroundRepeat: "no-repeat",
-                backgroundPosition: "center",
+                }}
-                backgroundRepeat: "no-repeat",
+              >
-              }}
+                <p></p>
-            >
+              </div>
-              <p></p>
+            </div>
-            </div>
+            <div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
+            <div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
+            <div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
+          </div>
+        </div>
+      </section>
+
+      <section className="h-[50vh] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
+        <div className="mx-auto place-self-center text-center">
+          <div className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
+            <h1 className="">Contact US</h1>
           </div>
-          <div className="max-w-70% col-span-2 mt-10 h-[50vh] rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
-          <div className="mt-10 h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
         </div>
       </section>
     </div>

components/Button/Button.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge"
 
 const button = cva(
   [
-    "justify-center",
+ 
     "inline-flex",
     "items-center",
     "rounded-xl",
@@ -15,10 +15,10 @@ const button = cva(
   {
     variants: {
       intent: {
-        primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
+        primary: ["bg-blue-400",   "justify-center", "text-white", "hover:enabled:bg-blue-700"],
-        secondary: ["bg-transparent", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"],
+        secondary: ["bg-transparent",   "justify-center", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"],
-        hero1: ["text-black", "bg-heroBtn", "hover:bg-white", "font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2", "border-solid", "border-2", "border-slate-100"],
+        hero1: ["text-black", "bg-white",    "justify-center","font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2", "border-solid", "border-2", "border-slate-100"],
-        aboutUs: ["bg-transparent", "w-1/4", "hover:bg-blue-500", "text-white", "font-semibold", "hover:text-white", "py-2", "px-4", "border", "border-blue-500", "hover:border-transparent", "rounded", "flex", "text-left"]
+        aboutUs: ["text-left","bg-transparent", "text-white", "font-semibold", "hover:text-white", "py-2", "px-4", "border", "border-gray-400","transition-all", "hover:border-white", "rounded", "flex", , "my-1","w-[50%]"]
       },
       size: {
         sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],

components/Footer/Footer.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { FaInstagram } from "react-icons/fa"
+import { FaTwitter } from "react-icons/fa"
+import { FaLinkedin } from "react-icons/fa"
+
+function Footer() {
+  return (
+    <div className="bg-[#0f172a]">
+      <div className="flex h-1/2 w-full flex-col items-start justify-around bg-[#0f172a] p-20 md:flex-row">
+        <div className="p-5 ">
+          <ul>
+            <p className="bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 bg-clip-text pb-6 text-3xl font-bold text-transparent">
+              VizoleLabs
+            </p>
+            <div className="flex gap-6 pb-5 text-white">
+              <FaInstagram className="cursor-pointer text-2xl hover:text-yellow-600" />
+              <FaTwitter className="cursor-pointer text-2xl hover:text-vizoleG2" />
+              <FaLinkedin className="cursor-pointer text-2xl hover:text-vizoleG2" />
+            </div>
+          </ul>
+        </div>
+        <div className="p-5">
+          <ul>
+            <p className="pb-4 text-2xl font-bold text-white">Services</p>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Stocks</li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
+              Web Development
+            </li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
+              IOS App Development
+            </li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
+              Android App Development
+            </li>
+          </ul>
+        </div>
+        <div className="p-5">
+          <ul>
+            <p className="pb-4 text-2xl font-bold text-white">Company</p>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">About</li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Products</li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Pricing</li>
+          </ul>
+        </div>
+        <div className="p-5">
+          <ul>
+            <p className="pb-4 text-2xl font-bold text-white">Support</p>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Contact</li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
+              Support Portals
+            </li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
+              Privacy Policy
+            </li>
+            <li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
+              Terms & Conditions
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center bg-[#0f172a] p-5 text-center">
+        <h1 className=" font-semibold text-white">© 2024 All rights reserved | VizoleLabs PVT LTD</h1>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

components/Navbar/icons/icon1.tsx

@@ -0,0 +1,9 @@
+
+
+function Aws(){
+
+    
+
+}
+
+export default Aws

components/Slider/Slider.tsx

@@ -11,35 +11,36 @@ import {
   LinkedInLogoIcon,
 } from "@radix-ui/react-icons"
 
-
 const LOGOS = [
-  <FigmaLogoIcon width={50} height={50} className="text-slate-400" />,
+  "/images/Amazon_Web_Services-Logo.wine.svg",
-  <FramerLogoIcon width={50} height={50} className="text-slate-400" />,
+  "/images/Cisco_Systems-Logo.wine.svg",
-  <SketchLogoIcon width={50} height={50} className=" text-slate-400" />,
+  "/images/Oracle_Database-Logo.wine.svg",
-  <TwitterLogoIcon width={50} height={50} className="text-slate-400" />,
+  "/images/ids.svg",
-  <GitHubLogoIcon width={50} height={50} className="text-slate-400" />,
+  "/images/yanolja-icon.svg",
-  <VercelLogoIcon width={50} height={50} className="text-slate-400" />,
-  <NotionLogoIcon width={50} height={50} className="text-slate-400" />,
-  <DiscordLogoIcon width={50} height={50} className="text-slate-400" />,
-  <InstagramLogoIcon width={50} height={50} className="text-slate-400" />,
-  <LinkedInLogoIcon width={50} height={50} className="text-slate-400" />,
-  
 ]
 
 export const InfiniteSlider = () => {
   return (
-    // bg-gradient-to-r from-black to-transparent
+    <div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,#0f172a,transparent)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,#0f172a,transparent)] after:content-['']">
-    //   <div className="relative m-auto w-full overflow-hidden bg-transparent before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,homeBg_0%,homeBg_100%)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,homeBg_0%,transparent)] after:content-['']">
-    <div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] relative before:bg-gradient-to-r from-homeBg to-transparent before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-gradient-to-r from-homeBg to-transparent after:content-['']">
       <div className="flex w-[calc(250px*10)] animate-infinite-slider">
         {LOGOS.map((logo, index) => (
-          <div className="slide flex w-[125px] items-center justify-center" key={index}>
+          <div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
-            {logo}
+            <img src={logo} />
           </div>
         ))}
         {LOGOS.map((logo, index) => (
-          <div className="slide flex w-[125px] items-center justify-center" key={index}>
+          <div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
-            {logo}
+            <img src={logo} />
+          </div>
+        ))}
+        {LOGOS.map((logo, index) => (
+          <div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
+            <img src={logo} />
+          </div>
+        ))}
+        {LOGOS.map((logo, index) => (
+          <div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
+            <img src={logo} />
           </div>
         ))}
       </div>

package.json

@@ -23,6 +23,8 @@
     "coupling-graph": "npx madge --extensions js,jsx,ts,tsx,css,md,mdx ./ --exclude '.next|tailwind.config.js|reset.d.ts|prettier.config.js|postcss.config.js|playwright.config.ts|next.config.js|next-env.d.ts|instrumentation.ts|e2e/|README.md|.storybook/|.eslintrc.js' --image graph.svg"
   },
   "dependencies": {
+    "@codaworks/react-glow": "^1.0.6",
+    "@material-tailwind/react": "^2.1.9",
     "@next/bundle-analyzer": "^14.0.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -48,6 +50,7 @@
     "@semantic-release/release-notes-generator": "^12.1.0",
     "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.7.1",
+    "@tailwindcss/typography": "^0.5.12",
     "@vercel/otel": "^0.3.0",
     "class-variance-authority": "^0.7.0",
     "lodash": "^4.17.21",

public/images/Amazon_Web_Services-Logo.wine.svg

@@ -1 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" xml:space="preserve" y="0" x="0" id="Layer_1" version="1.1" viewBox="-45.10065 -44.95 390.8723 269.7"><style id="style1855" type="text/css">.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#f90}</style><g transform="translate(-1.668 -1.1)" id="g1865"><path id="path1857" d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6 6.1-5.2 14.2-7.8 24.5-7.8 3.4 0 6.9.3 10.6.8 3.7.5 7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5.5-.7 1.4-1.4 2.8-2.1 3.5-1.8 7.7-3.3 12.6-4.5C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4.6-2.4 1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7-3.2-.4-6.3-.6-9.4-.6-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1-.8-.7-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1 1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2 4-1.2 8.2-1.7 12.6-1.7 2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8-3.1 1.9-4.7 4.8-4.7 8.9 0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6 3.1 4.1 4.6 8.8 4.6 14 0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z" fill="#252f3e"/><g id="g1863"><path id="path1859" d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z" class="st1"/><path id="path1861" d="M287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z" class="st1"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" xml:space="preserve" y="0" x="0" id="Layer_1"
+    version="1.1" viewBox="-45.10065 -44.95 390.8723 269.7">
+    <style id="style1855" type="text/css">
+        .st1 {
+            fill-rule: evenodd;
+            clip-rule: evenodd;
+            fill: #ffffff
+        }
+    </style>
+    <g transform="translate(-1.668 -1.1)" id="g1865">
+        <path id="path1857"
+            d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6 6.1-5.2 14.2-7.8 24.5-7.8 3.4 0 6.9.3 10.6.8 3.7.5 7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5.5-.7 1.4-1.4 2.8-2.1 3.5-1.8 7.7-3.3 12.6-4.5C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4.6-2.4 1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7-3.2-.4-6.3-.6-9.4-.6-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1-.8-.7-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1 1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2 4-1.2 8.2-1.7 12.6-1.7 2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8-3.1 1.9-4.7 4.8-4.7 8.9 0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6 3.1 4.1 4.6 8.8 4.6 14 0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
+            fill="#ffffff" />
+        <g id="g1863">
+            <path id="path1859"
+                d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z"
+                class="st1" />
+            <path id="path1861"
+                d="M287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z"
+                class="st1" />
+        </g>
+    </g>
+</svg>

public/images/Cisco_Systems-Logo.wine.svg

@@ -1 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="800" width="1200" fill="#049fd9" viewBox="-32.4 -28.46125 280.8 170.7675"><path d="M106.48 76.164c-.282-.077-4.621-1.196-9.232-1.196-8.73 0-13.986 4.714-13.986 11.734 0 6.214 4.397 9.313 9.674 10.98.585.193 1.447.463 2.021.653 2.349.739 4.224 1.837 4.224 3.739 0 2.127-2.167 3.504-6.878 3.504-4.14 0-8.109-1.184-8.945-1.395v8.637c.466.099 5.183 1.025 10.222 1.025 7.248 0 15.539-3.167 15.539-12.595 0-4.573-2.8-8.783-8.947-10.737l-2.613-.832c-1.559-.492-4.342-1.289-4.342-3.574 0-1.805 2.062-3.076 5.859-3.076 3.276 0 7.263 1.101 7.404 1.145zm80.041 18.243c0 5.461-4.183 9.879-9.796 9.879-5.619 0-9.791-4.418-9.791-9.879 0-5.45 4.172-9.87 9.791-9.87 5.613 0 9.796 4.42 9.796 9.87m-9.796-19.427c-11.544 0-19.823 8.707-19.823 19.427 0 10.737 8.279 19.438 19.823 19.438 11.543 0 19.834-8.701 19.834-19.438 0-10.72-8.291-19.427-19.834-19.427M70.561 113.177h-9.472V75.645h9.472"/><path id="a" d="M48.07 76.325c-.89-.264-4.18-1.345-8.636-1.345-11.526 0-19.987 8.218-19.987 19.427 0 12.093 9.34 19.438 19.987 19.438 4.23 0 7.459-1.002 8.636-1.336v-10.075c-.407.226-3.503 1.992-7.957 1.992-6.31 0-10.38-4.441-10.38-10.019 0-5.748 4.246-10.011 10.38-10.011 4.53 0 7.576 1.805 7.957 2.004"/><use height="100%" width="100%" transform="translate(98.86)" xlink:href="#a"/><g transform="translate(0 -.074)" id="c"><path id="b" d="M61.061 4.759c0-2.587-2.113-4.685-4.703-4.685-2.589 0-4.702 2.098-4.702 4.685v49.84a4.701 4.701 0 004.702 4.699 4.701 4.701 0 004.703-4.699zM35.232 22.451c0-2.586-2.112-4.687-4.702-4.687s-4.702 2.101-4.702 4.687v22.785a4.701 4.701 0 004.702 4.699 4.701 4.701 0 004.702-4.699zM9.404 35.383c0-2.587-2.112-4.684-4.702-4.684C2.115 30.699 0 32.796 0 35.383v9.853a4.703 4.703 0 009.404 0"/><use height="100%" width="100%" transform="matrix(-1 0 0 1 112.717 0)" xlink:href="#b"/></g><use height="100%" width="100%" transform="matrix(-1 0 0 1 216 0)" xlink:href="#c"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="800" width="1200"
+    fill="#ffffff" viewBox="-32.4 -28.46125 280.8 170.7675">
+    <path
+        d="M106.48 76.164c-.282-.077-4.621-1.196-9.232-1.196-8.73 0-13.986 4.714-13.986 11.734 0 6.214 4.397 9.313 9.674 10.98.585.193 1.447.463 2.021.653 2.349.739 4.224 1.837 4.224 3.739 0 2.127-2.167 3.504-6.878 3.504-4.14 0-8.109-1.184-8.945-1.395v8.637c.466.099 5.183 1.025 10.222 1.025 7.248 0 15.539-3.167 15.539-12.595 0-4.573-2.8-8.783-8.947-10.737l-2.613-.832c-1.559-.492-4.342-1.289-4.342-3.574 0-1.805 2.062-3.076 5.859-3.076 3.276 0 7.263 1.101 7.404 1.145zm80.041 18.243c0 5.461-4.183 9.879-9.796 9.879-5.619 0-9.791-4.418-9.791-9.879 0-5.45 4.172-9.87 9.791-9.87 5.613 0 9.796 4.42 9.796 9.87m-9.796-19.427c-11.544 0-19.823 8.707-19.823 19.427 0 10.737 8.279 19.438 19.823 19.438 11.543 0 19.834-8.701 19.834-19.438 0-10.72-8.291-19.427-19.834-19.427M70.561 113.177h-9.472V75.645h9.472" />
+    <path id="a"
+        d="M48.07 76.325c-.89-.264-4.18-1.345-8.636-1.345-11.526 0-19.987 8.218-19.987 19.427 0 12.093 9.34 19.438 19.987 19.438 4.23 0 7.459-1.002 8.636-1.336v-10.075c-.407.226-3.503 1.992-7.957 1.992-6.31 0-10.38-4.441-10.38-10.019 0-5.748 4.246-10.011 10.38-10.011 4.53 0 7.576 1.805 7.957 2.004" />
+    <use height="100%" width="100%" transform="translate(98.86)" xlink:href="#a" />
+    <g transform="translate(0 -.074)" id="c">
+        <path id="b"
+            d="M61.061 4.759c0-2.587-2.113-4.685-4.703-4.685-2.589 0-4.702 2.098-4.702 4.685v49.84a4.701 4.701 0 004.702 4.699 4.701 4.701 0 004.703-4.699zM35.232 22.451c0-2.586-2.112-4.687-4.702-4.687s-4.702 2.101-4.702 4.687v22.785a4.701 4.701 0 004.702 4.699 4.701 4.701 0 004.702-4.699zM9.404 35.383c0-2.587-2.112-4.684-4.702-4.684C2.115 30.699 0 32.796 0 35.383v9.853a4.703 4.703 0 009.404 0" />
+        <use height="100%" width="100%" transform="matrix(-1 0 0 1 112.717 0)" xlink:href="#b" />
+    </g>
+    <use height="100%" width="100%" transform="matrix(-1 0 0 1 216 0)" xlink:href="#c" />
+</svg>

public/images/Oracle_Database-Logo.wine.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" version="1.0" viewBox="-95.705205 -19.9941 829.44511 119.9646"><path d="M265.5913 52.032h40.652L284.748 17.4495l-39.4513 62.527h-17.955l47.986-75.1083C277.414 1.8334 280.8911 0 284.748 0c3.7298 0 7.207 1.7702 9.2302 4.7417l48.1755 75.2347h-17.955l-8.4719-13.9722h-41.158zm186.5063 13.9722V.7587H436.861v71.631c0 1.96.7588 3.8566 2.2128 5.3107 1.454 1.4541 3.414 2.276 5.5635 2.276h69.4816l8.9775-13.9722zm-252.068-11.6961c14.7943 0 26.8066-11.949 26.8066-26.7431 0-14.794-12.0123-26.8063-26.8065-26.8063H133.374v79.2177h15.2306V14.7308h50.4135c7.0811 0 12.771 5.7532 12.771 12.8342 0 7.0809-5.6899 12.8342-12.771 12.8342l-42.9532-.0633 45.482 39.6404h22.1281L193.0754 54.308zM39.6157 79.9764C17.7465 79.9764 0 62.274 0 40.3992 0 18.5242 17.7467.7587 39.6155.7587h46.0446c21.875 0 39.609 17.7655 39.609 39.6405 0 21.8749-17.734 39.5772-39.609 39.5772zM84.636 66.0042c14.1684 0 25.6433-11.4433 25.6433-25.605 0-14.1619-11.4749-25.6684-25.6433-25.6684H40.6332c-14.1618 0-25.6433 11.5065-25.6433 25.6684 0 14.1617 11.4815 25.605 25.6433 25.605zm289.3186 13.9722c-21.875 0-39.6403-17.7023-39.6403-39.5772 0-21.875 17.7653-39.6405 39.6403-39.6405h54.6874l-8.9143 13.9721h-44.7615c-14.1619 0-25.668 11.5065-25.668 25.6684 0 14.1617 11.5061 25.605 25.668 25.605h54.9401l-8.9774 13.9722zm186.3167-13.9722c-11.6963 0-21.6222-7.8396-24.657-18.6506h65.1193l8.9775-13.9722h-74.0968c3.0348-10.7478 12.9607-18.6506 24.657-18.6506h44.6983L614.0102.7587h-54.7506c-21.875 0-39.6403 17.7655-39.6403 39.6405 0 21.8749 17.7653 39.5772 39.6403 39.5772h46.9743l8.9774-13.9722h-54.94m61.8948-56.8369a6.9341 6.9341 0 016.9543-6.9545c3.92 0 7.0175 3.0979 7.0175 6.9545 0 3.9197-3.0975 7.0176-7.0175 7.0176-3.8568 0-6.9543-3.0979-6.9543-7.0176zm6.9543 8.9775c4.9311 0 8.9143-3.983 8.9143-8.9143 0-4.9314-3.9832-8.9144-8.9143-8.9144-4.8684 0-8.851 3.983-8.851 8.9144 0 4.9313 3.9826 8.9143 8.851 8.9143zm-.822-14.225c1.3908 0 1.96.0632 2.5924.316 1.77.5691 1.9595 2.1496 1.9595 2.7819 0 .1264 0 .4425-.1264.8218-.063.3794-.3159 1.138-1.201 1.707-.1265.0633-.1897.1265-.4425.253l2.276 4.1094h-2.2128l-2.0232-3.7933h-1.3907v3.7933h-1.96V3.9198zm.6956 4.552c.632-.0632 1.2644-.0632 1.6436-.6323.1895-.2528.2532-.5057.2532-.885 0-.5058-.3164-.9484-.7588-1.2013-.4428-.1896-.8852-.1896-1.8336-.1896h-.5687v2.9082h1.2643" fill="#f80000"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" version="1.0"
+    viewBox="-95.705205 -19.9941 829.44511 119.9646">
+    <path
+        d="M265.5913 52.032h40.652L284.748 17.4495l-39.4513 62.527h-17.955l47.986-75.1083C277.414 1.8334 280.8911 0 284.748 0c3.7298 0 7.207 1.7702 9.2302 4.7417l48.1755 75.2347h-17.955l-8.4719-13.9722h-41.158zm186.5063 13.9722V.7587H436.861v71.631c0 1.96.7588 3.8566 2.2128 5.3107 1.454 1.4541 3.414 2.276 5.5635 2.276h69.4816l8.9775-13.9722zm-252.068-11.6961c14.7943 0 26.8066-11.949 26.8066-26.7431 0-14.794-12.0123-26.8063-26.8065-26.8063H133.374v79.2177h15.2306V14.7308h50.4135c7.0811 0 12.771 5.7532 12.771 12.8342 0 7.0809-5.6899 12.8342-12.771 12.8342l-42.9532-.0633 45.482 39.6404h22.1281L193.0754 54.308zM39.6157 79.9764C17.7465 79.9764 0 62.274 0 40.3992 0 18.5242 17.7467.7587 39.6155.7587h46.0446c21.875 0 39.609 17.7655 39.609 39.6405 0 21.8749-17.734 39.5772-39.609 39.5772zM84.636 66.0042c14.1684 0 25.6433-11.4433 25.6433-25.605 0-14.1619-11.4749-25.6684-25.6433-25.6684H40.6332c-14.1618 0-25.6433 11.5065-25.6433 25.6684 0 14.1617 11.4815 25.605 25.6433 25.605zm289.3186 13.9722c-21.875 0-39.6403-17.7023-39.6403-39.5772 0-21.875 17.7653-39.6405 39.6403-39.6405h54.6874l-8.9143 13.9721h-44.7615c-14.1619 0-25.668 11.5065-25.668 25.6684 0 14.1617 11.5061 25.605 25.668 25.605h54.9401l-8.9774 13.9722zm186.3167-13.9722c-11.6963 0-21.6222-7.8396-24.657-18.6506h65.1193l8.9775-13.9722h-74.0968c3.0348-10.7478 12.9607-18.6506 24.657-18.6506h44.6983L614.0102.7587h-54.7506c-21.875 0-39.6403 17.7655-39.6403 39.6405 0 21.8749 17.7653 39.5772 39.6403 39.5772h46.9743l8.9774-13.9722h-54.94m61.8948-56.8369a6.9341 6.9341 0 016.9543-6.9545c3.92 0 7.0175 3.0979 7.0175 6.9545 0 3.9197-3.0975 7.0176-7.0175 7.0176-3.8568 0-6.9543-3.0979-6.9543-7.0176zm6.9543 8.9775c4.9311 0 8.9143-3.983 8.9143-8.9143 0-4.9314-3.9832-8.9144-8.9143-8.9144-4.8684 0-8.851 3.983-8.851 8.9144 0 4.9313 3.9826 8.9143 8.851 8.9143zm-.822-14.225c1.3908 0 1.96.0632 2.5924.316 1.77.5691 1.9595 2.1496 1.9595 2.7819 0 .1264 0 .4425-.1264.8218-.063.3794-.3159 1.138-1.201 1.707-.1265.0633-.1897.1265-.4425.253l2.276 4.1094h-2.2128l-2.0232-3.7933h-1.3907v3.7933h-1.96V3.9198zm.6956 4.552c.632-.0632 1.2644-.0632 1.6436-.6323.1895-.2528.2532-.5057.2532-.885 0-.5058-.3164-.9484-.7588-1.2013-.4428-.1896-.8852-.1896-1.8336-.1896h-.5687v2.9082h1.2643"
+        fill="#ffffff" />
+</svg>

public/images/ids.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="110"
+  viewBox="0 0 300 110">
+  <defs>
+    <clipPath id="clip-IDS_Logo">
+      <rect width="300" height="110" />
+    </clipPath>
+  </defs>
+  <g id="IDS_Logo" data-name="IDS Logo" clip-path="url(#clip-IDS_Logo)">
+    <g id="Group_14535" data-name="Group 14535" transform="translate(21 24)">
+      <g id="Group_14491" data-name="Group 14491" transform="translate(-5)">
+        <g id="Group_14490" data-name="Group 14490" transform="translate(0 0)">
+          <path id="Path_1" data-name="Path 1"
+            d="M176.913,97.759l.008-.009,14.665-21.108h13.4L191.077,97.759l13.909,21.12h-13.4L176.895,97.786l0,0Z"
+            transform="translate(34.278 -57.724)" fill="#ffffff" />
+          <path id="Path_2" data-name="Path 2"
+            d="M204.431,71.575V80.82h-7.124v9.838h6.446v32.4h11.534v-32.4h7.122V80.82h-7.122V69.115Z"
+            transform="translate(45.61 -61.903)" fill="#ffffff" />
+          <path id="Path_3" data-name="Path 3"
+            d="M47.887,64.477a6.667,6.667,0,0,1,6.785,6.871,6.785,6.785,0,1,1-13.57,0,6.718,6.718,0,0,1,6.785-6.871m5.766,61.4H42.119V83.644H53.653Z"
+            transform="translate(-41.102 -64.477)" fill="#ffffff" />
+          <path id="Path_4" data-name="Path 4"
+            d="M86.855,119.424a15.8,15.8,0,0,1-12.976,6.36c-11.957,0-20.016-9.67-20.016-22.052s8.059-21.966,20.1-21.966a15.566,15.566,0,0,1,12.89,6.276V66.332H98.391v58.519H86.855ZM76.339,93.131a10.645,10.645,0,1,0,10.516,10.6,10.426,10.426,0,0,0-10.516-10.6"
+            transform="translate(-34.018 -63.447)" fill="#f3f3f3" />
+          <path id="Path_5" data-name="Path 5"
+            d="M112.925,89.063a19.546,19.546,0,0,0-9.245-2.8c-2.883,0-4.155,1.442-4.155,3.054,0,1.356.848,2.034,2.46,3.053l6.105,3.561c5.09,3.054,6.955,7.04,6.955,11.45,0,7.294-5.427,12.89-15.52,12.89a30.036,30.036,0,0,1-11.026-2.12V106.621a19.1,19.1,0,0,0,10.178,3.731c2.967,0,4.41-1.358,4.41-3.138,0-1.356-.764-2.46-2.8-3.647L93.673,99.75a12.01,12.01,0,0,1-6.107-10.856c0-7.465,5.768-12.637,15.691-12.637a35.455,35.455,0,0,1,9.668,1.442Z"
+            transform="translate(-15.309 -57.938)" fill="#ffffff" />
+          <path id="Path_6" data-name="Path 6"
+            d="M134.854,76.1a12.489,12.489,0,0,0-11.11,6.191V76.944H112.208v42.237h11.536V94.67c.254-4.5,2.969-7.3,7.208-7.3,4.412,0,7.21,3.138,7.21,7.8v24H149.78V91.955c0-9.074-5.85-15.859-14.926-15.859"
+            transform="translate(-1.63 -58.027)" fill="#ffffff" />
+          <path id="Path_7" data-name="Path 7"
+            d="M152.319,92.974c.594-3.987,4.41-7.294,9.5-7.294,4.92,0,8.567,2.967,8.737,7.294ZM161.9,76.1c-12.214,0-21.119,9.584-21.119,21.966,0,13.145,9.245,22.052,21.8,22.052a33.943,33.943,0,0,0,15.267-3.308V105.695a27.248,27.248,0,0,1-14.334,3.987c-5.936,0-10.177-3.138-11.2-7.973h28.667a26.487,26.487,0,0,0,.678-5.513c0-10.94-7.549-20.1-19.761-20.1"
+            transform="translate(14.234 -58.027)" fill="#ffffff" />
+          <path id="Path_8" data-name="Path 8"
+            d="M195.908,97.759l-.008-.009L181.236,76.642h-13.4l13.909,21.117-13.909,21.12h13.4l14.691-21.092,0,0Z"
+            transform="translate(29.25 -57.724)" fill="#ffffff" />
+          <path id="Path_9" data-name="Path 9" d="M167.835,111.34l13.909-21.12,14.184.026L181.236,111.34Z"
+            transform="translate(29.25 -50.187)" fill="#ffffff" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

public/images/yanolja-icon.svg

@@ -0,0 +1,17 @@
+<svg width="37" height="27" viewBox="0 0 37 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M9.15972 17.8317L4.5133 9.78711C1.9915 11.3948 0.320801 14.2129 0.320801 17.4282C0.320801 22.4403 4.3809 26.5004 9.39299 26.5004H23.2377L18.2319 17.8317H9.15972Z"
+        fill="#ffffff" />
+    <path
+        d="M32.4169 25.0691C34.9387 23.4614 36.6094 20.6433 36.6094 17.428C36.6094 14.3388 35.0648 11.6152 32.7069 9.97607H23.7041L32.4169 25.0691Z"
+        fill="#ffffff" />
+    <path
+        d="M18.9316 17.4279L24.1707 26.5001H27.5373C28.1362 26.5001 28.7288 26.437 29.2963 26.3298C30.1537 26.1596 30.9669 25.8696 31.7172 25.4787L22.998 10.3857L18.9316 17.4279Z"
+        fill="#ffffff" />
+    <path
+        d="M18.1059 1.52132C15.4517 0.146941 12.1733 0.109114 9.39302 1.71676C6.71991 3.26137 5.13117 5.9597 4.8916 8.82195L9.39302 16.6206L18.1059 1.52132Z"
+        fill="#ffffff" />
+    <path
+        d="M18.2319 17.0238L22.7648 9.16837H32.0577C31.9253 6.18003 30.3176 3.32409 27.5373 1.71644C24.8642 0.171834 21.7309 0.146616 19.1334 1.36969L10.0928 17.0238H18.2319Z"
+        fill="#ffffff" />
+</svg>

styles/custom.css

@@ -6,4 +6,11 @@
   padding-left: calc(100% + 5%);
 }
 
+.glowable-text {
+  color: black;
+}
+
+[glow] .glowable-text {
+  color: var(--glow-color);
+}
 /* https://flowbite.com/docs/forms/radio/ */

tailwind.config.js

@@ -2,7 +2,6 @@
 const { pick, omit } = require("lodash")
 const colors = require("tailwindcss/colors")
 const defaultTheme = require("tailwindcss/defaultTheme")
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
@@ -20,6 +19,7 @@ module.exports = {
         '3xl': '0 35px 60px -15px rgba(0, 0, 200, 0.3)',
       },
       colors: {
+        black: "#0f172a",
         primary: {
           50: "#eff6ff",
           100: "#dbeafe",
@@ -37,7 +37,7 @@ module.exports = {
         vizoleG3: "#F5887A",
         heroBtn: "#f0eded",
         homeBg: "#0f172a",
-        homeBg2: "#111d38"
+        homeBg2: "#0c1324",
       },
       fontFamily: {
         body: [
@@ -97,13 +97,15 @@ module.exports = {
         infiniteSlider: {
           "0%": { transform: "translateX(0)" },
           "100%": {
-            transform: "translateX(calc(-250px * 5))",
+            transform: "translateX(calc(-125px * 5))",
           },
         },
       },
     },
   },
-  plugins: [],
+  plugins: [
+    require('@codaworks/react-glow/tailwind')
+  ],
   future: {
     hoverOnlyWhenSupported: true,
   },

yarn.lock

@@ -1813,6 +1813,11 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@codaworks/react-glow@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@codaworks/react-glow/-/react-glow-1.0.6.tgz#8c4bdb6242506b019069c3ea54e38a7fc30c912e"
+  integrity sha512-tlRept1grsMZCh84ZDSEbjRhibjuXeBi+AkZw9ZzdIk45MDbukI3MhH1KVlactWfYcwEQDnfnNEzcErEak3M1Q==
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz"
@@ -1823,6 +1828,18 @@
   resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz"
@@ -1975,6 +1992,13 @@
   resolved "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz"
   integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
 "@floating-ui/core@^1.4.2":
   version "1.5.0"
   resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz"
@@ -1982,6 +2006,14 @@
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
+"@floating-ui/dom@^1.2.1":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
 "@floating-ui/dom@^1.5.1":
   version "1.5.3"
   resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz"
@@ -1990,6 +2022,13 @@
     "@floating-ui/core" "^1.4.2"
     "@floating-ui/utils" "^0.1.3"
 
+"@floating-ui/react-dom@^1.2.2":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3"
+  integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==
+  dependencies:
+    "@floating-ui/dom" "^1.2.1"
+
 "@floating-ui/react-dom@^2.0.0":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz"
@@ -1997,11 +2036,25 @@
   dependencies:
     "@floating-ui/dom" "^1.5.1"
 
+"@floating-ui/react@0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.0.tgz#d8e19a3fcfaa0684d5ec3f335232b4e0ac0c87e1"
+  integrity sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==
+  dependencies:
+    "@floating-ui/react-dom" "^1.2.2"
+    aria-hidden "^1.1.3"
+    tabbable "^6.0.1"
+
 "@floating-ui/utils@^0.1.3":
   version "0.1.6"
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@grpc/grpc-js@^1.7.1":
   version "1.9.5"
   resolved "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.5.tgz"
@@ -2339,6 +2392,21 @@
   resolved "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@material-tailwind/react@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@material-tailwind/react/-/react-2.1.9.tgz#d29bfa2f69a58708f85f22ce6ad798dbf1300c70"
+  integrity sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==
+  dependencies:
+    "@floating-ui/react" "0.19.0"
+    classnames "2.3.2"
+    deepmerge "4.2.2"
+    framer-motion "6.5.1"
+    material-ripple-effects "2.0.1"
+    prop-types "15.8.1"
+    react "18.2.0"
+    react-dom "18.2.0"
+    tailwind-merge "1.8.1"
+
 "@mdx-js/react@^2.1.5":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz"
@@ -2347,6 +2415,59 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
+"@motionone/animation@^10.12.0":
+  version "10.17.0"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.17.0.tgz#7633c6f684b5fee2b61c405881b8c24662c68fca"
+  integrity sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==
+  dependencies:
+    "@motionone/easing" "^10.17.0"
+    "@motionone/types" "^10.17.0"
+    "@motionone/utils" "^10.17.0"
+    tslib "^2.3.1"
+
+"@motionone/dom@10.12.0":
+  version "10.12.0"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
+  integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
+  dependencies:
+    "@motionone/animation" "^10.12.0"
+    "@motionone/generators" "^10.12.0"
+    "@motionone/types" "^10.12.0"
+    "@motionone/utils" "^10.12.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.17.0":
+  version "10.17.0"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.17.0.tgz#d66cecf7e3ee30104ad00389fb3f0b2282d81aa9"
+  integrity sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==
+  dependencies:
+    "@motionone/utils" "^10.17.0"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.12.0":
+  version "10.17.0"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.17.0.tgz#878d292539c41434c13310d5f863a87a94e6e689"
+  integrity sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==
+  dependencies:
+    "@motionone/types" "^10.17.0"
+    "@motionone/utils" "^10.17.0"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.12.0", "@motionone/types@^10.17.0":
+  version "10.17.0"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.17.0.tgz#179571ce98851bac78e19a1c3974767227f08ba3"
+  integrity sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA==
+
+"@motionone/utils@^10.12.0", "@motionone/utils@^10.17.0":
+  version "10.17.0"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.17.0.tgz#cc0ba8acdc6848ff48d8c1f2d0d3e7602f4f942e"
+  integrity sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==
+  dependencies:
+    "@motionone/types" "^10.17.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
 "@ndelangen/get-tarball@^3.0.7":
   version "3.0.9"
   resolved "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz"
@@ -5128,6 +5249,16 @@
   dependencies:
     "@t3-oss/env-core" "0.7.1"
 
+"@tailwindcss/typography@^0.5.12":
+  version "0.5.12"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.12.tgz#c0532fd594427b7f4e8e38eff7bf272c63a1dca4"
+  integrity sha512-CNwpBpconcP7ppxmuq3qvaCxiRWnbhANpY/ruH4L5qs2GCiVDJXde/pjj2HWPV1+Q4G9+V/etrwUYopdcjAlyg==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@testing-library/dom@^9.0.0":
   version "9.3.3"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz"
@@ -6602,6 +6733,13 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
+aria-hidden@^1.1.3:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522"
+  integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@5.1.3:
   version "5.1.3"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz"
@@ -7516,6 +7654,11 @@ class-variance-authority@^0.7.0:
   dependencies:
     clsx "2.0.0"
 
+classnames@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^5.2.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz"
@@ -8237,6 +8380,11 @@ deep-is@^0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
@@ -9742,6 +9890,27 @@ fraction.js@^4.3.6:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
+  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"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
@@ -10264,6 +10433,11 @@ hexer@^1.5.0:
     process "^0.10.0"
     xtend "^4.0.0"
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -12073,6 +12247,11 @@ lodash.capitalize@^4.2.1:
   resolved "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz"
   integrity sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -12288,6 +12467,11 @@ marked@^9.0.0:
   resolved "https://registry.npmjs.org/marked/-/marked-9.1.2.tgz"
   integrity sha512-qoKMJqK0w6vkLk8+KnKZAH6neUZSNaQqVZ/h2yZ9S7CbLuFHyS2viB0jnqcWF9UKjwsAbMrQtnQhdmdvOVOw9w==
 
+material-ripple-effects@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz#47803d2ab1561698d930e2524a7a9a19fb2829b7"
+  integrity sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz"
@@ -13730,6 +13914,16 @@ polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 postcss-import@^15.1.0:
   version "15.1.0"
   resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz"
@@ -13798,6 +13992,14 @@ postcss-nested@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.11"
 
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.13"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz"
@@ -13946,7 +14148,7 @@ promzard@^1.0.0:
   dependencies:
     read "^2.0.0"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14181,7 +14383,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^18.2.0:
+react-dom@18.2.0, react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -14268,7 +14470,7 @@ react-tsparticles@^2.12.2:
   dependencies:
     tsparticles-engine "^2.12.0"
 
-react@^18.2.0:
+react@18.2.0, react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -15433,6 +15635,14 @@ style-loader@^3.3.1:
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz"
   integrity sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 styled-jsx@5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz"
@@ -15525,6 +15735,16 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz"
   integrity sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==
 
+tabbable@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
+tailwind-merge@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.8.1.tgz#0e56c8afbab2491f72e06381043ffec8b720ba04"
+  integrity sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww==
+
 tailwind-merge@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.0.0.tgz"
@@ -15891,7 +16111,7 @@ tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==