Page Footer

import React, { useState } from 'react'
import { Col, Container, Row } from 'react-bootstrap'
import { ExternalLink } from 'react-feather'
import { Link } from 'react-router-dom'

const SimpleFooter = () => {
  return (
    <div className="hk-footer position-static w-100 border-0">
        <Container className="footer py-0">
            <Row className="h-auto mt-0">
                <Col xl={8}>
                    <p className="footer-text">
                        <span className="copy-text">Jampack © 2022 All rights reserved.</span>
                        <Link to="#">Privacy Policy</Link>
                        <span className="footer-link-sep">|</span><Link to="#">T&C</Link><span className="footer-link-sep">|</span><Link to="#">System Status</Link>
                    </p>
                </Col>
                <Col xl={4}>
                    <Link to="#" className="footer-extr-link"><span className="feather-icon"><ExternalLink /></span><u>Send feedback to our help forum</u></Link>
                </Col>
            </Row>
        </Container>
    </div>
  )
}

export default SimpleFooter;

import React, { useState } from 'react'
import { Col, Container, Row } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faGoogle, faLinkedin, faTwitter } from '@fortawesome/free-brands-svg-icons';
//Image
import logo from '../../../Assets/dist/img/logo-light.svg'

const ComplexFooter = () => {
  return (
    <div className="hk-footer position-static w-100 border-0">
        <Container className="footer">
            <Row className="h-auto">
                <Col xl={6}>
                    <Link to="#" className="footer-brand">
                        <img className="brand-img d-inline-block img-fluid" src={logo} alt="brand" />
                    </Link>
                    <p className="footer-info-text">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                </Col>
                <Col xl={6}>
                    <Row>
                        <Col md={4}>
                            <h6 className="quick-links-head">Quick links</h6>
                            <Link to="#" className="quick-links">About us</Link>
                            <Link to="#" className="quick-links">Terms</Link>
                            <Link to="#" className="quick-links">Jobs</Link>
                            <Link to="#" className="quick-links">Developer Jobs</Link>
                        </Col>
                        <Col md={4}>
                            <h6 className="quick-links-head">Quick links</h6>
                            <Link to="#" className="quick-links">Contact Us</Link>
                            <Link to="#" className="quick-links">Blog</Link>
                            <Link to="#" className="quick-links">Testimonials</Link>
                            <Link to="#" className="quick-links">Faq</Link>
                        </Col>
                        <Col md={4}>
                            <h6 className="quick-links-head">Quick links</h6>
                            <Link to="#" className="quick-links">Documentation</Link>
                            <Link to="#" className="quick-links">Support</Link>
                            <Link to="#" className="quick-links">Legal Terms</Link>
                            <Link to="#" className="quick-links">Help</Link>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Row className="h-auto">
                <Col xl={8}>
                    <p className="footer-text"><span className="copy-text">Jampack © 2022 All rights reserved.</span> <Link to="#">Privacy Policy</Link><span className="footer-link-sep">|</span><Link to="#">T&C</Link><span className="footer-link-sep">|</span><Link to="#">System Status</Link></p>
                </Col>
                <Col xl={4}>
                    <div className="footer-social-btn-wrap">
                        <Link to="#" className="btn btn-icon btn-rounded btn-soft-light btn-sm"><span className="icon">
                            <FontAwesomeIcon icon={faFacebook} />
                        </span></Link>
                        <Link to="#" className="btn btn-icon btn-rounded btn-soft-light btn-sm"><span className="icon">
                            <FontAwesomeIcon icon={faLinkedin} />
                        </span></Link>
                        <Link to="#" className="btn btn-icon btn-rounded btn-soft-light btn-sm"><span className="icon">
                            <FontAwesomeIcon icon={faGoogle} />
                        </span></Link>
                        <Link to="#" className="btn btn-icon btn-rounded btn-soft-light btn-sm"><span className="icon">
                            <FontAwesomeIcon icon={faTwitter} />
                        </span></Link>
                    </div>
                </Col>
            </Row>
        </Container>
    </div>
  )
}

export default ComplexFooter;