Spaces:
Running
Running
File size: 3,329 Bytes
06a7653 |
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 |
import { Typography, Button, IconButton } from "@material-tailwind/react";
const CURRENT_YEAR = new Date().getFullYear();
const LINKS = ["Company", "About Us", "Team", "Products", "Blog"];
export function Footer() {
return (
<footer className="pb-5 p-10 md:pt-10">
<div className="container flex flex-col mx-auto">
<div className="flex !w-full py-10 mb-5 md:mb-20 flex-col justify-center !items-center bg-gray-900 max-w-6xl mx-auto rounded-2xl p-5 ">
<Typography placeholder={""}
className="text-2xl md:text-3xl text-center font-bold "
color="white"
>
Join now and get 30% OFF!
</Typography>
<Typography placeholder={""}
color="white"
className=" md:w-7/12 text-center my-3 !text-base"
>
Don't miss out on this exclusive offer that will end soon.
</Typography>
<div className="flex w-full md:w-fit gap-3 mt-2 flex-col md:flex-row">
<Button color="white" size="md" placeholder={""}>
buy ticket
</Button>
</div>
</div>
<div className="flex flex-col md:flex-row items-center !justify-between">
<Typography placeholder={""}
as="a"
href="https://www.material-tailwind.com"
target="_blank"
variant="h6"
className="text-gray-900"
>
Material Tailwind
</Typography>
<ul className="flex justify-center my-4 md:my-0 w-max mx-auto items-center gap-4">
{LINKS.map((link, index) => (
<li key={index}>
<Typography placeholder={""}
as="a"
href="#"
variant="small"
color="white"
className="font-normal !text-gray-700 hover:!text-gray-900 transition-colors"
>
{link}
</Typography>
</li>
))}
</ul>
<div className="flex w-fit justify-center gap-2">
<IconButton size="sm" color="gray" variant="text" placeholder={""}>
<i className="fa-brands fa-twitter text-lg" />
</IconButton>
<IconButton size="sm" color="gray" variant="text" placeholder={""}>
<i className="fa-brands fa-youtube text-lg" />
</IconButton>
<IconButton size="sm" color="gray" variant="text" placeholder={""}>
<i className="fa-brands fa-instagram text-lg" />
</IconButton>
<IconButton size="sm" color="gray" variant="text" placeholder={""}>
<i className="fa-brands fa-github text-lg" />
</IconButton>
</div>
</div>
<Typography placeholder={""}
color="blue-gray"
className="text-center mt-12 font-normal !text-gray-700"
>
© {CURRENT_YEAR} Made with{" "}
<a href="https://www.material-tailwind.com" target="_blank">
Material Tailwind
</a>{" "}
by{" "}
<a href="https://www.creative-tim.com" target="_blank">
Creative Tim
</a>
.
</Typography>
</div>
</footer>
);
}
export default Footer;
|