mobile page

main
wholespace214 1 year ago
parent 1da9464a4d
commit 07ea89e97a
  1. 44
      src/app/burn/page.js
  2. 14
      src/app/flash-audit-result/page.js
  3. 36
      src/app/presales/[id]/page.js
  4. 2
      src/app/staking-pool/page.js
  5. BIN
      src/assets/image/Grammar of the film language_UPLOAD(1).pdf
  6. 4
      src/components/Card/StakingPoolCard/index.js
  7. 2
      src/components/Form/SearchToken/index.js

@ -44,24 +44,30 @@ const Burn = () => {
}, },
]; ];
return ( return (
<div className="relative min-h-[1340px]"> <div className="relative min-h-[1340px] max-sm:min-h-[1000px]">
<HeaderSection /> <HeaderSection />
<div className="flex flex-row justify-center"> <div className="flex flex-row justify-center">
<div className="mt-[105px] w-[760px] bg-[#1B1B1B] border border-[#2C2C2C] rounded-[16px]"> <div className="mt-[105px] max-sm:mt-[30px] w-[760px] max-sm:w-[100%] bg-[#1B1B1B] border border-[#2C2C2C] rounded-[16px]">
<Image src={BurnBack} alt="Image" /> <Image src={BurnBack} alt="Image" />
<div className="pt-[40px] px-8 pb-7"> <div className="pt-[40px] px-5 pb-7">
<p className="text-center text-white text-[42px] font-bold"> <p className="text-center text-white text-[42px] font-bold max-sm:text-2xl">
Burn Floki and earn <br /> Whitelist Burn Floki and earn <br /> Whitelist
</p> </p>
{page === 1 ? ( {page === 1 ? (
<table class="w-[100%] border-collapse"> <table class="w-[100%] border-collapse max-sm:mt-[10px]">
<thead> <thead>
<tr className="text-[#86888C] text-[14px] border-b border-[#2C2C2C] h-[49px]"> <tr className="text-[#86888C] text-[14px] max-sm:text-[12px] border-b border-[#2C2C2C] h-[49px]">
<td className="pl-5 border-none">Grade</td> <td className="pl-5 max-sm:pl-1 border-none">Grade</td>
<td className="pl-5 border-none">Burn Floki Amount</td> <td className="pl-5 max-sm:pl-1 border-none">
<td className="pl-5 border-none">Whitelist Slot</td> Burn Floki Amount
<td className="pl-5 border-none">Max Number Of Slots</td> </td>
<td className="pl-5 max-sm:pl-1 border-none">
Whitelist Slot
</td>
<td className="pl-5 max-sm:pl-1 border-none">
Max Number Of Slots
</td>
</tr> </tr>
</thead> </thead>
<tbody className="text-white text-[14px]"> <tbody className="text-white text-[14px]">
@ -72,10 +78,10 @@ const Burn = () => {
key={key} key={key}
onClick={() => setActive(key)} onClick={() => setActive(key)}
> >
<td className="pl-5">{item.grade}</td> <td className="pl-5 max-sm:pl-1">{item.grade}</td>
<td className="pl-5">{item.amount}</td> <td className="pl-5 max-sm:pl-1">{item.amount}</td>
<td className="pl-5">{item.slot}</td> <td className="pl-5 max-sm:pl-1">{item.slot}</td>
<td className="pl-5">{item.maxSlot}</td> <td className="pl-5 max-sm:pl-1">{item.maxSlot}</td>
</tr> </tr>
) : ( ) : (
<tr <tr
@ -83,16 +89,16 @@ const Burn = () => {
key={key} key={key}
onClick={() => setActive(key)} onClick={() => setActive(key)}
> >
<td className="pl-5 border-b border-[#2C2C2C]"> <td className="pl-5 max-sm:pl-1 border-b border-[#2C2C2C]">
{item.grade} {item.grade}
</td> </td>
<td className="pl-5 border-b border-[#2C2C2C]"> <td className="pl-5 max-sm:pl-1 border-b border-[#2C2C2C]">
{item.amount} {item.amount}
</td> </td>
<td className="pl-5 border-b border-[#2C2C2C]"> <td className="pl-5 max-sm:pl-1 border-b border-[#2C2C2C]">
{item.slot} {item.slot}
</td> </td>
<td className="pl-5 border-b border-[#2C2C2C]"> <td className="pl-5 max-sm:pl-1 border-b border-[#2C2C2C]">
{item.maxSlot} {item.maxSlot}
</td> </td>
</tr> </tr>
@ -124,7 +130,7 @@ const Burn = () => {
<Image <Image
src={BurnImage} src={BurnImage}
alt="image" alt="image"
className="absolute -bottom-16 -right-10" className="absolute -bottom-16 -right-10 max-sm:hidden"
/> />
</div> </div>
); );

@ -170,10 +170,18 @@ const FlashAuditResult = () => {
{result === "" ? ( {result === "" ? (
<div> <div>
<div className="flex flex-row justify-center"> <div className="flex flex-row justify-center">
<div className="mt-[105px] w-[760px] bg-[#1B1B1B] border border-[#2C2C2C] rounded-[16px] px-8 py-9"> <div className="mt-[105px] w-[760px] bg-[#1B1B1B] border border-[#2C2C2C] rounded-[16px] px-8 py-9 max-sm:px-5">
<div className="flex flex-col items-center gap-14"> <div className="flex flex-col items-center gap-14">
<Image src={FlashAudit} alt="image" /> <Image
<Image src={LogoBig} alt="image" /> src={FlashAudit}
alt="image"
className="max-sm:w-[196px] max-sm:h-[37px]"
/>
<Image
src={LogoBig}
alt="image"
className="max-sm:w-[196px] max-sm:h-[162px]"
/>
</div> </div>
<div className="flex flex-col mt-11"> <div className="flex flex-col mt-11">
<SearchToken <SearchToken

@ -47,7 +47,7 @@ const PresalesDetails = () => {
const tokenDetails = [ const tokenDetails = [
{ {
name: "Presale Address", name: "Presale Address",
value: "0x43024ad83760a9779236b409F8dC1FEbA172F840", value: "0x430....840",
}, },
{ {
name: "Sale Type", name: "Sale Type",
@ -115,18 +115,18 @@ const PresalesDetails = () => {
}, },
]; ];
return ( return (
<div className="min-h-[1340px] flex flex-row gap-[30px]"> <div className="min-h-[1340px] flex flex-row gap-[30px] max-sm:flex-col">
<div className="flex-auto w-[892px] flex flex-col gap-8"> <div className="flex-auto w-[892px] max-sm:w-[100%] flex flex-col gap-8">
<div className="bg-[#1B1B1B] rounded-[16px]"> <div className="bg-[#1B1B1B] rounded-[16px]">
<div className="relative"> <div className="relative">
<Image src={BackImage} alt="back" /> <Image src={BackImage} alt="back" />
<Image <Image
src={AvatarImage} src={AvatarImage}
alt="avatar" alt="avatar"
className="absolute top-[147px] left-[60px] w-auto h-auto" className="ml-[60px] -mt-[53px] w-auto h-auto max-w-full"
/> />
<div className="flex flex-row ml-[199px] items-center mt-2"> {/* <div className="flex flex-row ml-[199px] items-center mt-2">
<p className="text-white text-[32px] font-semibold">Venom</p> <p className="text-white text-[32px] font-semibold">Venom</p>
<Image <Image
src={WebsiteIcon} src={WebsiteIcon}
@ -143,13 +143,13 @@ const PresalesDetails = () => {
alt="website" alt="website"
className="w-[22.5px] h-[22.5px] ml-[9.5px]" className="w-[22.5px] h-[22.5px] ml-[9.5px]"
/> />
<div className="py-2 px-3 rounded-[40px] bg-[#5abaff]/[0.1] text-xs text-[#5ABAFF] ml-5"> <div className="py-2 px-3 rounded-[40px] bg-[#5abaff]/[0.1] text-xs text-[#5ABAFF] ml-5 max-sm:hidden">
Audit Audit
</div> </div>
<div className="py-2 px-3 rounded-[40px] bg-[#FCBF07]/[0.1] text-xs text-[#FCBF07] ml-2"> <div className="py-2 px-3 rounded-[40px] bg-[#FCBF07]/[0.1] text-xs text-[#FCBF07] ml-2 max-sm:hidden">
Flash Transfer Flash Transfer
</div> </div>
</div> </div> */}
</div> </div>
<div className="flex flex-col mt-8 px-7 pb-7"> <div className="flex flex-col mt-8 px-7 pb-7">
@ -167,13 +167,11 @@ const PresalesDetails = () => {
<div className="flex flex-col px-7 pt-6"> <div className="flex flex-col px-7 pt-6">
<div className="flex flex-row justify-between items-center pb-4"> <div className="flex flex-row justify-between items-center pb-4">
<div className="text-white text-base">Presales Address</div> <div className="text-white text-base">Presales Address</div>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end max-sm:w-[142px]">
<p className="text-base text-[#FCBF07]"> <p className="text-base text-[#FCBF07]">0x430....840</p>
0x43024ad83760a9779236b409F8dC1FEbA172F840 <p className="text-xs text-white">
</p>
<span className="text-xs text-white">
Do not send ETH directly to the presale address! Do not send ETH directly to the presale address!
</span> </p>
</div> </div>
</div> </div>
@ -184,7 +182,9 @@ const PresalesDetails = () => {
className="flex flex-row justify-between items-center py-4 border-t border-[#2C2C2C]" className="flex flex-row justify-between items-center py-4 border-t border-[#2C2C2C]"
key={index} key={index}
> >
<div className="text-white text-base">{item.name}</div> <div className="text-white text-base max-sm:max-w-[150px]">
{item.name}
</div>
<div className="text-base text-white">{item.value}</div> <div className="text-base text-white">{item.value}</div>
</div> </div>
); );
@ -199,12 +199,12 @@ const PresalesDetails = () => {
</div> </div>
<div className="py-6 px-7"> <div className="py-6 px-7">
<div className="flex flex-row h-[41px] w-[100%]"> <div className="flex flex-row h-[41px] w-[100%]">
<div className="py-3 px-5 justify-center items-center text-sm text-white bg-[#282828] rounded-l-lg"> <div className="py-3 px-5 justify-center w-[140px] items-center text-sm text-white bg-[#282828] rounded-l-lg">
Affiliate link Affiliate link
</div> </div>
<input <input
type="text" type="text"
className="bg-[#141414] border border-[#282828] pl-5 py-3 outline-none w-[81.2%] text-sm text-[#86888C]" className="bg-[#141414] border border-[#282828] pl-5 py-3 outline-none w-[77.2%] text-sm text-[#86888C]"
/> />
<div className="flex flex-col items-center justify-center w-[40px] h-[100%] bg-[#141414] border-t border-[#2C2C2C] border-b border-r rounded-r-lg"> <div className="flex flex-col items-center justify-center w-[40px] h-[100%] bg-[#141414] border-t border-[#2C2C2C] border-b border-r rounded-r-lg">
@ -308,7 +308,7 @@ const PresalesDetails = () => {
</div> </div>
</div> </div>
<div className="flex-auto w-[631px] flex flex-col gap-8"> <div className="flex-auto w-[631px] max-sm:w-[100%] flex flex-col gap-8">
<div> <div>
<Image src={AffiliateImage} alt="image" className="ml-[236px]" /> <Image src={AffiliateImage} alt="image" className="ml-[236px]" />
<div className="bg-[#1B1B1B] rounded-[16px] p-7 flex flex-col gap-6"> <div className="bg-[#1B1B1B] rounded-[16px] p-7 flex flex-col gap-6">

@ -12,7 +12,7 @@ const StakingPool = () => {
<Select label="Filter By" /> <Select label="Filter By" />
<Select label="Sort By" /> <Select label="Sort By" />
</div> </div>
<div className="mt-[50px] grid grid-cols-4 gap-y-[30px]"> <div className="mt-[50px] grid grid-cols-4 max-sm:grid-cols-1 gap-[30px] justify-center items-center pb-5">
{Array.from({ length: 8 }).map((item, index) => ( {Array.from({ length: 8 }).map((item, index) => (
<StakingPoolCard key={index} /> <StakingPoolCard key={index} />
))} ))}

@ -19,8 +19,8 @@ const PresalesCard = ({
IogoImage = CardOneLogo, IogoImage = CardOneLogo,
}) => { }) => {
return ( return (
<div className="w-[366px] h-[470px]"> <div className="h-[470px]">
<div className="w-[366px] h-[470px] rounded-2xl bg-[#1B1B1B] overflow-hidden relative border border-[#2C2C2C]"> <div className="h-[470px] rounded-2xl bg-[#1B1B1B] overflow-hidden relative border border-[#2C2C2C]">
<Image src={BackImage} alt="background" /> <Image src={BackImage} alt="background" />
<div className="pt-2 px-5 pb-5"> <div className="pt-2 px-5 pb-5">
<div className="flex flex-row justify-between items-center"> <div className="flex flex-row justify-between items-center">

@ -14,7 +14,7 @@ const SearchToken = ({
className="bg-[#282828] p-5 text-white text-base outline-none" className="bg-[#282828] p-5 text-white text-base outline-none"
onChange={(e) => onSelectChange(e)} onChange={(e) => onSelectChange(e)}
> >
<option value="1">Ethereum</option> <option value="1">ETH</option>
<option value="56">BSC</option> <option value="56">BSC</option>
</select> </select>
</div> </div>

Loading…
Cancel
Save