From b9335c9709e372911f4c9e5bcd08a847309e55b3 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 2 Aug 2024 22:18:36 +0530 Subject: [PATCH] Added Icons to Footer Links --- src/Components/Footer/Footer.css | 2 - src/Components/Footer/Footer.jsx | 123 +++++++++++++++---------------- 2 files changed, 58 insertions(+), 67 deletions(-) diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css index b738804..b1e8919 100644 --- a/src/Components/Footer/Footer.css +++ b/src/Components/Footer/Footer.css @@ -220,12 +220,10 @@ margin-right: 0; justify-content: flex-start; } - .footer-bottom { justify-content: center; } } - @media (max-width: 400px) { .footer-half { flex-direction: column; diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx index 71fe3a6..53a77b3 100644 --- a/src/Components/Footer/Footer.jsx +++ b/src/Components/Footer/Footer.jsx @@ -1,33 +1,33 @@ -import { useEffect, useState } from "react"; // Import hooks from React -import "./Footer.css"; // Import CSS for styling -import logo from "../../assets/logo2.png"; // Import the logo image -import { FaGithub } from "react-icons/fa"; // Import GitHub icon from react-icons -import { NavLink, useNavigate } from "react-router-dom"; // Import NavLink and useNavigate for navigation -import { scroller } from "react-scroll"; // Import scroller for smooth scrolling -import Visitors from "../Visitors"; // Import Visitors component +import { useEffect, useState } from "react"; +import "./Footer.css"; +import logo from "../../assets/logo2.png"; +import { FaGithub, FaLinkedin, FaFacebook, FaTwitter, FaInstagram } from "react-icons/fa"; +import { NavLink, useNavigate } from "react-router-dom"; +import { scroller } from "react-scroll"; +import Visitors from "../Visitors"; +import { AiFillHome, AiFillInfoCircle, AiFillPhone, AiFillQuestionCircle, AiFillLock, AiFillFileText } from "react-icons/ai"; +import { BiBook, BiSupport, BiCommentDetail, BiBriefcase, BiGroup } from "react-icons/bi"; const Footer = () => { - const [sticky, setSticky] = useState(false); // State to track sticky footer - const [mobileMenu, setMobileMenu] = useState(false); // State to toggle mobile menu - const navigate = useNavigate(); // Hook for programmatic navigation + const [sticky, setSticky] = useState(false); + const [mobileMenu, setMobileMenu] = useState(false); + const navigate = useNavigate(); - // Effect to handle scroll event for sticky footer useEffect(() => { const handleScroll = () => { - setSticky(window.scrollY > 200); // Set sticky based on scroll position + setSticky(window.scrollY > 200); }; - window.addEventListener("scroll", handleScroll); // Add scroll event listener + window.addEventListener("scroll", handleScroll); return () => { - window.removeEventListener("scroll", handleScroll); // Clean up event listener + window.removeEventListener("scroll", handleScroll); }; }, []); const toggleMenu = () => { - setMobileMenu(!mobileMenu); // Toggle mobile menu state + setMobileMenu(!mobileMenu); }; - // Function to scroll to a section smoothly const scrollToSection = (section) => { scroller.scrollTo(section, { smooth: true, @@ -36,39 +36,35 @@ const Footer = () => { }); }; - // Function to handle navigation and scrolling const handleNavigation = (path, section) => { - navigate(path); // Navigate to the specified path - setTimeout(() => scrollToSection(section), 0); // Scroll to the section after navigation + navigate(path); + setTimeout(() => scrollToSection(section), 0); }; - // Component for the subscription form const SubscriptionForm = () => { - const [email, setEmail] = useState(""); // State for email input - const [message, setMessage] = useState(""); // State for success message + const [email, setEmail] = useState(""); + const [message, setMessage] = useState(""); - // Handle form submission const handleSubmit = (e) => { - e.preventDefault(); // Prevent default form submission behavior - // Add your subscription logic here (e.g., API call to subscribe the email) - setMessage("Thank you for subscribing!"); // Set success message - setEmail(""); // Clear email input + e.preventDefault(); + setMessage("Thank you for subscribing!"); + setEmail(""); }; return (
-

Subscribe to our Newsletter

{/* Form heading */} -
{/* Form submission handler */} +

Subscribe to our Newsletter

+ setEmail(e.target.value)} // Update email state on input change + onChange={(e) => setEmail(e.target.value)} placeholder="Enter your email" - required // Make input required + required /> - {/* Submit button */} +
- {message &&

{message}

} {/* Display success message if available */} + {message &&

{message}

}
); }; @@ -76,104 +72,101 @@ const Footer = () => { return (
- {/* Top section of the footer */}
- Start Connect hub logo {/* Logo image */} + Start Connect hub logo
-
Start Connect hub
{/* Footer title */} - Star us ⭐ {/* GitHub star link */} +
Start Connect hub
+ Star us ⭐
- {/* Visitors component */} +
- {/* Footer sections */}
-

Company

{/* Section title */} +

Company

-

Need Help

{/* Section title */} +

Need Help

-

More Info

{/* Section title */} +

More Info

    -
  • Privacy Policy
    • {/* Privacy Policy link */} +
  • Privacy Policy
    •  -
  • Terms & Conditions
    • {/* Terms & Conditions link */} +
  • Terms & Conditions
    •  -
  • Licensing
    • {/* Licensing link */} +
  • Licensing
    •  -
  • Vision and Mission
    • {/* Vision and Mission link */} +
  • Vision and Mission
    •  -
  • Career
    • {/* Career link */} +
  • Career
    • -
  • Our Contributors
    • {/* Contributors link */} +
  • Our Contributors
    •
-

Let’s Connect

{/* Section title */} +

Let’s Connect

- {/* Social media icons */} - + - + - + - +
- {/* Render subscription form */} +
- © {new Date().getFullYear()} StartConnect-Hub. All rights reserved. {/* Footer bottom text */} + © {new Date().getFullYear()} StartConnect-Hub. All rights reserved.