Skip to content

Commit 641f45b

Browse files
manecipoglumariana-caldas
manecipoglu
and
mariana-caldas
authored
Feature/newsletter footer styling (#75)
* Add fonts to the Meta component and new mixins for resposive layout * Add styling to Newsletter component for mobile view * Add styling to footer for mobile and tablet view * Add styling to newsletter and footer for desktop views * Fix mailchimp form submit and relative path for footer logo * Fix logo, newsletter message, color naming * Align newsletter message with name input, remove boldnes and add more margin on mobile view * Link footer logo to homepage, add hover effect to links, change logo size and orientation of footer links for mobile view * Updating Changelog * Normalizing container size for recent components, adjust TwoColumn component * Bring back max width to TwoColumn container and its content * Fix max width container set up Co-authored-by: Mariana Caldas de Souza <[email protected]>
1 parent 5576880 commit 641f45b

14 files changed

+391
-276
lines changed

‎CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1414

1515
## Unreleased
1616

17+
### Added
18+
19+
- add TwoColumn.js component
20+
- add new footer and newsletter components styling
21+
1722
### Fixed
1823

1924
- updated Next.js from 10.0.0 to 12.0.10

‎components/Footer.js

+14-44
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,29 @@
11
import Link from 'next/link';
22
import footerStyles from '../styles/Footer.module.scss';
3-
import { linksNav, linksSocial } from '../utils/links';
3+
import { linksNav } from '../utils/links';
44
import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
55
import Image from 'next/image';
66

77
export default function Footer() {
88
return (
99
<footer className={footerStyles.footer}>
10-
<div className={footerStyles.container}>
11-
<div className={footerStyles.columnLeft}>
12-
<ul className={footerStyles.footerList}>
10+
<NewsletterSubscribe />
11+
<section className={footerStyles.footer__section}>
12+
<nav className={footerStyles.footer__nav} aria-label="Main">
13+
<ul className={footerStyles.footer__navList}>
1314
{linksNav.map(link => (
14-
<li className={footerStyles.footerItem} key={link.href}>
15-
<Link href={link.href}>
16-
<a title={link.text}>{link.text}</a>
17-
</Link>
15+
<li className={footerStyles.footer__navItem} key={link.text}>
16+
<Link href={link.href}>{link.text}</Link>
1817
</li>
1918
))}
2019
</ul>
21-
<Image
22-
width={77}
23-
height={72}
24-
className={footerStyles.logo}
25-
src="/images/web-dev-path-logo-small.png"
26-
alt="Logo"
27-
/>
28-
</div>
29-
<div className={footerStyles.columnRight}>
30-
<div className={footerStyles.subscribe}>
31-
<h2>Subscribe for more</h2>
32-
<p className={footerStyles.text}>
33-
Get the answer to the most common questions directly to your email
34-
</p>
35-
<NewsletterSubscribe />
36-
<p>*Unsubscribe anytime</p>
37-
</div>
38-
<div className={footerStyles.socialMedia}>
39-
{linksSocial.map(link => (
40-
<Link href={link.href} key={link.text} passHref>
41-
<a>
42-
<Image
43-
width={32}
44-
height={32}
45-
src={link.src}
46-
alt={link.text}
47-
/>
48-
</a>
49-
</Link>
50-
))}
51-
</div>
52-
</div>
53-
</div>
54-
<div className={footerStyles.copyright}>
55-
<p>Web Dev Path {new Date().getFullYear()}. All rights reserved.</p>
56-
</div>
20+
</nav>
21+
<Link href="/">
22+
<a className={footerStyles.footer__logo} title="Go to the Homepage">
23+
<Image src="/images/svg/logo.svg" height={326} width={326} />
24+
</a>
25+
</Link>
26+
</section>
5727
</footer>
5828
);
5929
}

‎components/Meta.js

+10
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@ export default function Meta() {
1010
<meta charSet="utf-8" />
1111
<title>{meta.title}</title>
1212
<link rel="icon" href="/favicon.ico" />
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link
15+
rel="preconnect"
16+
href="https://fonts.gstatic.com"
17+
crossOrigin="true"
18+
/>
19+
<link
20+
href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Open+Sans:wght@700&display=swap"
21+
rel="stylesheet"
22+
/>
1323
</Head>
1424
);
1525
}

‎components/TwoColumn.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,25 @@ import styles from '../styles/TwoColumn.module.scss';
44
import buttonStyles from '../styles/ButtonLink.module.scss';
55

