Merge pull request #22 from prototyp3-dev/feature/footer

feat: page Footer and globals.css cleanup

frontend/app/components/Footer.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import XIcon from '@mui/icons-material/X';
+import DiscordLogo from './svg/DiscordLogo';
+import Link from 'next/link';
+
+function Footer() {
+  return (
+    <footer className='footer'>
+        <div className='flex space-x-8'>
+            <Link href="https://twitter.com/rives_io" rel="noopener noreferrer" target="_blank" className='flex items-center space-x-2'>
+                <XIcon/> <span className='hover:underline'>rives_io</span>
+            </Link>
+            <Link href="https://discord.gg/FQnQqKWVn8" rel="noopener noreferrer" target="_blank" className='flex items-center space-x-2'>
+                <DiscordLogo/> <span className='hover:underline'>RiVES</span>
+            </Link>
+        </div>
+    </footer>
+  )
+}
+
+export default Footer

frontend/app/components/svg/DiscordLogo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function DiscordLogo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
+        <path d="M25.12,6.946c-2.424-1.948-6.257-2.278-6.419-2.292c-0.256-0.022-0.499,0.123-0.604,0.357 c-0.004,0.008-0.218,0.629-0.425,1.228c2.817,0.493,4.731,1.587,4.833,1.647c0.478,0.278,0.638,0.891,0.359,1.368 C22.679,9.572,22.344,9.75,22,9.75c-0.171,0-0.343-0.043-0.501-0.135C21.471,9.598,18.663,8,15.002,8 C11.34,8,8.531,9.599,8.503,9.615C8.026,9.892,7.414,9.729,7.137,9.251C6.86,8.775,7.021,8.164,7.497,7.886 c0.102-0.06,2.023-1.158,4.848-1.65c-0.218-0.606-0.438-1.217-0.442-1.225c-0.105-0.235-0.348-0.383-0.604-0.357 c-0.162,0.013-3.995,0.343-6.451,2.318C3.564,8.158,1,15.092,1,21.087c0,0.106,0.027,0.209,0.08,0.301 c1.771,3.11,6.599,3.924,7.699,3.959c0.007,0.001,0.013,0.001,0.019,0.001c0.194,0,0.377-0.093,0.492-0.25l1.19-1.612 c-2.61-0.629-3.99-1.618-4.073-1.679c-0.444-0.327-0.54-0.953-0.213-1.398c0.326-0.443,0.95-0.541,1.394-0.216 C7.625,20.217,10.172,22,15,22c4.847,0,7.387-1.79,7.412-1.808c0.444-0.322,1.07-0.225,1.395,0.221 c0.324,0.444,0.23,1.066-0.212,1.392c-0.083,0.061-1.456,1.048-4.06,1.677l1.175,1.615c0.115,0.158,0.298,0.25,0.492,0.25 c0.007,0,0.013,0,0.019-0.001c1.101-0.035,5.929-0.849,7.699-3.959c0.053-0.092,0.08-0.195,0.08-0.301 C29,15.092,26.436,8.158,25.12,6.946z M11,19c-1.105,0-2-1.119-2-2.5S9.895,14,11,14s2,1.119,2,2.5S12.105,19,11,19z M19,19 c-1.105,0-2-1.119-2-2.5s0.895-2.5,2-2.5s2,1.119,2,2.5S20.105,19,19,19z"/>
+    </svg>
+  )
+}
+
+export default DiscordLogo

frontend/app/globals.css

