Hero (#4)

* Hero

* Put navbar on layout

* Fix minor error

app/page.tsx

@@ -1,3 +1,9 @@
+import Hero from "@/components/Hero";
+
 export default function Home() {
-  return <main className=""></main>;
+  return (
+    <main className="bg-background px-20">
+      <Hero />
+    </main>
+  );
 }

components/Hero.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import logo from "@/public/cesium.svg";
+
+export default function Hero() {
+  return (
+    <div className="mt-32 flex items-center justify-center gap-36">
+      <div className="w-[530px] flex-col items-center justify-center">
+        <div className="mb-6 text-8xl font-semibold">CeSIUM</div>
+        <div className="text-2xl font-semibold">
+          Centro de Estudante de Engenharia Informática da Universidade do Minho
+        </div>
+      </div>
+      <div className="relative">
+        <Image src={logo} alt="" width={300} height={343} priority />
+        <Image
+          className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-150 transform rounded-lg object-cover opacity-40 blur-3xl filter"
+          src={logo}
+          alt=""
+          width={300}
+          height={343}
+          priority
+        />
+      </div>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -1,14 +1,14 @@
 import Image from "next/image";
 
-import logo from "@/public/cesium.png";
+import logo from "@/public/cesium-lettering.png";
 import Link from "next/link";
 
 const navbar: string[] = ["HOME", "TEAM", "LOGS", "EVENTS", "ABOUT US"];
 
 export default function Navbar() {
   return (
-    <div className="flex items-center justify-between px-16">
-      <Image src={logo} alt="" width={150} height={200} priority unoptimized />
+    <div className="flex items-center justify-between px-20">
+      <Image src={logo} alt="" width={150} height={200} priority />
       <div className="flex w-[50%] items-center justify-between">
         {navbar.map((title) => (
           <Link

tailwind.config.js

@@ -18,7 +18,7 @@ module.exports = {
       "5xl": ["3rem", { lineHeight: "3.5rem" }],
       "6xl": ["4rem", { lineHeight: "1" }],
       "7xl": ["5rem", { lineHeight: "1" }],
-      "8xl": ["6rem", { lineHeight: "1" }],
+      "8xl": ["7rem", { lineHeight: "1" }],
       "9xl": ["8rem", { lineHeight: "1" }],
     },
     extend: {
@@ -40,6 +40,7 @@ module.exports = {
           800: "#ED8661",
           900: "#ED8661",
         },
+        background: "EDE9E8",
       },
     },
   },