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

import robotImage from "../../../assets/images/robot.jpg";
import Button from "../Button";
import {
  BsFacebook,
  BsDiscord,
  BsTwitter,
  BsTelegram,
  BsInstagram,
} from "react-icons/bs";

import { MdContentCopy } from "react-icons/md";

const FirstSection = () => {
  const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
  const truncateAddress = (address: string) => {
    return address.slice(0, 8) + "......" + address.slice(-7);
  };

  const copyToClipboard = (address: string) => {
    navigator.clipboard.writeText(address);
  };
  return (
    <div className="min-h-screen flex bg-cover bg-center bg-no-repeat relative">
      <div className="container flex mx-auto min-h-[70vh] text-white z-20 mt-20">
        <div className="md:w-4/5 flex flex-col justify-center lg:pb-48 gap-14 pb-20 z-50">
          <div className="flex flex-col gap-10">
            <h4 className="w-3/4 lg:text-8xl text-7xl font-bold">
              Lorem ipsum dolor consectetur sit adipisicing.
            </h4>
            <p className="lg:w-2/3 font-body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
              amet eveniet fugiat pariatur, illo in est officiis labore ad
              corrupti obcaecati asperiores! Quos ratione tempore dolorum
              temporibus tenetur quaerat.
            </p>
          </div>

          <div className="flex w-2/3 flex-wrap gap-4">
            <Button bgColor="bg-telegram">
              <div className="flex items-center gap-2">
                <BsTelegram size={18} />
                Telegram
              </div>
            </Button>
            <Button bgColor="bg-discord">
              <div className="flex items-center gap-2">
                <BsDiscord size={18} />
                Discord
              </div>
            </Button>
            <Button bgColor="bg-facebook">
              <div className="flex items-center gap-2">
                <BsFacebook size={18} />
                Facebook
              </div>
            </Button>
            <Button bgColor="bg-twitter">
              <div className="flex items-center gap-2">
                <BsTwitter size={18} />
                Twitter
              </div>
            </Button>
            <Button bgColor="bg-instagram">
              <div className="flex items-center gap-2">
                <BsInstagram size={18} />
                Instagram
              </div>
            </Button>
          </div>
        </div>
        <div className="md:w-1/5 flex justify-center items-center relative">
          <img
            src={robotImage}
            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"
            alt=""
          />

          <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"
            alt=""
          />

          <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>
      {/* <div className="w-full h-full bg-black absolute opacity-75 z-10"></div> */}
      <div className="absolute z-50 rounded-full border-2 p-7 overflow-hidden text-white flex gap-4 items-center bottom-10 left-1/2 -translate-x-1/2  max-w-4xl min-h-[80px] mx-auto container">
        <div className="w-1/3 flex items-center gap-3 justify-center font-semibold">
          <p>{truncateAddress(address)}</p>

          <button
            className="hover:cursor-pointer bg-white/50 text-white rounded-full p-2"
            onClick={() => copyToClipboard(address)}
            type="button"
          >
            <MdContentCopy size={18} />
          </button>
        </div>

        <div className="w-1/3 flex justify-center items-center gap-3 font-semibold">
          <p>{truncateAddress(address)}</p>
          <button
            className="hover:cursor-pointer bg-white/50 text-white rounded-full p-2"
            onClick={() => copyToClipboard(address)}
            type="button"
          >
            <MdContentCopy size={18} />
          </button>
        </div>
        <div className="w-1/3 flex justify-center font-semibold">
          Audited By
        </div>
      </div>
    </div>
  );
};

export default FirstSection;