From 8d7219bf1a898dcd7b831ded0a093ff4849bc5eb Mon Sep 17 00:00:00 2001 From: Mohamed Mujtaba Date: Sun, 6 Oct 2024 11:51:06 +0530 Subject: [PATCH] Added Footer algined --- package.json | 14 +- src/assets/styles/Footer.css | 32 +-- src/components/Footer.js | 391 +++++++++++++++++++---------------- yarn.lock | 110 +++++++++- 4 files changed, 335 insertions(+), 212 deletions(-) diff --git a/package.json b/package.json index 89d69f3..3312048 100644 --- a/package.json +++ b/package.json @@ -13,29 +13,21 @@ "version": "0.1.0", "private": true, "dependencies": { - + "@radix-ui/react-accordion": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", - "@reduxjs/toolkit": "^2.2.7", - "@testing-library/user-event": "^13.5.0", "@types/react-router-dom": "^5.3.3", "axios": "^1.7.7", "bootstrap": "^5.3.3", - - "framer-motion": "^11.10.0", - "lucide-react": "^0.447.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-icons": "^5.3.0", - "concurrently": "^9.0.1", + "framer-motion": "^11.11.1", + "lucide-react": "^0.447.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hot-toast": "^2.4.1", "react-icons": "^5.3.0", "react-redux": "^9.1.2", - "react-router-dom": "^6.26.2", "react-scripts": "^5.0.1", "react-slick": "^0.30.2", diff --git a/src/assets/styles/Footer.css b/src/assets/styles/Footer.css index 0aa3569..9583090 100644 --- a/src/assets/styles/Footer.css +++ b/src/assets/styles/Footer.css @@ -1,4 +1,4 @@ -.footer { +/* .footer { background: linear-gradient(to bottom, #1a202c, #000000); color: #d1d5db; padding: 3rem 0 0; @@ -73,6 +73,10 @@ border-bottom: 1px solid #4a5568; } +.accordion-item { + border-bottom: 1px solid #4a5568; +} + .accordion-title { display: flex; justify-content: space-between; @@ -224,16 +228,6 @@ color: #8b5cf6; } -@media (max-width: 768px) { - .footer-bottom-content, .footer-info-content { - flex-direction: column; - align-items: flex-start; - } - - .footer-links, .contact-info { - margin-top: 1rem; - } -} .back-to-top { position: fixed; bottom: 20px; @@ -255,8 +249,14 @@ .back-to-top:hover { background: linear-gradient(to right, #7C3AED, #DB2777); } -.footer-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 2rem; -} \ No newline at end of file + +@media (max-width: 768px) { + .footer-bottom-content, .footer-info-content { + flex-direction: column; + align-items: flex-start; + } + + .footer-links, .contact-info { + margin-top: 1rem; + } +} */ \ No newline at end of file diff --git a/src/components/Footer.js b/src/components/Footer.js index 434efd4..010c904 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,16 +1,36 @@ import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; -import { FaFacebookF, FaTwitter, FaInstagram, FaYoutube, FaLinkedinIn } from 'react-icons/fa'; -import { FaLocationDot, FaPhone, FaChevronUp } from 'react-icons/fa6'; +import { FaFacebookF, FaTwitter, FaInstagram, FaYoutube, FaLinkedinIn, FaChevronDown, FaChevronUp } from 'react-icons/fa'; +import { FaLocationDot, FaPhone } from 'react-icons/fa6'; import { MdEmail } from 'react-icons/md'; -import "../assets/styles/Footer.css"; - const Logo = () => ( - - - + + + @@ -20,49 +40,66 @@ const Logo = () => ( ); -const SocialIcon = ({ icon: Icon, href, color }) => ( - - - - - +const SocialIcon = ({ icon: Icon, href }) => ( + + + ); -const Accordion = ({ title, children }) => { +const AccordionItem = ({ title, children }) => { const [isOpen, setIsOpen] = useState(false); return ( -
- - {isOpen && ( - {children} + {isOpen ? : } - )} + + + {isOpen && ( + +
+ {children} +
+ + )} +
); }; -const BackToTop = () => { +export default function Footer() { + const [email, setEmail] = useState(''); const [isVisible, setIsVisible] = useState(false); + const handleSubmit = (e) => { + e.preventDefault(); + console.log('Subscribed:', email); + setEmail(''); + }; + useEffect(() => { const toggleVisibility = () => { if (window.pageYOffset > 300) { @@ -85,181 +122,177 @@ const BackToTop = () => { }; return ( - - {isVisible && ( - - - - )} - - ); -}; - -const Footer = () => { - const [email, setEmail] = useState(''); - - const handleSubmit = (e) => { - e.preventDefault(); - console.log('Subscribed:', email); - setEmail(''); - }; - - return ( -