@@ -49,174 +49,27 @@ body {
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background-color: rgb(var(--background-start-rgb));
-}
-
-.hover-2 {
-  --c: var(--highlight-text-end-hex); /* the color */
-  --b: .1em;    /* border length*/
-  --d: 16px;    /* the cube depth */
-
-  --_s: calc(var(--d) + var(--b));
-  background:
-    conic-gradient(at left var(--d) bottom var(--d),
-    #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
-    conic-gradient(at left var(--_s) bottom var(--_s), #0000 180deg, var(--c) 0) border-box;
-  border: solid #0000;
-  border-width: var(--b) var(--b) var(--_s) var(--_s);
-  transform: translate(calc(var(--d)/-1),var(--d));
-  clip-path:
-    polygon(
-     var(--d) 0%,
-     var(--d) 0%,
-     100% 0%,
-     100% calc(100% - var(--d)),
-     100% calc(100% - var(--d)),
-     var(--d) calc(100% - var(--d))
-    );
-  transition: 0.5s;
-}
-
-.hover-2-selected {
-  background:
-  conic-gradient(at left var(--d) bottom var(--d),
-  #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
-  conic-gradient(at left var(--_s) bottom var(--_s),
-  #0000 90deg, var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box;
-
-  transform: translate(0,0);
-  clip-path:
-    polygon(
-     0% var(--d),
-     var(--d) 0%,
-     100% 0%,
-     100% calc(100% - var(--d)),
-     calc(100% - var(--d)) 100%,
-     0% 100%
-   );
-}
-
-.hover-2:hover {
-  background:
-  conic-gradient(at left var(--d) bottom var(--d),
-  #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
-  conic-gradient(at left var(--_s) bottom var(--_s),
-  #0000 90deg, var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box;
-
-  transform: translate(0,0);
-  clip-path:
-    polygon(
-     0% var(--d),
-     var(--d) 0%,
-     100% 0%,
-     100% calc(100% - var(--d)),
-     calc(100% - var(--d)) 100%,
-     0% 100%
-   );
-}
-
-
-.custom-shadow {
-  /* box-shadow: rgba(139, 92, 246, 0.4) -5px 5px,
-    rgba(139, 92, 246, 0.3) -10px 10px,
-    rgba(139, 92, 246, 0.2) -15px 15px,
-    rgba(139, 92, 246, 0.1) -20px 20px,
-    rgba(139, 92, 246, 0.05) -25px 25px; */
-  box-shadow: var(--highlight-text-end-rgba0) -5px 5px,
-    var(--highlight-text-end-rgba1) -10px 10px,
-    var(--highlight-text-end-rgba2) -15px 15px,
-    var(--highlight-text-end-rgba3) -20px 20px,
-    var(--highlight-text-end-rgba4) -25px 25px;
-  margin-bottom: 24px;
-}
-
-
-
-
-/* CSS */
-.button-57 {
+html {
   position: relative;
-  overflow: hidden;
-  display: inline-block;
-  font-size: 12px;
-  line-height: 12px;
-  /* padding: 18px 18px 17px; */
-  @apply p-5 rounded-md border border-current;
-  text-decoration: none;
-  cursor: pointer;
-  /* background: #fff; */
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
+  min-height: 100%;
 }
 
-.button-57 span:first-child {
-  position: relative;
-  transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
-  z-index: 10;
-}
-
-.button-57 span:last-child {
-  /* color: white; */
+body {
   color: rgb(var(--foreground-rgb));
-  display: block;
-  position: absolute;
-  bottom: 0;
-  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
-  z-index: 100;
-  opacity: 0;
-  top: 50%;
-  left: 50%;
-  transform: translateY(225%) translateX(-50%);
-  height: 14px;
-  line-height: 13px;
-}
-
-.button-57:disabled,
-.button-57[disabled]{
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.button-57:after {
-  content: "";
-  position: absolute;
-  bottom: -50%;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--highlight-text-end-hex);
-  transform-origin: bottom center;
-  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
-  transform: skewY(9.3deg) scaleY(0);
-  z-index: 50;
-}
-
-.button-57:hover:after {
-  transform-origin: bottom center;
-  transform: skewY(9.3deg) scaleY(2);
-}
-
-.button-57:hover span:last-child {
-  transform: translateX(-50%) translateY(-100%);
-  opacity: 1;
-  transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
+  background-color: rgb(var(--background-start-rgb));
 }
 
-
 .rainbow-background {
   background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%);
 }
 
 @layer utilities {
   .first-section {
-    @apply mx-auto pb-12 !pt-[126px] px-8 h-fit flex flex-col items-center;
+    @apply mx-auto pb-16 !pt-[126px] px-8 flex flex-col items-center;
   }
 
   .second-section {
-    @apply pb-12 !pt-[64px] h-svh flex flex-col;
+    @apply pb-16 !pt-[64px] flex flex-col sm:mb-16;
   }
 
   .custom-scrollbar {
@@ -305,6 +158,10 @@ body {
     @apply w-full h-16 bg-[var(--highlight-text-end-hex)] flex absolute top-0 z-10;
   }
 
+  .footer {
+    @apply w-full h-16 bg-[var(--highlight-text-end-hex)] flex justify-center items-center absolute bottom-0;
+  }
+
   .link-active {
     @apply bg-[rgb(var(--background-start-rgb))] text-white;
   }

frontend/app/layout.tsx

@@ -3,6 +3,7 @@ import './globals.css'
 import Navbar from '@/app/components/Navbar';
 import {Web3OnboardProviderClient} from './utils/web3OnboardProvider';
 import { fontPressStart2P } from './utils/font';
+import Footer from './components/Footer';
 
 export const metadata: Metadata = {
   title: 'RiVES',
@@ -21,6 +22,7 @@ export default function RootLayout({
         <body className={fontPressStart2P.className}>
           <Navbar></Navbar>
           {children}
+          <Footer></Footer>
         </body>
       </Web3OnboardProviderClient>
     </html>

frontend/app/page.tsx

@@ -27,7 +27,7 @@ export default function Home() {
           <YoutubeVideo videoId="7y22pdgGIE0" />
         </div>
 
-        <a className='mt-10 btn' href={"/cartridges"}>
+        <a className='mt-4 btn' href={"/cartridges"}>
           Start Playing
         </a>