move to app dir

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,26 +1,28 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  experimental: {
+    appDir: true,
+  },
   async redirects() {
     return [
       {
-        source: '/',
-        destination: '/coming-soon',
+        source: "/",
+        destination: "/coming-soon",
         permanent: false,
       },
-    ]
+    ];
   },
   async rewrites() {
     return [
-         {
-              source: '/js/script.js',
-              destination: 'https://plausible.io/js/script.js'
-          },
-          {
-              source: '/api/event',
-              destination: 'https://plausible.io/api/event'
-          }
-    ]
-  }
-
-}
+      {
+        source: "/js/script.js",
+        destination: "https://plausible.io/js/script.js",
+      },
+      {
+        source: "/api/event",
+        destination: "https://plausible.io/api/event",
+      },
+    ];
+  },
+};

src/app/coming-soon/page.tsx

@@ -0,0 +1,22 @@
+export default function ComingSoonPage() {
+  return (
+    <>
+      <span className="mix-blend-color-burn bg-red-400/70 rounded-[100px] gate-open-top" />
+      <span className="mix-blend-color-burn bg-green-400/70 rounded-[100px] gate-open-bottom" />
+      <span className="mix-blend-color-burn bg-purple-400/70 rounded-[100px] gate-open-right" />
+      <span className="mix-blend-color-burn bg-amber-400/70 rounded-[100px] gate-open-left" />
+      <div className="bg-white/90 max-w-[95%] mx-auto relative z-20 p-20 rounded-lg">
+        <span className="shadow-lg mix-blend-darken border-entry-top bg-red-200 shadow-red-200" />
+        <span className=" shadow-lg mix-blend-darken border-entry-bottom bg-purple-200 shadow-purple-200" />
+        <span className="shadow-lg mix-blend-darken border-entry-right bg-green-200 shadow-green-200" />
+        <span className="shadow-lg mix-blend-darken border-entry-left bg-amber-200 shadow-amber-200" />
+        <h1 className="text-gray-800/80 font-semibold font-brand text-7xl md:text-9xl text-center leading-tight">
+          Arthouse
+        </h1>
+        <h3 className="text-gray-800/80 !leading-7 text-xl md:text-2xl text-center font-regular font-body">
+          A digital product studio <br /> based in Vienna.
+        </h3>
+      </div>
+    </>
+  );
+}

styles/globals.css → src/app/globals.css

@@ -51,6 +51,9 @@
     animation-duration: 2s;
     animation-fill-mode: forwards;
     animation-timing-function: ease-out;
+    will-change: transform, filter;
+    contain: strict;
+    content-visibility: auto;
     /* animation-iteration-count: infinite;
     animation-direction: alternate; */
   }
@@ -155,6 +158,9 @@
     animation-fill-mode: forwards;
     animation-timing-function: ease-in;
     animation-delay: 250ms;
+    will-change: transform, filter;
+    contain: strict;
+    content-visibility: auto;
     /* animation-iteration-count: infinite;
     animation-direction: alternate; */
   }

src/app/layout.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { Playfair_Display } from "next/font/google";
+import { Metadata } from "next";
+import Script from "next/script";
+
+import "./globals.css";
+
+const playfairDisplay = Playfair_Display({
+  display: "swap",
+  weight: ["400", "700"],
+  variable: "--playfair-display",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Arthouse is coming soon",
+  description: "A digital product studio based in Vienna.",
+  viewport: "width=device-width, initial-scale=1",
+  openGraph: {
+    url: "https://arthouse.is",
+    title: "Arthouse",
+    description: "A digital product studio based in Vienna.",
+    images: [
+      {
+        url: "https://arthouse.is/images/video-cover.png",
+        width: 1200,
+        height: 630,
+        alt: "Arthouse",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+    emails: ["[email protected]"],
+  },
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        ></meta>
+        <Script defer data-domain="arthouse.is" src="/js/script.js"></Script>
+      </head>
+      <body>
+        <main
+          className={`w-screen h-screen z-10 relative flex flex-col items-center justify-center ${playfairDisplay.variable}`}
+        >
+          {children}
+        </main>
+      </body>
+    </html>
+  );
+}

components/layout.tsx → src/app/page.tsx

@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import type { ReactNode } from "react";
 import { Playfair_Display } from "next/font/google";
+import "../../styles/globals.css";
 
 const playfairDisplay = Playfair_Display({
   display: "swap",
@@ -9,23 +10,15 @@ const playfairDisplay = Playfair_Display({
   subsets: ["latin"],
 });
 
-const Layout = ({
-  children,
-  bgClass,
-}: {
-  children: ReactNode;
-  bgClass: string;
-}) => {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <motion.main
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
-      className={`w-screen h-screen z-10 relative flex flex-col items-center justify-center ${playfairDisplay.variable} ${bgClass}`}
+      className={`w-screen h-screen z-10 relative flex flex-col items-center justify-center ${playfairDisplay.variable}`}
     >
       {children}
     </motion.main>
   );
-};
-
-export default Layout;
+}

tailwind.config.js

@@ -1,9 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       fontFamily: {

tsconfig.json

@@ -17,12 +17,18 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"