Skip to content

Commit b74a0d1

Browse files
ayushpanwar25ayushpanwar25
committedNov 27, 2023
Initial commit from Create Next App
0 parents  commit b74a0d1

14 files changed

+4179
-0
lines changed
 

‎.eslintrc.json

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

‎.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
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.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎jsconfig.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"@/*": ["./src/*"]
5+
}
6+
}
7+
}

‎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

‎package-lock.json

+3,623
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "anudesh-frontend",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"react": "^18",
13+
"react-dom": "^18",
14+
"next": "14.0.3"
15+
},
16+
"devDependencies": {
17+
"eslint": "^8",
18+
"eslint-config-next": "14.0.3"
19+
}
20+
}

‎public/next.svg

+1
Loading

‎public/vercel.svg

+1
Loading

‎src/app/favicon.ico

25.3 KB
Binary file not shown.

‎src/app/globals.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
--max-width: 1100px;
3+
--border-radius: 12px;
4+
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
5+
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
6+
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
7+
8+
--foreground-rgb: 0, 0, 0;
9+
--background-start-rgb: 214, 219, 220;
10+
--background-end-rgb: 255, 255, 255;
11+
12+
--primary-glow: conic-gradient(
13+
from 180deg at 50% 50%,
14+
#16abff33 0deg,
15+
#0885ff33 55deg,
16+
#54d6ff33 120deg,
17+
#0071ff33 160deg,
18+
transparent 360deg
19+
);
20+
--secondary-glow: radial-gradient(
21+
rgba(255, 255, 255, 1),
22+
rgba(255, 255, 255, 0)
23+
);
24+
25+
--tile-start-rgb: 239, 245, 249;
26+
--tile-end-rgb: 228, 232, 233;
27+
--tile-border: conic-gradient(
28+
#00000080,
29+
#00000040,
30+
#00000030,
31+
#00000020,
32+
#00000010,
33+
#00000010,
34+
#00000080
35+
);
36+
37+
--callout-rgb: 238, 240, 241;
38+
--callout-border-rgb: 172, 175, 176;
39+
--card-rgb: 180, 185, 188;
40+
--card-border-rgb: 131, 134, 135;
41+
}
42+
43+
@media (prefers-color-scheme: dark) {
44+
:root {
45+
--foreground-rgb: 255, 255, 255;
46+
--background-start-rgb: 0, 0, 0;
47+
--background-end-rgb: 0, 0, 0;
48+
49+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
50+
--secondary-glow: linear-gradient(
51+
to bottom right,
52+
rgba(1, 65, 255, 0),
53+
rgba(1, 65, 255, 0),
54+
rgba(1, 65, 255, 0.3)
55+
);
56+
57+
--tile-start-rgb: 2, 13, 46;
58+
--tile-end-rgb: 2, 5, 19;
59+
--tile-border: conic-gradient(
60+
#ffffff80,
61+
#ffffff40,
62+
#ffffff30,
63+
#ffffff20,
64+
#ffffff10,
65+
#ffffff10,
66+
#ffffff80
67+
);
68+
69+
--callout-rgb: 20, 20, 20;
70+
--callout-border-rgb: 108, 108, 108;
71+
--card-rgb: 100, 100, 100;
72+
--card-border-rgb: 200, 200, 200;
73+
}
74+
}
75+
76+
* {
77+
box-sizing: border-box;
78+
padding: 0;
79+
margin: 0;
80+
}
81+
82+
html,
83+
body {
84+
max-width: 100vw;
85+
overflow-x: hidden;
86+
}
87+
88+
body {
89+
color: rgb(var(--foreground-rgb));
90+
background: linear-gradient(
91+
to bottom,
92+
transparent,
93+
rgb(var(--background-end-rgb))
94+
)
95+
rgb(var(--background-start-rgb));
96+
}
97+
98+
a {
99+
color: inherit;
100+
text-decoration: none;
101+
}
102+
103+
@media (prefers-color-scheme: dark) {
104+
html {
105+
color-scheme: dark;
106+
}
107+
}

