beactio-landing/src/components/sections/hero.tsx

"use client";

import Link from "next/link";

import { motion } from "framer-motion";

import { BadgePlus, Compass } from "lucide-react";

import { cn } from "@/lib/utils";

import { Button, buttonVariants } from "@/components/ui/button";
import HeroVideoDialog from "@/components/magicui/hero-video";
import { useQuery } from "@tanstack/react-query";
import axios, { AxiosError } from "axios";
import Spinner from "../spinner";
import { toast } from "sonner";

const ease = [0.16, 1, 0.3, 1];

function HeroPill() {
  const { data, isError, isLoading } = useQuery<
    { id: string; address: string; project_name: string } | null,
    AxiosError
  >({
    queryKey: ["content-address"],
    queryFn: async () => {
      const json = await axios.get("https://catools.dev3vds1.link/get/beactio");

      return json.data;
    },
  });

  return (
    <motion.div
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8, ease }}
    >
      <Button
        variant={"outline"}
        className="flex w-auto items-center space-x-2 rounded-full bg-primary/20 px-2 py-1 ring-1 ring-accent whitespace-pre"
        onClick={() => {
          if (data && data.address) {
            navigator.clipboard.writeText(data.address);
            toast.info("Copied to clipboard!");
          }
        }}
      >
        <div className="w-fit rounded-full bg-accent px-2 py-0.5 text-center text-xs font-medium text-primary sm:text-sm">
          📣 Content Address :
        </div>
        {isLoading && (
          <div className="px-6 flex items-center">
            <Spinner />
          </div>
        )}
        {isError && (
          <p className="text-xs font-medium text-primary sm:text-sm">
            There is something wrong.
          </p>
        )}
        {data && (
          <p className="text-xs font-medium text-primary sm:text-sm pr-1">
            {data?.address}
          </p>
        )}
      </Button>
    </motion.div>
  );
}

function HeroTitles() {
  return (
    <div className="flex w-full max-w-2xl flex-col space-y-4 overflow-hidden pt-8">
      <motion.h1
        className="text-center text-4xl font-medium leading-tight text-foreground sm:text-5xl md:text-6xl"
        initial={{ filter: "blur(10px)", opacity: 0, y: 50 }}
        animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
        transition={{
          duration: 1,
          ease,
          staggerChildren: 0.2,
        }}
      >
        {["AI", "Meets", "Simplicity"].map((text, index) => (
          <motion.span
            key={index}
            className="inline-block px-1 md:px-2 text-balance font-semibold"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.8,
              delay: index * 0.2,
              ease,
            }}
          >
            {text}
          </motion.span>
        ))}
      </motion.h1>
      <motion.p
        className="mx-auto max-w-xl text-center text-lg leading-7 text-muted-foreground sm:text-xl sm:leading-9 text-balance"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.6,
          duration: 0.8,
          ease,
        }}
      >
        Transform the future of artificial intelligence with truly autonomous
        systems that think, plan, and act independently.
      </motion.p>
    </div>
  );
}

function HeroCTA() {
  return (
    <>
      <motion.div
        className="mx-auto mt-6 flex w-full max-w-2xl flex-col items-center justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.8, duration: 0.8, ease }}
      >
        <Link
          href={`/agents/create`}
          className={cn(
            buttonVariants({ variant: "default" }),
            "w-full sm:w-auto text-background flex gap-2"
          )}
        >
          <BadgePlus className="h-6 w-6" />
          Create new Agent
        </Link>
        <Link
          href="/explore"
          className={cn(
            buttonVariants({ variant: "outline" }),
            "w-full sm:w-auto flex gap-2"
          )}
        >
          <Compass className="h-6 w-6" />
          Explore Agents
        </Link>
      </motion.div>
      {/* <motion.p
        className="mt-5 text-sm text-muted-foreground"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.0, duration: 0.8 }}
      >
        7 day free trial. No credit card required.
      </motion.p> */}
    </>
  );
}

function HeroImage() {
  return (
    <motion.div
      className="relative mx-auto flex w-full items-center justify-center"
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 1.2, duration: 1, ease }}
    >
      <HeroVideoDialog
        animationStyle="from-center"
        videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
        thumbnailSrc="/dashboard.png"
        thumbnailAlt="Hero Video"
        className="border rounded-lg shadow-lg max-w-screen-lg mt-16"
      />
    </motion.div>
  );
}

export default function Hero2() {
  return (
    <section id="hero">
      <div className="relative flex w-full flex-col items-center justify-start px-4 py-32 sm:px-6 sm:py-24 md:py-32 lg:px-8">
        <HeroPill />
        <HeroTitles />
        <HeroCTA />
        {/* <HeroImage /> */}
        {/* <div className="pointer-events-none absolute inset-x-0 -bottom-12 h-1/3 bg-gradient-to-t from-background via-background to-transparent lg:h-1/4"></div> */}
      </div>
    </section>
  );
}