SGPT/src/shared/components/home/FirstSection.tsx

import { CopyToClipboard } from "react-copy-to-clipboard";
import { useTranslation } from "react-i18next";
import robotImage from "../../../assets/images/robot-2.png";
import robotImage2 from "../../../assets/images/robot-coin1.png";
import robotBgr from "../../../assets/images/robot-bgr.png";
import VideoSGPTBg from "../../../assets/sgpt-bg.mp4";
import Button from "../Button";

import {
  BsFacebook,
  BsDiscord,
  BsTwitter,
  BsTelegram,
  BsInstagram,
  BsRocketFill,
} from "react-icons/bs";
import { IoCopyOutline } from "react-icons/io5";
import { TbAddressBook } from "react-icons/tb";
import { useSprings, useSpring, animated } from "@react-spring/web";

const socials = [
  {
    name: "Telegram",
    icon: <BsTelegram />,
    link: "https://twitter.com/SGPT_SmartAi",
    background: "bg-[#2ca5e0]",
  },
  {
    name: "Twitter",
    icon: <BsTwitter />,
    link: "https://twitter.com/SGPT_SmartAi",
    background: "bg-[#1da1f2]",
  },
  {
    name: "Discord",
    icon: <BsDiscord />,
    link: "https://discord.com/invite/NNHV8JHBhk",
    background: "bg-[#7289da]",
  },
  {
    name: "Facebook",
    icon: <BsFacebook />,
    link: "https://www.facebook.com/SGPTSmartAi",
    background: "bg-[#3b5998]",
  },
  {
    name: "Instagram",
    icon: <BsInstagram />,
    link: "https://www.instagram.com/sgpt_smartai/",
    background: "bg-[#e1306c]",
  },
];

const FirstSection = () => {
  const {t} = useTranslation('firstSection')
  const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
  const truncateAddress = (address: string) => {
    return address.slice(0, 5) + "......" + address.slice(-5);
  };

  const copyToClipboard = (address: string) => {
    navigator.clipboard.writeText(address);
  };

  const springs = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
  });
  return (
    <animated.div
      className=" lg:min-h-screen sm:px-1 md:px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative"
      id="home"
      style={springs}
    >
      <div
        style={{ backgroundImage: `url(${robotBgr})` }}
        className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
      ></div>
      <div>
        <video
          controls
          autoPlay
          muted
          className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
        >
          <source src={VideoSGPTBg} type="video/mp4" />
        </video>
      </div>
      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60 "></div>
      <div className="container flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20">
        <div className="lg:w-4/5 w-[99%] sm:w-full flex flex-col justify-center lg:pb-0 gap-16 pb-20 z-50 px-1">
          <div className="flex flex-col gap-10 ">
            <h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400">
              {t('title')}
              {/* A digital currency payment for chat bot services */}
            </h4>
            <p className="lg:w-2/3 w-full font-body">
              {t('content')}
            </p>
          </div>
          <div className=" flex flex-col gap-y-8 ">
            <div className=" flex items-center justify-around flex-wrap lg:w-3/4">
              <div className="flex rounded items-center  gap-4">
                <TbAddressBook className="text-orange-500" size={22} />
                <h2 className="text-gray-100 text-2xl font-bold hover:text-orange-400">
                  {t('addressBSC')}
                </h2>
                <TbAddressBook className="text-orange-500" size={22} />
              </div>
              <div className="text-gray-100 text-2xl flex gap-3 items-center ">
                {truncateAddress(address)}
                <CopyToClipboard text={address}>
                  <button title="Copy">
                    <IoCopyOutline
                      className="hover:text-orange-500  "
                      size={24}
                    />
                  </button>
                </CopyToClipboard>
              </div>
            </div>
            <div className="border  sm:w-full border-orange-500 p-4 pb-6 pt-0 rounded-md  lg:w-3/4">
              <div className="flex justify-start rounded md:animate-slide-loop items-center gap-4 py-6">
                <BsRocketFill className="text-orange-500" size={22} />
                <h2 className="  sm:text-3xl  font-bold hover:text-orange-400">
                  {t('Community')}
                </h2>
                <BsRocketFill className="text-orange-500" size={22} />
              </div>
              <div className="flex flex-wrap gap-4">
                {socials.map((social) => (
                  <Button
                    bgColor={social.background}
                    key={social.name}
                    onClick={() => window.open(social.link, "_blank")}
                  >
                    <div className="flex items-center gap-2 transform motion-safe:hover:scale-110">
                      {social.icon}
                      {social.name}
                    </div>
                  </Button>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="lg:w-1/5 hidden lg:flex justify-center items-center relative">
          <img
            src={robotImage2}
            className="object-cover absolute -left-40 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-full aspect-square transition-all duration-500 cursor-pointer filter  hover:border-orange-500"
            alt="robot-ai"
          />

          <img
            src={robotImage}
            className="object-cover absolute top-28 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-40 aspect-square hover:border-orange-500"
            alt="robot-ai"
          />

          <div className="absolute w-10 aspect-square blur-sm bg-gradient-to-br from-rose-500 to-indigo-700 rounded-full top-32 -left-10"></div>
          <div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
        </div>
      </div>
    </animated.div>
  );
};

export default FirstSection;