66
export default function TwoColumn(props) {
7+
// Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
78
const { image, title, content, rowOrder } = props;
89
return (
910
<section className={styles.container}>
1011
<div className={styles.inner} style={{ flexDirection: rowOrder }}>
11-
<div className={styles.itemLeft}>
12+
<div className={styles.inner__content}>
1213
<h2 className={styles.title}>{title}</h2>
1314
<p className={styles.content}>{content}</p>
1415
<ButtonLink link="/about-us" className={buttonStyles.btn}>
1516
Learn more
1617
</ButtonLink>
1718
</div>
18-
<div className={styles.itemRight}>
19+
<div className={styles.inner__image}>
1920
<Image
2021
src={image}
2122
alt=""
2223
className={styles.img}
23-
width={409}
24-
height={545}
24+
layout="fill"
25+
objectFit="cover"
2526
/>
2627
</div>
2728
</div>

‎components/mailchimp/NewsletterForm.js

+55-29
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const NewsletterForm = ({ status, message, onValidated }) => {
1111
*
1212
* @return {{value}|*|boolean|null}
1313
*/
14-
const handleFormSubmit = () => {
14+
const handleFormSubmit = event => {
15+
event.preventDefault();
16+
1517
setError(null);
1618

1719
if (!email) {
@@ -21,6 +23,8 @@ const NewsletterForm = ({ status, message, onValidated }) => {
2123

2224
const isFormValidated = onValidated({ EMAIL: email });
2325

26+
event.target.reset();
27+
2428
// On success return true
2529
return email && email.indexOf('@') > -1 && isFormValidated;
2630
};
@@ -60,36 +64,58 @@ const NewsletterForm = ({ status, message, onValidated }) => {
6064
};
6165

6266
return (
63-
<>
64-
<div>
65-
<input
66-
onChange={event => setEmail(event?.target?.value ?? '')}
67-
type="email"
68-
placeholder="Your email"
69-
onKeyUp={event => handleInputKeyEvent(event)}
70-
/>
71-
<button onClick={handleFormSubmit}>Submit</button>
72-
</div>
73-
<div className={newsletterStyles.newsletterFormInfo}>
74-
{status === 'sending' && (
75-
<div className={newsletterStyles.newsletterFormSending}>
76-
Sending...
67+
<section className={newsletterStyles.newsletter}>
68+
<div className={newsletterStyles.newsletter__container}>
69+
<h4 className={newsletterStyles.newsletter__title}>
70+
Sign up for news &#62;
71+
</h4>
72+
<div>
73+
<form
74+
className={newsletterStyles.newsletter__form}
75+
onSubmit={handleFormSubmit}
76+
>
77+
<input
78+
className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__name}`}
79+
type="text"
80+
name="name"
81+
placeholder="name"
82+
/>
83+
<input
84+
className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__email}`}
85+
onChange={event => setEmail(event?.target?.value ?? '')}
86+
type="email"
87+
name="email"
88+
placeholder="email"
89+
onKeyUp={event => handleInputKeyEvent(event)}
90+
/>
91+
<button className={newsletterStyles.newsletter__button}>
92+
subscribe
93+
</button>
94+
</form>
95+
<div className={newsletterStyles.newsletterFormInfo}>
96+
{status === 'sending' && (
97+
<div className={newsletterStyles.newsletterFormSending}>
98+
Sending...
99+
</div>
100+
)}
101+
{status === 'error' || error ? (
102+
<div
103+
className={newsletterStyles.newsletterFormError}
104+
dangerouslySetInnerHTML={{
105+
__html: error || getMessage(message),
106+
}}
107+
/>
108+
) : null}
109+
{status === 'success' && status !== 'error' && !error && (
110+
<div
111+
className={newsletterStyles.newsletterFormSuccess}
112+
dangerouslySetInnerHTML={{ __html: decode(message) }}
113+
/>
114+
)}
77115
</div>
78-
)}
79-
{status === 'error' || error ? (
80-
<div
81-
className={newsletterStyles.newsletterFormError}
82-
dangerouslySetInnerHTML={{ __html: error || getMessage(message) }}
83-
/>
84-
) : null}
85-
{status === 'success' && status !== 'error' && !error && (
86-
<div
87-
className={newsletterStyles.newsletterFormSuccess}
88-
dangerouslySetInnerHTML={{ __html: decode(message) }}
89-
/>
90-
)}
116+
</div>
91117
</div>
92-
</>
118+
</section>
93119
);
94120
};
95121

0 commit comments

Comments
 (0)