webapp and extension page ui

src/app/extension/page.jsx

@@ -7,7 +7,7 @@ import React from "react";
 
 const Index = () => {
   return (
-    <div className='py-[18vh] flex items-center flex-col'>
+    <div className='py-[16.7vh] 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/webapp/page.jsx

@@ -5,17 +5,37 @@ 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-[3.5%] bg-[url(/images/webapp/hero2.png)] 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>
-        </h3>
-        <p className='text-white text-xl w-[50vw] md:w-[30vw] md:text-[34px] leading-none font-light'>
-          Reviews and projects tailored to your interests
+    <div className='bg-primary w-full py-[16.7vh] flex flex-col items-center h-auto'>
+
+      <div className='h-[90vh] relative flex flex-col py-[5vh] md:py-0 md:flex-row items-center w-full bg-[url(/images/extension/extension_bg.png)] bg-cover bg-white'>
+      <div className='absolute right-0 bottom-[40px] md:right-[35%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#11D9C5] rounded-full blur-3xl opacity-30' />
+      <div className='absolute right-0 bottom-0 md:right-[10%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#11D9C5] rounded-full blur-3xl opacity-30' />
+
+      <div className='relative bottom-[7%] md:bottom-0 flex flex-col h-[55%] md:h-[90%] w-1/2 items-center md:items-start p-[5%] pt-[15%] lg:pt-[8%]'>
+        <h2 className='bg-gradient-to-r text-3xl font-semibold md:text-5xl from-[#11D9C5] to-[#91A6FF] bg-clip-text text-transparent'>
+        NetSepio WebApp
+        </h2>
+        <p className='text-white font-thin text-xl lg:text-lg pt-[5%] md:pt-[8%] mb-[10%] lg:mb-[8%] w-4/5'>
+        Leave verified reviews, manage projects with ease, and secure your internet connection with a built-in VPN.  
+        All while earning rewards for your participation.
         </p>
-        <CustomBtn link='https://app.netsepio.com' title='Explore Webapp' />
-      </section>
+        <CustomBtn
+          link='https://app.netsepio.com/'
+          title='Explore WebApp'
+          width='w-[140px] lg:w-[191px]'
+        />
+      </div>
+
+      <div className='relative pr-[3%]'>
+        <img
+          className='object-cover bg-primary lg:bg-transparent lg:border-none border-opacity-30 z-20 border-[0.3px] border-cta rounded-md'
+          src={"/images/webapp/hero2.png"}
+          fill
+          alt='hero'
+        />
+      </div>
+    </div>
+
       <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 (
@@ -47,6 +67,19 @@ const Index = () => {
           );
         })}
       </section>
+
+      <section className='w-[90%] mt-[5%] lg:mt-[10%] space-y-[5vh] lg:pace-y-[10vh] flex flex-col items-center justify-center h-[542px] bg-cover bg-[url(/images/webapp/install_bg.png)] bg-no-repeat lg:h-[724px]'>
+        <h2 className='text-2xl text-white font-semibold md:text-6xl w-1/2 text-center '>
+        Unlock the Power of 
+        Community Insights
+        </h2>
+        <CustomBtn
+          link='https://chromewebstore.google.com/detail/netsepio/bbkfclgnbddljhepbfpongcollhocghd'
+          title='Explore Now'
+          width='w-[140px] bg-white lg:w-[191px]'
+        />
+      </section>
+
     </div>
   );
 };

src/components/extension/HeroExt.jsx

@@ -4,30 +4,34 @@ import CustomBtn from "../CustomBtn";
 
 const Hero = () => {
   return (
-    <div className='h-[80vh] relative flex flex-col py-[5vh] md:py-0 md:flex-row items-center  w-full bg-white'>
-      <div className='absolute left-[0] top-0 w-[140px] lg:w-[237px] h-[125px] lg:h-[216px] bg-[#040A20] rounded-full blur-3xl' />
-      <div className='absolute bottom-0 right-0 md:right-[40%] w-[140px] lg:w-[237px] h-[125px] lg:h-[216px] bg-[#040A20] rounded-full blur-3xl' />
-      <div className='relative md:left-[8%] w-[95vw] md:w-[60vw] h-[65%] md:h-[75%]'>
-        <Image
-          className='object-cover bg-primary lg:bg-transparent lg:border-none border-opacity-30 z-20 border-[0.3px] border-cta rounded-md'
-          src={"/images/extension/hero.png"}
-          fill
-          alt='hero'
-        />
-      </div>
-      <div className='relative bottom-[7%] md:bottom-0 flex flex-col h-[55%] md:h-[90%] w-[100%] md:w-[60%]  items-center md:items-start lg:pl-[13%] pt-[15%] lg:pt-[6%]  bg-primary'>
-        <h2 className='bg-gradient-to-r text-3xl font-semibold md:text-6xl from-[#11D9C5] to-[#91A6FF] bg-clip-text text-transparent'>
+    <div className='h-[90vh] relative flex flex-col py-[5vh] md:py-0 md:flex-row items-center w-full bg-[url(/images/extension/extension_bg.png)] bg-cover bg-white'>
+      <div className='absolute right-0 bottom-[40px] md:right-[35%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#11D9C5] rounded-full blur-3xl opacity-30' />
+      <div className='absolute right-0 bottom-0 md:right-[10%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#11D9C5] rounded-full blur-3xl opacity-30' />
+
+      <div className='relative bottom-[7%] md:bottom-0 flex flex-col h-[55%] md:h-[90%] w-1/2 items-center md:items-start p-[5%] pt-[15%] lg:pt-[8%]'>
+        <h2 className='bg-gradient-to-r text-3xl font-semibold md:text-5xl from-[#11D9C5] to-[#91A6FF] bg-clip-text text-transparent'>
           Browser Extension
         </h2>
-        <p className='text-white font-thin text-xl lg:text-3xl  pt-[5%] md:pt-[10%] mb-[10%] lg:mb-[20%]'>
-          AI-Powered secure browsing
+        <p className='text-white font-thin text-xl lg:text-lg pt-[5%] md:pt-[8%] mb-[10%] lg:mb-[8%] w-4/5'>
+        Combines your Web3 wallet with AI-driven insights and 
+reviews for every site you explore, giving you the power 
+to make safer and more informed online decisions.
         </p>
         <CustomBtn
           link='https://chromewebstore.google.com/detail/netsepio/bbkfclgnbddljhepbfpongcollhocghd'
           title='Download now'
           width='w-[140px] lg:w-[191px]'
         />
       </div>
+
+      <div className='relative w-1/2 pr-[3%]'>
+        <img
+          className='object-cover bg-primary lg:bg-transparent lg:border-none border-opacity-30 z-20 border-[0.3px] border-cta rounded-md'
+          src={"/images/extension/hero.png"}
+          fill
+          alt='hero'
+        />
+      </div>
     </div>
   );
 };