Skip to content

Commit

Permalink
Fix: Remove unused variable and update href values in Login.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@AymonOsama
AymonOsama committed Jan 30, 2025
1 parent 8d4aa61 commit bbe18f4
Showing 1 changed file with 32 additions and 49 deletions.
81 changes: 32 additions & 49 deletions src/pages/Auth/Login.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

// Import motion from framer-motion
import { motion } from 'framer-motion';

// Import sweetalert2
import { motion } from 'framer-motion';
import Swal from 'sweetalert2';

// Import style files
Expand All @@ -25,7 +21,6 @@ const Login = () => {
const navigate = useNavigate();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');

const theEmail = 'Aymanausama5@yahoo.com';
const thePassword = '1973aaaa';
Expand Down Expand Up @@ -61,16 +56,16 @@ const Login = () => {
return (
<motion.div
className='LoginPage'
initial={{ opacity: 0 }} // Start with opacity 0
animate={{ opacity: 1 }} // Animate to opacity 1
transition={{ duration: 1 }} // Duration of the animation
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
<div className='Login_Form px-32 py-16'>
<motion.div
className='HeadOfLoginForm'
initial={{ y: -50, opacity: 0 }} // Start above and invisible
animate={{ y: 0, opacity: 1 }} // Animate to original position and visible
transition={{ delay: 0.5, duration: 1 }} // Delay and duration
initial={{ y: -50, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 1 }}
>
<p className='text-[1.4rem] text-gray-400 font-bold'>There’s some Great Discounts</p>
<p className='text-4xl text-gray-900 font-semibold py-4'>
Expand All @@ -80,11 +75,10 @@ const Login = () => {

<div className='LoginFormInputs'>
<form onSubmit={handleSubmit} className="pt-16 pb-8 w-full max-w-md h-full">
{/* Email Field */}
<motion.fieldset
className="border-2 border-orange-500 rounded-md px-3 py-4 mb-8"
whileHover={{ scale: 1.02 }} // Scale up on hover
transition={{ type: 'spring', stiffness: 300 }} // Spring animation
whileHover={{ scale: 1.02 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<legend className="text-gray-400 text-sm font-bold px-3">E-mail</legend>
<div className="flex items-center">
Expand All @@ -102,11 +96,10 @@ const Login = () => {
</div>
</motion.fieldset>

{/* Password Field */}
<motion.fieldset
className="border-2 border-orange-500 rounded-md px-3 py-4 mb-3"
whileHover={{ scale: 1.02 }} // Scale up on hover
transition={{ type: 'spring', stiffness: 300 }} // Spring animation
whileHover={{ scale: 1.02 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<legend className="text-gray-400 text-sm font-bold px-3">Password</legend>
<div className="flex items-center">
Expand All @@ -124,29 +117,23 @@ const Login = () => {
</div>
</motion.fieldset>

{/* Forget Password Link */}
<Link to='/forgot-password' className='text-sm text-gray-600 font-bold'>Forget Password?</Link>

{/* Error Message */}
{error && <p className="text-red-500 text-sm font-bold mb-4">{error}</p>}

{/* Sign Up Button */}
<motion.button
className="w-full inline-block rounded border border-orange-500 bg-orange-500 px-12 py-4 text-base font-bold text-white hover:bg-orange-600 focus:outline-none focus:ring shadow-md text-center mt-10"
type='submit'
whileHover={{ scale: 1.05 }} // Scale up on hover
whileTap={{ scale: 0.95 }} // Scale down on click
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Sign Up
</motion.button>
</form>

{/* Create Account Link */}
<motion.div
className="absolute bottom-4 h-10 w-60 left-6"
initial={{ opacity: 0, x: -50 }} // Start invisible and to the left
animate={{ opacity: 1, x: 0 }} // Animate to visible and original position
transition={{ delay: 1, duration: 1 }} // Delay and duration
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 1, duration: 1 }}
>
<p className="text-sm text-gray-600 font-bold absolute bottom-0 left-0 mb-4">
Have No Account?
Expand All @@ -159,33 +146,30 @@ const Login = () => {
</div>

<div className='Login_About pl-10'>
{/* Logo */}
<motion.div
className='logo w-full flex justify-end items-center'
initial={{ opacity: 0, x: 50 }} // Start invisible and to the right
animate={{ opacity: 1, x: 0 }} // Animate to visible and original position
transition={{ delay: 0.5, duration: 1 }} // Delay and duration
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5, duration: 1 }}
>
<img src={logo} alt="logo_yumlicious" className='w-44' />
</motion.div>

{/* About Info */}
<motion.div
className='aboutInfo w-full py-8'
initial={{ opacity: 0, y: 50 }} // Start invisible and below
animate={{ opacity: 1, y: 0 }} // Animate to visible and original position
transition={{ delay: 1, duration: 1 }} // Delay and duration
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1, duration: 1 }}
>
<p className='text-5xl mb-6 text-white font-semibold'>Welcome to</p>
<span className='font-extrabold text-6xl text-white'>Yumlicious</span>
<p style={{ letterSpacing: '0.1rem' }} className='mt-7 font-bold text-1xl text-white w-96'>Best Restaurant for Satisfying Your Cravings with Delicious Flavors</p>
</motion.div>

{/* View Menu Button */}
<motion.div
className='viewMenuBtn mt-10'
whileHover={{ scale: 1.05 }} // Scale up on hover
whileTap={{ scale: 0.95 }} // Scale down on click
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<Link
className="inline-block rounded-2xl border-4 border-white px-6 py-3 text-sm font-bold text-white focus:outline-none transform transition-transform duration-300 hover:scale-105"
Expand All @@ -195,26 +179,25 @@ const Login = () => {
</Link>
</motion.div>

{/* Social Media Icons */}
<motion.div
className='socialMediaIcons mt-20 mr-10 ml-10'
initial={{ opacity: 0 }} // Start invisible
animate={{ opacity: 1 }} // Animate to visible
transition={{ delay: 1.5, duration: 1 }} // Delay and duration
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.5, duration: 1 }}
>
<div className='SocialMediaIconsHeader'>
<p style={{ letterSpacing: '0.1rem' }} className='text-white font-bold '>Follow US</p>
</div>
<div className='SocialMediaIconsSec my-12 flex justify-between'>
<a target='blank' href='#' className='text-2xl'><FaFacebook /></a>
<a target='blank' href='#' className='text-2xl'><FaSquareInstagram /></a>
<a target='blank' href='#' className='text-2xl'><FaTwitter /></a>
<a target='blank' href='#' className='text-2xl'><FaTelegramPlane /></a>
<a target='_blank' rel="noreferrer" href='https://www.facebook.com' className='text-2xl'><FaFacebook /></a>
<a target='_blank' rel="noreferrer" href='https://www.instagram.com' className='text-2xl'><FaSquareInstagram /></a>
<a target='_blank' rel="noreferrer" href='https://www.twitter.com' className='text-2xl'><FaTwitter /></a>
<a target='_blank' rel="noreferrer" href='https://www.telegram.com' className='text-2xl'><FaTelegramPlane /></a>
</div>
</motion.div>
</div>
</motion.div>
);
};

export default Login;
export default Login;

0 comments on commit bbe18f4

Please sign in to comment.