‎src/app/layout.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Inter } from 'next/font/google'
2+
import './globals.css'
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({ children }) {
12+
return (
13+
<html lang="en">
14+
<body className={inter.className}>{children}</body>
15+
</html>
16+
)
17+
}

‎src/app/page.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import Image from 'next/image'
2+
import styles from './page.module.css'
3+
4+
export default function Home() {
5+
return (
6+
<main className={styles.main}>
7+
<div className={styles.description}>
8+
<p>
9+
Get started by editing&nbsp;
10+
<code className={styles.code}>src/app/page.js</code>
11+
</p>
12+
<div>
13+
<a
14+
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
>
18+
By{' '}
19+
<Image
20+
src="/vercel.svg"
21+
alt="Vercel Logo"
22+
className={styles.vercelLogo}
23+
width={100}
24+
height={24}
25+
priority
26+
/>
27+
</a>
28+
</div>
29+
</div>
30+
31+
<div className={styles.center}>
32+
<Image
33+
className={styles.logo}
34+
src="/next.svg"
35+
alt="Next.js Logo"
36+
width={180}
37+
height={37}
38+
priority
39+
/>
40+
</div>
41+
42+
<div className={styles.grid}>
43+
<a
44+
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45+
className={styles.card}
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
>
49+
<h2>
50+
Docs <span>-&gt;</span>
51+
</h2>
52+
<p>Find in-depth information about Next.js features and API.</p>
53+
</a>
54+
55+
<a
56+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
57+
className={styles.card}
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
<h2>
62+
Learn <span>-&gt;</span>
63+
</h2>
64+
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
65+
</a>
66+
67+
<a
68+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69+
className={styles.card}
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
>
73+
<h2>
74+
Templates <span>-&gt;</span>
75+
</h2>
76+
<p>Explore starter templates for Next.js.</p>
77+
</a>
78+
79+
<a
80+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
81+
className={styles.card}
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
>
85+
<h2>
86+
Deploy <span>-&gt;</span>
87+
</h2>
88+
<p>
89+
Instantly deploy your Next.js site to a shareable URL with Vercel.
90+
</p>
91+
</a>
92+
</div>
93+
</main>
94+
)
95+
}

