Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui : subscription , mint , plans page made responsive #113

Merged
merged 1 commit into from
Aug 25, 2024
Merged

ui : subscription , mint , plans page made responsive #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 76 additions & 138 deletions pages/mint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,144 +311,82 @@ const Mint = () => {
</Head>

{mintpage === "page1" && (
<div style={{backgroundColor: '#040819'}}>
<div className="p-20">
<div
className="text-white text-5xl leading-normal"
style={{
marginLeft: "10vh",
marginRight: "10vh",
fontFamily: 'sans-serif',
}}
>
Mint Your VPN NFT, Secure, Private,
{" "}<br></br>
<span >Exclusive</span>
</div>

{/* <div
className="absolute w-50vw inset-0 h-full opacity-30 lg:bg-[radial-gradient(ellipse_at_center,#0262FF,#040819_30%,#080d1f_100%)] md:bg-[radial-gradient(circle_at_top,#0262FF,#040819_30%,#080d1f_100%)] bg-[radial-gradient(circle_at_center,#0262FF,#040819_30%,#080d1f_100%)]"
style={{ transform: "scale(2.0)" }}
></div> */}

<div class="flex justify-center gap-20 m-10 z-20"
style={{backgroundColor:'#202333', marginLeft: "10vh", marginRight: "10vh"}}>
<div
className="text-white w-1/2"
>
<img
src={imageSrc2}
/>
</div>
<div className="w-1/2 mt-10" >
<div className="text-white text-xl mt-10 mx-auto flex gap-2">
<img src="/uis_calender.png" className="w-6 h-6 mt-1" />
<div>3-Month Coverage</div>
</div>
<div className="text-white text-xl mt-4 mx-auto flex gap-2">
<img src="/mdi_users.png" className="w-6 h-6 mt-1" />
<div>Unlimited Clients</div>
</div>
<div className="text-white text-xl mt-4 mx-auto flex gap-2">
<img
src="/icomoon-free_price-tags.png"
className="w-6 h-6 mt-1"
/>
<div>{displayText}<span className="text-[18px]">{ chain === 'apt' ? "" : "($5.99)"}</span></div>
</div>
<div className="text-white text-xl mt-4 mx-auto flex gap-2">
<img
src="/wpf_security-checked.png"
className="w-6 h-6 mt-1"
/>
<div>Exceptional Value for Unmatched Security</div>
</div>

{/* <div className="flex gap-10 mt-10">
<div
className="text-white text-md rounded-full py-3 px-10"
style={{ border: "1px solid #0162FF" }}
>
<span className="font-bold text-2xl mr-4">
{totalNFTMinted ? totalNFTMinted.length : ""}
</span>{" "}
Minted NFTs
</div>
<div
className="text-white text-md rounded-full py-3 px-14"
style={{ border: "1px solid #0162FF" }}
>
<span className="font-bold text-2xl mr-4">
{totalNFTMinted ? `${111 - totalNFTMinted.length}` : ""}
</span>{" "}
NFTs Left
</div>
</div> */}

<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={transition}
>
<div className="mt-10 text-white flex flex-col justify-center items-center">
{isLoadingTx ? (
<div className="animate-spin text-white text-7xl">⛏</div>
) : (
<>
{/* {!isSignedIn || !isauthenticate ? (
<div className="text-white font-bold py-4 px-10 rounded-lg mr-auto ml-10 -mt-10">
{!connected && (
<button className="">
<WalletSelectorAntDesign />
</button>
)}
{connected && (
// <SingleSignerTransaction isSendableNetwork={isSendableNetwork} />
<Button
color={"blue"}
onClick={onSignMessage}
disabled={!sendable}
message={"Authenticate"}
/>
)}
</div>
) : ( */}
<div className="mr-auto">
<div className="text-orange-300 text-sm mb-2">
(one wallet address can only mint one)
</div>
{buttonblur ? (
<div
className={`text-white font-bold py-4 px-10 rounded-full mr-auto bg-blue-300`}
>
Mint Erebrus NFT
</div>
) : (
<button
className={`text-white font-bold py-4 px-10 rounded-full mr-auto `}
onClick={() => {
setmintpage("page2");
}}
style={{ backgroundColor: "#0162FF" }}
>
Mint Erebrus NFT
</button>
)}
</div>
{/* )} */}

{error && (
<div className="text-red-500 mt-4">{error}</div>
)}
</>
)}
</div>
</motion.div>
</div>
</div>
</div>
</div>
<div className="bg-[#040819]">
<div className="p-6 sm:p-10 lg:p-20">
<div
className="text-white text-3xl sm:text-4xl md:text-5xl leading-normal mx-auto text-center"
style={{ fontFamily: 'sans-serif' }}
>
Mint Your VPN NFT, Secure, Private, <br />
<span>Exclusive</span>
</div>

<div
className="flex flex-col lg:flex-row justify-center gap-8 lg:gap-20 m-6 lg:m-10 bg-[#202333] mx-auto rounded-lg shadow-lg"
>
<div className="w-full lg:w-1/2 flex justify-center items-center p-4">
<img src={imageSrc2} alt="VPN NFT" className="max-w-full h-auto" />
</div>
<div className="w-full lg:w-1/2 p-4">
<div className="text-white text-base sm:text-xl mt-4 flex items-center gap-2">
<img src="/uis_calender.png" className="w-6 h-6" alt="Calendar" />
<div>3-Month Coverage</div>
</div>
<div className="text-white text-base sm:text-xl mt-4 flex items-center gap-2">
<img src="/mdi_users.png" className="w-6 h-6" alt="Users" />
<div>Unlimited Clients</div>
</div>
<div className="text-white text-base sm:text-xl mt-4 flex items-center gap-2">
<img src="/icomoon-free_price-tags.png" className="w-6 h-6" alt="Price Tags" />
<div>
{displayText}<span className="text-[16px] sm:text-[18px]">{chain === 'apt' ? "" : "($5.99)"}</span>
</div>
</div>
<div className="text-white text-base sm:text-xl mt-4 flex items-center gap-2">
<img src="/wpf_security-checked.png" className="w-6 h-6" alt="Security Checked" />
<div>Exceptional Value for Unmatched Security</div>
</div>

<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={transition}
className="mt-6 sm:mt-10 flex flex-col lg:items-start items-center"
>
{isLoadingTx ? (
<div className="animate-spin text-white text-5xl sm:text-7xl">⛏</div>
) : (
<>
<div className=" lg:text-start text-center">
<div className="text-orange-300 text-xs sm:text-sm mb-2">
(one wallet address can only mint one)
</div>
{buttonblur ? (
<div className="text-white font-bold py-3 px-6 rounded-full bg-blue-300 mx-auto">
Mint Erebrus NFT
</div>
) : (
<button
className="text-white font-bold py-3 px-6 rounded-full mx-auto"
onClick={() => setmintpage("page2")}
style={{ backgroundColor: "#0162FF" }}
>
Mint Erebrus NFT
</button>
)}
</div>
{error && (
<div className="text-red-500 mt-4 text-center">{error}</div>
)}
</>
)}
</motion.div>
</div>
</div>
</div>
</div>

)}

