Merge pull request #6 from novaardiansyah/dev

First Release

components/CustomTexts.jsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { motion } from 'framer-motion'
-import { textContainer, textVariant2 } from '../utils/motion'
+import { motion } from 'framer-motion';
+import { textContainer, textVariant2 } from '../utils/motion';
 
 export const TypingText = ({ title, textStyles }) => (
   <motion.p

components/ExploreCard.jsx

@@ -40,4 +40,4 @@ const ExploreCard = ({ id, imgUrl, title, index, active, handleClick }) => (
   </motion.div>
 );
 
-export default ExploreCard
+export default ExploreCard;

components/Footer.jsx

@@ -1,14 +1,14 @@
-'use client'
+'use client';
 
-import { motion } from 'framer-motion'
-import { socials } from '../constants'
-import styles from '../styles'
+import { motion } from 'framer-motion';
+import { socials } from '../constants';
+import styles from '../styles';
 
-import { footerVariants } from '../utils/motion'
+import { footerVariants } from '../utils/motion';
 
 const Footer = () => {
-  let year = new Date().getFullYear()
-  if (year !== 2023) year = `2023-${year}`
+  let year = new Date().getFullYear();
+  if (year !== 2023) year = `2023-${year}`;
 
   return (
     <motion.footer
@@ -33,9 +33,8 @@ const Footer = () => {
 
           <div className="flex flex-wrap items-center justify-between gap-4">
             <h4 className="font-extrabold text-[24px] text-white">METAVERSUS</h4>
-
             <p className="font-normal text-[14px] text-white opacity-50">
-              Copyright &copy; {year} <a href="https://novaardiansyah.site/" target="_blank">Nova Ardiansyah</a>. All rights reserved
+              Copyright &copy; {year} <a href="https://novaardiansyah.site/" target="_blank" rel="noreferrer">Nova Ardiansyah</a>. All rights reserved
             </p>
 
             <div className="flex gap-4">
@@ -49,7 +48,7 @@ const Footer = () => {
         </div>
       </div>
     </motion.footer>
-  )
-}
+  );
+};
 
 export default Footer;

components/InsightCard.jsx

@@ -1,27 +1,25 @@
 'use client';
 
-import { motion } from 'framer-motion'
-import { fadeIn } from '../utils/motion'
+import { motion } from 'framer-motion';
+import { fadeIn } from '../utils/motion';
 
-const InsightCard = ({ imgUrl, title, subtitle, index }) => {
-  return (
-    <motion.div
-      variants={fadeIn('up', 'spring', index * 0.5, 1)}
-      className="flex md:flex-row flex-col gap-4"
-    >
-      <img src={imgUrl} alt={`planet-${index}`} className="md:w-[278px] w-full h-[250px] rounded-[32px] object-cover" />
-      <div className="w-full flex justify-between items-center">
-        <div className="flex flex-col flex-1 md:ml-[62px] max-w-[650px]">
-          <h4 className="font-normal lg:text-[42px] text-[26px] text-white">{title}</h4>
-          <p className="mt-[16px] font-normal lg:text-[20px] text-[14px] text-secondary-white">{subtitle}</p>
-        </div>
+const InsightCard = ({ imgUrl, title, subtitle, index }) => (
+  <motion.div
+    variants={fadeIn('up', 'spring', index * 0.5, 1)}
+    className="flex md:flex-row flex-col gap-4"
+  >
+    <img src={imgUrl} alt={`planet-${index}`} className="md:w-[278px] w-full h-[250px] rounded-[32px] object-cover" />
+    <div className="w-full flex justify-between items-center">
+      <div className="flex flex-col flex-1 md:ml-[62px] max-w-[650px]">
+        <h4 className="font-normal lg:text-[42px] text-[26px] text-white">{title}</h4>
+        <p className="mt-[16px] font-normal lg:text-[20px] text-[14px] text-secondary-white">{subtitle}</p>
+      </div>
 
-        <div className="lg:flex hidden items-center justify-center w-[100px] h-[100px] rounded-full bg-transparent border-[1px] border-white">
-          <img src="/arrow.svg" alt="arrow" className="w-[40%] h-[40%] object-contain" />
-        </div>
+      <div className="lg:flex hidden items-center justify-center w-[100px] h-[100px] rounded-full bg-transparent border-[1px] border-white">
+        <img src="/arrow.svg" alt="arrow" className="w-[40%] h-[40%] object-contain" />
       </div>
-    </motion.div>
-  )
-};
+    </div>
+  </motion.div>
+);
 
 export default InsightCard;

components/Navbar.jsx

@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import { motion } from 'framer-motion'
-import styles from '../styles'
+import { motion } from 'framer-motion';
+import styles from '../styles';
 
-import { navVariants } from '../utils/motion'
+import { navVariants } from '../utils/motion';
 
 const Navbar = () => (
   <motion.nav

components/NewFeatures.jsx

@@ -1,16 +1,14 @@
-import styles from '../styles'
+import styles from '../styles';
 
-const NewFeatures = ({ imgUrl, title, subtitle }) => {
-  return (
-    <div className="flex flex-col flex-1 sm:max-w-[250px] min-w-[210px]">
-      <div className={`${styles.flexCenter} w-[70px] h-[70px] rounded-[24px] bg-[#323F5D]`}>
-        <img src={imgUrl} alt={title} className="w-1/2 h-1/2 object-contain" />
-      </div>
-
-      <h1 className="mt-[26px] font-bold text-[24px] leading-[30px] text-white">{title}</h1>
-      <p className="flex-1 mt-[16px] font-normal text-[18px] text-[#B0B0B0] leading-[32px]">{subtitle}</p>
+const NewFeatures = ({ imgUrl, title, subtitle }) => (
+  <div className="flex flex-col flex-1 sm:max-w-[250px] min-w-[210px]">
+    <div className={`${styles.flexCenter} w-[70px] h-[70px] rounded-[24px] bg-[#323F5D]`}>
+      <img src={imgUrl} alt={title} className="w-1/2 h-1/2 object-contain" />
     </div>
-  )
-}
+
+    <h1 className="mt-[26px] font-bold text-[24px] leading-[30px] text-white">{title}</h1>
+    <p className="flex-1 mt-[16px] font-normal text-[18px] text-[#B0B0B0] leading-[32px]">{subtitle}</p>
+  </div>
+);
 
 export default NewFeatures;

components/StartSteps.jsx

@@ -1,4 +1,4 @@
-import styles from '../styles'
+import styles from '../styles';
 
 const StartSteps = ({ number, text }) => (
   <div className={`${styles.flexCenter} flex-row`}>

next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
-    appDir: true,
+    appDir: false,
   },
 };
 

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "next start",
     "lint": "next lint"
   },

pages/_app.js

@@ -0,0 +1,18 @@
+import Head from 'next/head';
+
+import '../styles/globals.css';
+
+const MyApp = ({ Component, pageProps }) => (
+  <>
+    <Head>
+      <title>Metaversus</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="icon" href="/favicon.ico" />
+      <link rel="preconnect" href="https://stijndv.com" />
+      <link rel="stylesheet" href="https://stijndv.com/fonts/Eudoxus-Sans.css" />
+    </Head>
+    <Component {...pageProps} />
+  </>
+);
+
+export default MyApp;

pages/index.js

@@ -0,0 +1,28 @@
+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;