From b0b7bfeae7c25cd3c3a8f57b5f1be22766f46a65 Mon Sep 17 00:00:00 2001
From: Rushikesh Nimkar <rushikeshnimkar396@gmail.com>
Date: Wed, 21 Aug 2024 15:03:33 +0530
Subject: [PATCH] update: dvpnnft ui

---
 package.json      |  1 +
 pages/dvpnnft.tsx | 50 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/package.json b/package.json
index a7a7ba5..5766f36 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "petra-plugin-wallet-adapter": "^0.3.0",
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^2.1.0",
     "react-icons": "^4.7.1",
diff --git a/pages/dvpnnft.tsx b/pages/dvpnnft.tsx
index b709019..5a8204a 100644
--- a/pages/dvpnnft.tsx
+++ b/pages/dvpnnft.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Footer from "../components/Footer";
+import {BrowserView, MobileView} from 'react-device-detect';
 
 const BaliDVPNNFTPage = () => {
   const [walletAddress, setWalletAddress] = useState('');
@@ -15,6 +16,7 @@ const BaliDVPNNFTPage = () => {
 
   return (
     <>
+    <MobileView>
     <div className="flex flex-col justify-center items-center  h-screen  mt-10 bg-black p-4">
       <div className="text-center text-white mb-10">
         <h2 className="text-2xl ">Mint Your FREE Bali ÐVPN NFT</h2>
@@ -40,6 +42,54 @@ const BaliDVPNNFTPage = () => {
         <img src="/bali-dvpn-nft.jpeg" alt="Erebrus DVPN" className="rounded-lg" />
       </div>
     </div>
+    </MobileView>
+    <BrowserView>
+    <div className='mx-20 mt-10'>
+  <h1 className="text-5xl  text-white mb-3 text-left">
+    Mint Your FREE Bali DVPN NFT
+  </h1>
+</div>
+<div className="min-h-screen flex items-center justify-center mx-20">
+  <div className="flex w-full h-full">
+    <div className="flex-1">
+      <img 
+        src="/bali-dvpn-nft.jpeg" 
+        alt="Erebrus DVPN"
+        className="w-full h-full object-cover"
+      />
+    </div>
+
+    <div className="flex-1 bg-[#4D9FCB] flex flex-col items-center pt-20 p-6">
+      <h2 className="text-6xl  text-white mb-20 text-center">
+        Secure, Private, Exclusive
+      </h2>
+      <form>
+        <p className="text-black text-3xl   mb-16">
+          Enter your wallet address and click GO
+        </p>
+        <div className=' text-center mb-10 '>
+        <input
+          type="text"
+          value={walletAddress}
+          onChange={(e) => setWalletAddress(e.target.value)}
+          placeholder="wallet address"
+          className="w-2/3 p-2 rounded text-2xl text-center mb-4"
+        />
+        </div>
+        <div className='text-center '>
+        <button
+          type="submit"
+          className=" bg-[#1C126C] text-3xl text-white px-6 py-3 rounded-[40px] font-semibold hover:bg-indigo-600 transition duration-300"
+        >
+          GO
+        </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+   </BrowserView>
    <Footer/>
    </>
   );