fix: animation

src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import BackToTopButton from '../shared/components/backtotop'
 import AboutSection from '../shared/components/home/AboutSection'
 import FirstSection from '../shared/components/home/FirstSection'
+import QnASection from '../shared/components/home/QnASection'
 import RoadMap from '../shared/components/home/RoadMap'
 import TokenomicsSection from '../shared/components/home/TokenomicsSection'
 
@@ -13,6 +14,7 @@ const Home = (props: Props) => {
             <AboutSection />
             <RoadMap />
             <TokenomicsSection />
+            <QnASection />
             <BackToTopButton />
         </div>
     )

src/shared/components/home/FirstSection.tsx

@@ -9,9 +9,10 @@ import {
     BsTwitter,
     BsTelegram,
     BsInstagram,
+    BsRocketFill,
 } from 'react-icons/bs'
-
+import { IoCopyOutline } from 'react-icons/io5'
-import { MdContentCopy } from 'react-icons/md'
+import { TbAddressBook } from 'react-icons/tb'
 import { useSprings, useSpring, animated } from '@react-spring/web'
 
 const socials = [
@@ -50,7 +51,7 @@ const socials = [
 const FirstSection = () => {
     const address = '0x3c97331438e90680a17c35905ffc2b8ef760f844'
     const truncateAddress = (address: string) => {
-        return address.slice(0, 8) + '......' + address.slice(-7)
+        return address.slice(0, 5) + '......' + address.slice(-5)
     }
 
     const copyToClipboard = (address: string) => {
@@ -98,26 +99,56 @@ const FirstSection = () => {
                     </div>
 
                     <div className="">
-                        <h2 className="text-3xl mb-4 font-bold rounded animate-slide-loop hover:text-orange-400">
+                        <div className="border border-orange-500 flex items-center justify-between lg:w-3/4">
-                            Join Our Community
+                            <div className="flex rounded items-center w-1/2 gap-4">
-                        </h2>
+                                <TbAddressBook
-
+                                    className="text-orange-500"
-                        <div className="flex lg:w-2/3 flex-wrap gap-4">
+                                    size={22}
-                            {socials.map((social) => (
+                                />
-                                <Button
+                                <h2 className="text-gray-100 text-2xl font-bold hover:text-orange-400">
-                                    bgColor={social.background}
+                                    Address on BSC{' '}
-                                    key={social.name}
+                                </h2>
-                                    onClick={() =>
+                                <TbAddressBook
-                                        window.open(social.link, '_blank')
+                                    className="text-orange-500"
-                                    }
+                                    size={22}
-                                >
+                                />
-                                    <div className="flex items-center gap-2 transform motion-safe:hover:scale-110">
+                            </div>
-                                        {social.icon}
+                            <div className="text-gray-100 text-2xl flex gap-3 items-center w-1/2">
-                                        {social.name}
+                                {truncateAddress(address)}
-                                    </div>
+                                <IoCopyOutline size={24} />
-                                </Button>
+                            </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">

src/shared/components/home/QnASection.tsx

@@ -0,0 +1,28 @@
+import { useSpring, animated } from '@react-spring/web'
+import React, { useEffect, useRef, useState } from 'react'
+import { VscDebugBreakpointLog } from 'react-icons/vsc'
+
+type Props = {}
+
+const QnASection = (props: Props) => {
+    return (
+        <div
+            className="container flex justify-between items-center mx-auto py-2 text-white"
+            id="qna"
+        >
+            <div>
+                <h1 className="text-4xl font-bold text-center hover:text-orange-400">
+                    FAQS
+                </h1>
+                <h2>
+                    See some of the most frequently asked questions about Fight
+                    {/* Out here. Got a question that’s not on the list? Let us know
+                    below! */}
+                </h2>
+            </div>
+            <div>ABC</div>
+        </div>
+    )
+}
+
+export default QnASection