Skip to content

Commit f0b2fec

Browse files
JMPerezJMPerez
committed
Minor redesign + faq
1 parent 85fef44 commit f0b2fec

16 files changed

Lines changed: 8374 additions & 532 deletions

File tree

‎components/faq.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useTranslation } from 'react-i18next';
2+
const Faq = () => {
3+
const { t, i18n } = useTranslation();
4+
return (
5+
<section className="bg-white dark:bg-gray-900">
6+
<div className="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
7+
<h2 className="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{t('faq.section-title')}</h2>
8+
<div className="grid pt-8 text-left border-t border-gray-200 md:gap-y-8 md:gap-x-16 dark:border-gray-700 md:grid-cols-2">
9+
{Array(10).fill(null).map((_, i) => (<div className="mb-6" key={i}>
10+
<h3 className="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
11+
<svg className="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd"></path></svg>
12+
{t('faq.question-' + (i + 1))}
13+
</h3>
14+
<p className="text-gray-500 dark:text-gray-400">{t('faq.answer-' + (i + 1))}</p>
15+
</div>))}
16+
</div>
17+
</div>
18+
</section>
19+
)
20+
};
21+
22+
export default Faq;

‎components/features.tsx‎

Lines changed: 40 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,49 @@
1-
import React, { Component } from 'react';
21
import { useTranslation } from 'react-i18next';
32

43
const Features = () => {
54
const { t, i18n } = useTranslation();
65
return (
7-
<div className="row marketing cols-3">
8-
<div>
9-
<h4>{t('features.find-remove.header')}</h4>
10-
<p
11-
dangerouslySetInnerHTML={{
12-
__html: t('features.find-remove.body', {
13-
strongOpen: '<strong>',
14-
strongClose: '</strong>',
15-
}),
16-
}}
17-
/>
6+
<div className="mx-auto py-16 max-w-4xl px-4 sm:px-6 lg:px-8">
7+
<div className="flex flex-col gap-8 md:grid md:grid-cols-3 md:gap-x-12 md:space-x-0">
8+
<div>
9+
<h4 className="text-xl font-semibold text-slate-800 dark:text-slate-200">{t('features.find-remove.header')}</h4>
10+
<p
11+
className="pt-2 text-sm leading-6 font-semibold text-slate-600 dark:text-slate-300"
12+
dangerouslySetInnerHTML={{
13+
__html: t('features.find-remove.body', {
14+
strongOpen: '<strong>',
15+
strongClose: '</strong>',
16+
}),
17+
}}
18+
/>
19+
</div>
20+
<div>
21+
<h4 className="text-xl font-semibold text-slate-800 dark:text-slate-200">{t('features.safer.header')}</h4>
22+
<p className="pt-2 text-sm leading-6 font-semibold text-slate-600 dark:text-slate-300"
23+
dangerouslySetInnerHTML={{
24+
__html: t('features.safer.body', {
25+
strongOpen: '<strong>',
26+
strongClose: '</strong>',
27+
}),
28+
}}
29+
/>
30+
</div>
31+
<div>
32+
<h4 className="text-xl font-semibold text-slate-800 dark:text-slate-200">{t('features.open-source.header')}</h4>
33+
<p className="pt-2 text-sm leading-6 font-semibold text-slate-600 dark:text-slate-300"
34+
dangerouslySetInnerHTML={{
35+
__html: t('features.open-source.body', {
36+
linkGithubOpen:
37+
'<strong><a href="https://github.com/JMPerez/spotify-dedup/">',
38+
linkGithubClose: '</a></strong>',
39+
linkWebApiOpen:
40+
'<a href="https://developer.spotify.com/web-api/">',
41+
linkWebApiClose: '</a>',
42+
}),
43+
}}
44+
/>
45+
</div>
1846
</div>
19-
<div>
20-
<h4>{t('features.safer.header')}</h4>
21-
<p
22-
dangerouslySetInnerHTML={{
23-
__html: t('features.safer.body', {
24-
strongOpen: '<strong>',
25-
strongClose: '</strong>',
26-
}),
27-
}}
28-
/>
29-
</div>
30-
<div>
31-
<h4>{t('features.open-source.header')}</h4>
32-
<p
33-
dangerouslySetInnerHTML={{
34-
__html: t('features.open-source.body', {
35-
linkGithubOpen:
36-
'<strong><a href="https://github.com/JMPerez/spotify-dedup/">',
37-
linkGithubClose: '</a></strong>',
38-
linkWebApiOpen:
39-
'<a href="https://developer.spotify.com/web-api/">',
40-
linkWebApiClose: '</a>',
41-
}),
42-
}}
43-
/>
44-
</div>
45-
<style jsx>
46-
{`
47-
.row {
48-
margin-right: -15px;
49-
margin-left: -15px;
50-
}
51-
.marketing {
52-
padding-left: 15px;
53-
padding-right: 15px;
54-
}
55-
.row:after,
56-
.row:before {
57-
display: table;
58-
content: ' ';
59-
}
60-
.row:after {
61-
clear: both;
62-
}
63-
h4 {
64-
font-size: 18px;
65-
line-height: 1.1;
66-
margin-top: 10px;
67-
margin-bottom: 10px;
68-
}
69-
.cols-3 > div {
70-
flex: 1;
71-
padding-right: 15px;
72-
padding-left: 15px;
73-
padding-bottom: 4px;
74-
}
75-
@media (min-width: 768px) {
76-
.cols-3 {
77-
display: flex;
78-
flex-wrap: wrap;
79-
}
80-
}
81-
`}
82-
</style>
8347
</div>
8448
);
8549
};

