mobile buy
2 files changed, +58 -4
+21-3twench_landing_page/components/BuySection/BuySection.css
| @@ -1,7 +1,25 @@ | ||
| 1 | 1 | .BuySection { |
| 2 | - @apply bg-white h-[800px] relative w-screen; | |
| 2 | + @apply bg-white h-[700px] relative w-screen text-shadow-none text-black; | |
| 3 | 3 | } |
| 4 | 4 | |
| 5 | -.BuySection h1 { | |
| 6 | - @apply text-4xl font-bold text-center pt-20; | |
| 5 | +.BuySection .Title { | |
| 6 | + @apply text-2xl leading-none top-[125px] absolute w-full text-center; | |
| 7 | +} | |
| 8 | + | |
| 9 | +.BuySection .Bulletin { | |
| 10 | + background: url("/images/bulletin.png") no-repeat; | |
| 11 | + background-size: contain; | |
| 12 | + @apply absolute w-[300px] h-[480px] top-[160px] left-[50%] transform -translate-x-1/2; | |
| 13 | +} | |
| 14 | + | |
| 15 | +.Bulletin .Text { | |
| 16 | + @apply w-[200px] mt-[27px] text-[9px] mx-auto transform -rotate-[2.8deg]; | |
| 17 | +} | |
| 18 | + | |
| 19 | +.BuySection .Bulletin .Section { | |
| 20 | + @apply mt-4; | |
| 21 | +} | |
| 22 | + | |
| 23 | +.BuySection .CopyBtn { | |
| 24 | + @apply border-black border-2 bg-primary text-white absolute rounded-full bottom-[30px] px-3 py-1 text-[30px] text-nowrap left-1/2 transform -rotate-[2.8deg] -translate-x-1/2; | |
| 7 | 25 | } |
+37-1twench_landing_page/components/BuySection/BuySection.tsx
| @@ -4,7 +4,43 @@ import "./BuySection.css"; | ||
| 4 | 4 | const BuySection: React.FC = () => { |
| 5 | 5 | return ( |
| 6 | 6 | <div className="BuySection"> |
| 7 | - <h1>j</h1> | |
| 7 | + <div className="Title">HOW TO BUY $TWENCH</div> | |
| 8 | + <div className="Bulletin"> | |
| 9 | + <div className="Text"> | |
| 10 | + <div className="Section"> | |
| 11 | + <p>01. CREATE WALLET</p> | |
| 12 | + <p> | |
| 13 | + Download Phantom or your wallet choice from the app store or | |
| 14 | + Google Play for free. Desktop users download the Google Chrome | |
| 15 | + extension by going to Phantom. | |
| 16 | + </p> | |
| 17 | + </div> | |
| 18 | + <div className="Section"> | |
| 19 | + <p>02. GET SOME SOL</p> | |
| 20 | + <p> | |
| 21 | + Have SOL in your wallet to switch to $TWENCH. If you don't have | |
| 22 | + any SOL, you can buy directly on Phantom, transfer from another | |
| 23 | + wallet, or buy on another exchange and send it to your wallet. | |
| 24 | + </p> | |
| 25 | + </div> | |
| 26 | + <div className="Section"> | |
| 27 | + <p>03. GO TO JUPITER</p> | |
| 28 | + <p> | |
| 29 | + Connect to Jupiter. Connect your wallet in chrome. Paste the | |
| 30 | + $TWENCH token address, select $TWENCH, and confirm. When Phantom | |
| 31 | + prompts you for a wallet signature, sign. | |
| 32 | + </p> | |
| 33 | + </div> | |
| 34 | + <div className="Section"> | |
| 35 | + <p>04. SWAP FOR TWENCH</p> | |
| 36 | + <p> | |
| 37 | + Switch SOL for $TWENCH. We have Zero taxes so you don't need to | |
| 38 | + worry about buying with a specific slippage. | |
| 39 | + </p> | |
| 40 | + </div> | |
| 41 | + </div> | |
| 42 | + </div> | |
| 43 | + <div className="CopyBtn">Click To Copy CA</div> | |
| 8 | 44 | </div> |
| 9 | 45 | ); |
| 10 | 46 | }; |