Footer

import Link from 'next/link'
import Image from 'next/image'
import {
  Footer1,
  FooterApps,
  FooterContact,
  FooterLinksWidget,
  FooterSocialLinks,
} from 'components/footer'
import { Paragraph } from 'components/Typography'
 
export default function Example1({ footer }) {
  return (
    <Footer1>
      <Footer1.Brand>
        <Link href="/">
          <Image src={footer.logo} alt="logo" width={105} height={50} />
        </Link>
 
        <Typography
          variant="body1"
          sx={{ mt: 1, mb: 3, maxWidth: 370, color: 'white', lineHeight: 1.7 }}
        >
          {footer.description}
        </Typography>
 
        <FooterApps
          playStoreUrl={footer.playStoreUrl}
          appleStoreUrl={footer.appStoreUrl}
        />
      </Footer1.Brand>
 
      <Footer1.Widget1>
        <FooterLinksWidget title="About Us" links={footer.about} />
      </Footer1.Widget1>
 
      <Footer1.Widget2>
        <FooterLinksWidget title="Customer Care" links={footer.customers} />
      </Footer1.Widget2>
 
      <Footer1.Contact>
        <FooterContact
          phone={footer.contact.phone}
          email={footer.contact.email}
          address={footer.contact.address}
        />
 
        <FooterSocialLinks links={footer.socials} />
      </Footer1.Contact>
 
      <Footer1.Copyright>
        <Divider sx={{ borderColor: 'grey.800' }} />
 
        <Typography
          variant="body2"
          sx={{ py: 3, textAlign: 'center', span: { fontWeight: 500 } }}
        >
          &copy; Copyright {new Date().getFullYear()} <span>UI Lib</span>, All
          rights reserved.
        </Typography>
      </Footer1.Copyright>
    </Footer1>
  )
}

import { Footer2 } from 'components/footer'
 
export default function Example2({ footer }) {
  return <Footer2 />
}