Skip to content

Commit

Permalink
fix : mission page mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rushikeshnimkar
Rushikeshnimkar committed Aug 26, 2024
1 parent b8fdc85 commit c056184
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 61 deletions.
95 changes: 44 additions & 51 deletions src/app/mission/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,76 +9,69 @@ export default function Home() {
const banner = {
backgroundImage:
"linear-gradient(to right, #050B21B2, #050B21B2, #B7990D26, #11D9C54D, #B7990D26, #050B21B2, #050B21B2)",
// "linear-gradient(to right, #050B214D 30%, #322F1C43 26.25%, #5E521739 22.5%, #11D9C54D 30%, #B7990D26 15%, #050B214D 30%)",
width: "95vw",
};

return (
<>
<main className='flex min-h-screen bg-primary flex-col items-center justify-between'>
<section className='w-[100%] mt-[8%] space-y-[5vh] lg:pace-y-[10vh] flex flex-col items-center justify-center h-[542px] bg-cover bg-[url(/global.png)] bg-no-repeat lg:h-[724px]'>
<h2 className='text-2xl text-white font-semibold md:text-6xl '>
<main className='flex min-h-screen bg-primary flex-col items-center justify-between p-4 lg:p-8'>
<section className='w-screen lg:mt-28 mt-20 space-y-8 lg:space-y-[4vh] flex flex-col items-center justify-center h-[542px] bg-cover bg-[url(/global.png)] bg-no-repeat lg:h-[724px]'>
<h2 className='text-2xl text-white font-semibold md:text-4xl lg:text-6xl text-center '>
Our Mission
</h2>
<p className='text-lg lg:text-3xl'>
</h2>
<p className='text-lg lg:text-3xl text-center'>
Pioneering the Future of DePIN
</p>
<p className='text-lg lg:text-2xl w-3/5 text-gray-300 rounded-3xl p-10'
style={{ background: 'linear-gradient(to right, #141E4380, #11D9C523)'}}>
</p>
<p className='text-sm md:text-lg lg:text-2xl w-11/12 md:w-4/5 lg:w-3/5 text-gray-300 rounded-3xl p-4 md:p-6 lg:p-10'
style={{ background: 'linear-gradient(to right, #141E4380, #11D9C523)' }}>
NetSepio is pioneering the future of internet infrastructure through DePIN. We are on a mission to redefine internet access
by building a decentralized, user-centric network that prioritizes security, privacy, and accessibility. We empower enterprises
and individuals to contribute to a more equitable digital world by sharing their internet resources, while safeguarding their
own online presence and privacy. Through the fusion of decentralized VPN and Wi-Fi technologies, we aim to create a resilient,
global network that empowers users and challenges the status quo of centralized internet control.
</p>
</section>
</p>
</section>

<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'
>
Secure. Private. Accessible. Internet as It Should Be.
</div>
</div>
<div className="my-20">
<div className='items-center justify-between w-full text-center' style={{ letterSpacing: '0.06em' }}>
<div
style={banner}
className='py-4 md:py-6 text-base md:text-lg lg:text-xl text-gray-300'
>
Secure. Private. Accessible. Internet as It Should Be.
</div>
</div>

<div className="my-20">
<img src="/missionmen.png"/>
</div>

<div className="flex flex-col justify-center items-center my-40">
<div className='text-lg lg:text-3xl'>Join Our Mission. Join the Future.</div>
<div className='flex gap-20 my-20'>
<div className="flex flex-col justify-center items-center my-20 lg:my-40 space-y-8">
<div className='text-lg md:text-xl lg:text-3xl text-center'>Join Our Mission. Join the Future.</div>
<div className='flex flex-col md:flex-row gap-8 md:gap-20 my-10'>
<Link
target="_blank"
className="hover:scale-110 duration-150 pr-10 pl-6"
href={"https://discordapp.com/invite/5uaFhNpRF6"}
style={{border: '1px solid #11D9C5', display: 'flex', borderRadius:'8px'}}
>
<img
src={"/images/discord_green.svg"}
alt="discord"
/>
<div className="mt-4">Discord</div>
</Link>
target="_blank"
className="hover:scale-110 duration-150 pr-10 pl-6 flex items-center"
href={"https://discordapp.com/invite/5uaFhNpRF6"}
style={{ border: '1px solid #11D9C5', borderRadius:'8px' }}
>
<img src={"/images/discord_green.svg"} alt="discord" className="w-6 md:w-8 lg:w-10"/>
<div className="ml-2 mt-1 text-sm md:text-lg lg:text-xl">Discord</div>
</Link>

<Link
target="_blank"
className="hover:scale-110 duration-150 pr-10 pl-8"
href={"https://t.me/NetSepio?boost "}
style={{border: '1px solid #11D9C5', display: 'flex', borderRadius:'8px', gap:'8px'}}
>
<img
src={"/images/tele_green.svg"}
alt="telegram"
className="w-10"
/>
<div className="mt-4">Telegram</div>
</Link>
</div>
<Link
target="_blank"
className="hover:scale-110 duration-150 pr-10 pl-6 flex items-center"
href={"https://t.me/NetSepio?boost"}
style={{ border: '1px solid #11D9C5', borderRadius:'8px', gap:'8px' }}
>
<img src={"/images/tele_green.svg"} alt="telegram" className="w-6 md:w-8 lg:w-10"/>
<div className="ml-2 mt-1 text-sm md:text-lg lg:text-xl">Telegram</div>
</Link>
</div>
</div>

</main>
</>

</main>
</>
);
}
21 changes: 11 additions & 10 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,24 @@ import Link from "next/link";

const Navbar = () => {
return (
<div className='w-[100%] mt-[50px] absolute z-20 py-2' style={{borderBottom: '1px solid #11D9C5'}}>
<div className="w-[93%] flex items-center justify-between mx-auto">
<Link href={"/"} className='flex items-center'>
<Image src={"/images/logo.svg"} width={56} height={56} alt='Logo ' />
<div className="w-full mt-12 absolute z-20 py-2 border-b border-[#11D9C5]">
<div className="w-[93%] flex items-center justify-between mx-auto">
<Link href="/" className="flex items-center">
<Image src="/images/logo.svg" width={56} height={56} alt="Logo" />
<Image
src={"/images/netsepio.svg"}
src="/images/netsepio.svg"
width={104.27}
height={32}
alt='Netsepio'
alt="Netsepio"
className="ml-2" // Added margin for spacing
/>
</Link>
<div className='flex gap-[14px]'>
{/* <DarkBtn link={"https://sotreus.com"} title={"Sotreus"} /> */}
<CustomBtn link='https://erebrus.io' title={"Erebrus"} />
</div>
<div className="flex gap-3">
<CustomBtn link="https://erebrus.io" title="Erebrus" />
</div>
</div>
</div>

);
};

Expand Down

0 comments on commit c056184

Please sign in to comment.