added opengraph image, fixed simialar contents in about page and adde…

…d target to links

src/app/about/page.jsx

@@ -1,3 +1,5 @@
+import { how_we_help } from "@/utils/data";
+import Image from "next/image";
 import React from "react";
 
 const Page = () => {
@@ -39,58 +41,31 @@ const Page = () => {
                 scam prevention to informed investing and asset protection.
               </div>
             </div>
-            <div class='lg:flex md:flex mt-10 gap-8'>
-              <div class='lg:w-1/3 md:w-1/3 w-full rounded-xl'>
-                <div class='p-10'>
-                  <div style={{ position: "relative" }}>
-                    <img
-                      src='/about2.png'
-                      alt='netsepio logo'
-                      style={{ zIndex: 1 }}
-                      className='absolute right-2 bottom-2'
-                    />
-                    <img
-                      src='/white_frame.png'
-                      alt='netsepio logo'
-                      style={{ zIndex: 0 }}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div class='lg:w-1/3 md:w-1/3 w-full rounded-xl lg:mt-0 md:mt-0 mt-4'>
-                <div class='p-10'>
-                  <div style={{ position: "relative" }}>
-                    <img
-                      src='/about2.png'
-                      alt='netsepio logo'
-                      style={{ zIndex: 1 }}
-                      className='absolute right-2 bottom-2'
-                    />
-                    <img
-                      src='/white_frame.png'
-                      alt='netsepio logo'
-                      style={{ zIndex: 0 }}
+            <div className='flex mt-[111px] mb-[200px]  justify-between'>
+              {how_we_help.map((item, index) => {
+                return (
+                  <div
+                    key={index.toString()}
+                    className='bg-white flex items-start pt-[6%] justify-center w-[387px] h-[435px] relative rounded-[20px]'
+                  >
+                    <Image
+                      src={`/images/${item.img}`}
+                      alt='bg'
+                      width={387}
+                      className='absolute -top-1 -left-1'
+                      height={435}
                     />
+                    <div className='z-20  pl-[33px] pr-[12px]'>
+                      <h4 className='text-[28px] font-semibold mb-[35px] text-white'>
+                        {item.title}
+                      </h4>
+                      <p className='text-lg capitalize text-white font-light'>
+                        {item.desc}
+                      </p>
+                    </div>
                   </div>
-                </div>
-              </div>
-              <div class='lg:w-1/3 md:w-1/3 w-full rounded-xl lg:mt-0 md:mt-0 mt-4'>
-                <div class='p-10'>
-                  <div style={{ position: "relative" }}>
-                    <img
-                      src='/about2.png'
-                      alt='netsepio logo'
-                      style={{ zIndex: 1 }}
-                      className='absolute right-2 bottom-2'
-                    />
-                    <img
-                      src='/white_frame.png'
-                      alt='netsepio logo'
-                      style={{ zIndex: 0 }}
-                    />
-                  </div>
-                </div>
-              </div>
+                );
+              })}
             </div>
           </div>
 
@@ -104,7 +79,7 @@ const Page = () => {
               innovative project owners
             </div>
             <div className='text-4xl flex text-white mt-20 font-semibold'>
-              <li className='w-1/2'>Project Owners</li>
+              <li className='w-1/2'>Enterprises</li>
               <li className='w-1/2'>Community members</li>
             </div>
           </div>

src/app/layout.jsx

@@ -9,8 +9,10 @@ const roboto = Roboto({
 });
 
 export const metadata = {
+  metadataBase: new URL("https://netsepio.com"),
   title: "NetSepio",
-  description: "Protect your online presence with NetSepio, the decentralized cybersecurity platform. Say goodbye to malware and scams with our innovative features, including Web3 archive and DAO-driven governance. Download now for free.",
+  description:
+    "Protect your online presence with NetSepio, the decentralized cybersecurity platform. Say goodbye to malware and scams with our innovative features, including Web3 archive and DAO-driven governance. Download now for free.",
 };
 
 export default function RootLayout({ children }) {

src/app/opengraph-image.alt.txt

@@ -0,0 +1 @@
+Netsepio

src/components/CustomBtn.jsx

@@ -7,9 +7,11 @@ const CustomBtn = ({ title, width = "w-[80px] lg:w-[170px]", link = "/" }) => {
   return (
     <button
       style={inter.style}
-      className={`rounded-lg  ${width} text-xs lg:text-[16px] z-50 font-medium active:scale-95 duration-100 hover:bg-opacity-7 hover:-translate-y-1    bg-cta h-[55px]`}
+      className={`rounded-lg  ${width} text-primary text-xs lg:text-[16px] z-50 font-medium active:scale-95 duration-100 hover:bg-opacity-7 hover:-translate-y-1    bg-cta h-[55px]`}
     >
-      <Link href={link}>{title}</Link>
+      <Link target='_blank' href={link}>
+        {title}
+      </Link>
     </button>
   );
 };

src/components/DarkBtn.jsx

@@ -6,7 +6,9 @@ const DarkBtn = ({ title, width = "w-[80px] lg:w-[170px]", link = "/" }) => {
     <button
       className={`rounded-lg border-cta border ${width} text-xs lg:text-[18px]  hover:scale-95  duration-100 text-white  bg-primary h-[55px]`}
     >
-      <Link href={link}>{title}</Link>
+      <Link target='_blank' href={link}>
+        {title}
+      </Link>
     </button>
   );
 };

src/components/FAQs.jsx

@@ -20,8 +20,9 @@ const FAQs = ({ item }) => {
       });
   }, [showAnswer, animation]);
   return (
-    <motion.div
+    <motion.button
       animate={animation}
+      onClick={() => setShowAnswer(!showAnswer)}
       className='w-[90%] lg:w-[85%] flex flex-col  relative  duration-1000 h-auto my-4 items-center justify-center'
     >
       <div className='w-full flex items-center justify-between px-4 top-0 rounded-[12px] absolute left-0 right-0 bg-[#222944] min-h-[74px]'>
@@ -31,8 +32,8 @@ const FAQs = ({ item }) => {
             <Image
               src={"/images/plus.svg"}
               className=''
-              width={15}
-              height={15}
+              width={24}
+              height={24}
               alt='add'
             />
           ) : (
@@ -58,7 +59,7 @@ const FAQs = ({ item }) => {
           </motion.p>
         )}
       </AnimatePresence>
-    </motion.div>
+    </motion.button>
   );
 };
 

