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

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 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 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] text-white z-20 mt-20">
                <div className="lg:w-4/5 flex flex-col justify-center lg:pb-0 gap-14 pb-20 z-50">
                    <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">
                            A digital currency payment for chat bot services
                        </h4>
                        {/* <p className="lg:w-2/3 w-full font-body">
                            The SGPT Token is a digital currency designed to
                            facilitate payments for services provided by the
                            SGPT chat bot. The chat bot is a powerful tool that
                            utilizes artificial intelligence to communicate with
                            users and provide valuable information and services.
                        </p> */}
                    </div>

                    <div className="">
                        <div className="border border-orange-500 flex items-center justify-between lg:w-3/4">
                            <div className="flex rounded items-center w-1/2 gap-4">
                                <TbAddressBook
                                    className="text-orange-500"
                                    size={22}
                                />
                                <h2 className="text-gray-100 text-2xl font-bold hover:text-orange-400">
                                    Address on BSC{' '}
                                </h2>
                                <TbAddressBook
                                    className="text-orange-500"
                                    size={22}
                                />
                            </div>
                            <div className="text-gray-100 text-2xl flex gap-3 items-center w-1/2">
                                {truncateAddress(address)}
                                <IoCopyOutline size={24} />
                            </div>
                        </div>
                        {/* <div className="border border-orange-500">
                            <div className="flex rounded animate-slide-loop items-center gap-4 py-6">
                                <BsRocketFill
                                    className="text-orange-500"
                                    size={22}
                                />
                                <h2 className="text-3xl font-bold hover:text-orange-400">
                                    Join Our Community{' '}
                                </h2>
                                <BsRocketFill
                                    className="text-orange-500"
                                    size={22}
                                />
                            </div>
                            <div className="flex lg:w-2/3 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