Skip to content

Commit

Permalink
dvpn page
Browse files Browse the repository at this point in the history
  • Loading branch information
@devsisingh
devsisingh committed Jul 30, 2024
1 parent 7c06207 commit e26593e
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 70 deletions.
Binary file modified public/images/erebrus/base2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/erebrus/erebrusFeatures1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/erebrus/erebrusFeatures2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/erebrus/erebrusFeatures3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/erebrus/erebrusFeatures4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/erebrus/erebrusFeatures5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/erebrus/hero.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
137 changes: 74 additions & 63 deletions src/app/erebrus/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,100 @@
import CustomBtn from "@/components/CustomBtn";
import { erebrusData, erebrusFeatures } from "@/utils/data";
import { erebrusFeatures, erebrusFeatures2 } from "@/utils/data";
import Image from "next/image";
import React from "react";

const Index = () => {
return (
<div className='bg-primary w-full pt-[17vh] md:pt-[20vh] flex flex-col items-center h-auto'>
<section className='flex flex-col items-center justify-between rounded-[20px] w-[95%] h-[900px] md:h-[1200px]'>
<h2 className='uppercase mt-3 md:w-[50%] text-center mb-[4%] text-white font-extrabold text-xl md:text-4xl leading-tight'>
<h2 className='mt-3 md:w-[50%] text-center mb-[4%] text-white font-extrabold text-xl md:text-4xl leading-tight'>
Secure, Decentralized VPN Service for Enhanced Privacy and Anonymity
</h2>
<div className='w-[90vw] h-[65%] relative'>
<Image
src={"/images/erebrus/hero.svg"}
src={"/images/erebrus/hero.png"}
className='object-cover rounded-[10px]'
alt='hero'
fill
/>
</div>
<div className='flex flex-1 gap-[39px] items-center mt-[3%] flex-col'>
<div className='flex flex-1 gap-[39px] py-20 w-[90vw] items-center mt-[3%] flex-col rounded-3xl' style={{background: 'linear-gradient(to top right, #11D9C580 10%, #64B96840 30%, #141E4380 50%)',}}>
<h3 className='font-medium flex text-white text-xl md:text-[40px] md:leading-normal '>
ABOUT
</h3>
<p className='md:text-[34px] text-center md:w-[75%] mt-[1%] leading-tight text-xl font-light text-white'>
Erebrus is a shared decentralized VPN Service based on the wireguard
Protocol. It is designed to enhance user privacy, anonymity, and
security when using Public VPNs.{" "}
Erebrus is a shared decentralized VPN Service based on the WireGuard
Protocol. It is designed to enhance users' privacy, anonymity,
and security when using Public Wi-Fi. {" "}
</p>
<CustomBtn
title='Visit Now'
link='https://erebrus.io/'
width='w-[140px] bg-white lg:w-[191px]'
/>
</div>
</section>
<section className='mt-[119px] w-[95%] gap-[7vw] flex flex-col md:flex-row justify-between'>
<h2 className='font-medium md:w-[27vw] text-xl text-white md:text-[55px] leading-tight'>
Unrestricted Digital Freedom
</h2>
<div className='borde flex-1 flex items-center flex-col'>
<div className='flex flex-col md:flex-row items-center justify-between md:flex-wrap'>
{erebrusData.map((item, i) => {
return (
<div
key={i.toString()}
className=' relative border px-[30px] rounded-[10px] w-[82vw] h-[350px] md:w-[433px] mb-[6vh] md:mb-[8vh] flex flex-col gap-5 justify-between py-[15%] md:pt-[4%] md:pb-[6%] md:h-[593px] '
>
<h3 className='text-white font-medium z-20 text-2xl md:text-[45px] leading-none'>
{item.title}
</h3>
<p className='text-white w-[90%] font-light z-20 text-base md:text-[32px] leading-none'>
{item.desc}
</p>
<div className=' w-full p-5 h-full absolute top-0 left-0'>
<Image
src={`/images/erebrus/${item.image}`}
alt='bg'
fill
className='rounded-[10px] object-cover md:object-contain'
/>
</div>

<section className='mt-[119px] w-[90%] gap-[7vw] flex flex-col'>

<div className='w-full h-max flex flex-col md:flex-row gap-[2vw] justify-between'>
<h2 className='font-medium text-xl text-white md:text-[55px] leading-tight w-1/2'>
Unrestricted
Digital Freedom
</h2>
<div
className=' relative border px-[30px] rounded-[10px] h-[350px] md:flex-1 flex flex-col justify-around md:h-[455px] '
>
<h3 className='text-white font-semibold z-20 text-xl md:text-[38px] leading-none'>
Seamless Privacy
</h3>
<p className='text-white w-[90%] relative top-[1vh] md:top-[4vh] font-light z-20 text-base md:text-[26px] leading-none'>
Experience uninterrupted privacy with our
ÐVPN seamlessly integrated into your
favourite apps. No need for complex setups,
your online security is always on, by default.
</p>
<div className=' w-full p-5 h-full absolute top-0 left-0'>
<Image
src={`/images/erebrus/erebrusFeatures1.png`}
alt='bg'
quality={100}
fill
className='rounded-[10px] object-cover'
/>
</div>
);
})}
</div>
<div className=' relative border px-[30px] rounded-[10px] w-[82vw] h-[350px] md:w-full mb-[6vh] md:mb-[8vh] flex flex-col gap-5 justify-between py-[15%] md:pt-[4%] md:pb-[6%] md:h-[593px] '>
<h3 className='text-white font-medium z-20 text-2xl md:text-[45px] leading-none'>
{"Democratising Access"}
</h3>
<p className='text-white w-[90%] font-light z-20 md:text-[32px] leading-tight'>
{
"Erebrus levels the digital playing field, providing safe internet access to all."
}
</p>
<div className=' w-full p-5 h-full absolute top-0 left-0'>
<Image
src={`/images/erebrus/access.svg`}
alt='bg'
fill
className='rounded-[10px] object-cover '
/>
</div>
</div>
</div>
</div>
</section>
<section className='mt-[119px] w-[95%] gap-[7vw] flex flex-col'>
<h2 className='font-medium text-xl text-white md:text-[55px] leading-tight'>
Features of Erebrus
</h2>
<div className='w-full h-max flex flex-col md:flex-row gap-[2vw] justify-between'>

<div className='w-full h-max flex flex-col md:flex-row gap-[4vw] justify-between'>
{erebrusFeatures.map((item, i) => {
return (
<div
key={i.toString()}
className=' relative border px-[30px] rounded-[10px] h-[350px] md:flex-1 flex flex-col justify-around md:h-[455px] '
>
<h3 className='text-white font-semibold z-20 text-xl md:text-[38px] leading-none'>
{item.title}
</h3>
<p className='text-white w-[90%] relative top-[1vh] md:top-[4vh] font-light z-20 text-base md:text-[26px] leading-none'>
{item.desc}
</p>
<div className=' w-full p-5 h-full absolute top-0 left-0'>
<Image
src={`/images/erebrus/${item.image}`}
alt='bg'
quality={100}
fill
className='rounded-[10px] object-cover'
/>
</div>
</div>
);
})}
</div>

<div className='w-full h-max flex flex-col md:flex-row gap-[4vw] justify-between'>
{erebrusFeatures2.map((item, i) => {
return (
<div
key={i.toString()}
Expand All @@ -96,11 +106,11 @@ const Index = () => {
<p className='text-white w-[90%] relative top-[1vh] md:top-[4vh] font-light z-20 text-base md:text-[26px] leading-none'>
{item.desc}
</p>
<CustomBtn
{/* <CustomBtn
width='bg-white w-[90px] lg:w-[170px]'
title={item.button}
link={item.link}
/>
/> */}
<div className=' w-full p-5 h-full absolute top-0 left-0'>
<Image
src={`/images/erebrus/${item.image}`}
Expand All @@ -114,8 +124,9 @@ const Index = () => {
);
})}
</div>

</section>
<section className='w-full mt-[5%] lg:mt-[10%] space-y-[5vh] lg:space-y-[10vh] flex flex-col items-center justify-center h-[542px] bg-cover bg-[url(/images/erebrus/base2.png)] bg-no-repeat lg:h-screen'>
<section className='w-[90%] my-[5%] lg:mt-[10%] space-y-[5vh] lg:space-y-[10vh] flex flex-col items-center justify-center h-[542px] bg-cover bg-[url(/images/erebrus/base2.png)] bg-no-repeat lg:h-screen'>
<div className='w-[150px] md:w-[350px] right-[4.5vw] md:right-[2.5vw] relative h-[60px] md:h-[93px]'>
<Image src={"/images/erebrus/logo.svg"} fill alt='logo' />
</div>
Expand Down
33 changes: 26 additions & 7 deletions src/utils/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const cardDetails = [
{
image: "pix_6",
title: "Erebrus",
link: "https://erebrus.io",
link: "erebrus",
button: "Learn more",

desc: "Tap into redefined digital connectivity and unleash the future of internet with globally accessible, secure and private network through the power of DePIN.",
Expand Down Expand Up @@ -132,21 +132,40 @@ export const sotreusFeatures = [
];
export const erebrusFeatures = [
{
image: "community.svg",
title: "Community-Driven Network",
desc: "Erebrus enables anyone to become a node operator, enhancing the robustness of its decentralized network and earning rewards, thus promoting a transparent and collaborative VPN environment.",
image: "erebrusFeatures2.png",
title: "Speed Meets Security",
desc: "Enjoy blazing-fast speeds without compromising security. Our ÐVPN is optimized to deliver a seamless user experience without slowing you down.",

button: "Run a node",
link: "https://erebrus.io/",
},
{
image: "transparency.svg",
title: "Open-Source Transparency",
desc: "An open-source VPN, promotes transparency by allowing users to review its source code, boosting confidence in its security and privacy standards.",
image: "erebrusFeatures3.png",
title: "Your Privacy, Your Rules",
desc: "Take control of your online privacy with customizable ÐVPN settings. Choose the level of protection that suits your needs, from basic to maximum security.",
button: "Explore More",
link: "https://erebrus.io/",
},
];

export const erebrusFeatures2 = [
{
image: "erebrusFeatures4.png",
title: "Global Shield",
desc: "Protect yourself online, anywhere in the world. Our extensive server network ensures you're always covered, no matter where you go.",

button: "Run a node",
link: "https://erebrus.io/",
},
{
image: "erebrusFeatures5.png",
title: "Privacy for All",
desc: "We're building a future where privacy is a fundamental right. Enterprise can sponsor their users’ ÐVPN, built inside their apps. ",
button: "Explore More",
link: "https://erebrus.io/",
},
];

export const webapp = [
{
image: "discover.svg",
Expand Down

0 comments on commit e26593e

Please sign in to comment.