Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | 3x 4x 4x 4x 4x 12x 8x 4x 12x 4x 8x 4x 4x 8x 12x 1x 12x | import React from "react";
import "./Footer.scss";
import { Container, Typography, IconButton } from "@mui/material";
import { NavLink, useNavigate } from "react-router-dom";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import TwitterIcon from "@mui/icons-material/Twitter";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import PhoneOutlinedIcon from "@mui/icons-material/PhoneOutlined";
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
import MVP_LOGO from "@/assets/logo/mvp_logo2.png";
import { FOOTER_QUICK_LINKS, FOOTER_CONTACT_INFO, FOOTER_SOCIAL_LINKS } from "./footerLinks";
const Footer = () => {
const currentYear = new Date().getFullYear();
const navigate = useNavigate();
// EI-1284 — stable ids so the footer Pages/Quick Links (HOME, About, Contact) are
// targetable, matching the navbar's `landing-page-navbar-*` convention.
// EI-371 — link contract extracted to `./footerLinks.js` for unit testing.
const quickLinks = FOOTER_QUICK_LINKS;
// const resourceLinks = [
// { label: "Features", href: "#features" },
// { label: "Pricing", href: "#pricing" },
// { label: "Support", href: "#support" },
// { label: "Documentation", href: "#docs" },
// ];
// EI-2737 — contact + social link contract extracted to `./footerLinks.js`.
const _contactIcon = (kind) => {
if (kind === "email") return <EmailOutlinedIcon />;
if (kind === "phone") return <PhoneOutlinedIcon />;
Eif (kind === "location") return <LocationOnOutlinedIcon />;
return null;
};
const contactInfo = FOOTER_CONTACT_INFO.map((c) => ({ ...c, icon: _contactIcon(c.kind) }));
const _socialIcon = (name) => {
if (name === "LinkedIn") return <LinkedInIcon />;
Eif (name === "Twitter") return <TwitterIcon />;
return null;
};
return (
<>
<footer className="footer">
<Container maxWidth="lg">
<div className="footer-content">
<div className="footer-brand">
<div className="brand-logo">
<img src={MVP_LOGO} className="logo-icon" alt="mvp_logo" />
<Typography variant="h6" className="brand-name">
EruditionTX
</Typography>
</div>
<Typography variant="body2" className="brand-description">
Empowering education through innovative technology. Transform your learning experience
with our comprehensive platform.
</Typography>
<div className="social-links">
{FOOTER_SOCIAL_LINKS.map((s) => (
<IconButton
key={s.name}
className="social-icon"
aria-label={s.ariaLabel}
href={s.href}
target="_blank"
>
{_socialIcon(s.name)}
</IconButton>
))}
</div>
</div>
<div className="footer-links">
<div className="footer-section">
<Typography variant="subtitle2" className="section-title">
Quick Links
</Typography>
{quickLinks.map((link) => (
<NavLink key={link.id} id={link.id} to={link.path} className="footer-link">
{link.label}
</NavLink>
))}
<button className="footer-link footer-link-button" onClick={() => navigate("/login")}>
Login
</button>
<button
className="footer-link footer-link-button"
onClick={() => navigate("/forgot-password")}
>
Forgot Password?
</button>
</div>
{/* <div className="footer-section">
<Typography variant="subtitle2" className="section-title">
Resources
</Typography>
{resourceLinks.map((link, index) => (
<a key={index} href={link.href} className="footer-link">
{link.label}
</a>
))}
</div> */}
<div className="footer-section">
<Typography variant="subtitle2" className="section-title">
Contact
</Typography>
{contactInfo.map((item, index) => (
<div key={index} className="contact-item">
{item.icon}
<span>{item.text}</span>
</div>
))}
</div>
</div>
</div>
<div className="footer-bottom">
<Typography variant="body2" className="copyright">
© {currentYear} EruditionTX. All rights reserved.
</Typography>
<div className="legal-links">
<a href="#privacy" className="legal-link">
Privacy Policy
</a>
<span className="separator">|</span>
<a href="#terms" className="legal-link">
Terms of Service
</a>
</div>
</div>
</Container>
</footer>
</>
);
};
export default Footer;
|