Skip to content

Commit ae230fd

Browse files
eric-progeric-prog
committed
inital setup + splash screen
1 parent a5cf987 commit ae230fd

21 files changed

+4559
-1
lines changed

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/babel", "next/core-web-vitals"]
3+
}

‎.gitignore

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎README.md

+34-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,34 @@
1-
# nextjs-hackathon-template
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
```
14+
15+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16+
17+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18+
19+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎app/_assets/descope.jpeg

11.7 KB
Loading

‎app/_assets/logo.png

25.8 KB
Loading

‎app/_components/intro.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
"use client";
2+
3+
import { Golos_Text } from 'next/font/google';
4+
import { Silkscreen } from 'next/font/google';
5+
6+
7+
const silkScreen = Silkscreen({
8+
subsets: ["latin"],
9+
style: "normal",
10+
weight: '400'
11+
})
12+
13+
14+
export default function Intro() {
15+
16+
return (
17+
<div className='flex flex-col items-center justify-center h-full w-full'>
18+
<div>
19+
<div>
20+
<h1 style={silkScreen.style} className='text-7xl'>AuthHacks</h1>
21+
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry standard dummy text.</p>
22+
</div>
23+
<div>
24+
<img src="" alt="" />
25+
</div>
26+
</div>
27+
</div>
28+
)
29+
}

‎app/_components/loading.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use client";
2+
3+
import styles from "./styles/Animation.module.css"
4+
import { MouseEvent, useState, Dispatch, SetStateAction } from 'react'
5+
import { Silkscreen } from 'next/font/google';
6+
7+
8+
const silkScreen = Silkscreen({
9+
subsets: ["latin"],
10+
style: "normal",
11+
weight: '400'
12+
})
13+
14+
15+
export default function Loading({ setTriggerLoading }: { setTriggerLoading: Dispatch<SetStateAction<boolean>> }) {
16+
const [loadingBar, setLoadingBar] = useState(false);
17+
const [allowAccess, setAllowAccess] = useState(false);
18+
const [error, setError] = useState(false);
19+
20+
const handleLoadClick = async (e: MouseEvent) => {
21+
e.preventDefault();
22+
setLoadingBar(true)
23+
setTimeout(() => setAllowAccess(true), 3000); // wait 8 seconds to do something
24+
setTimeout(() => setError(true), 4000); // wait 8 seconds to do something
25+
setTimeout(() => setTriggerLoading(false), 5000)
26+
}
27+
28+
return (
29+
<div style={silkScreen.style} className='flex flex-col items-center justify-center h-screen w-full'>
30+
{!error ?
31+
<>
32+
<div>
33+
<button onClick={(e) => handleLoadClick(e)} className={allowAccess ? "py-4 px-8 bg-green-500 mb-8" : "py-4 px-8 bg-red-600 mb-8"}>Secure Connection</button>
34+
</div>
35+
<div className='inline-block mb-8'>
36+
<p className={styles.typed}>Welcome to AuthHacks. Secure connection to continue.</p>
37+
</div>
38+
{loadingBar &&
39+
<div className="absolute mt-[27vh] w-7/12">
40+
<div className={styles.loading}></div>
41+
<p className={allowAccess ? "mt-4 text-sm text-green-400" : "mt-4 text-sm text-red-500"}>Loading</p>
42+
</div>
43+
}
44+
</>
45+
:
46+
<>
47+
<p className="text-6xl max-w-full">Rebooting...</p>
48+
</>
49+
}
50+
</div>
51+
)
52+
}

‎app/_components/navbar.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client";
2+
3+
import Logo from "../_assets/logo.png"
4+
import { Golos_Text } from 'next/font/google';
5+
import { Silkscreen } from 'next/font/google';
6+
7+
8+
const silkScreen = Silkscreen({
9+
subsets: ["latin"],
10+
style: "normal",
11+
weight: '400'
12+
})
13+
14+
15+
export default function Navbar() {
16+
17+
return (
18+
<div style={silkScreen.style} className='flex flex-row items-center justify-center h-full w-full justify-evenly py-6'>
19+
<img className="w-14 h-14 mx-6" src={Logo.src} alt="navbar-logo" />
20+
<div>
21+
<a className="mx-6" href="#">About</a>
22+
<a className="mx-6" href="#">Speakers</a>
23+
<a className="mx-6" href="#">FAQ</a>
24+
<button>Login</button>
25+
</div>
26+
</div>
27+
)
28+
}

‎app/_components/styles/Animation.module.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.typed {
2+
overflow: hidden;
3+
white-space: nowrap;
4+
border-right: 10px solid;
5+
width: 0;
6+
max-width: fit-content;
7+
animation: typing 3s steps(40, end) forwards, blink .75s step-end infinite;
8+
margin: 2vh;
9+
font-size: 1.1vw;
10+
}
11+
.loading {
12+
width: 100%;
13+
display: inline-block;
14+
position: relative;
15+
background-color: rgb(51, 51, 51);
16+
height: 15px;
17+
overflow: hidden;
18+
}
19+
.loading::after {
20+
content: '';
21+
box-sizing: border-box;
22+
width: 0;
23+
height: 15px;
24+
background: #eeeeee;
25+
position: absolute;
26+
animation: progress 2s steps(10, end) forwards;
27+
}
28+
29+
30+
@keyframes typing {
31+
from { width: 0% }
32+
to { width: 100% }
33+
}
34+
@keyframes progress {
35+
0% { width: 0% }
36+
75% { width: 75% }
37+
100% { width: 100% }
38+
}
39+
@keyframes blink {
40+
from, to { border-color: transparent }
41+
50% { border-color: rgb(242, 242, 242) }
42+
}

‎app/favicon.ico

25.3 KB
Binary file not shown.

‎app/globals.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
/* :root {
6+
--foreground-rgb: 0, 0, 0;
7+
--background-start-rgb: 214, 219, 220;
8+
--background-end-rgb: 255, 255, 255;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--foreground-rgb: 255, 255, 255;
14+
--background-start-rgb: 0, 0, 0;
15+
--background-end-rgb: 0, 0, 0;
16+
}
17+
}
18+
19+
body {
20+
color: rgb(var(--foreground-rgb));
21+
background: linear-gradient(
22+
to bottom,
23+
transparent,
24+
rgb(var(--background-end-rgb))
25+
)
26+
rgb(var(--background-start-rgb));
27+
} */
28+
29+
body {
30+
background-color: rgb(17, 17, 17);
31+
color: white;
32+
}
33+
34+
@keyframes typing {
35+
from { width: 0 }
36+
to { width: 100% }
37+
}

‎app/layout.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import './globals.css'
2+
import { Inter } from 'next/font/google'
3+
4+
const inter = Inter({ subsets: ['latin'] })
5+
6+
export const metadata = {
7+
title: 'Create Next App',
8+
description: 'Generated by create next app',
9+
}
10+
11+
export default function RootLayout({
12+
children,
13+
}: {
14+
children: React.ReactNode
15+
}) {
16+
return (
17+
<html lang="en">
18+
<body className={inter.className}>
19+
{children}
20+
</body>
21+
</html>
22+
)
23+
}
24+
25+

‎app/page.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
"use client";
2+
3+
import { useState, useEffect } from 'react'
4+
import Loading from './_components/loading';
5+
import Navbar from './_components/navbar';
6+
import Intro from './_components/intro';
7+
8+
9+
export default function Home() {
10+
const [triggerLoading, setTriggerLoading] = useState(true)
11+
12+
return (
13+
<div>
14+
{triggerLoading ?
15+
<Loading setTriggerLoading={setTriggerLoading} />
16+
:
17+
<div className='flex flex-col items-center justify-center h-full w-full'>
18+
<Navbar />
19+
<Intro />
20+
</div>
21+
}
22+
</div>
23+
)
24+
}

‎next.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

0 commit comments

Comments
 (0)