<Box
styles={{
base: `
display:flex;
flex-direction:column;
justify-content:center;
gap:20px;
align-items:center;
height:100vh;`,
}}
>
<Box
styles={{
base:`
display:flex;
flex-direction:row;
justify-content:center;
gap:20px;
align-items:center; `,
}}
>
<Button styles={"$buttonStyles.contained"}> Contained</Button>
<Button
styles={Clx("$buttonStyles.outlined", {
})}
>
Outlined
</Button>
<Button styles={"$buttonStyles.text"}> Text</Button>
</Box>
<Box
styles={{
base: `
display:flex;
flex-direction:row;
justify-content:center;
gap:20px;
align-items:center;
`,
}}
>
<Button styles={"$buttonStyles.containedMedium"}>Medium</Button>
<Button styles={"$buttonStyles.outLinedMedium"}>Medium</Button>
<Button styles={"$buttonStyles.textMedium"}>Medium</Button>
</Box>
<Box
styles={{
base: `
display:flex;
flex-direction:row;
justify-content:center;
gap:20px;
align-items:center;
`,
}}
>
<Button styles={"$buttonStyles.containedSmall"}>Small</Button>
<Button styles={"$buttonStyles.outLinedSmall"}>Small</Button>
<Button styles={"$buttonStyles.textSmall"}>Small</Button>
</Box>
</Box>/data/mothercare/02-july-2022/410317164_Z003_1.jpg)
Title
$110.00In stock
<Box
styles={{
base: `
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
`,
}}
>
<Button
onClick={() => toggleScreenSize("sm")}
styles={{
base: `
background-color: ${screenSize === "sm" ? "#0047AB" : "#C8C8C8"};
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease;
&:hover {
background-color: ${screenSize === "sm" ? "#00008B" : "#E0E0E0"};
}
`,
}}
>
Mobile
</Button>
<Button
onClick={() => toggleScreenSize("lg")}
styles={{
base: `
background-color: ${screenSize === "lg" ? "#0047AB" : "#C8C8C8"};
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease;
&:hover {
background-color: ${screenSize === "lg" ? "#00008B" : "#E0E0E0"};
}
`,
}}
>
Desktop
</Button>
</Box>
{/* Main Card */}
<Box
styles={{
base: `
display: grid;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
font-size: 14px;
border-radius: 20px;
margin: auto;
${
screenSize === "lg"
? `
width: 50%;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"a b"
"a c";
`
: `
width: 350px;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas:
"a"
"b"
"c";
`
}
`,
}}
>
<Box
styles={{
base: `
grid-area: a;
`,
}}
>
<Image
src="https://cdn.pixelspray.io/v2/black-bread-289bfa/XUefL6/wrkr/t.resize(h:1355,w:1080)/data/mothercare/02-july-2022/410317164_Z003_1.jpg"
alt="Card Image"
styles={{
base: `
${
screenSize === "sm"
? "width: 100%; object-fit:cover; height:200px; border-radius: 20px 20px 0px 0px;"
: "border-radius: 20px 0px 0px 20px;"
}
`,
}}
/>
</Box>
<Box
styles={{
base: `
grid-area: b;
padding: 10px 20px;
border-bottom: 1px solid gray;
`,
}}
>
<Box
styles={{
base: `
display: flex;
flex-direction: column;
gap: 10px;
`,
}}
>
<Box
styles={{
base: `
display: flex;
justify-content: space-between;
${
screenSize === "sm"
? "gap: 10px;"
: ""
}
`,
}}
>
<Text
styles={{
base: `
font-size: ${screenSize === "sm" ? "16px" : "20px"};
font-weight: bold;
`,
}}
>
Regular Fit
</Text>
<Text
styles={{
base: `
font-size: ${screenSize === "sm" ? "16px" : "20px"};
color: gray;
`,
}}
>
$110.00
</Text>
</Box>
<Box
styles={{
base: `
display: flex;
flex-direction: column;
gap: 20px;
`,
}}
>
<Text styles={{
base:`
color:gray;
`,
}}>In stock</Text>
<Box
styles={{
base: `
display: flex;
${
screenSize === "sm" ? "gap: 10px;flex-wrap: wrap;" : "gap: 20px;"
}
`,
}}
>
<Button
styles={{
base: `
background-color: #0047AB;
padding: 5px;
border-radius: 5px;
color: white;
`,
}}
>
XS
</Button>
<Button styles={{ base: padding: 5px; }}>S</Button>
<Button styles={{ base: padding: 5px; }}>M</Button>
<Button styles={{ base: padding: 5px; }}>L</Button>
<Button styles={{ base: padding: 5px; }}>XL</Button>
</Box>
</Box>
</Box>
</Box>
<Box
styles={{
base: `
grid-area: c;
padding: 20px 20px;
`,
}}
>
<Box
styles={{
base: `
display: flex;
flex-direction: column;
gap: 30px;
`,
}}
>
<Box
styles={{
base: `
display: flex;
justify-content: space-between;
${
screenSize === "sm"
? "gap: 10px;"
: ""
}
`,
}}
>
<Box
styles={{
base: `
display: flex;
gap: 10px;
`,
}}
>
<Button
styles={{
base: `
background-color: #0047AB;
color: white;
font-weight: bold;
padding: 10px 15px;
border-radius: 10px;
&:hover {
background-color:#00008B;
transition: background-color 0.8s ease;
}
& {
transition: background-color 0.8s ease;
}
`,
}}
>
Buy now
</Button>
<Button
styles={{
base: `
border: 1px solid black;
font-weight: bold;
padding: 10px 15px;
border-radius: 10px;
&:hover {
background-color:#F0F0F0;
transition: background-color 0.8s ease;
}
& {
transition: background-color 0.8s ease; }
`,
}}
>
Add to cart
</Button>
</Box>
<Button styles={{
base:`
border:1px solid gray;
padding:0px 15px;
border-radius:10px;
`
}}>
<FaHeart style={{ color: "gray" }} />
</Button>
</Box>
<Text>Free shipping on all continental US orders.</Text>
</Box>
</Box>
</Box>
Sign In With
Don't have an account? Sign Up
<Box
styles={{
base: `
width: 400px;
margin: auto;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background: white;
text-align: center;
`,
}}
>
<Text
styles={{
base: `
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
`,
}}
>
Sign In With
</Text>
<Box
styles={{
base: `
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
`,
}}
>
{/* GitHub Button */}
<Button
styles={{
base: `
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 30px;
background: ${activeButton === "github" ? "#4285f4" : "white"};
color: ${activeButton === "github" ? "white" : "#000"};
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
`,
hover: `
background: #4285f4;
color: white;
`,
}}
onClick={() => setActiveButton("github")}
>
<FaGithub style={{ marginRight: "10px" }} />
GitHub
</Button>
{/* Google Button */}
<Button
styles={{
base: `
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 30px;
background: ${activeButton === "google" ? "#4285f4" : "white"};
color: ${activeButton === "google" ? "white" : "#000"};
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
`,
hover: `
background: #4285f4;
color: white;
`,
}}
onClick={() => setActiveButton("google")}
>
<FcGoogle style={{ marginRight: "10px" }} />
Google
</Button>
</Box>
<form onSubmit={handleFormSubmit}>
<Box
styles={{
base: `
margin-bottom: 20px;
`,
}}
>
{/* Username Input */}
<Text
styles={{
base: `
text-align: left;
margin-bottom: 5px;
font-weight: bold;
`,
}}
>
Username
</Text>
<Input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Enter your username"
styles={{
base: `
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
`,
}}
/>
{/* Password Input */}
<Text
styles={{
base: `
text-align: left;
margin-bottom: 5px;
font-weight: bold;
`,
}}
>
Password
</Text>
<Input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Enter your password"
styles={{
base: `
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
`,
}}
/>
</Box>
<Box
styles={{
base: `
display: flex;
justify-content: space-between;
align-items: center;
`,
}}
>
{/* Forgot Password */}
<Text
styles={{
base: `
font-size: 0.9rem;
color: #007BFF;
cursor: pointer;
text-decoration: underline;
`,
}}
onClick={handleForgotPassword}
>
Forgot password?
</Text>
{/* Sign In Button */}
<Button
type="submit"
styles={{
base: `
padding: 10px 40px;
background: #3169DA;
color: white;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
`,
}}
>
Sign In
</Button>
</Box>
</form>
{/* Sign Up Link */}
<Text
styles={{
base: `
margin-top: 20px;
font-size: 0.9rem;
`,
}}
>
Don't have an account?{" "}
<Text
styles={{
base: `
color: #007BFF;
text-decoration: underline;
cursor: pointer;
`,
}}
onClick={handleSignUp}
>
Sign Up
</Text>
</Text>
</Box>
The Ultimate
development studio
We build beautiful products with the latest technologies and frameworks. We are a team of passionate developers and designers that love to build amazing products.
Laverne Resorts
Vithi IT Solutions
Mercury Dev
Laverne Resorts
Why Choose Mercury?
Why Choose Mercury?
Vithi IT Solutions
Why Choose Mercury?
Vithi IT Solutions
Roshan Kumar Gujarathi
Artructure of Mercury
An experienced visionary, the founder of Mercury embodies the spirit of innovation, transforming challenges into opportunities and inspiring others to reach for the stars.