{mintpage === "page2" && (
Expand Down
140 changes: 66 additions & 74 deletions pages/plans.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,23 +73,20 @@ const Plans = () => {

return (
<>
<div className="mt-10 mx-auto min-h-screen max-w-7xl">
<div className="text-center text-4xl text-white">
Subscription
</div>

<div className="lg:flex mt-10 mx-auto justify-center gap-10">


<div className="bg-[#202333E5] rounded-[40px] p-10 w-full border-[2px] border-[#0162FF] md:w-5/12 lg:w-4/12 text-white"
>
<h2 className="text-2xl text-[#5696FF] mb-4">Standard</h2>
<CryptoPrice/>
<p className="text-xl font-light mb-4">$5.99/month</p>
<button className="bg-[#0162FF] text-white rounded-lg px-4 py-2 mb-4 w-2/8">
<div className="mt-10 mx-auto min-h-screen max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center text-3xl sm:text-4xl text-white">
Subscription
</div>

<div className="mt-10 mx-auto flex justify-center">
<div className="bg-[#202333E5] rounded-[40px] p-6 sm:p-8 md:p-10 w-full max-w-md border-[2px] border-[#0162FF] text-white">
<h2 className="text-xl sm:text-2xl text-[#5696FF] mb-4">Standard</h2>
<CryptoPrice />
<p className="text-lg sm:text-xl font-light mb-4">$5.99/month</p>
<button className="bg-[#0162FF] text-white rounded-lg px-6 py-2 mb-4 w-2/8">
7 days Free trial
</button>
<div className="flex gap-5 w-5/6 mb-4">
<div className="flex gap-3 w-5/6 mb-4">
<button className="bg-white text-black rounded py-1 text-sm flex-1 md:w-2/5 lg:w-2/3">
Pay with Crypto
</button>
Expand All @@ -101,68 +98,63 @@ const Plans = () => {
</button>

</div>

<ul className="space-y-2">
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Decentralized Wi-Fi (Pay for what you use)
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Decentralized VPN
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Cyber threat analysis in browser extension
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Access and submit reviews
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
AI insights, web summary & critical alerts
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Mobile app
</li>
</ul>
<div className="flex gap-5">
<button
className="border-2 border-[#0162FF] text-white text-lg bg-transparent px-auto py-2 rounded-[10px] mt-10 w-1/2 focus:outline-none focus:ring-2 focus:ring-[#0162FF] focus:ring-offset-2"
onClick={trialbuy}
>
Start Free Trial
</button>
<button
className="bg-white text-black text-lg border-2 border-white px-auto py-2 rounded-[10px] mt-10 w-1/2 focus:outline-none"
>
<Link href="/mint">
Mint NFT Now
</Link>
</button>
</div>

</div>





<ul className="space-y-2 text-sm sm:text-base">
<li className="flex items-center">
<span className="w-3 h-3 sm:w-4 sm:h-4 bg-blue-500 rounded-full mr-2"></span>
Decentralized Wi-Fi (Pay for what you use)
</li>
<li className="flex items-center">
<span className="w-3 h-3 sm:w-4 sm:h-4 bg-blue-500 rounded-full mr-2"></span>
Decentralized VPN
</li>
<li className="flex items-center">
<span className="w-3 h-3 sm:w-4 sm:h-4 bg-blue-500 rounded-full mr-2"></span>
Cyber threat analysis in browser extension
</li>
<li className="flex items-center">
<span className="w-3 h-3 sm:w-4 sm:h-4 bg-blue-500 rounded-full mr-2"></span>
Access and submit reviews
</li>
<li className="flex items-center">
<span className="w-3 h-3 sm:w-4 sm:h-4 bg-blue-500 rounded-full mr-2"></span>
AI insights, web summary & critical alerts
</li>
<li className="flex items-center">
<span className="w-3 h-3 sm:w-4 sm:h-4 bg-blue-500 rounded-full mr-2"></span>
Mobile app
</li>
</ul>
<div className="flex flex-col sm:flex-row gap-3 sm:gap-5 mt-6">
<button
className="border-2 border-[#0162FF] text-white text-base sm:text-lg bg-transparent px-4 py-2 rounded-[10px] w-full sm:w-1/2 focus:outline-none focus:ring-2 focus:ring-[#0162FF] focus:ring-offset-2"
onClick={trialbuy}
>
Start Free Trial
</button>
<button
className="bg-white text-black text-base sm:text-lg border-2 border-white px-4 py-2 rounded-[10px] w-full sm:w-1/2 focus:outline-none"
>
<Link href="/mint">
Mint NFT Now
</Link>
</button>
</div>
</div>
</div>
{trialbuytrue && (
<div className="fixed z-50 top-0 w-full">
<div className="bg-blue-100 text-blue-700 px-4 py-3" role="alert">
<p className="font-bold">Successfully Trial Subscription Taken!</p>
<p className="text-sm">
You are redirected to subscription page to view your current
subscription plan and to create clients.
</p>
</div>
</div>
{trialbuytrue && (
<div className="fixed z-50 top-0 w-full">
<div className="bg-blue-100 text-blue-700 px-4 py-3" role="alert">
<p className="font-bold">Successfully Trial Subscription Taken!</p>
<p className="text-sm">
You are redirected to subscription page to view your current
subscription plan and to create clients.
</p>
</div>
)}
</>
</div>
)}
</>
);
};

Expand Down
Loading