Skip to content

Commit

Permalink
Update landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@IYStoychev21
IYStoychev21 committed Jan 14, 2024
1 parent 584d900 commit b787515
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 177 deletions.
Binary file added frontend/public/Eclipse1.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 frontend/public/Eclipse2.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 frontend/public/Eclipse3.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.
10 changes: 0 additions & 10 deletions frontend/public/circle-one.svg
View file

This file was deleted.

10 changes: 0 additions & 10 deletions frontend/public/circle-three.svg
View file

This file was deleted.

10 changes: 0 additions & 10 deletions frontend/public/circle-two.svg
View file

This file was deleted.

Binary file added frontend/public/circles.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.
204 changes: 57 additions & 147 deletions frontend/src/routes/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,155 +2,65 @@ import 'tailwindcss/tailwind.css';

export default function Home() {
return (
<div className="bg-[#0a0b0e] flex flex-row justify-center w-full">
<div className="bg-blackblack-5 overflow-hidden w-[1555px] h-[4086px] relative">
<div className="absolute w-[2604px] h-[4242px] top-[-367px] left-[-660px]">
<div className="absolute w-[2604px] h-[4242px] top-0 left-0">
<div className="absolute w-[629px] h-[1096px] top-[3146px] left-[1730px]">
<div className="relative w-[545px] h-[796px] top-[300px] left-[84px] rounded-[272.5px/548px] rotate-180 blur-[350px] [background:linear-gradient(180deg,rgba(112.2,0,255,0)_0%,rgb(255,41.44,195.2)_100%)]">
<div className="sticky w-[279px] h-[480px] top-[69px] left-[173px] blur-[200px] [background:linear-gradient(180deg,rgba(24,75,255,0)_0%,rgb(23.37,74.33,255)_100%)]" />
</div>
<img
className="absolute w-[90px] h-[90px] top-[185px] left-0"
alt="Star"
src="/public/star-1.svg"
/>
<>
<img src="/looper-1.png" className="absolute left-0 top-[180vh] select-none" draggable={false} alt="" />
<img src="/green.png" className="absolute top-0 select-none" draggable={false} alt="" />
<img src="/Eclipse1.png" className="absolute right-0 select-none" draggable={false} alt="" />
<img src="/Eclipse2.png" className="absolute left-0 top-[180vh] select-none" draggable={false} alt="" />
<img src="/Eclipse3.png" className="absolute right-0 top-[260vh] select-none" draggable={false} alt="" />
<img src="/circles.png" className="absolute right-0 top-0 w-full select-none" draggable={false} alt="" />
<img src="/looper-2.png" className="absolute right-0 top-[130vh] select-none" draggable={false} alt="" />
<img src="/star-3.svg" className="absolute left-[60px] top-[60px] select-none" draggable={false} alt="" />
<img src="/star-3.svg" className="absolute right-[200px] top-[60vh] select-none" draggable={false} alt="" />
<img src="/star-3.svg" className="absolute right-[180px] top-[160vh] select-none" draggable={false} alt="" />
<img src="/star-1.svg" className="absolute left-[180px] top-[220vh] select-none" draggable={false} alt="" />
<img src="/star-3.svg" className="absolute left-[100px] top-[235vh] select-none" draggable={false} alt="" />
<img src="/star-2.svg" className="absolute right-[300px] top-[340vh] select-none" draggable={false} alt="" />
<img src="/star-5.svg" className="absolute right-[600px] top-[430vh] select-none" draggable={false} alt="" />

<div className='bg-[#0B0B0F] w-screen min-h-screen flex justify-center items-center text-white flex-col'>
<div className='flex justify-center h-screen items-center flex-col'>
<h1 className='text-8xl z-10'>VALIUM</h1>
<p className='mt-8 z-10 text-[#898CA9]'>digital will platform</p>
</div>
<div className="absolute w-[1599px] h-[1482px] top-[2171px] left-[529px]">
<div className="sticky w-[564px] h-[708px] top-[141px] left-0 rounded-[282px/354px] rotate-180 blur-[200px] [background:linear-gradient(180deg,rgba(255,0,0,0)_0%,rgb(255,118.32,41.44)_100%)]" />
<img
className="absolute w-[90px] h-[90px] top-[82px] left-[311px]"
alt="Star"
src="/public/star-2.svg"
/>
<img
className="absolute w-[54px] h-[46px] top-[302px] left-[228px]"
alt="Star"
src="/public/star-3.svg"
/>
<div className="flex flex-col w-[896px] items-start justify-center gap-[32px] absolute top-[557px] left-[703px]">
<p className="relative self-stretch mt-[-1.00px] font-h2-50px font-[number:var(--h2-50px-font-weight)] text-blackblack-100 text-[length:var(--h2-50px-font-size)] text-right tracking-[var(--h2-50px-letter-spacing)] leading-[var(--h2-50px-line-height)] [font-style:var(--h2-50px-font-style)]">
Connect with your loved ones and start exploring
</p>
<p className="relative self-stretch [font-family:'Inter',Helvetica] font-normal text-blackblack-60 text-[20px] text-right tracking-[0] leading-[30px]">
Connect with your loved ones and start bequeathing <br />
your digital assets to them.
<br />
<br />
Our user-friendly interface makes the transition to a digital will effortless, providing you with a
reliable and accessible solution for your estate planning needs.
</p>
</div>
<img
className="absolute w-[620px] h-[1482px] top-0 left-[131px]"
alt="Looper"
src="/public/looper-1.png"
/>
</div>
<div className="absolute w-[2604px] h-[2583px] top-0 left-0">
<img
className="absolute w-[715px] h-[1045px] top-[1538px] left-[1500px]"
alt="Looper"
src="/public/looper-2.png"
/>
<div className="flex w-[780px] items-center top-[1511px] left-[1115px] flex-col gap-[32px] absolute">
<div className="inline-flex flex-col items-center gap-[16px] relative flex-[0_0_auto]">
<p className="relative w-[780px] mt-[-1.00px] [font-family:'Inter',Helvetica] font-black text-blackblack-100 text-[55px] text-center tracking-[0] leading-[71.5px]">
A digital will platform that ensures your legacy
</p>
<p className="relative w-[515px] [font-family:'Poppins',Helvetica] font-normal text-blackblack-60 text-[20px] text-center tracking-[0] leading-[normal]">
<span className="font-medium">
Welcome to the new modern will - digital will.
<br />
<br />
Unlock a new world with our digital will site and give a try to the latest discovery in the field
of wills.
<br />
<br />
</span>
<span className="[font-family:'Poppins',Helvetica] font-normal text-[#898ca8] text-[20px] tracking-[0]">
Step into the future of testamentary preparation with confidence, convenience, and peace of mind.
<br />
</span>
</p>
</div>
</div>
<img
className="absolute w-[61px] h-[60px] top-[1769px] left-[1970px]"
alt="Star"
src="/public/star-4.svg"
/>
<div className="absolute w-[2560px] h-[1584px] top-0 left-0">
<div className="relative w-[1555px] h-[1005px] top-[367px] left-[660px]">
<img
className="absolute w-[1158px] h-[578px] top-[136px] left-[41px] blur-[200px]"
alt="Circle three"
src="/public/circle-three.svg"
/>
<img
className="absolute w-[1461px] h-[840px] top-[5px] left-0"
alt="Circle two"
src="/public/circle-two.svg"
/>
<img
className="absolute w-[1555px] h-[1005px] top-0 left-0"
alt="Circle one"
src="/public/circle-one.svg"
/>
</div>
</div>
<div className="absolute w-[354px] h-[382px] top-[286px] left-[705px] rotate-180">
<div className="relative h-[382px]">
<div className="sticky w-[354px] h-[334px] top-[48px] left-0 rounded-[177.16px/166.85px] blur-[200px] [background:linear-gradient(180deg,rgb(23.26,58.74,127.62)_0%,rgb(16.7,87.42,61.96)_100%)]" />
<div className="sticky w-[170px] h-[227px] top-0 left-[92px] rounded-[282px/354px] blur-[200px] [background:linear-gradient(180deg,rgba(24,255,157.98,0)_0%,rgb(23.38,255,227.2)_100%)]" />

<div className='mt-[30vh] w-[800px] flex flex-col items-center justify-center'>
<div className='font-black text-6xl flex items-center justify-center flex-col'>
<h1 className='z-10 text-center'>A digital will platform that ensures your legacy</h1>
</div>
</div>
<img
className="absolute w-[61px] h-[60px] top-[1088px] left-[1915px]"
alt="Star img"
src="/public/star-4.svg"
/>
<img
className="absolute w-[61px] h-[60px] top-[608px] left-[849px]"
alt="Star"
src="/public/star-4.svg"
/>
<div className="sticky w-[603px] h-[603px] top-[518px] left-[2001px] rounded-[301.5px] blur-[200px] [background:linear-gradient(180deg,rgba(0,193.8,255,0)_0%,rgb(255,41.44,195.2)_100%)]" />
<div className="inline-flex items-center top-[763px] left-[1048px] flex-col gap-[32px] absolute">
<div className="inline-flex flex-col items-center gap-[16px] relative flex-[0_0_auto]">
<div className="relative w-[780px] mt-[-1.00px] font-h1-85px font-[number:var(--h1-85px-font-weight)] text-blackblack-100 text-[length:var(--h1-85px-font-size)] text-center tracking-[var(--h1-85px-letter-spacing)] leading-[var(--h1-85px-line-height)] [font-style:var(--h1-85px-font-style)]">
VALIUM
</div>
<div className="relative w-[483px] font-body-16px font-[number:var(--body-16px-font-weight)] text-blackblack-60 text-[length:var(--body-16px-font-size)] text-center tracking-[var(--body-16px-letter-spacing)] leading-[var(--body-16px-line-height)] [font-style:var(--body-16px-font-style)]">
digital will platform
</div>
<div className='w-[500px] mt-8 text-center flex flex-col gap-10 text-[#898CA9]'>
<p className='z-10'>Welcome to the new modern will - digital will.</p>
<p className='z-10'>Unlock a new world with our digital will site and give a try to the latest discovery in the field of wills.</p>
<p className='z-10'>Step into the future of testamentary preparation with confidence, convenience, and peace of mind.</p>
</div>
</div>
</div>
</div>
<div className="flex w-[896px] items-start justify-center top-[3822px] left-[797px] flex-col gap-[32px] absolute">
<p className="relative self-stretch mt-[-1.00px] font-h2-50px font-[number:var(--h2-50px-font-weight)] text-blackblack-100 text-[length:var(--h2-50px-font-size)] tracking-[var(--h2-50px-letter-spacing)] leading-[var(--h2-50px-line-height)] [font-style:var(--h2-50px-font-style)]">
Take your first step <br />
into digital will
</p>
<p className="relative self-stretch [font-family:'Inter',Helvetica] font-normal text-blackblack-60 text-[20px] tracking-[0] leading-[30px]">
Make your first step into the digital realm, our platform seamlessly guides you through the process of
creating a comprehensive and secure digital will. Experience the convenience of managing your estate
online, ensuring your wishes are safeguarded.
</p>
</div>

<div className='flex flex-col w-screen items-end mt-[100vh] pr-[90px]'>
<div className='w-[900px] flex flex-col gap-10'>
<h1 className='text-right z-10 text-4xl'>Connect with your loved ones and start exploring</h1>

<div className='flex flex-col text-[#898CA9] items-end'>
<p className='z-10'>Connect with your loved ones and start bequeathing </p>
<p className='z-10'>your digital assets to them.</p>
</div>

<p className='text-[#898CA9] z-10 text-right'>Our user-friendly interface makes the transition to a digital will effortless, providing you with a reliable and accessible solution for your estate planning needs.</p>
</div>
</div>

<div className='flex flex-col w-screen items-start mt-[100vh] pl-[90px] mb-[350px]'>
<div className='w-[900px] flex flex-col gap-10'>
<h1 className='text-start z-10 text-4xl'>Connect with your loved ones and start exploring</h1>

<div className='flex flex-col text-[#898CA9] items-start'>
<p className='z-10'>Connect with your loved ones and start bequeathing </p>
<p className='z-10'>your digital assets to them.</p>
</div>

<p className='text-[#898CA9] z-10 text-left'>Our user-friendly interface makes the transition to a digital will effortless, providing you with a reliable and accessible solution for your estate planning needs.</p>
</div>
</div>
</div>
<img
className="absolute w-[198px] h-[259px] top-[4053px] left-[2791px]"
alt="Star"
src="/public/star-5.svg"
/>
<img
className="absolute w-[61px] h-[60px] top-[3875px] left-[1009px]"
alt="Star"
src="/public/star-4.svg"
/>
</div>
</div>
);
};
</>
)
};

0 comments on commit b787515

Please sign in to comment.