Components
Loading preview...
sign in log in signin login
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/sign-inimport { SignInPage, Testimonial } from "@/components/ui/sign-in";
const sampleTestimonials: Testimonial[] = [
{
avatarSrc: "https://randomuser.me/api/portraits/women/57.jpg",
name: "Sarah Chen",
handle: "@sarahdigital",
text: "Amazing platform! The user experience is seamless and the features are exactly what I needed."
},
{
avatarSrc: "https://randomuser.me/api/portraits/men/64.jpg",
name: "Marcus Johnson",
handle: "@marcustech",
text: "This service has transformed how I work. Clean design, powerful features, and excellent support."
},
{
avatarSrc: "https://randomuser.me/api/portraits/men/32.jpg",
name: "David Martinez",
handle: "@davidcreates",
text: "I've tried many platforms, but this one stands out. Intuitive, reliable, and genuinely helpful for productivity."
},
];
const SignInPageDemo = () => {
const handleSignIn = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const data = Object.fromEntries(formData.entries());
console.log("Sign In submitted:", data);
alert(`Sign In Submitted! Check the browser console for form data.`);
};
const handleGoogleSignIn = () => {
console.log("Continue with Google clicked");
alert("Continue with Google clicked");
};
const handleResetPassword = () => {
alert("Reset Password clicked");
}
const handleCreateAccount = () => {
alert("Create Account clicked");
}
return (
<div className="bg-background text-foreground">
<SignInPage
heroImageSrc="https://images.unsplash.com/photo-1642615835477-d303d7dc9ee9?w=2160&q=80"
testimonials={sampleTestimonials}
onSignIn={handleSignIn}
onGoogleSignIn={handleGoogleSignIn}
onResetPassword={handleResetPassword}
onCreateAccount={handleCreateAccount}
/>
</div>
);
};
export default SignInPageDemo;