feat: add waitlist

keyshade-xyz · Mar 12, 2024 · a2b4a58 · a2b4a58
1 parent e8101e9
commit a2b4a58
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -2,13 +2,12 @@
 
 import { Poppins } from 'next/font/google'
 import { useState } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies -- chill
 import { Toaster, toast } from 'sonner'
+import { InputBorderSpotlight } from '@/components/ui/input-spotlight'
+import EncryptButton from '@/components/ui/encrypt-btn'
 import Links from '../components/links'
 import Killers from '../components/killers'
 import { Logo, Grid, Stars, DiscordSVG, XSVG, LinkdinSVG } from '../../public'
-import { InputBorderSpotlight } from '@/components/ui/input-spotlight'
-import EncryptButton from '@/components/ui/encrypt-btn'
 
 const poppins = Poppins({
   subsets: ['latin'],
@@ -112,24 +111,35 @@ function Index(): React.JSX.Element {
               </form>
 
               <div className="flex items-center justify-center gap-8 mt-16 md:gap-24 md:mt-20">
-                <a href="https://discord.gg/mV9PsXsjaH" rel="noopener referrer" target="_blank">
+                <a
+                  href="https://discord.gg/mV9PsXsjaH"
+                  rel="noopener referrer"
+                  target="_blank"
+                >
                   <Killers>
-                  <DiscordSVG width={26} />
-                </Killers>
+                    <DiscordSVG width={26} />
+                  </Killers>
                 </a>
-
-                <a href="https://twitter.com/keyshade_xyz" rel="noopener referrer" target="_blank">
+
+                <a
+                  href="https://twitter.com/keyshade_xyz"
+                  rel="noopener referrer"
+                  target="_blank"
+                >
                   <Killers>
-                  <XSVG width={26} />
-                </Killers>
+                    <XSVG width={26} />
+                  </Killers>
                 </a>
-
-                <a href="https://www.linkedin.com/company/keyshade-xyz/" rel="noopener referrer" target="_blank">
+
+                <a
+                  href="https://www.linkedin.com/company/keyshade-xyz/"
+                  rel="noopener referrer"
+                  target="_blank"
+                >
                   <Killers>
-                  <LinkdinSVG width={26} />
-                </Killers>
+                    <LinkdinSVG width={26} />
+                  </Killers>
                 </a>
-
               </div>
             </div>
           </div>

diff --git a/apps/web/src/components/ui/encrypt-btn.tsx b/apps/web/src/components/ui/encrypt-btn.tsx
@@ -6,9 +6,7 @@ interface EncryptButtonProps extends React.HTMLProps<HTMLButtonElement> {
   TARGET_TEXT: string
 }
 
-function EncryptButton({
-  TARGET_TEXT,
-}: EncryptButtonProps): React.JSX.Element {
+function EncryptButton({ TARGET_TEXT }: EncryptButtonProps): React.JSX.Element {
   // const TARGET_TEXT = 'Join Waitlist'
   const CYCLES_PER_LETTER = 2
   const SHUFFLE_TIME = 50
@@ -19,7 +17,7 @@ function EncryptButton({
 
   const [text, setText] = useState(TARGET_TEXT)
 
-  const scramble = ():void => {
+  const scramble = (): void => {
     let pos = 0
 
     intervalRef.current = setInterval(() => {
@@ -56,14 +54,13 @@ function EncryptButton({
       className="bg-brandBlue/[12%] backdrop-blur hover:text-brandBlue group relative overflow-hidden rounded-full px-4 py-2 font-mono font-medium uppercase text-neutral-300 transition-colors"
       onMouseEnter={scramble}
       onMouseLeave={stopScramble}
-      type='submit'
+      type="submit"
       whileHover={{
         scale: 1.025
       }}
       whileTap={{
         scale: 0.975
       }}
-
     >
       <div className="relative z-10 flex items-center gap-2">
         <span className="flex">

diff --git a/apps/web/src/components/ui/input-spotlight.tsx b/apps/web/src/components/ui/input-spotlight.tsx
@@ -44,13 +44,15 @@ export function InputBorderSpotlight({
   return (
     <div className="relative w-80">
       <input
-        autoCapitalize='off'
+        autoCapitalize="off"
         autoComplete="off"
         className="border-brandBlue/[30%] backdrop-blur focus:border-brandBlue h-10 w-full cursor-text rounded-full border bg-transparent bg-gradient-to-b from-[#E2E8FF]/[0%] to-[#E2E8FF]/[6%] p-3.5 px-[0.94rem]  py-3 text-slate-100 transition-colors  duration-500 placeholder:select-none placeholder:text-[#E2E8FF]/[50%] placeholder:text-neutral-500 focus:outline-none"
-        id='mce-EMAIL'
+        id="mce-EMAIL"
         name="EMAIL"
         onBlur={handleBlur}
-        onChange={(e) => {setEmail(e.target.value)}}
+        onChange={(e) => {
+          setEmail(e.target.value)
+        }}
         onFocus={handleFocus}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}