the base website

.eslintrc.js

@@ -0,0 +1,99 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+    'react/no-unescaped-entities': 0,
+    'eslintreact/no-danger': 0,
+    'react/jsx-max-props-per-line': 0,
+    'react/jsx-first-prop-new-line': 0,
+    'no-console': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'no-nested-ternary': 0,
+    'consistent-return': 0,
+    'no-alert': 0,
+    'react/jsx-no-constructed-context-values': 0,
+    'import/extensions': 0,
+    'react/prop-types': 0,
+    'linebreak-style': 0,
+    'react/state-in-constructor': 0,
+    'import/prefer-default-export': 0,
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    'react/function-component-definition': [
+      2,
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
+    ],
+    'max-len': [
+      2,
+      1050,
+    ],
+    'no-multiple-empty-lines': [
+      'error',
+      {
+        max: 1,
+        maxEOF: 1,
+      },
+    ],
+    'no-underscore-dangle': [
+      'error',
+      {
+        allow: [
+          '_d',
+          '_dh',
+          '_h',
+          '_id',
+          '_m',
+          '_n',
+          '_t',
+          '_text',
+        ],
+      },
+    ],
+    'object-curly-newline': 0,
+    'react/jsx-filename-extension': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/alt-text': 0,
+    'jsx-a11y/no-autofocus': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
+    'react/no-array-index-key': 0,
+    'jsx-a11y/anchor-is-valid': [
+      'error',
+      {
+        components: [
+          'Link',
+        ],
+        specialLink: [
+          'to',
+          'hrefLeft',
+          'hrefRight',
+        ],
+        aspects: [
+          'noHref',
+          'invalidHref',
+          'preferButton',
+        ],
+      },
+    ],
+  },
+};

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitattributes

@@ -0,0 +1,17 @@
+# Set the default behavior to automatically normalize line endings.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.js text
+*.jsx text
+*.json text
+*.css text
+*.md text
+*.svg text
+
+# Declare files that will always have CRLF line endings on checkout.
+*.bat text eol=crlf
+
+# Declare files that will always have LF line endings on checkout.
+*.sh text eol=lf

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# vscode
+.vscode

README.md

