Merge pull request #8 from 4GeeksAcademy/alberto_footer

footer alberto

about-us-astrodevs/src/components/Footer/Footer.css

@@ -0,0 +1,35 @@
+.b-example-divider{
+
+    height: 3rem;
+    background-color: grey;
+    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, .1), inset 0 0.125em 0.5em rgba(0, 0, 0, .15)
+}
+#contenedor-footer{
+    background-color: black;
+    width:100vw;
+}
+.nav-footer{
+    padding-left: 7rem;
+}
+h5{
+    text-align: left;
+    font-size: 1.1rem;
+    color: lightgray;
+    margin-bottom: 1.5rem;
+}
+form, ul{
+    text-align: left;
+}
+p,li{
+    color: lightgray;
+    font-size: .9rem;
+}
+a{
+    text-decoration: none; 
+}
+.copyright-txt{
+    text-align: center;
+    color: grey;
+    margin-top: 4rem;
+    font-size: .8rem;
+}

about-us-astrodevs/src/components/Footer/Footer.jsx

@@ -1,10 +1,60 @@
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInstagram, faTelegram, faFacebookF, faTwitter } from '@fortawesome/free-brands-svg-icons'
 import './Footer.css';
 
 export const Footer = () => {
 
-    return (
-        <>
-
-        </>
-    );
-}
+	return (
+		<>
+		<div className="b-example-divider"></div>
+			<div className="container" id="contenedor-footer">
+				<footer className="py-5">
+					<div className="row border-bottom border-secondary pb-5">
+						<div className="col-2 nav-footer">
+							<h5>Quick Links</h5>
+							<ul className="nav flex-column">
+								<li className="nav-item mb-2"><a href="">Privacy Policy</a></li>
+								<li className="nav-item mb-2"><a href="">Terms and Conditions</a></li>
+								<li className="nav-item mb-2"><a href="">AstroTeam.com</a></li>
+							</ul>
+						</div>
+						<div className="col-2 nav-footer">
+							<h5>Contact Us</h5>
+							<ul className="nav flex-column">
+								<li className="nav-item mb-2"><a href="">[email protected]</a></li>
+								<li className="nav-item mb-2">+34 628328332</li>
+							</ul>
+						</div>
+
+						<div className="col-2 nav-footer">
+							<h5>Follow</h5>
+							<ul className="nav flex-column">
+								<li className="nav-item mb-2"><FontAwesomeIcon icon={faInstagram}/> Instagram </li>
+								<li className="nav-item mb-2"><FontAwesomeIcon icon={faTelegram} /> Telegram</li>
+								<li className="nav-item mb-2"><FontAwesomeIcon icon={faFacebookF}/> Facebook</li>
+								<li className="nav-item mb-2"><FontAwesomeIcon icon={faTwitter} /> Twitter</li>
+
+							</ul>
+						</div>
+
+						<div className="col-6 nav-footer">
+							<form action="">
+								<h5 className="">Susbcribe to our page</h5>
+								<p>Monthly digest of what`s new and interesting for ur</p>
+								<div className="d-flex flex-row gap-3">
+
+									<input type="text" className="form-control w-50" placeholder="Email Address" />
+									<button type="button" className="btn btn-light">Subscribe</button>
+								</div>
+							</form>
+						</div>
+					</div>
+					<p className="copyright-txt">Copyright C 2024. AstroTeam Integrated Solutions Limited. All rights reserved.</p>
+				</footer>
+		</div>
+		</>
+	);
+}
+
+

about-us-astrodevs/src/components/Form/Form.jsx

@@ -2,7 +2,7 @@ import './Form.css';
 import { Title } from './title/Title';
 import { Input } from './info_input/Input';
 
- const Form = () => {
+ export const Form = () => {
 
     return (
         <>
@@ -14,4 +14,3 @@ import { Input } from './info_input/Input';
     );
 };
 
-export default Form