battlepass

src/app/page.tsx

@@ -1,8 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { Metadata } from 'next'
-import { DiscordButton } from '../components/DiscordButton'
-import { AccountButton } from '../components/AccountButton'
 
 export const metadata: Metadata = {
   title: 'Lncvrt Games - Home',
@@ -12,12 +10,15 @@ export const metadata: Metadata = {
 export default function Home () {
   return (
     <div className='box'>
-      <AccountButton />
-      <DiscordButton />
       <p className='text-center text-4xl'>Lncvrt Games</p>
       <p className='text-center text-[18px] mb-4'>
         A collection of games made by Lncvrt and others
       </p>
+      <div className='flex justify-center'>
+        <Link href='/premium' draggable={false} className='button'>
+          INTRODUCING LNCVRT GAMES PREMIUM!
+        </Link>
+      </div>
       <p className='text-center text-xl mt-2'>Main Games</p>
       <div className='games-grid'>
         <Link href='/game/berry-dash' draggable={false}>
@@ -130,8 +131,8 @@ export default function Home () {
         Looking for launcher downloads?
       </p>
       <div className='downloads'>
-        <Link href='/download' draggable={false}>
+        <Link href='/premium' draggable={false}>
-          Download for Windows, macOS, or Linux
+          You need premium for that, buy here!
         </Link>
       </div>
     </div>

src/app/premium/page.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import './styles.css'
+import { HomeButton } from '@/components/HomeButton'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faDownload,
+  faGamepad,
+  faMoneyBill,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+import { faUser } from '@fortawesome/free-regular-svg-icons'
+import { useEffect, useState } from 'react'
+
+export default function PremiumPageHome () {
+  const [purchased, setPurchased] = useState<boolean>(false)
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Premium'
+  }, [])
+
+  return (
+    <div className='box'>
+      <HomeButton />
+      <p className='text-center text-4xl'>
+        Lncvrt Games <span className='rainbow-text'>PREMIUM</span>
+      </p>
+      {!purchased ? (
+        <>
+          <p className='text-center text-[18px] mb-4'>
+            The premium package for Lncvrt Games, with Lncvrt Games Premium you
+            get access to:
+          </p>
+          <div className='flex flex-row gap-2 justify-center'>
+            <div className='sub-box flex flex-col gap-2 justify-center items-center'>
+              <FontAwesomeIcon
+                icon={faDownload}
+                width={48}
+                height={48}
+                className='bg-(--col4) border border-(--col6) rounded-lg p-2'
+              />
+              <p className='max-w-80 text-center'>
+                Download manager, AKA Lncvrt Games Launcher
+              </p>
+            </div>
+            <div className='sub-box flex flex-col gap-2 justify-center items-center'>
+              <FontAwesomeIcon
+                icon={faGamepad}
+                width={48}
+                height={48}
+                className='bg-(--col4) border border-(--col6) rounded-lg p-2'
+              />
+              <p className='max-w-80 text-center'>
+                Additional Games, like Fruit Dashy, Geometry Dash, Team Fortress
+                2 (all aquired by Lncvrt) and more!
+              </p>
+            </div>
+            <div className='sub-box flex flex-col gap-2 justify-center items-center'>
+              <FontAwesomeIcon
+                icon={faUser}
+                width={48}
+                height={48}
+                className='bg-(--col4) border border-(--col6) rounded-lg p-2'
+              />
+              <p className='max-w-80 text-center'>Accounts & Leaderboards</p>
+            </div>
+            <div className='sub-box flex flex-col gap-2 justify-center items-center'>
+              <FontAwesomeIcon
+                icon={faPlus}
+                width={48}
+                height={48}
+                className='bg-(--col4) border border-(--col6) rounded-lg p-2'
+              />
+              <p className='max-w-80 text-center'>And much, much more!</p>
+            </div>
+            <div className='sub-box flex flex-col gap-2 justify-center items-center'>
+              <FontAwesomeIcon
+                icon={faMoneyBill}
+                width={48}
+                height={48}
+                className='bg-(--col4) border border-(--col6) rounded-lg p-2'
+              />
+              <p className='max-w-80 text-center'>
+                Battle pass, there will be 3 teirs: Basic, Pro and Ultimate. You
+                will need Pro for accounts.
+              </p>
+            </div>
+          </div>
+        </>
+      ) : (
+        <iframe
+          className='mt-2'
+          width='1280'
+          height='720'
+          src='https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1'
+          allow='autoplay'
+        ></iframe>
+      )}
+      <div className='flex justify-center mt-2'>
+        <button className='button' onClick={() => setPurchased(!purchased)}>
+          {purchased ? 'Unpurchase' : 'Purchase'}
+        </button>
+      </div>
+    </div>
+  )
+}

src/app/premium/styles.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+
+@keyframes rainbow-shift {
+  0%,
+  100% {
+    background-position: 0% center;
+  }
+  50% {
+    background-position: 100% center;
+  }
+}
+
+@layer utilities {
+  .rainbow-text {
+    @apply text-transparent bg-clip-text;
+    background-image: linear-gradient(
+      90deg,
+      red,
+      orange,
+      yellow,
+      green,
+      blue,
+      indigo,
+      violet
+    );
+    background-size: 300% 100%;
+    animation: rainbow-shift 2s ease-in-out infinite;
+  }
+}