@@ -0,0 +1,34 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[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`.
+
+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.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/head.js

@@ -0,0 +1,9 @@
+const Head = () => (
+  <>
+    <title>MetaDroid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/metadroid-fav.png" />
+  </>
+);
+
+export default Head;

app/layout.js

@@ -0,0 +1,13 @@
+import '../styles/globals.css';
+
+const RootLayout = ({ children }) => (
+  <html lang="en">
+    <head>
+      <link rel="preconnect" href="https://stijndv.com" />
+      <link rel="stylesheet" href="https://stijndv.com/fonts/Eudoxus-Sans.css" />
+    </head>
+    <body>{children}</body>
+  </html>
+);
+
+export default RootLayout;

app/page.js

@@ -0,0 +1,29 @@
+import { Footer, Navbar } from '../components';
+import { About, Explore, Feedback, GetStarted, Hero, Insights, WhatsNew, World } from '../sections';
+
+const Page = () => (
+  <div className="bg-primary-black overflow-hidden">
+    <Navbar />
+    <Hero />
+    <div className="relative">
+      <About />
+      <div className="gradient-03 z-0" />
+      <Explore />
+    </div>
+
+    <div className="relative">
+      <GetStarted />
+      <div className="gradient-04 z-0" />
+      <WhatsNew />
+    </div>
+    <World />
+    <div className="relative">
+      <Insights />
+      <div className="gradient-04 z-0" />
+      <Feedback />
+    </div>
+    <Footer />
+  </div>
+);
+
+export default Page;

components/CustomTexts.jsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { textContainer, textVariant2 } from '../utils/motion';
+
+export const TypingText = ({ title, textStyles }) => (
+  <motion.p
+    variants={textContainer}
+    className={`font-normal text-[14px] text-secondary-white ${textStyles}`}
+  >
+    {Array.from(title).map((letter, i) => (
+      <motion.span variants={textVariant2} key={i}>
+        {letter === ' ' ? '\u00A0' : letter}
+      </motion.span>
+    ))}
+  </motion.p>
+
+);
+
+export const TitleText = ({ title, textStyles }) => (
+  <motion.h2
+    variants={textVariant2}
+    initial="hidden"
+    whileInView="show"
+    className={`mt-[8px] font-bold md:text-[64px] text-[40px] text-white ${textStyles}`}
+  >{title}
+  </motion.h2>
+);

components/ExploreCard.jsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import styles from '../styles';
+import { fadeIn } from '../utils/motion';
+
+const ExploreCard = ({ id, imgUrl, title, index, active, handleClick }) => (
+  <motion.div
+    variants={fadeIn('right', 'spring', index * 0.5, 0.75)}
+    className={`relative ${
+      active === id ? 'lg:flex-[3.5] flex-[10]' : 'lg:flex-[0.5] flex-[2]'
+    } flex items-center justify-center min-w-[170px] h-[700px] transition-[flex] duration-[0.7s] ease-out-flex cursor-pointer`}
+    onClick={() => handleClick(id)}
+  >
+    <img src={imgUrl} alt={title} className="absolute w-full h-full object-cover rounded-[24px]" />
+
+    { active !== id ? (
+      <h3 className="font-semibold sm:text-[26px] text-[18px] text-white absolute z-0 lg:bottom-20 lg:rotate-[-90deg] lg:origin-[0,0]">
+        {title}
+      </h3>
+    ) : (
+      <div className="absolute bottom-0 p-8 justify-start w-full flex-col bg-[rgba(0,0,0,0.5)] rounded-b-[24px]">
+        <div className={`${styles.flexCenter} w-[60px] h-[60px] glassmorphism mb-[16px] rounded-[12px]`}>
+          <img src="/headset.svg" alt="headset" className="w-1/2 h-1/2 object-cotain" />
+        </div>
+        <p className="font-normal text-[16px] leading-[20.16px] text-white uppercase">Enter Metaverse</p>
+        <h2 className="mt-[24px] font-semibold sm:text-[32px] text-[24px] text-white">
+          {title}
+        </h2>
+      </div>
+    )}
+  </motion.div>
+
+);
+
+export default ExploreCard;

components/Footer.jsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { socials } from '../constants';
+
+import styles from '../styles';
+import { footerVariants } from '../utils/motion';
+
+const Footer = () => (
+  <motion.footer
+    variants={footerVariants}
+    initial="hidden"
+    whileInView="show"
+    className={`${styles.xPaddings} py-8 relative`}
+  >
+    <div className="footer-gradient" />
+    <div className={`${styles.innerWidth} mx-auto flex flex-col gap-8`}>
+      <div className="flex items-center justify-between flex-wrap gap-5">
+        <h4 className="font-bold md:text-[64px] text-[44px] text-white">
+          Enter the Metaverse
+        </h4>
+        <button type="button" className="flex items-center h-fit py-4 px-6 bg-[#25618B] rounded-[32px] gap-[12px]">
+          <img
+            src="/headset.svg"
+            alt="headset"
+            className="w-[24px] h-[24px] object-contain"
+          />
+          <span className="font-normal text-[16px] text-white">
+            Enter Metaverse
+          </span>
+        </button>
+      </div>
+
+      <div className="flex flex-col">
+        <div className="mb-[50px] h-[2px] bg-white opacity-10" />
+
+        <div className="flex items-center justify-between flex-wrap gap-4">
+          <h4 className="font-extrabold text-[24px] text-white">
+            METADROID
+          </h4>
+          <p className="font-normal text-[14px] text-white opacity-50">
+            Copyright © 2021 - 2022 Metadroid. All rights reserved.
+          </p>
+
+          <div className="flex gap-4">
+            {socials.map((social) => (
+              <a key={social.name} href={social.link}>
+                <img
+                  src={social.url}
+                  alt={social.name}
+                  className="w-[24px] h-[24px] object-contain"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  </motion.footer>
+);
+
+export default Footer;