Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

import {
  Footer,
  FooterCopyright,
  FooterLink,
  FooterLinkGroup,
} from 'flowbite-react'

const DefaultFooterCode = () => {
  return (
    <>
      <div>
        <Footer container className='rounded-md'>
          <FooterCopyright href='#' by='MateriaIM' year={2024} />
          <FooterLinkGroup>
            <FooterLink href='#'>About</FooterLink>
            <FooterLink href='#'>Privacy Policy</FooterLink>
            <FooterLink href='#'>Licensing</FooterLink>
            <FooterLink href='#'>Contact</FooterLink>
          </FooterLinkGroup>
        </Footer>
      </div>
    </>
  )
}

export default DefaultFooterCode

import {
  Footer,
  FooterCopyright,
  FooterDivider,
  FooterLink,
  FooterLinkGroup,
} from 'flowbite-react'
import FullLogo from '@/app/components/layout/logo'

const FooterWithLogoCode = () => {
  return (
    <>
      <div>
        <Footer container className='rounded-md'>
          <div className='w-full text-center'>
            <div className='w-full justify-between sm:flex sm:items-center sm:justify-between'>
              <FullLogo />
              <FooterLinkGroup>
                <FooterLink href='#'>About</FooterLink>
                <FooterLink href='#'>Privacy Policy</FooterLink>
                <FooterLink href='#'>Licensing</FooterLink>
                <FooterLink href='#'>Contact</FooterLink>
              </FooterLinkGroup>
            </div>
            <FooterDivider />
            <FooterCopyright href='#' by='MateriaIM' year={2024} />
          </div>
        </Footer>
      </div>
    </>
  )
}

export default FooterWithLogoCode

import {
  Footer,
  FooterCopyright,
  FooterIcon,
  FooterLink,
  FooterLinkGroup,
  FooterTitle,
} from 'flowbite-react'
import {
  BsDribbble,
  BsFacebook,
  BsGithub,
  BsInstagram,
  BsTwitter,
} from 'react-icons/bs'

const SitemapLinkFooterCode = () => {
  return (
    <>
      <div>
        <Footer bgDark className='rounded-md'>
          <div className='w-full'>
            <div className='grid w-full grid-cols-2 gap-8 px-6 py-8 md:grid-cols-4'>
              <div>
                <FooterTitle title='Company' />
                <FooterLinkGroup col>
                  <FooterLink href='#'>About</FooterLink>
                  <FooterLink href='#'>Careers</FooterLink>
                  <FooterLink href='#'>Brand Center</FooterLink>
                  <FooterLink href='#'>Blog</FooterLink>
                </FooterLinkGroup>
              </div>
              <div>
                <FooterTitle title='help center' />
                <FooterLinkGroup col>
                  <FooterLink href='#'>Discord Server</FooterLink>
                  <FooterLink href='#'>Twitter</FooterLink>
                  <FooterLink href='#'>Facebook</FooterLink>
                  <FooterLink href='#'>Contact Us</FooterLink>
                </FooterLinkGroup>
              </div>
              <div>
                <FooterTitle title='legal' />
                <FooterLinkGroup col>
                  <FooterLink href='#'>Privacy Policy</FooterLink>
                  <FooterLink href='#'>Licensing</FooterLink>
                  <FooterLink href='#'>Terms &amp; Conditions</FooterLink>
                </FooterLinkGroup>
              </div>
              <div>
                <FooterTitle title='download' />
                <FooterLinkGroup col>
                  <FooterLink href='#'>iOS</FooterLink>
                  <FooterLink href='#'>Android</FooterLink>
                  <FooterLink href='#'>Windows</FooterLink>
                  <FooterLink href='#'>MacOS</FooterLink>
                </FooterLinkGroup>
              </div>
            </div>
            <div className='w-full bg-gray-700 px-4 py-6 sm:flex sm:items-center sm:justify-between'>
              <FooterCopyright href='#' by='MateriaIM' year={2024} />
              <div className='mt-4 flex space-x-6 sm:mt-0 sm:justify-center'>
                <FooterIcon href='#' icon={BsFacebook} />
                <FooterIcon href='#' icon={BsInstagram} />
                <FooterIcon href='#' icon={BsTwitter} />
                <FooterIcon href='#' icon={BsGithub} />
                <FooterIcon href='#' icon={BsDribbble} />
              </div>
            </div>
          </div>
        </Footer>
      </div>
    </>
  )
}

export default SitemapLinkFooterCode