forked from crowetic/commerce
Fix footer width
This commit is contained in:
parent
375e30ed8d
commit
3cc2120542
@ -10,55 +10,57 @@ interface Props {
|
||||
|
||||
const Footer: FC<Props> = ({ className }) => {
|
||||
const rootClassName = cn(
|
||||
'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap',
|
||||
'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
|
||||
className
|
||||
)
|
||||
return (
|
||||
<footer className={rootClassName}>
|
||||
<Link href="/">
|
||||
<a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
|
||||
<span className="rounded-full border border-gray-700 mr-2">
|
||||
<Logo />
|
||||
</span>
|
||||
<span>ACME</span>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="bg-black text-white">
|
||||
<footer className={rootClassName}>
|
||||
<Link href="/">
|
||||
<a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
|
||||
<span className="rounded-full border border-gray-700 mr-2">
|
||||
<Logo />
|
||||
</span>
|
||||
<span>ACME</span>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
|
||||
<li className="py-3 md:py-0 md:pb-4">
|
||||
<Link href="/about">
|
||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
||||
About
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
|
||||
<li className="py-3 md:py-0 md:pb-4">
|
||||
<Link href="/about">
|
||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
||||
About
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="py-3 md:py-0 md:pb-4">
|
||||
<Link href="/terms">
|
||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
||||
Terms of Use
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-3 md:py-0 md:pb-4">
|
||||
<Link href="/terms">
|
||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
||||
Terms of Use
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="py-3 md:py-0 md:pb-4">
|
||||
<Link href="/privacy">
|
||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<li className="py-3 md:py-0 md:pb-4">
|
||||
<Link href="/privacy">
|
||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<small className="text-base">
|
||||
© 2020 ACME, Inc. All rights reserved.
|
||||
</small>
|
||||
<small className="text-base">
|
||||
© 2020 ACME, Inc. All rights reserved.
|
||||
</small>
|
||||
|
||||
<hr
|
||||
className="hidden md:block mt-4 border-gray-700"
|
||||
style={{ flexBasis: '100%', height: 0 }}
|
||||
/>
|
||||
</footer>
|
||||
<hr
|
||||
className="hidden md:block mt-4 border-gray-700"
|
||||
style={{ flexBasis: '100%', height: 0 }}
|
||||
/>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user