Merge Merge pull request #241 from master

Footer using TailwindCSS

package.json

@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "babel-preset-react-app": "^10.0.1",
-    "tailwindcss": "^3.4.13",
-    "html5-qrcode": "^2.3.8"
+    "html5-qrcode": "^2.3.8",
+    "tailwindcss": "^3.4.13"
   }
 }

src/components/Footer.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import './Footer.css';
+import '../index.css';
 import facebook_icon from '../assets/icons/facebook2.png'
 import instagram_icon from '../assets/icons/instagram2.png'
 import linkedin_icon from '../assets/icons/linkedin2.png'
@@ -10,31 +10,31 @@ export default function Footer() {
     return (
         <>
             <footer>
-                <div className="footer-container">
-                    <div className="footer-left">
-                        <div>
-                            <span>Follow Us</span>
-                            <a href='https://facebook.com'><img src={facebook_icon} alt="Facebook" className="social-icon" /></a>
-                            <a href='https://instagram.com'><img src={instagram_icon} alt="Instagram" className="social-icon" /></a>
-                            <a href='https://linkedin.com'><img src={linkedin_icon} alt="LinkedIn" className="social-icon" /></a>
-                            <a href='https://x.com'><img src={twitter_icon} alt="Twitter" className="social-icon" /></a>
+                <div className="bg-[#f84464] w-screen flex justify-between pb-5 flex-wrap  max-md:flex-col max-md:items-center max-md:text-center max-md:py-5">
+                    <div className="w-1/2 p-5 max-md:w-full max-md:p-2.5">
+                        <div className='flex items-center mb-5 flex-wrap max-md:justify-center'>
+                            <span className='text-white text-2xl font-bold mr-2.5 max-md:text-2xl'>Follow Us</span>
+                            <a className="text-white no-underline mr-3 font-medium transform hover:scale-125 transition-transform duration-[380ms] ease-in-out" href='https://facebook.com'><img src={facebook_icon} alt="Facebook" className="social-icon w-8 h-8 ml-2 max-md:w-[30px] max-md:h-[30px] max-md:ml-[5px]" /></a>
+                            <a className="text-white no-underline mr-3 font-medium transform hover:scale-125 transition-transform duration-[380ms] ease-in-out" href='https://instagram.com'><img src={instagram_icon} alt="Instagram" className="social-icon w-8 h-8 ml-2 max-md:w-[30px] max-md:h-[30px] max-md:ml-[5px]" /></a>
+                            <a className="text-white no-underline mr-3 font-medium transform hover:scale-125 transition-transform duration-[380ms] ease-in-out" href='https://linkedin.com'><img src={linkedin_icon} alt="LinkedIn" className="social-icon w-8 h-8 ml-2 max-md:w-[30px] max-md:h-[30px] max-md:ml-[5px]" /></a>
+                            <a className="text-white no-underline mr-3 font-medium transform hover:scale-125 transition-transform duration-[380ms] ease-in-out" href='https://x.com'><img src={twitter_icon} alt="Twitter" className="social-icon w-8 h-8 ml-2 max-md:w-[30px] max-md:h-[30px] max-md:ml-[5px]" /></a>
                         </div>
-                        <div className='footer-links'>
-                            <Link to="/">Home</Link>
-                            <Link to="/AboutUs">About Us</Link>
-                            <Link to="/ContactUs">Contact Us</Link>
-                            <Link to="/Login">Login</Link>
+                        <div className='footer-links flex justify-start max-md:justify-center'>
+                            <Link className='mr-3 text-white transform transition-transform duration-[380ms] ease-in-out hover:text-opacity-80 hover:scale-125 ' to="/">Home</Link>
+                            <Link className='mr-3 text-white transform transition-transform duration-[380ms] ease-in-out hover:text-opacity-80 hover:scale-125 '  to="/AboutUs">About Us</Link>
+                            <Link className='mr-3 text-white transform transition-transform duration-[380ms] ease-in-out hover:text-opacity-80 hover:scale-125 '  to="/ContactUs">Contact Us</Link>
+                            <Link className='mr-3 text-white transform transition-transform duration-[380ms] ease-in-out hover:text-opacity-80 hover:scale-125 '  to="/Login">Login</Link>
                         </div>
                     </div>
 
-                    <div className="footer-right">
-                        <div>About Ticketify</div>
-                        <p>
+                    <div className="footer-right w-1/2 p-5 max-md:w-full max-md:p-2.5">
+                        <div className='flex items-center justify-center mb-4 text-white text-2xl font-bold mr-2.5 max-md:text-2xl' >About Ticketify</div>
+                        <p className='text-white mr-[150px] text-base  max-md:mb-5 max-md:mr-0'>
                             At Ticketify, we are a team of dedicated movie enthusiasts and tech experts with a shared vision: to revolutionize the way you book movie tickets. Founded in 2024, our mission is to make movie ticket booking seamless, fast, and enjoyable for everyone.
                         </p>
                     </div>
                 </div>
-                <div className="footer-bottom">
+                <div className="bg-[#f84464] w-screen flex justify-around pb-5 flex-wrap text-white">
                     <span>Copyright © 2024 Ticketify. All rights reserved.</span>
                 </div>
             </footer>

tailwind.config.js

@@ -1,9 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}",],
+  content: ["./src/**/*.{html,js}"],
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+}