Merge pull request #117 from NetSepio/explorer-page

fix : dvpn and dwifi page ui

pages/dwifi.tsx

@@ -1,80 +1,84 @@
-import React, { useEffect, useState} from "react";
+import React, { useEffect, useState, useRef } from "react";
 import Link from "next/link";
-import  NodeDwifiStream from "../components/nodedataDwifi";
+import NodeDwifiStream from "../components/nodedataDwifi";
 import { motion } from "framer-motion";
 import dynamic from 'next/dynamic';
 
 const DwifiMap = dynamic(() => import('../components/DwifiMap'), { ssr: false });
 
-
 const Dwifi = () => {
+  const mapRef = useRef(null);
+
+  const scrollToMap = () => {
+    mapRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
 
-    return(
-      <div className="bg-black">
-      <div className="mx-auto py-20"
+  return (
+    <div className="explorer-page">
+      <div className="mx-auto py-20 lg:h-[40vw]"
         style={{
-          backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer2.png")',  
-            backgroundSize: 'cover',
-            backgroundBlendMode: 'overlay',
-          }}
-          >
-      <div className="flex flex-col lg:flex-row items-start justify-between lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-4 lg:px-20">
-      <div className="flex flex-col items-start justify-start">
-        <motion.h1
-          initial={{ y: 100, opacity: 0 }}
-          animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-          className="text-4xl md:text-5xl lg:text-6xl font-semibold text-gray-300 mb-8 lg:w-4/5"
-        >
-          Decentralized Connectivity with Erebrus ÐWi-Fi
-        </motion.h1>
-        <motion.h1
-          initial={{ y: 100, opacity: 0 }}
-          animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-          className="text-xl md:text-2xl text-white mb-8 w-full"
-        >
-          <p>Secure and fast Wi-Fi Everywhere</p>
-        </motion.h1>
-        <motion.div
-          initial={{ y: 100, opacity: 0 }}
-          animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-          className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg" 
-        >
-          <Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
-            Run Your Node
-          </Link>
-        </motion.div>
+          backgroundImage: 'url("/explorerhero.png")',  
+          backgroundSize: 'cover',
+          backgroundBlendMode: 'overlay',
+        }}
+      >
+        <div className="flex flex-col lg:flex-row items-start justify-between lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-4 lg:px-20">
+          <div className="flex flex-col items-start justify-start">
+            <motion.h1
+              initial={{ y: 100, opacity: 0 }}
+              animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
+              className="text-4xl md:text-5xl lg:text-6xl font-semibold text-gray-300 mb-8 lg:w-4/5"
+            >
+              Decentralized Connectivity with Erebrus ÐWi-Fi
+            </motion.h1>
+            <motion.h1
+              initial={{ y: 100, opacity: 0 }}
+              animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
+              className="text-xl md:text-2xl text-white mb-8 w-full"
+            >
+              <p>Secure and fast Wi-Fi Everywhere</p>
+            </motion.h1>
+            <div className="flex gap-5">
+              <motion.div
+                initial={{ y: 100, opacity: 0 }}
+                animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
+                className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg cursor-pointer" 
+              >
+                <Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
+                  Run Your Node
+                </Link>
+              </motion.div>
+              <motion.div
+                initial={{ y: 100, opacity: 0 }}
+                animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
+                className="text-white font-bold py-3 px-10 rounded-full bg-[#5696FF] text-lg cursor-pointer" 
+                onClick={scrollToMap}
+              >
+                Active Node Map
+              </motion.div>
+            </div>
+          </div>
+        </div>
       </div>
-
-      {/* Animated Image */}
-      <div className="hidden lg:block lg:w-1/3">
-        <img 
-          src="/explorerdwifi4.png" 
-          alt="Decorative GIF" 
-          className="w-full h-auto opacity-90 shadow-lg"
-        />
-      </div>   
-    </div>
-    </div>
-    <div className=" bg-gradient-to-b from-black to-[#20253A] lg:px-20 pt-16 px-20">
-          <div className="text-2xl font-semibold text-gray-300 mb-8 ">
+      <div className="bg-gradient-to-b from-[#20253A] to-[#20253A] lg:px-20 pt-16 px-20">
+        <div className="text-2xl font-semibold text-gray-300 mb-8">
           Erebrus Decentralized Wi-Fi (ÐWi-Fi) Network Nodes Overview
-          </div>
-          <div className="text-white">
-            <p>
-            Discover the Erebrus decentralized Wi-Fi network with our interactive map. View real-time details about Wi-Fi hotspots, including their location, performance, and usage stats. This dashboard helps you find secure and fast Wi-Fi connections globally.            </p>
-          </div>
         </div>
-    <div className="map-page" style={{ height: '100vh'}}>
-      <div className="map-container" style={{ height: '100%', width: '100%' }}>
+        <div className="text-white">
+          <p>
+            Discover the Erebrus decentralized Wi-Fi network with our interactive map. View real-time details about Wi-Fi hotspots, including their location, performance, and usage stats. This dashboard helps you find secure and fast Wi-Fi connections globally.
+          </p>
+        </div>
+      </div>
+      <div ref={mapRef} className="map-page" style={{ height: '100vh' }}>
+        <div className="map-container" style={{ height: '100%', width: '100%' }}>
           <DwifiMap />
+        </div>
       </div>
-    </div>
 
       <NodeDwifiStream />
-
-            {/* <img src="/mapRegions.png"/> */}
-        </div>
-    )
+    </div>
+  )
 }
 
 export default Dwifi;

