Add Background image to Forget Password Page

src/Pages/ForgetPassword.js

@@ -2,12 +2,21 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { motion } from "framer-motion";
 
+const Background = styled.section`
+  background-image: url("https://img.freepik.com/free-photo/hot-latte-art-coffee-cup-wood-table-coffee-shop_1150-8937.jpg");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+`;
+
 const ForgetPasswordContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #f5f5f5;
+  padding: 0 1rem;
+  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.6);
 `;
 
 const ForgetPasswordForm = styled(motion.form)`
@@ -68,31 +77,33 @@ function ForgetPassword() {
   };
 
   return (
-    <ForgetPasswordContainer>
-      <ForgetPasswordForm
-        initial={{ opacity: 0, y: 50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        onSubmit={handleSubmit}
-      >
-        <h2>Forgot Password</h2>
-        <Input
-          type="email"
-          placeholder="Enter your registered email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <Button
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-          type="submit"
+    <Background>
+      <ForgetPasswordContainer>
+        <ForgetPasswordForm
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          onSubmit={handleSubmit}
         >
-          Send Credentials
-        </Button>
-        {message && <Message success={isValid}>{message}</Message>}
-      </ForgetPasswordForm>
-    </ForgetPasswordContainer>
+          <h2>Forgot Password</h2>
+          <Input
+            type="email"
+            placeholder="Enter your registered email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <Button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            type="submit"
+          >
+            Send Credentials
+          </Button>
+          {message && <Message success={isValid}>{message}</Message>}
+        </ForgetPasswordForm>
+      </ForgetPasswordContainer>
+    </Background>
   );
 }