‎src/app/page.module.css

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
.main {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-between;
5+
align-items: center;
6+
padding: 6rem;
7+
min-height: 100vh;
8+
}
9+
10+
.description {
11+
display: inherit;
12+
justify-content: inherit;
13+
align-items: inherit;
14+
font-size: 0.85rem;
15+
max-width: var(--max-width);
16+
width: 100%;
17+
z-index: 2;
18+
font-family: var(--font-mono);
19+
}
20+
21+
.description a {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
gap: 0.5rem;
26+
}
27+
28+
.description p {
29+
position: relative;
30+
margin: 0;
31+
padding: 1rem;
32+
background-color: rgba(var(--callout-rgb), 0.5);
33+
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
34+
border-radius: var(--border-radius);
35+
}
36+
37+
.code {
38+
font-weight: 700;
39+
font-family: var(--font-mono);
40+
}
41+
42+
.grid {
43+
display: grid;
44+
grid-template-columns: repeat(4, minmax(25%, auto));
45+
max-width: 100%;
46+
width: var(--max-width);
47+
}
48+
49+
.card {
50+
padding: 1rem 1.2rem;
51+
border-radius: var(--border-radius);
52+
background: rgba(var(--card-rgb), 0);
53+
border: 1px solid rgba(var(--card-border-rgb), 0);
54+
transition: background 200ms, border 200ms;
55+
}
56+
57+
.card span {
58+
display: inline-block;
59+
transition: transform 200ms;
60+
}
61+
62+
.card h2 {
63+
font-weight: 600;
64+
margin-bottom: 0.7rem;
65+
}
66+
67+
.card p {
68+
margin: 0;
69+
opacity: 0.6;
70+
font-size: 0.9rem;
71+
line-height: 1.5;
72+
max-width: 30ch;
73+
}
74+
75+
.center {
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
position: relative;
80+
padding: 4rem 0;
81+
}
82+
83+
.center::before {
84+
background: var(--secondary-glow);
85+
border-radius: 50%;
86+
width: 480px;
87+
height: 360px;
88+
margin-left: -400px;
89+
}
90+
91+
.center::after {
92+
background: var(--primary-glow);
93+
width: 240px;
94+
height: 180px;
95+
z-index: -1;
96+
}
97+
98+
.center::before,
99+
.center::after {
100+
content: '';
101+
left: 50%;
102+
position: absolute;
103+
filter: blur(45px);
104+
transform: translateZ(0);
105+
}
106+
107+
.logo {
108+
position: relative;
109+
}
110+
/* Enable hover only on non-touch devices */
111+
@media (hover: hover) and (pointer: fine) {
112+
.card:hover {
113+
background: rgba(var(--card-rgb), 0.1);
114+
border: 1px solid rgba(var(--card-border-rgb), 0.15);
115+
}
116+
117+
.card:hover span {
118+
transform: translateX(4px);
119+
}
120+
}
121+
122+
@media (prefers-reduced-motion) {
123+
.card:hover span {
124+
transform: none;
125+
}
126+
}
127+
128+
/* Mobile */
129+
@media (max-width: 700px) {
130+
.content {
131+
padding: 4rem;
132+
}
133+
134+
.grid {
135+
grid-template-columns: 1fr;
136+
margin-bottom: 120px;
137+
max-width: 320px;
138+
text-align: center;
139+
}
140+
141+
.card {
142+
padding: 1rem 2.5rem;
143+
}
144+
145+
.card h2 {
146+
margin-bottom: 0.5rem;
147+
}
148+
149+
.center {
150+
padding: 8rem 0 6rem;
151+
}
152+
153+
.center::before {
154+
transform: none;
155+
height: 300px;
156+
}
157+
158+
.description {
159+
font-size: 0.8rem;
160+
}
161+
162+
.description a {
163+
padding: 1rem;
164+
}
165+
166+
.description p,
167+
.description div {
168+
display: flex;
169+
justify-content: center;
170+
position: fixed;
171+
width: 100%;
172+
}
173+
174+
.description p {
175+
align-items: center;
176+
inset: 0 0 auto;
177+
padding: 2rem 1rem 1.4rem;
178+
border-radius: 0;
179+
border: none;
180+
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
181+
background: linear-gradient(
182+
to bottom,
183+
rgba(var(--background-start-rgb), 1),
184+
rgba(var(--callout-rgb), 0.5)
185+
);
186+
background-clip: padding-box;
187+
backdrop-filter: blur(24px);
188+
}
189+
190+
.description div {
191+
align-items: flex-end;
192+
pointer-events: none;
193+
inset: auto 0 0;
194+
padding: 2rem;
195+
height: 200px;
196+
background: linear-gradient(
197+
to bottom,
198+
transparent 0%,
199+
rgb(var(--background-end-rgb)) 40%
200+
);
201+
z-index: 1;
202+
}
203+
}
204+
205+
/* Tablet and Smaller Desktop */
206+
@media (min-width: 701px) and (max-width: 1120px) {
207+
.grid {
208+
grid-template-columns: repeat(2, 50%);
209+
}
210+
}
211+
212+
@media (prefers-color-scheme: dark) {
213+
.vercelLogo {
214+
filter: invert(1);
215+
}
216+
217+
.logo {
218+
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
219+
}
220+
}
221+
222+
@keyframes rotate {
223+
from {
224+
transform: rotate(360deg);
225+
}
226+
to {
227+
transform: rotate(0deg);
228+
}
229+
}

0 commit comments

Comments
 (0)
Please sign in to comment.