Skip to content

Commit 10e52d5

Browse files
goelraghav002goelraghav002
committed
first commit
0 parents  commit 10e52d5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+7426
-0
lines changed

‎.eslintrc.js

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
},
6+
extends: [
7+
'plugin:react/recommended',
8+
'airbnb',
9+
],
10+
parserOptions: {
11+
ecmaFeatures: {
12+
jsx: true,
13+
},
14+
ecmaVersion: 12,
15+
sourceType: 'module',
16+
},
17+
plugins: [
18+
'react',
19+
],
20+
rules: {
21+
'react/no-unescaped-entities': 0,
22+
'eslintreact/no-danger': 0,
23+
'react/jsx-max-props-per-line': 0,
24+
'react/jsx-first-prop-new-line': 0,
25+
'no-console': 0,
26+
'jsx-a11y/label-has-associated-control': 0,
27+
'no-nested-ternary': 0,
28+
'consistent-return': 0,
29+
'no-alert': 0,
30+
'react/jsx-no-constructed-context-values': 0,
31+
'import/extensions': 0,
32+
'react/prop-types': 0,
33+
'linebreak-style': 0,
34+
'react/state-in-constructor': 0,
35+
'import/prefer-default-export': 0,
36+
'react/react-in-jsx-scope': 'off',
37+
'react/jsx-props-no-spreading': 'off',
38+
'jsx-a11y/no-noninteractive-element-interactions': 'off',
39+
'react/function-component-definition': [
40+
2,
41+
{
42+
namedComponents: 'arrow-function',
43+
unnamedComponents: 'arrow-function',
44+
},
45+
],
46+
'max-len': [
47+
2,
48+
1050,
49+
],
50+
'no-multiple-empty-lines': [
51+
'error',
52+
{
53+
max: 1,
54+
maxEOF: 1,
55+
},
56+
],
57+
'no-underscore-dangle': [
58+
'error',
59+
{
60+
allow: [
61+
'_d',
62+
'_dh',
63+
'_h',
64+
'_id',
65+
'_m',
66+
'_n',
67+
'_t',
68+
'_text',
69+
],
70+
},
71+
],
72+
'object-curly-newline': 0,
73+
'react/jsx-filename-extension': 0,
74+
'react/jsx-one-expression-per-line': 0,
75+
'jsx-a11y/click-events-have-key-events': 0,
76+
'jsx-a11y/alt-text': 0,
77+
'jsx-a11y/no-autofocus': 0,
78+
'jsx-a11y/no-static-element-interactions': 0,
79+
'react/no-array-index-key': 0,
80+
'jsx-a11y/anchor-is-valid': [
81+
'error',
82+
{
83+
components: [
84+
'Link',
85+
],
86+
specialLink: [
87+
'to',
88+
'hrefLeft',
89+
'hrefRight',
90+
],
91+
aspects: [
92+
'noHref',
93+
'invalidHref',
94+
'preferButton',
95+
],
96+
},
97+
],
98+
},
99+
};

‎.eslintrc.json

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

‎.gitignore

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
# vscode
39+
.vscode

‎README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16+
17+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18+
19+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
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/head.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const Head = () => (
2+
<>
3+
<title>Metaversus</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="icon" href="/favicon.ico" />
6+
</>
7+
);
8+
9+
export default Head;

‎app/layout.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import '../styles/globals.css';
2+
3+
const RootLayout = ({ children }) => (
4+
<html lang="en">
5+
<head>
6+
<link rel="preconnect" href="https://stijndv.com" />
7+
<link rel="stylesheet" href="https://stijndv.com/fonts/Eudoxus-Sans.css" />
8+
</head>
9+
<body>{children}</body>
10+
</html>
11+
);
12+
13+
export default RootLayout;

‎app/page.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Footer, Navbar } from '../components';
2+
import { About, Explore, Feedback, GetStarted, Hero, Insights, WhatsNew, World } from '../sections';
3+
4+
const Page = () => (
5+
<div className="bg-primary-black overflow-hidden">
6+
<Navbar />
7+
<Hero />
8+
<div className="relative">
9+
<About />
10+
<div className="gradient-03" />
11+
<Explore />
12+
</div>
13+
<div className="relative">
14+
<GetStarted />
15+
<div className="gradient-04" />
16+
<WhatsNew />
17+
</div>
18+
<World />
19+
<div className="relative">
20+
<Insights />
21+
<div className="gradient-04" />
22+
<Feedback />
23+
</div>
24+
<Footer />
25+
</div>
26+
);
27+
28+
export default Page;

‎components/CustomTexts.jsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
5+
import { textContainer, textVariant2 } from '../utils/motion';
6+
7+
export const TypingText = ({ title, textStyles }) => (
8+
<motion.p
9+
variants={textContainer}
10+
className={`font-normal text-[14px] text-secondary-white ${textStyles}`}
11+
>
12+
{Array.from(title).map((letter, index) => (
13+
<motion.span variants={textVariant2} key={index}>
14+
{letter === ' ' ? '\u00A0' : letter}
15+
</motion.span>
16+
))}
17+
</motion.p>
18+
);
19+
20+
export const TitleText = ({ title, textStyles }) => (
21+
<motion.h2
22+
variants={textVariant2}
23+
initial="hidden"
24+
whileInView="show"
25+
className={`mt-[8px] font-bold md:text-[64px] text-[40px] text-white ${textStyles}`}
26+
>
27+
{title}
28+
</motion.h2>
29+
);

