dapperAuteur/layout.js & login.js

## layout.js & login.js
// first file is layout.js
// authapp/components/layout.js
import styles from "./../../styles/Layout.module.css"

export default function Layout({children}) {
  return (
    <div className="flex h-screen bg-blue-400">
      <div className="m-auto bg-slate-50 rounded-md w-3/5 h-3/4 grid lg:grid-cols-2">
        <div className={styles.imgStyle}>
          <div className={styles.cartoonImg}></div>
          <div className={styles.cloud_one}></div>
          <div className={styles.cloud_two}></div>
        </div>
        <div className="right flex flex-col justify-evenly">
          <div className="text-center py-10">
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

// authapp/pages/login.js
import Head from "next/head"
import Layout from "../components/layout/layout"
import Link from "next/link"

export default function Login() {
  return (
    <Layout>
      <Head>
        <title>Login</title>
      </Head>
      <section className="w-3/4 mx-auto flex flex-col gap-10">
        <div className="title">
          <h1 className="text-gray-800 text-4xl font-bold py-4">Explore</h1>
          <p className="w-3/4 mx-auto text-gray-400">Check out the app.</p>
        </div>
        {/* form */}
        <form className="flex flex-col gap-5">
          <div className="input-group">
            <input
              type="email"
              name="email"
              placeholder="email"
              />
          </div>
          <div className="input-group">
            <input
              type="password"
              name="password"
              placeholder="password"
              />
          </div>
          {/* login buttons */}
          <div className="input-button">
            <button type="submit">
              Login
            </button>
          </div>
          <div className="input-button">
          <button type="submit">
              Sign In with Google
            </button>
          </div>
          <div className="input-button">
            <button type="submit">
              Sign In with Github
            </button>
          </div>
        </form>
        {/* bottom */}
        <p className="text-center text-gray-400">Don't Have An Account Yet <Link href={'/register'} className="text-blue-700">Sign Up</Link></p>
      </section>
    </Layout>
  )
}
	// first file is layout.js
	// authapp/components/layout.js
	import styles from "./../../styles/Layout.module.css"

	export default function Layout({children}) {
	return (
	<div className="flex h-screen bg-blue-400">
	<div className="m-auto bg-slate-50 rounded-md w-3/5 h-3/4 grid lg:grid-cols-2">
	<div className={styles.imgStyle}>
	<div className={styles.cartoonImg}></div>
	<div className={styles.cloud_one}></div>
	<div className={styles.cloud_two}></div>
	</div>
	<div className="right flex flex-col justify-evenly">
	<div className="text-center py-10">
	{children}
	</div>
	</div>
	</div>
	</div>
	)
	}

	// authapp/pages/login.js
	import Head from "next/head"
	import Layout from "../components/layout/layout"
	import Link from "next/link"

	export default function Login() {
	return (
	<Layout>
	<Head>
	<title>Login</title>
	</Head>
	<section className="w-3/4 mx-auto flex flex-col gap-10">
	<div className="title">
	<h1 className="text-gray-800 text-4xl font-bold py-4">Explore</h1>
	<p className="w-3/4 mx-auto text-gray-400">Check out the app.</p>
	</div>
	{/* form */}
	<form className="flex flex-col gap-5">
	<div className="input-group">
	<input
	type="email"
	name="email"
	placeholder="email"
	/>
	</div>
	<div className="input-group">
	<input
	type="password"
	name="password"
	placeholder="password"
	/>
	</div>
	{/* login buttons */}
	<div className="input-button">
	<button type="submit">
	Login
	</button>
	</div>
	<div className="input-button">
	<button type="submit">
	Sign In with Google
	</button>
	</div>
	<div className="input-button">
	<button type="submit">
	Sign In with Github
	</button>
	</div>
	</form>
	{/* bottom */}
	<p className="text-center text-gray-400">Don't Have An Account Yet <Link href={'/register'} className="text-blue-700">Sign Up</Link></p>
	</section>
	</Layout>
	)
	}