feat: login screen (#6)

- Added a new login screen (only design)
- Fixed some styles

src/app/components/BackgroundImage/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+
+interface Props {
+  image: string | StaticImport;
+  alt: string;
+}
+
+const BackgroundImage = ({ image, alt }: Props) => {
+  return (
+    <Image
+      priority
+      alt={alt}
+      src={image}
+      sizes={"100vw"}
+      quality={100}
+      fill={true}
+      className="transition-opacity opacity-[0] duration-[1s]"
+      style={{ objectFit: "cover" }}
+      onLoadingComplete={(image) => {
+        image.classList.remove("opacity-[0]");
+      }}
+    />
+  );
+};
+
+export default BackgroundImage;

src/app/components/BondscapeLogo/BondscapeLogo.tsx

@@ -4,7 +4,12 @@ import Image from "next/image";
 const BondscapeLogo = () => {
   return (
     <div className="w-[123px] h-[28px] md:w-[175px] md:h-[40px] relative">
-      <Image alt={"Bondscape logo"} src={"/bondscapeLogo.png"} fill />
+      <Image
+        alt={"Bondscape logo"}
+        src={"/bondscapeLogo.png"}
+        fill
+        quality={75}
+      />
     </div>
   );
 };

src/app/components/NavigationBar.tsx

@@ -1,31 +1,39 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
 import BondscapeLogo from "@/components/BondscapeLogo/BondscapeLogo";
+import useBreakpoints from "@/hooks/useBreakpoints";
 
 const NavigationBar = () => {
+  const [isMobile, isMd, isLg, isXl] = useBreakpoints();
   const [colorChange, setColorChange] = useState(false);
-  const changeNavbarColor = () => {
-    console.log(window.scrollY);
-    if (window.scrollY >= 20) {
+  const changeNavbarColor = useCallback(() => {
+    if (window.scrollY >= 20 && !isLg && !isXl) {
       setColorChange(true);
     } else {
       setColorChange(false);
     }
-  };
+  }, [isLg, isXl]);
 
   useEffect(() => {
     window.addEventListener("scroll", changeNavbarColor);
-  }, []);
+  }, [changeNavbarColor]);
   return (
     <nav
       className={`${
         colorChange ? "bg-bondscape-background-primary" : "bg-transparent"
-      } transition-colors ease-in-out relative flex items-center w-full h-navbar-mobile md:h-navbar-md lg:h-navbar-lg xl:h-navbar-xl px-xMobile md:px-xMd lg:px-xLg xl:px-xXl`}
+      } transition-colors ease-in-out sticky flex justify-between items-center w-full h-navbar-mobile md:h-navbar-md lg:h-navbar-lg xl:h-navbar-xl px-xMobile md:px-xMd lg:px-xLg xl:px-xXl`}
     >
       <Link href="/">
         <BondscapeLogo />
       </Link>
+      {process.env.NODE_ENV === "development" && !(isMobile || isMd) && (
+        <Link href={"/creator/login"}>
+          <div className="text-white font-semibold">
+            <button>Login</button>
+          </div>
+        </Link>
+      )}
     </nav>
   );
 };

src/app/creator/login/layout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "../../globals.css";
+import DefaultSEO from "@/seo";
+
+export const metadata = {
+  ...DefaultSEO,
+  title: "Login | Bondscape",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div>{children}</div>;
+}

src/app/creator/login/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+import React from "react";
+import MainLayout from "@/layouts/MainLayout";
+import Image from "next/image";
+import heroImage from "../../../../public/bondscape-home-bg.png";
+import overlay from "../../../../public/login-overlay-bg.png";
+import useBreakpoints from "@/hooks/useBreakpoints";
+
+export default function Login() {
+  const [isMobile, isMd] = useBreakpoints();
+
+  if (isMobile || isMd) {
+    return (
+      <div className="flex flex-1 h-screen justify-center items-center px-xMobile">
+        <div className="text-white">
+          This page is not supported on mobile devices. Please use a desktop
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <MainLayout
+      backgroundImage={true}
+      backgroundImageSrc={heroImage}
+      backgroundOverlay={overlay}
+    >
+      <div className="relative w-full h-screen flex justify-center">
+        <div className="flex justify-center">
+          <div className="w-[27rem] flex flex-col items-center gap-8 mt-48">
+            <Image
+              priority
+              alt={"Bondscape Logo with text"}
+              src={"/bondscapeLogoWithIcon.png"}
+              width={160}
+              height={146}
+            />
+            <p className="text-white font-light text-[16px] leading-[24px] pb-[48px]">
+              Create real bonds with engaging event experiences
+            </p>
+            <div className="flex flex-col gap-[24px]">
+              <button
+                className="flex flex-row flex-1 py-[6px] w-[420px] rounded-[100px] justify-center items-center bg-white hover:bg-[#EDEDED] transition-colors ease-in-out duration-300 cursor-pointer bondscape-box-shadow-medium"
+                onClick={() => console.log("test")}
+              >
+                <Image
+                  alt={"Google login"}
+                  src={"/googleLoginIcon.png"}
+                  width={40}
+                  height={40}
+                />
+                <p className="text-bondscape-text_neutral_800 font-semibold text-[16px] leading-[24px]">
+                  Continue with Google
+                </p>
+              </button>
+              <button
+                className="flex flex-row flex-1 py-[6px] w-[420px] rounded-[100px] justify-center items-center bg-white hover:bg-[#EDEDED] transition-colors ease-in-out duration-300 cursor-pointer bondscape-box-shadow-medium"
+                onClick={() => console.log("test")}
+              >
+                <Image
+                  alt={"Google login"}
+                  src={"/appleLoginIcon.png"}
+                  width={40}
+                  height={40}
+                />
+                <p className="text-bondscape-text_neutral_800 font-semibold text-[16px] leading-[24px]">
+                  Continue with Apple
+                </p>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </MainLayout>
+  );
+}

src/app/globals.css

@@ -17,3 +17,7 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+.bondscape-box-shadow-medium {
+  box-shadow: 0 3px 20px -4px rgba(10, 10, 10, 0.10);
+}

src/app/hooks/useBreakpoints.ts

@@ -23,7 +23,6 @@ const useBreakpoints = () => {
     if (isBreakpointReady || !(isMobile || isMd || isLg || isXl)) {
       return;
     }
-    console.log("passato");
     setIsBreakpointReady(true);
   }, [isMobile, isMd, isLg, isXl]);
 

src/app/layouts/MainLayout.tsx

@@ -1,34 +1,36 @@
 import React from "react";
 import NavigationBar from "@/components/NavigationBar";
-import Image from "next/image";
 import heroImage from "../../../public/bondscape-home-bg-masked.png";
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+import BackgroundImage from "@/components/BackgroundImage";
 
 export interface MainLayoutProps {
   readonly backgroundImage?: boolean;
+  readonly backgroundImageSrc?: StaticImport;
+  readonly backgroundOverlay?: StaticImport;
   readonly children: React.ReactNode;
 }
 
 const MainLayout = (props: MainLayoutProps) => {
-  const { children, backgroundImage } = props;
+  const { children, backgroundImage, backgroundImageSrc, backgroundOverlay } =
+    props;
 
   return (
     <div className={"relative"}>
       <div className={`sticky top-0 w-full z-20`}>
-        <div className="relative w-full min-w-[375px] left-1/2 -translate-x-1/2">
+        <div className="relative w-full min-w-[375px]">
           <NavigationBar />
         </div>
       </div>
       {backgroundImage && (
-        <Image
-          priority
-          alt={"phone mockup"}
-          src={heroImage}
-          sizes={"100vw"}
-          quality={100}
-          fill={true}
-          style={{ objectFit: "cover" }}
+        <BackgroundImage
+          image={backgroundImageSrc || heroImage}
+          alt={"Bondscape background"}
         />
       )}
+      {backgroundOverlay && (
+        <BackgroundImage image={backgroundOverlay} alt={"Bondscape overlay"} />
+      )}
       <main className="w-full">{children}</main>
     </div>
   );

src/app/page.tsx

@@ -16,6 +16,7 @@ export default function Home() {
         <div className="flex flex-col lg:flex-row items-center relative h-full md:h-screen md:justify-center mt-16 md:mt-0">
           <div className="flex w-[280px] h-[382px] md:w-[350px] md:h-[478px] lg:w-[438px] lg:h-[597px] relative">
             <Image
+              priority
               quality={100}
               alt={"phone mockup"}
               fill

tailwind.config.ts

@@ -77,6 +77,7 @@ const config: Config = {
           text_neutral_400: "#CDCDCD",
           text_neutral_500: "#B3B3B3",
           text_neutral_600: "#8F8F8F",
+          text_neutral_800: "#3B3B3B",
           textGray: "#8F8F8F",
           background: { primary: "#010308" },
         },