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>
 
        <Paragraph mt={1} mb={3} color="grey.500" maxWidth={370}>
          {footer.description}
        </Paragraph>
 
        <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>
  )
}

import Box from '@mui/material/Box'
import LazyImage from 'components/LazyImage'
import { Paragraph } from 'components/Typography'
import {
  Footer3,
  FooterApps,
  FooterContact,
  FooterLinksWidget,
  FooterSocialLinks,
} from 'components/footer'
 
export default function Example2({ footer }) {
  return (
    <Fragment>
      <Footer3>
        <Footer3.Brand>
          <Box maxWidth={100}>
            <LazyImage src={footer.logo} alt="logo" width={105} height={50} />
          </Box>
 
          <Paragraph mb={2.5} maxWidth={{ xl: 400 }}>
            {footer.description}
          </Paragraph>
        </Footer3.Brand>
 
        <Footer3.Widget1>
          <FooterLinksWidget isDark title="About Us" links={footer.about} />
        </Footer3.Widget1>
 
        <Footer3.Widget2>
          <FooterLinksWidget
            isDark
            title="Customer Care"
            links={footer.customers}
          />
        </Footer3.Widget2>
 
        <Footer3.Contact>
          <FooterContact
            color="inherit"
            phone={footer.contact.phone}
            email={footer.contact.email}
            address={footer.contact.address}
          />
        </Footer3.Contact>
      </Footer3>
 
      <FooterCopyright>
        <FooterSocialLinks variant="dark" links={footer.socials} />
      </FooterCopyright>
    </Fragment>
  )
}