worked on updates from anshi

src/app/erebrus/page.jsx

@@ -8,14 +8,14 @@ const Index = () => {
     <div className='bg-primary w-full pt-[17vh] md:pt-[20vh] flex flex-col items-center h-auto'>
       <section className='flex flex-col items-center justify-between pt-[4%] pb-[4%] bg-[#9BA7DF] rounded-[20px] w-[95%] h-[900px] md:h-[1200px]'>
         <div className='flex flex-col md:flex-row justify-between gap-[10vw] items-start  px-[2%] '>
-          <h2 className='uppercase mt-3 md:w-[49%] text-center md:text-left text-white font-extrabold text-xl md:text-[46px] md:leading-normal'>
+          <h2 className='uppercase mt-3 md:w-[49%] text-center md:text-left text-white font-extrabold text-xl md:text-4xl md:leading-normal'>
             Secure, Decentralized VPN Service for Enhanced Privacy and Anonymity
           </h2>
           <div className='flex flex-1 gap-[39px] flex-col'>
-            <h3 className='font-medium hidden md:flex  text-white text-2xl md:text-[40px] md:leading-normal '>
+            <h3 className='font-medium hidden md:flex  text-white text-xl md:text-3xl md:leading-normal '>
               ABOUT
             </h3>
-            <p className='md:text-[34px] leading-tight text-xl text-white'>
+            <p className='md:text-2xl leading-tight text-xl text-white'>
               Erebrus is a shared decentralized VPN Service based on the
               wireguard Protocol. It is designed to enhance user privacy,
               anonymity, and security when using Public VPNs.{" "}

src/app/extension/page.jsx

@@ -7,7 +7,7 @@ import React from "react";
 
 const Index = () => {
   return (
-    <div className='py-[20vh] flex items-center flex-col'>
+    <div className='py-[18vh] flex items-center flex-col'>
       <Hero />
       <section className='w-full flex flex-col py-[12vh] items-center h-max'>
         <h2 className='text-cta w-full mb-[6vh] text-center text-2xl font-medium md:text-4xl'>

src/app/globals.css

@@ -45,4 +45,8 @@ body {
 }
 .element2 {
     background: radial-gradient(400px 400px at bottom left,#b7980dc8 20%,#11d9c545 50%,transparent 100%);
+  }
+  .features-card {
+    background: radial-gradient(600px 400px at 70% 58%,#11d9c526,transparent 100%);
+;
 }

src/app/sotreus/page.jsx

@@ -80,7 +80,7 @@ const Page = () => {
                   <h3 className='text-white  font-medium mb-[1vh] md:mb-[5vh] text-xl md:text-5xl'>
                     {item.title}
                   </h3>
-                  <p className='text-white/60 w-[85%]  font-light text-sm md:text-xl'>
+                  <p className='text-white w-[85%]  font-light text-sm md:text-xl'>
                     {item.desc}
                   </p>
                 </div>

src/app/webapp/page.jsx

@@ -6,7 +6,7 @@ import React from "react";
 const Index = () => {
   return (
     <div className='bg-primary w-full   flex flex-col items-center h-auto'>
-      <section className=' h-screen md:h-[967px] w-full space-y-5 md:space-y-10 md:pt-[10vh] bg-cover flex flex-col justify-center px-[10vw] bg-[url(/images/webapp/hero.svg)] bg-no-repeat'>
+      <section className=' h-screen md:h-[967px] w-full space-y-5 md:space-y-10 md:pt-[10vh] bg-cover flex flex-col justify-center px-[3.5%] bg-[url(/images/webapp/hero.svg)] bg-no-repeat'>
         <h3 className='uppercase text-white text-3xl md:text-[95px] leading-none font-semibold flex flex-col'>
           <span>Netsepio</span>
           <span>Webapp</span>
@@ -16,7 +16,7 @@ const Index = () => {
         </p>
         <CustomBtn link='https://app.netsepio.com' title='Explore Webapp' />
       </section>
-      <section className='w-[95%] border-none md:border  rounded-[20px] md:pt-[150px] my-[150px] pl-[3vw] flex flex-col items-center'>
+      <section className='w-[95%] border-[0px] md:border-2  md:border-white rounded-[20px] md:pt-[150px] my-[150px] pl-[3vw] flex flex-col items-center'>
         {webapp.map((item, i) => {
           return (
             <div

src/components/CustomBtn.jsx

@@ -13,7 +13,7 @@ const CustomBtn = ({
       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
-        target={!title.toLowerCase().includes("https") ? "_self" : "_blank"}
+        target={!link.toLowerCase().includes("https") ? "_self" : "_blank"}
         href={link}
       >
         {title}

src/components/Navbar.jsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 
 const Navbar = () => {
   return (
-    <div className='w-[93%] mt-[50px] absolute z-20 flex items-center justify-between self-center'>
+    <div className='w-[93%]  mt-[50px] absolute z-20 flex items-center justify-between self-center'>
       <Link href={"/"} className='flex items-center'>
         <Image src={"/images/logo.svg"} width={56} height={56} alt='Logo ' />
         <Image

src/components/extension/FeatureItem.jsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const FeatureItem = ({ item }) => {
   return (
-    <div className='w-[90%] lg:w-[80%] my-[5vh] rounded-lg px-[2%] h-[289px] lg:h-[546px] flex lg:justify-between items-center border-opacity-40 border-white border-2 relative '>
+    <div className='w-[90%] features-card hover:border-cta duration-150  lg:w-[80%] my-[5vh] rounded-lg px-[2%] h-[289px] lg:h-[546px] flex lg:justify-between items-center border-opacity-40 border-white border-2 relative '>
       <p className='absolute top-[4%] left-[2%] text-white font-thin text-sm  lg:text-lg'>
         {`0${item?.id}`}
       </p>

src/utils/data.js

@@ -3,45 +3,45 @@ export const cardDetails = [
     image: "pix",
     title: "Browser Extension",
     link: "extension",
-    button: "Discover",
+    button: "Discover more",
     desc: "Netsepio's browser extension combines a Web 3 crypto wallet with AI, ensuring secure reviews and easy navigation for safer online decisions.",
   },
   {
     image: "pix_2",
     title: "Web App",
     link: "webapp",
-    button: "Discover",
+    button: "Discover more",
 
     desc: "Contribute to verified reviews, manage projects, secure internet access, all while earning rewards and enhancing security with a built-in VPN.",
   },
   {
     image: "pix_3",
     title: "Privacy Firewall",
     link: "sotreus",
-    button: "Create Client",
+    button: "Learn more",
 
     desc: "Fast and easy-to-use VPN service that protects internet activities from cyber threats and surveillance.",
   },
   {
     image: "pix_4",
     title: "DVPN",
     link: "erebrus",
-    button: "Create Client",
+    button: "Learn more",
 
     desc: "Decentralized VPN Service based on the WireGuard VPN Protocol.It is designed to enhance user privacy, anonymity, and security when using Public VPNs.",
   },
-  {
-    image: "pix_5",
-    title: "Fast Connectivity",
-    desc: "Optimal performance with high-speed connectivity across its decentralized network, minimizing latency and maximizing efficiency",
-  },
   {
     image: "pix_6",
     title: "Reliable Uptime",
     link: "/",
-    button: "Explore",
+    button: "Learn more",
     desc: "Maintaining consistent and reliable access to the internet and services, even in high-demand scenarios.",
   },
+  {
+    image: "pix_5",
+    title: "Fast Connectivity",
+    desc: "Optimal performance with high-speed connectivity across its decentralized network, minimizing latency and maximizing efficiency",
+  },
 ];
 export const cardDetails2 = [
   {