Skip to content

Commit

Permalink
Improve footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@255kb
255kb committed Nov 15, 2023
1 parent 1288d4c commit f5fac16
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 118 deletions.
112 changes: 54 additions & 58 deletions components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,20 @@ const Footer: FunctionComponent<{
</div>
</div>
<div className='row'>
<div className='col-12 col-lg-2 d-flex flex-column align-items-start'>
<div className='col-12 col-lg-1 d-flex flex-column align-items-start opacity-75'>
<img
src='/images/logo-eyes-grey.svg'
src='/images/logo-eyes.svg'
alt='Mockoon eyes logo'
width='100'
className='align-self-center'
/>
</div>
<div className='col-12 col-lg-4 text-lg-start text-center pt-8 pb-4 pb-lg-0 pt-lg-0'>
<h6 className='fw-bold text-uppercase text-gray-700'>
<div className='col-12 col-lg-3 text-lg-start text-center pt-8 pb-4 pb-lg-0 pt-lg-0'>
<h6 className='fw-bold text-uppercase text-gray-800'>
Popular tutorials and articles
</h6>

<ul className='list-unstyled text-muted'>
<ul className='list-unstyled text-gray-700'>
<li className='mb-2'>
<Link href='/tutorials/getting-started/' className='text-reset'>
Getting started with Mockoon 🚀
Expand Down Expand Up @@ -115,10 +115,10 @@ const Footer: FunctionComponent<{
</li>
</ul>
</div>
<div className='col-12 col-md-4 col-lg-2 text-lg-start text-center'>
<h6 className='fw-bold text-uppercase text-gray-700'>Learn</h6>
<div className='col-12 col-md-6 col-lg-2 text-lg-start text-center'>
<h6 className='fw-bold text-uppercase text-gray-800'>Learn</h6>

<ul className='list-unstyled text-muted'>
<ul className='list-unstyled text-gray-700'>
<li className='mb-2'>
<Link href='/docs/latest/about/' className='text-reset'>
Docs
Expand Down Expand Up @@ -172,10 +172,29 @@ const Footer: FunctionComponent<{
</li>
</ul>
</div>
<div className='col-12 col-md-4 col-lg-2 text-lg-start text-center'>
<div className='col-12 col-md-6 col-lg-2 text-lg-start text-center'>
<h6 className='fw-bold text-uppercase text-gray-800'>Services</h6>

<ul className='list-unstyled text-gray-700'>
<li className='mb-2'>
<Link href='/pro/' className='text-reset'>
Pro plans
</Link>
</li>
<li className='mb-2'>
<Link href='/custom-services/' className='text-reset'>
Custom services
</Link>
</li>
<li className='mb-2'>
<Link href='/status/' className='text-reset'>
Status
</Link>
</li>
</ul>
<h6 className='fw-bold text-uppercase text-gray-700'>Tools</h6>

<ul className='list-unstyled text-muted'>
<ul className='list-unstyled text-gray-700'>
<li className='mb-2'>
<Link href='/download/' className='text-reset'>
Desktop application
Expand Down Expand Up @@ -215,31 +234,11 @@ const Footer: FunctionComponent<{
</Link>
</li>
</ul>

<h6 className='fw-bold text-uppercase text-gray-700'>Services</h6>

<ul className='list-unstyled text-muted'>
<li className='mb-2'>
<Link href='/pro/' className='text-reset'>
Pro plans
</Link>
</li>
<li className='mb-2'>
<Link href='/custom-services/' className='text-reset'>
Custom services
</Link>
</li>
<li className='mb-2'>
<Link href='/status/' className='text-reset'>
Status
</Link>
</li>
</ul>
</div>
<div className='col-12 col-md-4 col-lg-2 offset-lg-0 text-lg-start text-center'>
<h6 className='fw-bold text-uppercase text-gray-700'>More</h6>
<div className='col-12 col-md-6 col-lg-2 offset-lg-0 text-lg-start text-center'>
<h6 className='fw-bold text-uppercase text-gray-800'>More</h6>

<ul className='list-unstyled text-muted mb-0'>
<ul className='list-unstyled text-gray-700 mb-0'>
<li className='mb-2'>
<Link href='/about/' className='text-reset'>
About us
Expand All @@ -265,7 +264,11 @@ const Footer: FunctionComponent<{
Newsletter
</Link>
</li>

<li className='mb-2'>
<Link href='/brand/' className='text-reset'>
Assets
</Link>
</li>
<li className='mb-2'>
<Link
href='https://mockoon.threadless.com/'
Expand All @@ -274,22 +277,22 @@ const Footer: FunctionComponent<{
rel='noopener'
>
<>
Shop{' '}
<i className='text-muted icon-open' aria-hidden='true'></i>
Shop <i className='icon-open' aria-hidden='true'></i>
</>
</Link>
</li>

<li className='mb-2'>
<Link href='/oss-friends/' className='text-reset'>
OSS friends
</Link>
</li>
</ul>
</div>

<h6 className='fw-bold text-uppercase text-gray-700 mt-4'>Legal</h6>
<div className='col-12 col-md-6 col-lg-2 offset-lg-0 text-lg-start text-center'>
<h6 className='fw-bold text-uppercase text-gray-800'>Policies</h6>

<ul className='list-unstyled text-muted mb-0'>
<ul className='list-unstyled text-gray-700 mb-0'>
<li className='mb-2'>
<Link href='/terms/' className='text-reset'>
Terms of service
Expand All @@ -300,22 +303,18 @@ const Footer: FunctionComponent<{
Privacy policy
</Link>
</li>
<li className='mb-2'>
<Link href='/brand/' className='text-reset'>
Brand assets
</Link>
</li>
</ul>
<ul className='align-self-center footer-social list-unstyled list-inline list-social mt-4'>

<ul className='align-self-center footer-social list-unstyled list-inline list-social mt-8'>
<li className='list-inline-item list-social-item me-2'>
<a
href='https://github.com/mockoon/mockoon'
target='_blank'
rel='noopener'
className='text-decoration-none'
className='text-decoration-none text-reset'
>
<i
className='text-muted icon-github list-social-icon'
className='icon-github list-social-icon'
aria-hidden='true'
></i>
</a>
Expand All @@ -325,10 +324,10 @@ const Footer: FunctionComponent<{
href='https://discord.gg/FtJjkejKGp'
target='_blank'
rel='noopener'
className='text-decoration-none'
className='text-decoration-none text-reset'
>
<i
className='text-muted icon-discord list-social-icon'
className='icon-discord list-social-icon'
aria-hidden='true'
></i>
</a>
Expand All @@ -338,23 +337,20 @@ const Footer: FunctionComponent<{
href='https://twitter.com/intent/follow?screen_name=GetMockoon'
target='_blank'
rel='noopener'
className='text-decoration-none'
className='text-decoration-none text-reset'
>
<i
className='text-muted icon-x list-social-item'
aria-hidden='true'
></i>
<i className='icon-x list-social-item' aria-hidden='true'></i>
</a>
</li>
<li className='list-inline-item list-social-item'>
<a
href='https://www.youtube.com/channel/UCzkVOmqzbh2CdSU4yHa54wg'
target='_blank'
rel='noopener'
className='text-decoration-none'
className='text-decoration-none text-reset'
>
<i
className='text-muted icon-youtube list-social-item'
className='icon-youtube list-social-item'
aria-hidden='true'
></i>
</a>
Expand All @@ -364,10 +360,10 @@ const Footer: FunctionComponent<{
href='https://www.linkedin.com/company/mockoon'
target='_blank'
rel='noopener'
className='text-decoration-none'
className='text-decoration-none text-reset'
>
<i
className='text-muted icon-linkedin list-social-item'
className='icon-linkedin list-social-item'
aria-hidden='true'
></i>
</a>
Expand Down
6 changes: 2 additions & 4 deletions pages/brand.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Brand: FunctionComponent = function () {
<section className='py-6 py-md-8 border-top bg-gradient-light-white'>
<div className='container'>
<div className='row justify-content-center'>
<div className='col-12 col-md-6'>
<div className='col-12 col-md-6 col-lg-4'>
<Card
data={{
title: 'Mockoon eyes logo for light or dark backgrounds',
Expand Down Expand Up @@ -55,10 +55,9 @@ const Brand: FunctionComponent = function () {
cover={false}
border={true}
borderColor={'var(--bs-body-color)'}
synchronizedColors={true}
/>
</div>
<div className='col-12 col-md-6'>
<div className='col-12 col-md-6 col-lg-4'>
<Card
data={{
title: 'Mockoon full logo for light or dark backgrounds',
Expand Down Expand Up @@ -91,7 +90,6 @@ const Brand: FunctionComponent = function () {
cover={false}
border={true}
borderColor={'var(--bs-body-color)'}
synchronizedColors={true}
/>
</div>
</div>
Expand Down
56 changes: 0 additions & 56 deletions public/images/logo-eyes-grey.svg
View file

This file was deleted.

0 comments on commit f5fac16

Please sign in to comment.