‎components/footer.tsx‎

Lines changed: 46 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,54 @@
11
import { useTranslation } from 'react-i18next';
2+
import LanguageSelector from './languageSelector';
23

34
const Footer = () => {
45
const { t } = useTranslation();
56
return (
6-
<div className="footer">
7-
<p>
8-
<span
9-
dangerouslySetInnerHTML={{
10-
__html: t('footer.author', {
11-
linkOpen:
12-
'<a target="_blank" rel="noreferrer" href="https://jmperezperez.com">',
13-
linkClose: '</a>',
14-
}),
15-
}}
16-
/>{' '}
17-
·{' '}
18-
<span
19-
dangerouslySetInnerHTML={{
20-
__html: t('footer.github', {
21-
linkOpen:
22-
'<a target="_blank" rel="noreferrer" href="https://github.com/JMPerez/spotify-dedup/">',
23-
linkClose: '</a>',
24-
}),
25-
}}
26-
/>
27-
·{' '}
28-
<span
29-
dangerouslySetInnerHTML={{
30-
__html: t('footer.bmc', {
31-
linkOpen:
32-
'<a target="_blank" rel="noreferrer" href="https://www.buymeacoffee.com/jmp">',
33-
linkClose: '</a>',
34-
}),
35-
}}
36-
/>
37-
·{' '}
38-
<span
39-
dangerouslySetInnerHTML={{
40-
__html: t('footer.musicalyst', {
41-
linkOpen:
42-
'<a target="_blank" rel="noreferrer" href="https://musicalyst.com">',
43-
linkClose: '</a>',
44-
}),
45-
}}
46-
/>
47-
</p>
48-
<style jsx>
49-
{`
50-
.footer {
51-
padding-top: 15px;
52-
padding-left: 15px;
53-
padding-right: 15px;
54-
color: var(--secondary-text-color);
55-
text-align: center;
56-
}
57-
`}
58-
</style>
7+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-sm leading-6">
8+
<div className="pt-10 pb-14 border-t border-slate-200 justify-between text-slate-500 dark:border-slate-200/5">
9+
<p className="mb-4">
10+
<span
11+
dangerouslySetInnerHTML={{
12+
__html: t('footer.author', {
13+
linkOpen:
14+
'<a target="_blank" rel="noreferrer" href="https://jmperezperez.com">',
15+
linkClose: '</a>',
16+
}),
17+
}}
18+
/>{' '}
19+
·{' '}
20+
<span
21+
dangerouslySetInnerHTML={{
22+
__html: t('footer.github', {
23+
linkOpen:
24+
'<a target="_blank" rel="noreferrer" href="https://github.com/JMPerez/spotify-dedup/">',
25+
linkClose: '</a>',
26+
}),
27+
}}
28+
/>
29+
·{' '}
30+
<span
31+
dangerouslySetInnerHTML={{
32+
__html: t('footer.bmc', {
33+
linkOpen:
34+
'<a target="_blank" rel="noreferrer" href="https://www.buymeacoffee.com/jmp">',
35+
linkClose: '</a>',
36+
}),
37+
}}
38+
/>
39+
·{' '}
40+
<span
41+
dangerouslySetInnerHTML={{
42+
__html: t('footer.musicalyst', {
43+
linkOpen:
44+
'<a target="_blank" rel="noreferrer" href="https://musicalyst.com">',
45+
linkClose: '</a>',
46+
}),
47+
}}
48+
/>
49+
</p>
50+
<LanguageSelector />
51+
</div>
5952
</div>
6053
);
6154
};

