Skip to content

Commit

Permalink
Merge pull request #15 from jchirch/login-page-style-1
Browse files Browse the repository at this point in the history 
Login page style 1
  • Loading branch information
@jchirch
jchirch authored Jan 21, 2025
2 parents 1c24d52 + b4e5908 commit 19bf978
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 117 deletions.
Binary file added public/latticebg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
166 changes: 49 additions & 117 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,62 @@
'use client';

import './plasma.css'; // Import the styles
// import './plasma.css'; // Import the styles

export default function PlasmaBackgroundPage() {
export default function loginPage() {
return (
<div className="wrapper">
<div className="login-container">
<h1 className="text-white">Welcome Back</h1>
<form className="login-form">
<div
className="pageWrapper bg-cover w-screen h-screen flex flex-col items-center justify-center"
style={{ backgroundImage: "url('/latticebg.jpg')" }}
>
<h1 className="text-white font-extrabold text-4xl p-5 mb-10 hover:scale-150 duration-500">Lattice Code</h1>

<h1 className="text-white font-extrabold text-4xl p-5 mb-10 hover:scale-125 duration-300">Your learning should be as unique as you are.</h1>
<div
className="loginContainer bg-black w-[30%] pt-8 pb-8 px-5 text-center rounded-lg shadow-none transition-shadow duration-300 cursor-pointer hover:shadow-lg hover:shadow-teal-300"
>
<h2 className="text-white text-2xl font-bold mb-4 hover:text-teal-400 transition">Welcome Back</h2>
<form className="space-y-4">
<div className="form-group">
<label htmlFor="email" className="text-white">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required />
<label htmlFor="email" className="block text-left text-white font-medium">
Email
</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
required
className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-teal-400"
/>
</div>
<div className="form-group">
<label htmlFor="password" className="text-white">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required />
<label htmlFor="password" className="block text-left text-white font-medium">
Password
</label>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
required
className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-teal-400"
/>
</div>
<button type="submit" className="login-button">Log In</button>
<button
type="submit"
className="w-full bg-teal-500 text-white font-semibold py-2 rounded hover:bg-red-600 transition"
>
Log In
</button>
<h3 className="text-white text-2xl font-bold mb-4">or</h3>
<button
type="submit"
className="w-full bg-teal-500 text-white font-semibold py-2 rounded hover:bg-red-600 transition"
>
Create New Account
</button>
</form>
</div>
{/* <div className="gradient gradient-1"></div>
<div className="gradient gradient-2"></div>
<div className="gradient gradient-3"></div> */}
</div>
);
}

// import Image from "next/image";

// export default function Home() {
// return (
// <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
// <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
// <Image
// className="dark:invert"
// src="/next.svg"
// alt="Next.js logo"
// width={180}
// height={38}
// priority
// />
// <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
// <li className="mb-2">
// Get started by doing a kickflip{" "}
// <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
// src/app/page.tsx
// </code>
// .
// </li>
// <li>Save and see your changes instantly.</li>
// </ol>

// <div className="flex gap-4 items-center flex-col sm:flex-row">
// <a
// className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
// href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
// target="_blank"
// rel="noopener noreferrer"
// >
// <Image
// className="dark:invert"
// src="/vercel.svg"
// alt="Vercel logomark"
// width={20}
// height={20}
// />
// Deploy now
// </a>
// <a
// className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
// href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
// target="_blank"
// rel="noopener noreferrer"
// >
// Read our docs
// </a>
// </div>
// </main>
// <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
// <a
// className="flex items-center gap-2 hover:underline hover:underline-offset-4"
// href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
// target="_blank"
// rel="noopener noreferrer"
// >
// <Image
// aria-hidden
// src="/file.svg"
// alt="File icon"
// width={16}
// height={16}
// />
// Learn
// </a>
// <a
// className="flex items-center gap-2 hover:underline hover:underline-offset-4"
// href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
// target="_blank"
// rel="noopener noreferrer"
// >
// <Image
// aria-hidden
// src="/window.svg"
// alt="Window icon"
// width={16}
// height={16}
// />
// Examples
// </a>
// <a
// className="flex items-center gap-2 hover:underline hover:underline-offset-4"
// href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
// target="_blank"
// rel="noopener noreferrer"
// >
// <Image
// aria-hidden
// src="/globe.svg"
// alt="Globe icon"
// width={16}
// height={16}
// />
// Go to nextjs.org →
// </a>
// </footer>
// </div>
// );
// }

0 comments on commit 19bf978

Please sign in to comment.