/Components/Marketing
Full Screen SignUp
Modern and Beautiful full screen SignUp form with HextaUI
Preview
Design and dev partner for startups and founders.
Get Started
Welcome to HextaStudio — Let's get started
This component is available on 21st.dev.
Code
"use client";
import Link from "next/link";
import { SunIcon as Sunburst } from "lucide-react";
import { useState } from "react";
const FullScreenSignup = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [emailError, setEmailError] = useState("");
const [passwordError, setPasswordError] = useState("");
const [submitted, setSubmitted] = useState(false);
const validateEmail = (value: string) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
};
const validatePassword = (value: string) => {
return value.length >= 8;
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
let valid = true;
if (!validateEmail(email)) {
setEmailError("Please enter a valid email address.");
valid = false;
} else {
setEmailError("");
}
if (!validatePassword(password)) {
setPasswordError("Password must be at least 8 characters.");
valid = false;
} else {
setPasswordError("");
}
setSubmitted(true);
if (valid) {
// Submission logic goes here
console.log("Form submitted!");
console.log("Email:", email);
alert("Form submitted!");
setEmail("");
setPassword("");
setSubmitted(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center overflow-hidden p-4l">
<div className=" w-full relative max-w-5xl overflow-hidden flex flex-col md:flex-row">
<div className="w-full h-full z-2 absolute bg-linear-to-t from-transparent to-black"></div>
<div className="flex absolute z-2 overflow-hidden backdrop-blur-2xl ">
<div className="h-[40rem] z-2 w-[4rem] bg-linear-90 from-[#ffffff00] via-[#000000] via-[69%] to-[#ffffff30] opacity-30 overflow-hidden"></div>
<div className="h-[40rem] z-2 w-[4rem] bg-linear-90 from-[#ffffff00] via-[#000000] via-[69%] to-[#ffffff30] opacity-30 overflow-hidden"></div>
<div className="h-[40rem] z-2 w-[4rem] bg-linear-90 from-[#ffffff00] via-[#000000] via-[69%] to-[#ffffff30] opacity-30 overflow-hidden"></div>
<div className="h-[40rem] z-2 w-[4rem] bg-linear-90 from-[#ffffff00] via-[#000000] via-[69%] to-[#ffffff30] opacity-30 overflow-hidden"></div>
<div className="h-[40rem] z-2 w-[4rem] bg-linear-90 from-[#ffffff00] via-[#000000] via-[69%] to-[#ffffff30] opacity-30 overflow-hidden"></div>
<div className="h-[40rem] z-2 w-[4rem] bg-linear-90 from-[#ffffff00] via-[#000000] via-[69%] to-[#ffffff30] opacity-30 overflow-hidden"></div>
</div>
<div className="w-[15rem] h-[15rem] bg-orange-500 absolute z-1 rounded-full bottom-0"></div>
<div className="w-[8rem] h-[5rem] bg-white absolute z-1 rounded-full bottom-0"></div>
<div className="w-[8rem] h-[5rem] bg-white absolute z-1 rounded-full bottom-0"></div>
<div className="bg-black text-gray-100 p-8 md:p-12 md:w-1/2 relative rounded-bl-3xl overflow-hidden">
<h1 className="text-2xl md:text-3xl font-medium leading-tight z-10 tracking-tight relative">
Design and dev partner for startups and founders.
</h1>
</div>
<div className="p-8 md:p-12 md:w-1/2 flex flex-col bg-gray-100 z-99 text-black ">
<div className="flex flex-col items-left mb-8">
<div className="text-orange-500 mb-4">
<Sunburst className="h-10 w-10" />
</div>
<h2 className="text-3xl font-medium mb-2 tracking-tight">
Get Started
</h2>
<p className="text-left opacity-80">
Welcome to HextaStudio — Let's get started
</p>
</div>
<form
className="flex flex-col gap-4"
onSubmit={handleSubmit}
noValidate
>
<div>
<label htmlFor="email" className="block text-sm">
Your email
</label>
<input
type="email"
id="email"
placeholder="hi@hextastudio.in"
className={`text-sm w-full py-2 px-3 border rounded-lg focus:outline-none focus:ring-1 focus:ring-orange-500 bg-white ${
emailError ? "border-red-500" : "border-gray-300"
}`}
value={email}
onChange={(e) => setEmail(e.target.value)}
aria-invalid={!!emailError}
aria-describedby="email-error"
/>
{emailError && (
<p id="email-error" className="text-red-500 text-xs mt-1">
{emailError}
</p>
)}
</div>
<div>
<label htmlFor="password" className="block text-sm">
Create new password
</label>
<input
type="password"
id="password"
className={`text-sm w-full py-2 px-3 border rounded-lg focus:outline-none focus:ring-1 focus:ring-orange-500 bg-white ${
passwordError ? "border-red-500" : "border-gray-300"
}`}
value={password}
onChange={(e) => setPassword(e.target.value)}
aria-invalid={!!passwordError}
aria-describedby="password-error"
/>
{passwordError && (
<p id="password-error" className="text-red-500 text-xs mt-1">
{passwordError}
</p>
)}
</div>
<button
type="submit"
className="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
>
Create a new account
</button>
<div className="text-center text-gray-500 text-sm">
Already have account?{" "}
<Link href="/login" className="text-black font-medium underline">
Login
</Link>
</div>
</form>
</div>
</div>
</div>
);
};
Usage
import FullScreenSignup from "@/components/library/marketing/FullScreenSignup";
const MyComponent = () => {
return <FullScreenSignup />;
};
Edit on GitHub
Last updated on