‎components/ExploreCard.jsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
5+
import styles from '../styles';
6+
import { fadeIn } from '../utils/motion';
7+
8+
const ExploreCard = ({ id, imgUrl, title, index, active, handleClick }) => (
9+
<motion.div
10+
variants={fadeIn('right', 'spring', index * 0.5, 0.75)}
11+
className={`relative ${
12+
active === id ? 'lg:flex-[3.5] flex-[10]' : 'lg:flex[0.5] flex-[2]'
13+
} flex items-center justify-center min-w-[170px] h-[700px] transition-[flex] duration-[0.7s] ease-out-flex cursor-pointer`}
14+
onClick={() => handleClick(id)}
15+
>
16+
<img
17+
src={imgUrl}
18+
alt={title}
19+
className="absolute w-full h-full object-cover rounded-[24px]"
20+
/>
21+
{active !== id ? (
22+
<h3 className="font-semibold sm:text-[26px] text-[18px] text-white absolute z-0 lg:bottom-20 lg:rotate-[-90deg] lg:origin-[0,0]">
23+
{title}
24+
</h3>
25+
) : (
26+
<div className="absolute bottom-0 p-8 justify-start w-full flex-col bg-[rgba(0,0,0,0.5)] rounded-b-[24px]">
27+
<div className={`${styles.flexCenter} w-[60px] h-[60px] rounded-[24px] glassmorphism mb-[16px]`}>
28+
<img
29+
src="/headset.svg"
30+
alt="headset"
31+
className="w-1/2 h-1/2 object-contain"
32+
/>
33+
</div>
34+
<p className="font-normal text-[16px] leading-[20px] text-white uppercase">
35+
Enter the Metaverse
36+
</p>
37+
<h2 className="mt-[24px] font-semibold sm:text-[32px] text-[24px] text-white">
38+
{title}
39+
</h2>
40+
</div>
41+
)}
42+
</motion.div>
43+
);
44+
45+
export default ExploreCard;

‎components/Footer.jsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
import { socials } from '../constants';
5+
6+
import styles from '../styles';
7+
import { footerVariants } from '../utils/motion';
8+
9+
const Footer = () => (
10+
<motion.footer
11+
variants={footerVariants}
12+
initial="hidden"
13+
whileInView="show"
14+
className={`${styles.paddings} py-8 relative`}
15+
>
16+
<div className="footer-gradient" />
17+
18+
<div className={`${styles.innerWidth} mx-auto flex flex-col gap-8`}>
19+
<div className="flex items-center justify-between flex-wrap gap-5">
20+
<h4 className="font-bold md:text-[64px] text-[44px] text-white">Enter the Metaversus</h4>
21+
<button type="button" className="flex items-center h-fit py-4 px-6 bg-[#25618b] rounded-[32px] gap-[12px]">
22+
<img src="/headset.svg" alt="headset" className="w-[24px] h-[24px] object-contain" />
23+
<span className="font-normal text-[16px] text-white">ENTER MEAVERSE</span>
24+
</button>
25+
</div>
26+
27+
<div className="flex flex-col">
28+
<div className="mb-[50px] h-[2px] bg-white opacity-10" />
29+
30+
<div className="flex items-center justify-between flex-wrap gap-4">
31+
<h4 className="font-extrabold text-[24px] text-white">Metaversus</h4>
32+
<p className="font-normal text-[14px] text-white opacity-50">Copyright © 2021 - 2022 Metaversus. All rights reserved.</p>
33+
<div className="flex gap-4">
34+
{socials.map((social) => (
35+
<img
36+
key={social.name}
37+
src={social.url}
38+
alt={social.name}
39+
className="w-[24px] h-[24px] object-contain cursor-pointer"
40+
/>
41+
))}
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</motion.footer>
47+
);
48+
49+
export default Footer;

‎components/InsightCard.jsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
5+
import { fadeIn } from '../utils/motion';
6+
7+
const InsightCard = ({ imgUrl, title, subtitle, index }) => (
8+
<motion.div
9+
variants={fadeIn('up', 'spring', index * 0.5, 1)}
10+
className="flex md:flex-row flex-col gap-4"
11+
>
12+
<img
13+
src={imgUrl}
14+
alt="planet-01"
15+
className="md:w-[270px] w-full h-[250px] rounded-[32px] object-cover"
16+
/>
17+
<div className="w-full flex justify-between items-center">
18+
<div className="flex-1 md:ml-[62px] flex flex-col max-w-[650px]">
19+
<h4 className="font-normal lg:text-[42px] text-[26px] text-white">{title}</h4>
20+
<p className="mt-[16px] font-normal lg:text-[20px] text-[14px] text-secondary-white">{subtitle}</p>
21+
</div>
22+
23+
<div className="lg:flex hidden items-center justify-center w-[100px] h-[100px] rounded-full bg-transparent border-[1px] border-white">
24+
<img
25+
src="arrow.svg"
26+
alt="arrow"
27+
className="w-[40%] h-[40%] object-contain"
28+
/>
29+
</div>
30+
</div>
31+
</motion.div>
32+
);
33+
34+
export default InsightCard;

0 commit comments

Comments
 (0)