src/components/Footer.jsx

@@ -46,6 +46,7 @@ const Footer = () => {
             <h4 className=' text-white text-[22px] mb-[49px]'>{"Others"}</h4>
             <div className='flex relative right-[6px] gap-1'>
               <Link
+                target='_blank'
                 className='hover:scale-110 duration-150'
                 href={"https://t.me/NetSepio?boost "}
               >
@@ -58,6 +59,7 @@ const Footer = () => {
                 />
               </Link>
               <Link
+                target='_blank'
                 className='hover:scale-110 duration-150'
                 href={"https://github.com/Netsepio"}
               >

src/components/Hero.jsx

@@ -35,7 +35,7 @@ const Hero = () => {
           repeatType: "loop",
           duration: 10,
         }}
-        className='z-10 absolute   -right-[5%]'
+        className='z-10 absolute -right-[5%]'
       >
         <div className='relative w-[250px] h-[230px] lg:w-[450px] lg:h-[402.8px]'>
           <Image

src/components/Mission.jsx

@@ -97,7 +97,7 @@ const Mission = () => {
               </motion.div>
               <motion.div
                 animate={animation2}
-                transition={{ type: "tween", duration: 1 }}
+                transition={{ type: "tween", duration: 2 }}
                 className='w-[45%] self-end mr-[4%] h-[65%] flex flex-col relative'
               >
                 <Image

src/components/Reviews.jsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import React from "react";
 import CustomBtn from "./CustomBtn";
 import useFonts from "@/hooks/useFonts";
+import Link from "next/link";
 
 const Reviews = () => {
   const { roboto } = useFonts();
@@ -26,10 +27,13 @@ const Reviews = () => {
         <CustomBtn link='https://app.netsepio.com' title={"Get Started"} />
       </div>
       <div className='z-20 flex flex-col gap-[27px] justify-center  items-center'>
-        <div className=' w-[373px] h-[98px]  flex justify-start gap-[14px]  rounded-2xl  border border-white/10 items-center relative  bg-white/10 '>
+        <Link
+          href={"https://app.netsepio.com/dashboard/reviews"}
+          className=' w-[373px] h-[98px] hover:scale-105 duration-150  flex justify-start gap-[14px]  rounded-2xl  border border-white/10 items-center relative  bg-white/10 '
+        >
           {/* <div className=' w-full h-full absolute blur-sm  bg-white/10 rounded-2xl'></div> */}
 
-          <div className='w-[87px] center h-[98px] bg-white bg-opacity-10 rounded-md'>
+          <div className='w-[87px] center h-[98px] bg-white bg-opacity-10 rounded-2xl'>
             <Image src={"/images/play.svg"} width={44} height={46} alt='play' />
           </div>
           <div className='flex flex-col justify-center items-start gap-2'>
@@ -38,11 +42,14 @@ const Reviews = () => {
               Enhance your online security
             </h6>
           </div>
-        </div>
-        <div className=' w-[373px] h-[98px]  flex justify-start gap-[14px]  rounded-2xl  border border-white/10 items-center relative bg-white/10 '>
+        </Link>
+        <Link
+          href={"https://app.netsepio.com/dashboard/reviews"}
+          className=' w-[373px] h-[98px]  flex justify-start hover:scale-105 duration-150 gap-[14px]  rounded-2xl  border border-white/10 items-center relative bg-white/10 '
+        >
           {/* <div className=' w-full h-full absolute blur-xl  bg-white/40 rounded-2xl'></div> */}
 
-          <div className='w-[87px] center h-[98px] bg-white bg-opacity-10 rounded-md'>
+          <div className='w-[87px] center h-[98px] bg-white bg-opacity-10 rounded-2xl'>
             <Image
               src={"/images/bars.svg"}
               width={33}
@@ -54,7 +61,7 @@ const Reviews = () => {
             <h6 className='text-white text-2xl'>View Reviews</h6>
             <h6 className='text-[#A7A5A5] text-sm'>Navigate confidently</h6>
           </div>
-        </div>
+        </Link>
       </div>
     </div>
   );

src/components/Socials.jsx

@@ -1,24 +1,37 @@
 "use client";
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 
 const Socials = () => {
   return (
     <div className='bg-white h-[200px] lg:h-[312px] my-[3%] w-full rounded-b-[40px] flex items-center justify-center gap-[10%]'>
       <div className='w-[60px] lg:w-[120px] hover:-translate-y-4 duration-300 cursor-pointer h-[60px] lg:h-[120px] flex justify-center items-center  bg-black rounded-[20px]'>
-        <div className='w-[30px] lg:w-[60px] h-[30px]  lg:h-[60px] relative'>
+        <Link
+          target='_blank'
+          href={"https://discordapp.com/invite/5uaFhNpRF6"}
+          className='w-[30px] lg:w-[60px] h-[30px]  lg:h-[60px] relative'
+        >
           <Image src={"/images/discord.svg"} fill alt='discord' />
-        </div>
+        </Link>
       </div>
       <div className='w-[60px] lg:w-[120px] hover:-translate-y-4 duration-300 cursor-pointer h-[60px] lg:h-[120px] flex justify-center items-center  bg-black rounded-[20px]'>
-        <div className='w-[30px] lg:w-[60px] h-[30px]  lg:h-[60px] relative'>
+        <Link
+          target='_blank'
+          href={"https://x.com/netsepio"}
+          className='w-[30px] lg:w-[60px] h-[30px]  lg:h-[60px] relative'
+        >
           <Image src={"/images/twitter.svg"} fill alt='twitter' />
-        </div>
+        </Link>
       </div>
       <div className='w-[60px] lg:w-[120px] hover:-translate-y-4 duration-300 cursor-pointer  h-[60px] lg:h-[120px] flex justify-center items-center  bg-transparent rounded-[20px]'>
-        <div className='w-[60px] lg:w-[120px] h-[60px] lg:h-[120px] relative'>
+        <Link
+          target='_blank'
+          href={"https://github.com/netsepio"}
+          className='w-[60px] lg:w-[120px] h-[60px] lg:h-[120px] relative'
+        >
           <Image src={"/images/git.svg"} fill alt='git' />
-        </div>
+        </Link>
       </div>
     </div>
   );

src/utils/data.js

@@ -105,3 +105,21 @@ export const faq = [
     a: "The NetSepio Crypto Wallet is a secure, multi-chain-supported crypto wallet that lets you send and receive coins and ERC20 tokens. With our Crypto Wallet, you can manage all your digital assets in one secure location, making it easy and convenient to trade and invest in cryptocurrencies. Additionally, the NetSepio Crypto Wallet supports multiple chains, ensuring that all your digital assets are safe and secure.",
   },
 ];
+
+export const how_we_help = [
+  {
+    img: "bg_1.png",
+    title: "Prevent Scams",
+    desc: "Combining AI, community insights, and transparent reviews to proactively prevent scams",
+  },
+  {
+    img: "bg_2.png",
+    title: "DYOR Before Investing",
+    desc: "Empower your investments with informed decisions",
+  },
+  {
+    img: "bg_3.png",
+    title: "Protect Crypto Assets",
+    desc: "Elevate Your Crypto Asset Security with VPN and Firewall Services",
+  },
+];