redesign page

enrych · Jul 10, 2024 · b48fc13 · b48fc13
1 parent 038e0e2
commit b48fc13
Show file tree

Hide file tree

Showing 16 changed files with 86 additions and 100 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/public/assets/brand/dark.png b/public/assets/brand/dark.png
diff --git a/public/assets/brand/light.png b/public/assets/brand/light.png
diff --git a/public/assets/brand/logo_dark.png b/public/assets/brand/logo_dark.png
diff --git a/public/assets/brand/logo_dark_tansparent.png b/public/assets/brand/logo_dark_tansparent.png
diff --git a/public/assets/brand/logo_light.png b/public/assets/brand/logo_light.png
diff --git a/public/assets/brand/logo_light_transparent.png b/public/assets/brand/logo_light_transparent.png
diff --git a/public/assets/fonts/Leixo.ttf b/public/assets/fonts/Leixo.ttf
diff --git a/public/background.jpg b/public/background.jpg
diff --git a/public/bg.mp4 b/public/bg.mp4
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,39 +3,26 @@
 @tailwind utilities;
 
 :root {
-	--foreground-rgb: 0, 0, 0;
-	--background-start-rgb: 214, 219, 220;
-	--background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--foreground-rgb: 255, 255, 255;
-		--background: #18121c;
-	}
+  --foreground: rgb(156 163 175);
+  --background: #121212;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 body {
-	color: rgb(var(--foreground-rgb));
-	background: var(--background);
-	color: #f0f1f5;
-}
-
-::-webkit-scrollbar {
-	width: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-	background: rgba(90, 90, 90);
-	border-radius: 4px;
+  color: var(--foreground);
 }
 
 ::-webkit-scrollbar-track {
-	background: transparent;
+  background: transparent;
 }
 
 @layer utilities {
-	.text-balance {
-		text-wrap: balance;
-	}
+  .text-balance {
+    text-wrap: balance;
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,11 @@
 import type { Metadata } from "next";
-import { Lora } from "next/font/google";
+import { inter, leixo } from "../lib/fonts";
 import "./globals.css";
 
-const lora = Lora({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
   title: "Enrych",
-  description: "Our mission is to empower users like you to have greater control over your experiences and make your time spent more enjoyable.",
+  description:
+    "We're all about making tools and products that help people out and add a bit of fun to life. We build stuff we’d love to use ourselves, aiming to make your day a little easier and a lot more enjoyable.",
 };
 
 export default function RootLayout({
@@ -16,7 +15,20 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={lora.className}>{children}</body>
+      <body className={`${inter.className} ${leixo.variable}`}>
+        <video
+          className="fixed top-0 left-0 object-cover w-screen h-screen object-center"
+          playsInline
+          autoPlay
+          muted
+          loop
+        >
+          <source src="/bg.mp4" type="video/mp4" />
+        </video>
+        <div className="absolute h-screen w-screen overflow-hidden grid grid-rows-1 p-6">
+          {children}
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,54 +1,25 @@
-import Image from "next/image";
-import background from '../../public/background.jpg'
 import Link from "next/link";
 export default function Home() {
   return (
-    <main>
-      <div className="relative min-h-screen w-full overflow-visible">
-        <div>
-          <div className="flex justify-center items-center w-full">
-            <div className="relative overflow-hidden before:absolute before:top-0 before:left-0 before:w-1/5 before:h-full before:bg-inherit before:z-10 before:bg-gradient-to-r before:from-[#18121c] before:to-transparent after:absolute after:top-0 after:right-0 after:w-1/5 after:h-full after:bg-inherit after:z-10 after:bg-gradient-to-l after:from-[#18121c] after:to-transparent">
-              <Image src={background} alt="background" className="relative top-0 w-screen h-auto lg:w-auto lg:h-[85vh]" priority draggable="false" />
-              <div className="absolute bottom-0 left-0 right-0 h-[10%] bg-gradient-to-b from-transparent to-[#18121c] z-10"></div>
-            </div>
-          </div>
+    <>
+      <main className="flex items-center justify-center">
+        <Link href="https://github.com/enrych">
+          <h1 className="text-6xl font-bold font-leixo shadow-md">ENRYCH</h1>
+        </Link>
+      </main>
 
-          <div className="h-[20px] lg:h-[4px]"></div>
-
-          <div className="px-6 flex-grow w-full grid place-content-center gap-12 pb-[140px]">
-            <div className="max-w-[700px] flex flex-col gap-[20px] lg:gap-[25px]">
-              <h1 className="lg:text-3xl text-2xl my-4 animate-[fadeIn_0.5s] leading-[1.8] underline decoration-2 underline-offset-8">For You! Your Way! Always.</h1>
-              <div className="text-left">
-                <span className="text-base my-4 animate-[fadeIn_1.5s]">Our mission is to empower users like you to have greater control over your experiences and make your time spent more enjoyable.</span>
-                <br />
-                <br />
-                <div className="animate-[fadeIn_2.3s] h-[1px] bg-[#DAD6C8]"></div>
-                <ul>
-                  <h2 className="text-[18px] my-4 animate-fadeIn animate-[fadeIn_2.5s]">We are building..</h2>
-                  <li className="before:mr-2 before:content-hyphen before:animate-[fadeIn_2.5s]">
-                    <Link href="https://enrych.github.io/toppings" className="font-bold hover:underline animate-[fadeIn_3s]">Toppings:</Link>
-                    <span className="animate-[fadeIn_3s]"> a browser extension for your web, your way.</span>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="absolute my-4 lg:my-0 bottom-0 w-full h-[60px] flex justify-center items-center">
-          <div>
-            <footer>
-              <div className="grid place-content-center">
-                <div className="grid grid-cols-2 min-[500px]:grid-cols-3 items-center text-center text-xs text-[#DAD6C8] gap-6 ">
-                  <Link className="text-xs" href="/">Enrych</Link>
-                  <Link className="text-xs" href="https://github.com/enrych" target="_blank">GitHub</Link>
-                  <Link className="text-xs" href="mailto:[email protected]">Contact</Link>
-                </div>
-              </div>
-            </footer>
-          </div>
+      <footer>
+        <div className="flex justify-center items-center text-center gap-6 mt-20 lg:m-2">
+          <Link
+            className="text-sm font-medium"
+            href="https://github.com/enrych"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Github
+          </Link>
         </div>
-      </div >
-    </main >
+      </footer>
+    </>
   );
 }
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
@@ -0,0 +1,10 @@
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+
+export const inter = Inter({ subsets: ["latin"] });
+
+export const leixo = localFont({
+  src: "../../public/assets/fonts/Leixo.ttf",
+  display: "swap",
+  variable: "--font-leixo",
+});
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,26 +1,32 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from "tailwindcss";
 
 const config: Config = {
-	content: [
-		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
-	],
-	theme: {
-		extend: {
-			content: {
-				hyphen: "'\u2014'",
-				quote: "'\u201C'",
-			},
-			keyframes: {
-				fadeIn: {
-					'0%': { opacity: '0' },
-					'70%': { opacity: '0' },
-					'100%': { opacity: '1' },
-				},
-			},
-		},
-	},
-	plugins: [],
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        leixo: ["var(--font-leixo)", "sans-serif"],
+      },
+      content: {
+        hyphen: "'\u2014'",
+        quote: "'\u201C'",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "70%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+      },
+      objectPosition: {
+        center: "50% 50%",
+      },
+    },
+  },
+  plugins: [],
 };
 export default config;