Signup card component in register

adi-uchiha · Oct 22, 2022 · 099afe2 · 099afe2 · vercel · Oct 22, 2022
1 parent c5bde35
commit 099afe2
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 18 deletions.
diff --git a/components/SignUp.tsx b/components/SignUp.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SignUp = () => {
+  return (
+    <div>SignUp</div>
+  )
+}
+
+export default SignUp
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
   "dependencies": {
     "next": "latest",
     "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "react-tilt": "^0.1.4",
+    "vanilla-tilt": "^1.7.2"
   },
   "devDependencies": {
     "@types/node": "17.0.35",

diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
diff --git a/pages/auth/login/index.tsx b/pages/auth/login/index.tsx
@@ -0,0 +1,14 @@
+import Head from 'next/head'
+import React from 'react'
+import Script from 'next/script'
+
+
+const Login = () => {
+  return (
+    <div className=''>
+      LOGIN
+    </div>
+  )
+}
+
+export default Login
diff --git a/pages/auth/register/index.tsx → pages/auth/register/index.jsx b/pages/auth/register/index.tsx → pages/auth/register/index.jsx
@@ -1,13 +1,19 @@
-import Head from 'next/head'
+import Script from 'next/script'
 import React from 'react'
-
+import Tilt from 'react-tilt'
+import SignUp from '../../../components/SignUp'
 
 const index = () => {
     return (
         <div>
-            <Head>
-                <script src="https://kit.fontawesome.com/90915ad547.js" crossOrigin="anonymous"></script>
-            </Head>
+            <Script src="https://kit.fontawesome.com/90915ad547.js" crossOrigin="anonymous"></Script>
+            <div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10'>
+            <Tilt className=" flex Tilt bg-slate-500/10 rounded-xl backdrop-blur" options={{ max: 25 }} style={{ height: 250, width: 450 }} >
+                <div className="Tilt-inner text-center"> 
+                    <SignUp />
+                </div>
+            </Tilt>
+            </div>
             <section className='mySection'>
                 <div className='row'>
                     <div>
@@ -969,7 +975,7 @@ const index = () => {
                         <i className="myI fa-solid fa-gamepad"></i>
                     </div>
                 </div>
-                
+
             </section>
         </div>
     )

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,6 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import Script from 'next/script'
 import Footer from '../components/Footer'
 import Header from '../components/Header'
 
@@ -10,7 +11,6 @@ const Home: NextPage = () => {
       <Head>
         <title>Game Dev PVG</title>
         <link rel="icon" href="/favicon.ico" />
-        <script src="https://kit.fontawesome.com/90915ad547.js" crossOrigin="anonymous"></script>
       </Head>
 
       <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">

diff --git a/tsconfig.json b/tsconfig.json
@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/auth/register/index.jsx"],
   "exclude": ["node_modules"]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -558,6 +558,11 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-tilt@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/react-tilt/-/react-tilt-0.1.4.tgz#0ac1f33674a3fff6c617cf411002d7ecdd2ebcb1"
+  integrity sha512-bVeRumg+RIn6QN8S92UmubGqX/BG6/QeQISBeAcrS/70dpo/jVj+sjikIawDl5wTuPdubFH8zH0EMulWIctsnw==
+
 [email protected]:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
@@ -686,6 +691,11 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+vanilla-tilt@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz#59a5565d9f1f6d392a36969f223fb600dd101a81"
+  integrity sha512-arf2wY2Y65rP6Zxve9PnUUnRl9nQ1KenPNae6QRaVq/PEvaIto2bC4jYirNJ19U7nLkzI1H9O+nYtcQlX7BTsA==
+
 xtend@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"