update : ui

src/app/page.jsx

@@ -84,7 +84,7 @@ export default function Home() {
         </div>
         <Reviews />
         <WinSection />
-        <section className="w-full h-[600px] flex items-center justify-center my-auto"
+        <section className="w-full h-[600px] flex items-center justify-center "
         style={{
           background: greengradient,
         }}
@@ -93,15 +93,15 @@ export default function Home() {
             <h2 className="text-primary font-semibold text-2xl md:text-[52px] lg:text-[52px] leading-none tracking-wider text-center">
               ÐWi-Fi Revolutionizing Wireless Access
             </h2>
-            <p className="text-primary text-lg lg:text-2xl md:text-2xl leading-tight text-center">
+            <p className="text-primary text-lg lg:text-2xl md:text-2xl leading-tight text-center lg:pt-10">
               Share unused bandwidth turns each participant
               <br />
               into both a provider and consumer.
             </p>
             <CustomBtn
               title="Coming Soon"
               link="#"
-              width="w-[140px] bg-[#00000080] text-white lg:w-[191px]"
+              width="w-[140px] bg-[#040A2080] text-white lg:w-[191px]"
               disabled
             />
           </div>

src/components/Hero.jsx

@@ -25,6 +25,7 @@ const Hero = () => {
       {/* Conic Gradient */}
       <div className='absolute top-0 bottom-0 w-full h-full bg-cover lg:bg-[url(/images/herobg.png)] md:bg-[url(/images/herobg.png)] bg-[url(/images/herobg2.png)]'></div>
 
+
       {/* Hero Text */}
       <div className='z-20 absolut lg:relative bottom-10 lg:bottom-0 lg:mx-[80px] md:mx-[80px] mx-[30px]'>
         <h3 className='text-3xl lg:text-[58px] max-w-[100%] leading-tight text-white'>
@@ -66,7 +67,7 @@ const Hero = () => {
     <div className='items-center justify-between' style={{ letterSpacing: '0.06em' }}>
           <div
             style={banner}
-            className='py-6 lg:text-xl md:text-xl text-lg text-gray-300 text-center'
+            className='py-6 lg:text-[30px] md:text-xl text-lg text-gray-300 text-center'
           >
             Unleash the Power of Future Internet 
           </div>

src/components/Mission.jsx

@@ -62,7 +62,7 @@ const Mission = () => {
               >
                 Empowering Connectivity
               </h3>
-              <p className='text-base sm:text-[18px] text-white font-thin lg:text-start md:text-start text-center p-10 lg:p-0 md:p-0'>
+              <p className='text-base sm:text-[18px] text-white font-thin lg:text-start lg:text-[24px] md:text-start text-center p-10 lg:p-0 md:p-0'>
               NetSepio is revolutionizing internet access through the power of DePIN, empowering anyone to set up a VPN node and share their internet bandwidth, thus fostering a network that is both secure and universally accessible. By combining decentralized VPN (ÐVPN) and decentralized Wi-Fi (ÐWi-Fi) technologies, our mission is to make the internet safer, more private, and available to everyone.
               </p>
               <CustomBtn link='/mission' title={"Our Mission"} />
@@ -83,10 +83,10 @@ const Mission = () => {
 
               <h6
                   style={roboto.style}
-                  className='text-sm leading-tight text-center bottom-4 mt-4 z-20 text-white w-2/3 justify-center items-center flex'
+                  className='text-sm leading-tight font-light px-10 lg:text-[16px] text-center bottom-4 mt-4 z-20 text-white w-2/3 justify-center items-center flex'
                 >
                   {" "}
-                  Everyone is a provider and consumer. Welcome to the future. 
+                  Everyone is a provider and consumer.<br/> Welcome to the future. 
                 </h6>
 
             </div>

src/components/WinSection.jsx

@@ -6,6 +6,19 @@ import Image from "next/image";
 
 const WinSection = () => {
   const { roboto } = useFonts();
+
+  const customStyles = [
+    {background: 'radial-gradient(  ellipse at 2.36% 97.72%, rgba(17, 217, 197, 0.3) 0%, rgba(17, 217, 197, 0.3) 100%, rgba(0, 0, 0, 0.3) 100%     )'
+    },
+    { background: 'radial-gradient(  ellipse at 2.36% 97.72%, rgba(17, 217, 197, 0.3) 0%, rgba(17, 217, 197, 0.3) 100%, rgba(0, 0, 0, 0.3) 100%     )'
+     },
+    { 
+      background: 'linear-gradient(105.93deg, rgba(17, 217, 197, 0.2) 0.61%, rgba(16, 100, 92, 0.2) 99.6%), radial-gradient(90.47% 109.68% at 90.36% 130.72%, rgba(183, 153, 13, 0.5) 20.5%, rgba(100, 185, 104, 0.25) 60.25%, rgba(17, 217, 195, 0) 100%)',
+
+    },
+  ];
+
+
   return (
     <div
       style={roboto.style}
@@ -22,13 +35,13 @@ const WinSection = () => {
           return (
             <div
               key={index.toString()}
-              className='flex w-[400px] hover:-translate-y-4 duration-300 flex-col justify-start p-10 rounded-3xl'
-              style={{backgroundColor:'#11D9C580'}}
+              className='flex w-[400px] hover:-translate-y-4 duration-300 flex-col justify-start p-8 rounded-[50px] '
+              style={customStyles[index % customStyles.length]}
             >
               <Image
                 src={`/images/${item.image}.jpeg`}
                 alt='pic'
-                className='object-cover overflow-clip mb-6 rounded-xl'
+                className='object-cover overflow-clip mb-6 rounded-[20px]'
                 width={400}
                 height={320}
               />

src/components/winners.jsx

@@ -21,7 +21,7 @@ const WinnersPage = () => {
     <div className="bg-[#040A20] text-white py-40">
       <h1 className="lg:text-5xl md:text-5xl text-3xl text-center mb-20">Join the Winners!</h1>
       <div className="w-full mx-auto flex lg:flex-row md:flex-row flex-col justify-center items-center">
-        <div className="w-80 relative h-80 rounded-2xl lg:block md:block hidden"
+        <div className="lg:w-[420px] relative h-80 rounded-2xl lg:block md:block hidden"
         style={{ background: 'linear-gradient(to bottom, #FFFFFF, #FFFFFF)' }}>
           {achievements.map((item, index) => (
             <div 
@@ -49,9 +49,9 @@ const WinnersPage = () => {
             <a 
               key={index} 
               href="#" 
-              className="block hover:text-blue-300 text-white hover:text-blue-200 transition-colors duration-300 mt-10 lg:ml-20 md:ml-20 lg:text-xl md:text-xl text-sm"
+              className="block hover:text-blue-300 text-white  font-normal  transition-colors duration-300  lg:ml-20 md:ml-20 lg:text-[30px] md:text-xl text-sm"
             >
-              {item.prize} <span className="text-blue-300">↗</span>
+              {item.prize} <span className="text-[#13D9C6]">↗</span>
             </a>
           ))}
         </div>

src/utils/data.js

@@ -25,8 +25,8 @@ export const cardDetails = [
   {
     image: "pix_4",
     title: "Mobile App",
-    link: "#",
-    button: "Coming soon",
+    link: "https://drive.google.com/file/d/1jdkqwIXY825iG3shRRoFyg5SMGy6LN8J/view?usp=drive_link",
+    button: "Download now",
 
     desc: "Empower your online activity with our Erebrus mobile app for secure, private and accessible network. We utilize NFTs for robust privacy and decentralization.",
   },