style: deindent code
This commit is contained in:
parent
dab9c6a395
commit
fc58a1c7eb
1 changed files with 142 additions and 143 deletions
|
|
@ -1,163 +1,162 @@
|
||||||
import CoinIcon from "../../utils/CoinIcon";
|
import CoinIcon from "../../utils/icons/CoinIcon";
|
||||||
import GamepadIcon from "../../utils/GamepadIcon";
|
import ContainerLayout from "../../utils/ContainerLayout";
|
||||||
|
import GamepadIcon from "../../utils/icons/GamepadIcon";
|
||||||
|
|
||||||
export const MainPage = () => {
|
export const MainPage = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex bg-[#171A21]">
|
<ContainerLayout>
|
||||||
<div className="container mx-auto relative">
|
<div className="absolute w-[1235px] h-[629px] overflow-hidden">
|
||||||
<div className="absolute w-[1235px] h-[629px] overflow-hidden">
|
<img
|
||||||
<img
|
src="src/assets/img/casino-bg-image.png"
|
||||||
src="src/assets/img/casino-bg-image.png"
|
alt="Icon"
|
||||||
alt="Icon"
|
className="w-full h-full object-cover filter brightness-80 blur-[4px]"
|
||||||
className="w-full h-full object-cover filter brightness-80 blur-[4px]"
|
/>
|
||||||
/>
|
<div className="absolute inset-0 bg-gradient-to-r from-[#171A21] via-[rgba(22, 25, 32, 0.10)] to-[#171A21] via-[rgba(22,22,22,0)]" />
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-[#171A21] via-[rgba(22, 25, 32, 0.10)] to-[#171A21] via-[rgba(22,22,22,0)]" />
|
<div className="absolute inset-0 bg-gradient-to-t from-[#171A21] via-[rgba(22, 25, 32, 0.10)] to-[#171A21] via-[rgba(22,22,22,0)]" />
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-[#171A21] via-[rgba(22, 25, 32, 0.10)] to-[#171A21] via-[rgba(22,22,22,0)]" />
|
</div>
|
||||||
</div>
|
<div className="text-white text-[46px] font-bold mb-[300px] relative z-10 mt-[100px]">
|
||||||
<div className="text-white text-[46px] font-bold mb-[300px] relative z-10 mt-[100px]">
|
<span>
|
||||||
<span>
|
GET UP TO </span>
|
||||||
GET UP TO </span>
|
<span className="text-amber-400">$1500</span>
|
||||||
<span className="text-amber-400">$1500</span>
|
<span> BONUS
|
||||||
<span> BONUS
|
</span>
|
||||||
</span>
|
<div className="text-gray-400 text-[25px] font-bold">REGISTER AND GET YOUR BONUS</div>
|
||||||
<div className="text-gray-400 text-[25px] font-bold">REGISTER AND GET YOUR BONUS</div>
|
</div>
|
||||||
</div>
|
<div className="w-full h-max-content bg-gray-800 rounded-[25px] p-[30px] text-white flex flex-col gap-[30px] relative z-10">
|
||||||
<div className="w-full h-max-content bg-gray-800 rounded-[25px] p-[30px] text-white flex flex-col gap-[30px] relative z-10">
|
<div className="flex flex-row justify-between">
|
||||||
<div className="flex flex-row justify-between">
|
<div className="flex flex-row items-center gap-2">
|
||||||
<div className="flex flex-row items-center gap-2">
|
<GamepadIcon />
|
||||||
<GamepadIcon />
|
<span className="font-bold">
|
||||||
<span className="font-bold">
|
In-House games
|
||||||
In-House games
|
</span>
|
||||||
</span>
|
</div>
|
||||||
|
<div className="flex flex-row gap-2 items-center">
|
||||||
|
<div className="w-max-content h-max-content bg-gray-700 rounded-md px-[10px] cursor-pointer">
|
||||||
|
<span className="font-bold">❮</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row gap-2 items-center">
|
<div className="w-max-content h-max-content bg-gray-700 rounded-md px-[10px] cursor-pointer">
|
||||||
<div className="w-max-content h-max-content bg-gray-700 rounded-md px-[10px] cursor-pointer">
|
<span className="font-bold">❯</span>
|
||||||
<span className="font-bold">❮</span>
|
</div>
|
||||||
|
<div className="w-max-content h-max-content bg-gray-700 rounded-md px-[10px] cursor-pointer">
|
||||||
|
<span className="font-bold">See all</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-evenly">
|
||||||
|
{/* dices */}
|
||||||
|
<div className="w-[374px] h-[187.35px] bg-[#323846] rounded-[23px] border-2 border-gray-700 flex flex-row items-center justify-between px-4 py-6 gap-3">
|
||||||
|
<div className="rounded-full bg-neutral-800 inline-block">
|
||||||
|
<img
|
||||||
|
src="src/assets/img/dices-small.png"
|
||||||
|
alt="Icon"
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col h-full justify-between">
|
||||||
|
<div className="flex flex-row justify-between min-w-[200px]">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-xl font-bold">DICE</span>
|
||||||
|
<div className="text-gray-400 font-medium">562 online</div>
|
||||||
|
</div>
|
||||||
|
<button className=" min-w-[100px] max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3">Play now</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-max-content h-max-content bg-gray-700 rounded-md px-[10px] cursor-pointer">
|
<div className="flex flex-row justify-between">
|
||||||
<span className="font-bold">❯</span>
|
<div className="flex flex-col">
|
||||||
</div>
|
<span className="text-gray-400 font-medium text-[14px]">
|
||||||
<div className="w-max-content h-max-content bg-gray-700 rounded-md px-[10px] cursor-pointer">
|
Hourly drop
|
||||||
<span className="font-bold">See all</span>
|
</span>
|
||||||
|
<div className="flex flex-row gap-2">
|
||||||
|
<span className="font-medium">217.32</span>
|
||||||
|
<CoinIcon />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[2px] bg-slate-400"></div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-gray-400 font-medium text-[14px]">
|
||||||
|
Daily drop
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-row gap-2">
|
||||||
|
<span className="font-medium">217.32</span>
|
||||||
|
<CoinIcon />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row justify-evenly">
|
{/* Rock paper scissorstel */}
|
||||||
{/* dices */}
|
<div className="w-[404px] h-[187.35px] bg-[#323846] rounded-[23px] border-2 border-gray-700 flex flex-row items-center justify-between px-4 py-6 gap-3">
|
||||||
<div className="w-[374px] h-[187.35px] bg-[#323846] rounded-[23px] border-2 border-gray-700 flex flex-row items-center justify-between px-4 py-6 gap-3">
|
<div className="rounded-full w-[140px] bg-neutral-800 inline-block">
|
||||||
<div className="rounded-full bg-neutral-800 inline-block">
|
<img
|
||||||
<img
|
src="src/assets/img/rps-small.png"
|
||||||
src="src/assets/img/dices-small.png"
|
alt="Icon"
|
||||||
alt="Icon"
|
className="object-cover"
|
||||||
className="object-cover"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<div className="flex flex-col h-full justify-between">
|
||||||
<div className="flex flex-col h-full justify-between">
|
<div className="flex flex-row justify-between min-w-[200px]">
|
||||||
<div className="flex flex-row justify-between min-w-[200px]">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-col">
|
<span className="text-xl font-bold uppercase">Rock paper scissors</span>
|
||||||
<span className="text-xl font-bold">DICE</span>
|
<div className="text-gray-400 font-medium">689 online</div>
|
||||||
<div className="text-gray-400 font-medium">562 online</div>
|
|
||||||
</div>
|
|
||||||
<button className=" min-w-[100px] max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3">Play now</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row justify-between">
|
<button className="bg-blue-500 min-w-[103px] max-h-[45px] rounded-[10px] border border-blue-400 font-bold px-3 inline-block">Play now</button>
|
||||||
<div className="flex flex-col">
|
</div>
|
||||||
<span className="text-gray-400 font-medium text-[14px]">
|
<div className="flex flex-row justify-between">
|
||||||
Hourly drop
|
<div className="flex flex-col">
|
||||||
</span>
|
<span className="text-gray-400 font-medium text-[14px]">
|
||||||
<div className="flex flex-row gap-2">
|
Hourly drop
|
||||||
<span className="font-medium">217.32</span>
|
</span>
|
||||||
<CoinIcon />
|
<div className="flex flex-row gap-2">
|
||||||
</div>
|
<span className="font-medium">367.27</span>
|
||||||
|
<CoinIcon />
|
||||||
</div>
|
</div>
|
||||||
<div className="w-[2px] bg-slate-400"></div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="w-[2px] bg-slate-400"></div>
|
||||||
<span className="text-gray-400 font-medium text-[14px]">
|
<div className="flex flex-col">
|
||||||
Daily drop
|
<span className="text-gray-400 font-medium text-[14px]">
|
||||||
</span>
|
Daily drop
|
||||||
<div className="flex flex-row gap-2">
|
</span>
|
||||||
<span className="font-medium">217.32</span>
|
<div className="flex flex-row gap-2">
|
||||||
<CoinIcon />
|
<span className="font-medium">1,984.18</span>
|
||||||
</div>
|
<CoinIcon />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Rock paper scissorstel */}
|
</div>
|
||||||
<div className="w-[404px] h-[187.35px] bg-[#323846] rounded-[23px] border-2 border-gray-700 flex flex-row items-center justify-between px-4 py-6 gap-3">
|
<div className="w-[374px] h-[187.35px] bg-[#323846] rounded-[23px] border-2 border-gray-700 flex flex-row items-center justify-between px-4 py-6 gap-3">
|
||||||
<div className="rounded-full w-[140px] bg-neutral-800 inline-block">
|
<div className="rounded-full bg-neutral-800 inline-block">
|
||||||
<img
|
<img
|
||||||
src="src/assets/img/rps-small.png"
|
src="src/assets/img/slot-machine-small.png"
|
||||||
alt="Icon"
|
alt="Icon"
|
||||||
className="object-cover"
|
className="object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div className="flex flex-col h-full justify-between">
|
|
||||||
<div className="flex flex-row justify-between min-w-[200px]">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-xl font-bold uppercase">Rock paper scissors</span>
|
|
||||||
<div className="text-gray-400 font-medium">689 online</div>
|
|
||||||
</div>
|
|
||||||
<button className="bg-blue-500 min-w-[103px] max-h-[45px] rounded-[10px] border border-blue-400 font-bold px-3 inline-block">Play now</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-row justify-between">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-gray-400 font-medium text-[14px]">
|
|
||||||
Hourly drop
|
|
||||||
</span>
|
|
||||||
<div className="flex flex-row gap-2">
|
|
||||||
<span className="font-medium">367.27</span>
|
|
||||||
<CoinIcon />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-[2px] bg-slate-400"></div>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-gray-400 font-medium text-[14px]">
|
|
||||||
Daily drop
|
|
||||||
</span>
|
|
||||||
<div className="flex flex-row gap-2">
|
|
||||||
<span className="font-medium">1,984.18</span>
|
|
||||||
<CoinIcon />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-[374px] h-[187.35px] bg-[#323846] rounded-[23px] border-2 border-gray-700 flex flex-row items-center justify-between px-4 py-6 gap-3">
|
<div className="flex flex-col h-full justify-between">
|
||||||
<div className="rounded-full bg-neutral-800 inline-block">
|
<div className="flex flex-row justify-between min-w-[200px]">
|
||||||
<img
|
<div className="flex flex-col">
|
||||||
src="src/assets/img/slot-machine-small.png"
|
<span className="text-xl font-bold uppercase">Slot machine</span>
|
||||||
alt="Icon"
|
<div className="text-gray-400 font-medium">315 online</div>
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col h-full justify-between">
|
|
||||||
<div className="flex flex-row justify-between min-w-[200px]">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-xl font-bold uppercase">Slot machine</span>
|
|
||||||
<div className="text-gray-400 font-medium">315 online</div>
|
|
||||||
</div>
|
|
||||||
<button className="bg-blue-500 min-w-[103px] max-h-[45px] rounded-[10px] border border-blue-400 font-bold px-3 inline-block">Play now</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row justify-between">
|
<button className="bg-blue-500 min-w-[103px] max-h-[45px] rounded-[10px] border border-blue-400 font-bold px-3 inline-block">Play now</button>
|
||||||
<div className="flex flex-col">
|
</div>
|
||||||
<span className="text-gray-400 font-medium text-[14px]">
|
<div className="flex flex-row justify-between">
|
||||||
Hourly drop
|
<div className="flex flex-col">
|
||||||
</span>
|
<span className="text-gray-400 font-medium text-[14px]">
|
||||||
<div className="flex flex-row gap-2">
|
Hourly drop
|
||||||
<span className="font-medium">198.47</span>
|
</span>
|
||||||
<CoinIcon />
|
<div className="flex flex-row gap-2">
|
||||||
</div>
|
<span className="font-medium">198.47</span>
|
||||||
|
<CoinIcon />
|
||||||
</div>
|
</div>
|
||||||
<div className="w-[2px] bg-slate-400"></div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="w-[2px] bg-slate-400"></div>
|
||||||
<span className="text-gray-400 font-medium text-[14px]">
|
<div className="flex flex-col">
|
||||||
Daily drop
|
<span className="text-gray-400 font-medium text-[14px]">
|
||||||
</span>
|
Daily drop
|
||||||
<div className="flex flex-row gap-2">
|
</span>
|
||||||
<span className="font-medium">1,487.28</span>
|
<div className="flex flex-row gap-2">
|
||||||
<CoinIcon />
|
<span className="font-medium">1,487.28</span>
|
||||||
</div>
|
<CoinIcon />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue