Skip to content

Feature/improve footer component #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thinkjrs merged 4 commits into from
Jan 30, 2022
Merged

Feature/improve footer component #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f45161
:sparkles: :art: add basic svgs for socials
thinkjrs Jan 30, 2022
c968918
:sparkles: add extracted column component for Footer
thinkjrs Jan 30, 2022
f9b8399
:recycle: refactor data and views
thinkjrs Jan 30, 2022
6d54711
:recycle: incorporate refactored footer data/views
thinkjrs Jan 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 34 additions & 125 deletions components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,35 @@
export default function Footer({ entityTitle, logoSrc }) {
import FooterColumn from "./FooterColumn";
import Image from "next/image";

export default function Footer({ entityTitle, logoSrc, footerItems, socials }) {
return (
<section id="footer" className="py-20">
<div className="container px-4 mx-auto">
<div className="flex flex-wrap">
<div className="w-full lg:w-3/5 flex flex-wrap">
<div className="w-1/2 lg:w-1/4 mb-8">
<h3 className="mb-4 text-lg font-bold font-heading">Company</h3>
<ul className="text-sm">
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
About Us
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Careers
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Press
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Blog
</a>
</li>
</ul>
</div>
<div className="w-1/2 lg:w-1/4 mb-8">
<h3 className="mb-4 text-lg font-bold font-heading">Pages</h3>
<ul className="text-sm">
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Login
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Register
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Add list
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Contact
</a>
</li>
</ul>
</div>
<div className="w-1/2 lg:w-1/4 mb-8">
<h3 className="mb-4 text-lg font-bold font-heading">Legal</h3>
<ul className="text-sm">
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Terms
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
About Us
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Team
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Privacy
</a>
</li>
</ul>
</div>
<div className="w-1/2 lg:w-1/4 mb-8">
<h3 className="mb-4 text-lg font-bold font-heading">Resources</h3>
<ul className="text-sm">
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Blog
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Service
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Product
</a>
</li>
<li className="mb-2">
<a className="text-indigo-500 hover:text-indigo-700" href="#">
Pricing
</a>
</li>
</ul>
</div>
{footerItems?.map((props, index) => (
<FooterColumn {...props} key={`${index}-footer-column`} />
))}
</div>
<div className="order-first lg:order-last mb-10 lg:mb-0 w-full lg:w-2/5">
<div className="order-first lg:order-last mb-10 lg:mb-0 w-full lg:w-2/5 lg:text-right">
<h3 className="mb-4 text-lg font-bold font-heading">Subscribe</h3>
<p className="mb-5 text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Stay informed with our updates via our blog,{" "}
<a
className="text-gray-700 hover:font-bold hover:underline hover:text-indigo-700"
href="https://slightlysharpe.com"
>
Slighly Sharpe
</a>
.
</p>
<input
className="w-full lg:w-2/3 mb-4 pl-4 py-3 mr-4 border border-2 rounded"
type="email"
placeholder="Type your e-mail"
/>
<button className="inline-block px-5 py-3 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200">
Action
Sign up
</button>
</div>
</div>
Expand All @@ -140,27 +53,23 @@ export default function Footer({ entityTitle, logoSrc }) {
</div>
<div className="w-full lg:w-1/2 mb-4 lg:mb-0">
<div className="mb-4 flex lg:justify-end">
<a className="inline-block mr-8" href="#">
<img
alt="Facebook (Meta) social link icon"
src="/socials/facebook.svg"
/>
</a>
<a className="inline-block mr-8" href="#">
<img
src="/socials/twitter.svg"
alt="Twitter social link icon"
/>
</a>
<a className="inline-block mr-8" href="#">
<img src="/socials/github.svg" alt="Github link icon" />
</a>
<a className="inline-block mr-8" href="#">
<img src="/socials/instagram.svg" alt="Instagram link icon" />
</a>
<a className="inline-block" href="#">
<img src="/socials/linkedin.svg" alt="LinkedIn link icon" />
</a>
{socials?.map(({ displayText, href }, index) => (
<a
className="flex leading-loose my-4 block text-sm text-gray-700 transform hover:scale-110 mr-4 lg:ml-4"
href={href}
key={href}
rel="noopener noreferrer"
>
<div className="ml-auto md:m-auto text-center relative h-8 w-8">
<Image
className="hover:text-red-700"
layout="fill"
alt={displayText}
src={`/images/${displayText.toLowerCase()}.svg`}
/>
</div>
</a>
))}
</div>
</div>
<p className="lg:hidden text-sm text-gray-500">
Expand Down
19 changes: 19 additions & 0 deletions components/FooterColumn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export default function FooterColumn({ title, footerColumnItems }) {
return (
<div className="w-1/2 lg:w-1/4 mb-8 justify-between">
<h3 className="mb-4 text-lg font-bold font-heading">{title}</h3>
<ul className="text-sm">
{footerColumnItems?.map(({ text, href }, index) => (
<li
className="mb-2"
key={`${index}-footer-item-${title?.toLowerCase()}`}
>
<a className="text-indigo-500 hover:text-indigo-700" href={href}>
{text}
</a>
</li>
))}
</ul>
</div>
);
}
95 changes: 94 additions & 1 deletion pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,94 @@ export default function Funded() {
],
},
];
const footerItems = [
{
title: "Company",
footerColumnItems: [
{
text: `About ${entityTitle}`,
href: "https://tincre.com/",
},
{
text: `Team`,
href: "https://tincre.com/about",
},
{
text: "Brands",
href: "https://tincre.com/#our-brands",
},
{
text: "Blog",
href: "https://slightlysharpe.com",
},
],
},
{
title: "Legal",
footerColumnItems: [
{
text: `About ${entityTitle}`,
href: "https://tincre.com/",
},
{
text: `Team`,
href: "https://tincre.com/about",
},
{
text: "Brands",
href: "https://tincre.com/#our-brands",
},
],
},
{
title: "Product Categories",
footerColumnItems: [
{
text: `About ${entityTitle}`,
href: "https://tincre.com/",
},
{
text: `Team`,
href: "https://tincre.com/about",
},
{
text: "Brands",
href: "https://tincre.com/#our-brands",
},
],
},
{
title: "Development",
footerColumnItems: [
{
text: `About ${entityTitle}`,
href: "https://tincre.com/",
},
{
text: `Team`,
href: "https://tincre.com/about",
},
{
text: "Brands",
href: "https://tincre.com/#our-brands",
},
],
},
];
const socials = [
{
href: "https://twitter.com/tincre",
displayText: "Twitter",
},
{
href: "https://linkedin.com/company/tincre",
displayText: "LinkedIn",
},
{
href: "https://instagram.com/webslastmile",
displayText: "Instagram",
},
];
return (
<div>
<title>{title}</title>
Expand Down Expand Up @@ -262,7 +350,12 @@ export default function Funded() {
cta={`Do one good thing before you croak: invest in ${entityTitle}`}
ctaHref="#invest"
/>
<Footer entityTitle={entityTitle} logoSrc={logoSrc} />
<Footer
entityTitle={entityTitle}
logoSrc={logoSrc}
footerItems={footerItems}
socials={socials}
/>
</div>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions public/images/facebook.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/instagram.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/linkedin.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/tiktok.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/twitter.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/youtube.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.