forked from crowetic/commerce
Footer fixes
This commit is contained in:
parent
fd9ca3f6f9
commit
a05c15b002
@ -1,7 +0,0 @@
|
|||||||
.root {
|
|
||||||
@apply p-0 bg-black text-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
@apply flex justify-between items-center flex-row px-4 py-5;
|
|
||||||
}
|
|
@ -1,7 +1,7 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Footer.module.css'
|
import { Logo } from '@components/ui'
|
||||||
import { Container, Logo } from '@components/ui'
|
import Link from 'next/link'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
@ -9,55 +9,49 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Footer: FC<Props> = ({ className }) => {
|
const Footer: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(
|
||||||
|
'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap',
|
||||||
|
className
|
||||||
|
)
|
||||||
return (
|
return (
|
||||||
<footer className={rootClassName}>
|
<footer className={rootClassName}>
|
||||||
<Container className={s.container}>
|
<Link href="/">
|
||||||
<div className="my-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2 py-6">
|
<a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
|
||||||
<div className="md:grid md:grid-cols-2 md:gap-8">
|
<span className="rounded-full border border-gray-700 mr-2">
|
||||||
<div className="">
|
<Logo />
|
||||||
<div className="flex flex-row space-x-4 items-center">
|
</span>
|
||||||
<span className="rounded-full border border-gray-300">
|
<span>ACME</span>
|
||||||
<Logo />
|
</a>
|
||||||
</span>
|
</Link>
|
||||||
<span>ACME</span>
|
|
||||||
</div>
|
<ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
|
||||||
</div>
|
<li className="py-3 md:py-0 md:pb-4">
|
||||||
<div className="mt-12 md:mt-0">
|
<Link href="/about">
|
||||||
<ul className="space-y-4">
|
<a>About</a>
|
||||||
<li>
|
</Link>
|
||||||
<a
|
</li>
|
||||||
href="#"
|
|
||||||
className="text-base leading-6 text-gray-300 hover:text-white"
|
<li className="py-3 md:py-0 md:pb-4">
|
||||||
>
|
<Link href="/terms">
|
||||||
About
|
<a>Terms of Use</a>
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<a
|
<li className="py-3 md:py-0 md:pb-4">
|
||||||
href="#"
|
<Link href="/privacy">
|
||||||
className="text-base leading-6 text-gray-300 hover:text-white"
|
<a>Privacy Policy</a>
|
||||||
>
|
</Link>
|
||||||
Terms of Use
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
|
||||||
<li>
|
<small className="text-base">
|
||||||
<a
|
© 2020 ACME, Inc. All rights reserved.
|
||||||
href="#"
|
</small>
|
||||||
className="text-base leading-6 text-gray-300 hover:text-white"
|
|
||||||
>
|
<hr
|
||||||
Privacy Policy
|
className="hidden md:block mt-4 border-gray-700"
|
||||||
</a>
|
style={{ flexBasis: '100%', height: 0 }}
|
||||||
</li>
|
/>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-end mt-12 md:mt-0">
|
|
||||||
© 2020 ACME, Inc. All rights reserved.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr className="text-base leading-6 text-gray-400 xl:text-center border-t border-gray-700" />
|
|
||||||
</Container>
|
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user