‎components/head.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
const Head = () => {
22
return (
3-
<div className="flex items-center mb-6 mx-4 md:mx-0">
4-
<h3>
5-
<img src="data:image/svg+xml,%3Csvg viewBox='0 0 211 169' width='211' height='169' fill='none' preserveAspectRatio='xMidYMin slice' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M207.475 79.414c3.756 2.35 3.756 7.821 0 10.172L82.284 167.952c-3.997 2.501-9.184-.371-9.184-5.086V6.134c0-4.715 5.188-7.587 9.184-5.086l125.191 78.366z' fill='%2393B2C6' /%3E%3Cpath d='M134.475 79.414c3.756 2.35 3.756 7.821 0 10.172L9.284 167.952C5.287 170.453.1 167.581.1 162.866V6.134c0-4.715 5.187-7.587 9.184-5.086l125.191 78.366z' fill='%23325972' /%3E%3C/svg%3E" alt="" />
6-
<span className="text">Spotify Dedup</span>
7-
</h3>
8-
<style jsx>
9-
{`
3+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center py-6">
4+
<div className="flex items-center mb-6 mx-4 md:mx-0">
5+
<h3>
6+
<img src="data:image/svg+xml,%3Csvg viewBox='0 0 211 169' width='211' height='169' fill='none' preserveAspectRatio='xMidYMin slice' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M207.475 79.414c3.756 2.35 3.756 7.821 0 10.172L82.284 167.952c-3.997 2.501-9.184-.371-9.184-5.086V6.134c0-4.715 5.188-7.587 9.184-5.086l125.191 78.366z' fill='%2393B2C6' /%3E%3Cpath d='M134.475 79.414c3.756 2.35 3.756 7.821 0 10.172L9.284 167.952C5.287 170.453.1 167.581.1 162.866V6.134c0-4.715 5.187-7.587 9.184-5.086l125.191 78.366z' fill='%23325972' /%3E%3C/svg%3E" alt="" />
7+
<span className="text">Spotify Dedup</span>
8+
</h3>
9+
<style jsx>
10+
{`
1011
.nav {
1112
padding-left: 0;
1213
margin-bottom: 0;
@@ -53,10 +54,11 @@ const Head = () => {
5354
img {
5455
width: 50px;
5556
height: 40px;
56-
margin: 0 10px;
57+
margin-right: 10px;
5758
}
5859
`}
59-
</style>
60+
</style>
61+
</div>
6062
</div>
6163
);
6264
};

0 commit comments

Comments
 (0)