"use client";

import { motion, Variants } from "motion/react";
import { useState } from "react";

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

import { people } from "./data";
import { useIsMobile } from "./use-mobile";

export const CircularIntro = () => {
  const [itemState, setItemState] = useState<"in" | "circle" | "spin">("in");

  const isMobile = useIsMobile();

  const containerRadius = isMobile ? 120 : 180;
  const peopleLength = people.length;
  const slideUpDelay = 0.5;

  const itemVariants: Variants = {
    initial: {
      y: 0,
      scale: 2,
    },
    in: {
      y: `-${containerRadius}px`,
      scale: 1,
      transition: {
        y: {
          delay: 0.2,
          duration: slideUpDelay,
          ease: "easeInOut",
        },
        scale: {
          delay: 0.2,
          duration: slideUpDelay,
          ease: "easeInOut",
        },
      },
    },
    circle: (index: number) => ({
      transform: `rotate(${
        index * (360 / peopleLength)
      }deg) translateY(-${containerRadius}px)`,
      transition: {
        transform: {
          delay: index * 0.1,
          duration: slideUpDelay,
          ease: "easeInOut",
        },
      },
    }),
    spin: (index: number) => ({
      transform: [
        `rotate(${
          index * (360 / peopleLength)
        }deg) translateY(-${containerRadius}px)`,
        `rotate(${
          index * (360 / peopleLength) + 360
        }deg) translateY(-${containerRadius}px)`,
      ],
      transition: {
        transform: {
          repeat: Infinity,
          duration: 30,
          ease: "linear",
        },
      },
    }),
  };

  const profileVariants: Variants = {
    initial: { rotate: 0 },
    in: { rotate: 0 },
    circle: (index: number) => ({
      rotate: -index * (360 / peopleLength),
      transition: {
        rotate: {
          delay: index * 0.1,
          duration: slideUpDelay,
          ease: "easeInOut",
        },
      },
    }),
    spin: (index: number) => ({
      rotate: [
        -index * (360 / peopleLength),
        -index * (360 / peopleLength) - 360,
      ],
      transition: {
        rotate: { repeat: Infinity, duration: 30, ease: "linear" },
      },
    }),
  };

  return (
    <div
      className={cn(
        "min-h-dvh relative bg-white",
        "dark:bg-[#0a0a0a] flex flex-col items-center justify-center w-full"
      )}
    >
      <div className="flex flex-col gap-[120px] md:gap-[300px] justify-center items-center relative">
        <motion.div
          className="relative h-(--size) w-(--size) md:translate-y-3/4"
          style={
            {
              "--size": `${containerRadius}px`,
            } as React.CSSProperties
          }
          key={`comp-${isMobile}`}
        >
          {people.map((person, index) => (
            <motion.div
              key={index}
              custom={index}
              variants={itemVariants}
              initial="initial"
              animate={itemState}
              onAnimationComplete={(latest) => {
                if (latest === "in") {
                  setItemState("circle");
                } else if (latest === "circle" && index === peopleLength - 1) {
                  setItemState("spin");
                }
              }}
              className={cn(
                "item absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
              )}
            >
              <motion.div
                custom={index}
                variants={profileVariants}
                initial="initial"
                animate={itemState}
                className="relative [--item-size:60px] md:[--item-size:80px] size-(--item-size) overflow-hidden rounded-full"
              >
                <img
                  src={person.profile}
                  alt={person.name}
                  className="object-cover rounded-full max-h-full max-w-full"
                />
              </motion.div>
            </motion.div>
          ))}
        </motion.div>
        <div className="flex flex-col gap-4">
          <h1 className="text-black dark:text-white max-w-[22ch] text-center text-2xl md:text-4xl font-medium">
            Get personalized mentorship from industry experts
          </h1>
          <div className="flex items-center justify-center">
            <button className="inline-flex items-center justify-center select-none rounded-full px-5 py-2 bg-black/90 hover:bg-black dark:bg-white/90 dark:hover:bg-white text-white dark:text-black cursor-pointer [transition:translate_0.16s,scale_0.16s,background-color_0.14s] [transition-timing-function:ease-out] active:translate-y-px active:scale-98">
              Connect
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
Circular Intro

Installation

Installation

Get personalized mentorship from industry experts