pages/explorer.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import Link from "next/link";
 import NodesData from "../components/NodesData";
 import dynamic from 'next/dynamic';
@@ -10,6 +10,7 @@ const EREBRUS_GATEWAY_URL = process.env.NEXT_PUBLIC_EREBRUS_BASE_URL;
 const Explorer = () => {
   const [nodes, setNodes] = useState([]);
   const [activeMap, setActiveMap] = useState('pin');
+  const mapRef = useRef(null);
 
   useEffect(() => {
     async function fetchNodes() {
@@ -30,16 +31,20 @@ const Explorer = () => {
     fetchNodes();
   }, []);
 
+  const scrollToMap = () => {
+    mapRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
   return (
-    <div className="bg-[#040819]">
-      <div className="mx-auto relative flex flex-col lg:flex-row items-center lg:items-start lg:justify-between p-4 lg:p-10"
+    <div className="explorer-page">
+      <div className="mx-auto relative flex flex-col lg:flex-row items-center lg:items-start lg:justify-between p-4 lg:p-10 lg:h-[40vw]"
         style={{
-          backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer4.png")',
+          backgroundImage: 'url("/explorerhero.png")',
           backgroundSize: 'cover',
-          backgroundBlendMode: 'overlay',
+          backgroundBlendMode: 'lighten',
         }}
       >
-        <div className="flex flex-col items-center lg:items-start lg:w-2/3 lg:pr-10 text-left">
+        <div className="flex flex-col items-center lg:items-start lg:w-2/3 lg:pr-10 text-left py-40">
           <motion.h1
             initial={{ y: 100, opacity: 0 }}
             animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
@@ -58,6 +63,7 @@ const Explorer = () => {
               Unrestricted Uncensored Web Access
             </p>
           </motion.h1>
+          <div className="flex gap-5">
           <motion.div
             initial={{ y: 100, opacity: 0 }}
             animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
@@ -67,19 +73,19 @@ const Explorer = () => {
               Run Your Node
             </Link>
           </motion.div>
-        </div>
-
-        <div className="hidden lg:block relative lg:self-start lg:mr-auto">
-            <img 
-              src="/explorerdvpn3.png" 
-              alt="vpn sheield image" 
-              className="w-full h-auto max-h-80 lg:pl-14 shadow-lg"
-            />
+          <motion.div
+            initial={{ y: 100, opacity: 0 }}
+            animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
+            className="text-white font-bold py-3 px-10 rounded-full bg-[#5696FF] text-lg inline-block cursor-pointer"
+            onClick={scrollToMap}
+          >
+            Active Node Map
+          </motion.div>
           </div>
-
+        </div>
       </div>
 
-      <div className="pt-16 px-4 lg:px-20 bg-gradient-to-b from-black to-[#20253A]">
+      <div className="pt-16 px-4 lg:px-20 bg-gradient-to-b from-[#20253A] to-[#20253A]">
         <div className="text-2xl font-semibold text-gray-300 mb-8">
           Erebrus Decentralized VPN (ÐVPN) Network Nodes Overview
         </div>
@@ -90,16 +96,15 @@ const Explorer = () => {
         </div>
       </div>
 
-      <div className="map-page" style={{ height: '100vh' }}>
+      <div ref={mapRef} className="map-page" style={{ height: '100vh' }}>
         <div className="map-container" style={{ height: '100%', width: '100%' }}>
           <DvpnMap nodes={nodes} />
         </div>
       </div>
 
       <NodesData />
-
     </div>
   );
 }
 
-export default Explorer;
+export default Explorer;

pages/index.js

@@ -150,7 +150,7 @@ export default function Home() {
         Unleash the power of future internet with our ÐVPN and ÐWi-Fi 
         </p>
       </motion.h1>
-      <div className="lg:flex md:flex lg:space-x-4 md:space-x-4 w-3/5 mr-auto lg:gap-10 md:gap-10 gap-0">
+      <div className="lg:flex md:flex lg:space-x-4 md:space-x-4 w-3/5 mr-auto lg:gap-5 md:gap-10 gap-0">
         <motion.div
           initial={{ y: 100, opacity: 0 }}
           animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}

pages/subscription.tsx

@@ -294,6 +294,7 @@ const Subscription = () => {
         setLoading(false);
       }
     };
+
 
     const vpnnft = async () => {
       setLoading(true);

styles/globals.css

@@ -150,4 +150,8 @@ body {
   background: 
     linear-gradient(0deg, #6ea3f9, #ffffff),
     linear-gradient(180deg, rgba(118, 224, 250, 0.5) 10%, rgba(57, 133, 255, 0.5) 100%);
-}
+}
+.explorer-page {
+
+  background: linear-gradient(180deg, #040819 0%, #092187 21.62%, #20253A 36.5%);
+}