{
"component": "Lo

{
"component": "LoginPage",
"type": "container",
"style": {
"backgroundColor": "#EBF4F8",
"minHeight": "100vh",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"position": "relative",
"overflow": "hidden"
},
"children": [
{
"component": "DecorativeElement",
"type": "container",
"style": {
"position": "absolute",
"top": "40px",
"left": "40px",
"width": "60px",
"height": "60px",
"backgroundColor": "#F7A86F"
}
},
{
"component": "DecorativeElement",
"type": "container",
"style": {
"position": "absolute",
"bottom": "40px",
"right": "40px",
"width": "40px",
"height": "40px",
"backgroundColor": "#F7A86F"
}
},
{
"component": "DecorativeElement",
"type": "container",
"style": {
"position": "absolute",
"top": "80px",
"right": "35%",
"width": "50px",
"height": "50px",
"backgroundColor": "#A4DFF1",
"transform": "rotate(45deg)"
}
},
{
"component": "DecorativeElement",
"type": "container",
"style": {
"position": "absolute",
"bottom": "60px",
"left": "15%",
"width": "30px",
"height": "30px",
"backgroundColor": "#FFFFFF",
"transform": "rotate(45deg)",
"boxShadow": "shadow-sm"
}
},
{
"component": "DecorativePattern",
"type": "grid",
"style": {
"position": "absolute",
"top": "60px",
"left": "120px",
"display": "grid",
"gridTemplateColumns": "repeat(5, 4px)",
"gridTemplateRows": "repeat(5, 4px)",
"gap": "4px"
},
"children": [
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } }
]
},
{
"component": "DecorativePattern",
"type": "grid",
"style": {
"position": "absolute",
"bottom": "90px",
"right": "120px",
"display": "grid",
"gridTemplateColumns": "repeat(5, 4px)",
"gridTemplateRows": "repeat(5, 4px)",
"gap": "4px"
},
"children": [
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } },
{ "component": "Dot", "style": { "width": "4px", "height": "4px", "backgroundColor": "#DCE6EA", "borderRadius": "50%" } }
]
},
{
"component": "LoginCard",
"type": "container",
"style": {
"display": "grid",
"gridTemplateColumns": "repeat(12, 1fr)",
"width": "w-[960px]",
"height": "h-[600px]",
"backgroundColor": "bg-white",
"borderRadius": "rounded-2xl",
"boxShadow": "shadow-xl",
"overflow": "hidden",
"position": "relative",
"zIndex": "10"
},
"children": [
{
"component": "WelcomePane",
"type": "container",
"style": {
"gridColumn": "span 5",
"background": "bg-gradient-to-br from-[#F88A6F] to-[#E55752]",
"padding": "p-12",
"display": "flex",
"flexDirection": "column",
"justifyContent": "space-between",
"position": "relative"
},
"children": [
{
"component": "Header",
"type": "container",
"style": {
"display": "flex",
"justifyContent": "space-between",
"alignItems": "center"
},
"children": [
{
"component": "Logo",
"type": "Image",
"src": "meher_logo.svg",
"alt": "Meher Logo",
"style": {
"width": "w-auto",
"height": "h-6"
}
},
{
"component": "Button",
"content": "SIGN IN",
"style": {
"backgroundColor": "bg-transparent",
"color": "text-white",
"border": "1px solid #FFFFFF",
"borderRadius": "rounded-full",
"padding": "px-6 py-2",
"fontSize": "text-xs",
"fontWeight": "font-bold"
}
}
]
},
{
"component": "Content",
"type": "container",
"style": {
"display": "flex",
"flexDirection": "column",
"gap": "gap-4",
"alignItems": "flex-start"
},
"children": [
{
"component": "Text",
"as": "h1",
"content": "Welcome to Meher Admin Ui Kit!",
"style": {
"color": "text-white",
"fontSize": "text-4xl",
"fontWeight": "font-bold",
"lineHeight": "leading-tight"
}
},
{
"component": "Text",
"as": "p",
"content": "To keep connected with us please login with your personal info.",
"style": {
"color": "text-white",
"fontSize": "text-base",
"fontWeight": "font-light",
"marginTop": "mt-4"
}
}
]
},
{
"component": "FooterPlaceholder",
"type": "container",
"style": {
"height": "h-12"
}
}
]
},
{
"component": "SignUpPane",
"type": "container",
"style": {
"gridColumn": "span 7",
"backgroundColor": "bg-white",
"padding": "p-16",
"display": "flex",
"flexDirection": "column",
"alignItems": "center",
"justifyContent": "center",
"gap": "gap-6"
},
"children": [
{
"component": "Text",
"as": "h2",
"content": "Create Account",
"style": {
"color": "text-gray-800",
"fontSize": "text-3xl",
"fontWeight": "font-bold"
}
},
{
"component": "SocialLogin",
"type": "container",
"style": {
"display": "flex",
"gap": "gap-4",
"marginVertical": "my-4"
},
"children": [
{
"component": "IconButton",
"icon": "fa-brands:facebook-f",
"style": {
"width": "w-10",
"height": "h-10",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"border": "1px solid #E5E7EB",
"borderRadius": "rounded-full",
"color": "text-gray-600"
}
},
{
"component": "IconButton",
"icon": "fa-brands:twitter",
"style": {
"width": "w-10",
"height": "h-10",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"border": "1px solid #E5E7EB",
"borderRadius": "rounded-full",
"color": "text-gray-600"
}
},
{
"component": "IconButton",
"icon": "fa-brands:linkedin-in",
"style": {
"width": "w-10",
"height": "h-10",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"border": "1px solid #E5E7EB",
"borderRadius": "rounded-full",
"color": "text-gray-600"
}
}
]
},
{
"component": "Text",
"as": "p",
"content": "or use your email for regitration.",
"style": {
"color": "text-gray-400",
"fontSize": "text-sm"
}
},
{
"component": "SignUpForm",
"type": "form",
"style": {
"width": "w-full",
"maxWidth": "max-w-sm",
"display": "flex",
"flexDirection": "column",
"gap": "gap-4",
"marginTop": "mt-4"
},
"children": [
{
"component": "Input",
"type": "text",
"placeholder": "Name",
"style": {
"width": "w-full",
"padding": "p-3",
"backgroundColor": "bg-gray-100",
"borderRadius": "rounded-md",
"border": "border-none",
"fontSize": "text-sm"
}
},
{
"component": "Input",
"type": "email",
"placeholder": "Email",
"style": {
"width": "w-full",
"padding": "p-3",
"backgroundColor": "bg-gray-100",
"borderRadius": "rounded-md",
"border": "border-none",
"fontSize": "text-sm"
}
},
{
"component": "Input",
"type": "password",
"placeholder": "Password",
"style": {
"width": "w-full",
"padding": "p-3",
"backgroundColor": "bg-gray-100",
"borderRadius": "rounded-md",
"border": "border-none",
"fontSize": "text-sm"
}
},
{
"component": "Button",
"content": "SIGN UP",
"style": {
"width": "w-full",
"backgroundColor": "bg-blue-500",
"color": "text-white",
"borderRadius": "rounded-md",
"padding": "py-3",
"fontSize": "text-sm",
"fontWeight": "font-bold",
"marginTop": "mt-4"
}
}
]
}
]
}
]
}
]
}