Footer Container

1import { FooterContainer } from "passport-ui";

1<FooterContainer
2  sticky={true}
3  blurred={true}
4  variant="full"
5>
6  <div className="flex flex-col md:flex-row justify-between items-center gap-4">
7    <div className="flex flex-col md:flex-row items-center gap-4">
8      <p>&copy; 2024 My Company. All rights reserved.</p>
9    </div>
10 
11    <div className="flex items-center gap-4">
12      <Link href="/privacy" className="text-sm hover:underline">
13        Privacy Policy
14      </Link>
15      <Link href="/terms" className="text-sm hover:underline">
16        Terms of Service
17      </Link>
18      <Link href="/contact" className="text-sm hover:underline">
19        Contact
20      </Link>
21    </div>
22  </div>
23</FooterContainer>
24 
25{/* Different variants */}
26<FooterContainer variant="compact">
27  <p className="text-center">Compact footer</p>
28</FooterContainer>
29 
30<FooterContainer variant="broad" sticky={false}>
31  <div className="text-center">
32    <p>Non-sticky broad footer</p>
33  </div>
34</FooterContainer>