Skip to content

Commit

Permalink
Minor redesign + faq
Browse files Browse the repository at this point in the history
  • Loading branch information
@JMPerez
JMPerez committed Apr 3, 2023
1 parent 85fef44 commit f0b2fec
Show file tree
Hide file tree
Showing 16 changed files with 8,374 additions and 532 deletions.
22 changes: 22 additions & 0 deletions components/faq.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { useTranslation } from 'react-i18next';
const Faq = () => {
const { t, i18n } = useTranslation();
return (
<section className="bg-white dark:bg-gray-900">
<div className="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<h2 className="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{t('faq.section-title')}</h2>
<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">
{Array(10).fill(null).map((_, i) => (<div className="mb-6" key={i}>
<h3 className="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<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>
{t('faq.question-' + (i + 1))}
</h3>
<p className="text-gray-500 dark:text-gray-400">{t('faq.answer-' + (i + 1))}</p>
</div>))}
</div>
</div>
</section>
)
};

export default Faq;
116 changes: 40 additions & 76 deletions components/features.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,49 @@
import React, { Component } from 'react';
import { useTranslation } from 'react-i18next';

const Features = () => {
const { t, i18n } = useTranslation();
return (
<div className="row marketing cols-3">
<div>
<h4>{t('features.find-remove.header')}</h4>
<p
dangerouslySetInnerHTML={{
__html: t('features.find-remove.body', {
strongOpen: '<strong>',
strongClose: '</strong>',
}),
}}
/>
<div className="mx-auto py-16 max-w-4xl px-4 sm:px-6 lg:px-8">
<div className="flex flex-col gap-8 md:grid md:grid-cols-3 md:gap-x-12 md:space-x-0">
<div>
<h4 className="text-xl font-semibold text-slate-800 dark:text-slate-200">{t('features.find-remove.header')}</h4>
<p
className="pt-2 text-sm leading-6 font-semibold text-slate-600 dark:text-slate-300"
dangerouslySetInnerHTML={{
__html: t('features.find-remove.body', {
strongOpen: '<strong>',
strongClose: '</strong>',
}),
}}
/>
</div>
<div>
<h4 className="text-xl font-semibold text-slate-800 dark:text-slate-200">{t('features.safer.header')}</h4>
<p className="pt-2 text-sm leading-6 font-semibold text-slate-600 dark:text-slate-300"
dangerouslySetInnerHTML={{
__html: t('features.safer.body', {
strongOpen: '<strong>',
strongClose: '</strong>',
}),
}}
/>
</div>
<div>
<h4 className="text-xl font-semibold text-slate-800 dark:text-slate-200">{t('features.open-source.header')}</h4>
<p className="pt-2 text-sm leading-6 font-semibold text-slate-600 dark:text-slate-300"
dangerouslySetInnerHTML={{
__html: t('features.open-source.body', {
linkGithubOpen:
'<strong><a href="https://github.com/JMPerez/spotify-dedup/">',
linkGithubClose: '</a></strong>',
linkWebApiOpen:
'<a href="https://developer.spotify.com/web-api/">',
linkWebApiClose: '</a>',
}),
}}
/>
</div>
</div>
<div>
<h4>{t('features.safer.header')}</h4>
<p
dangerouslySetInnerHTML={{
__html: t('features.safer.body', {
strongOpen: '<strong>',
strongClose: '</strong>',
}),
}}
/>
</div>
<div>
<h4>{t('features.open-source.header')}</h4>
<p
dangerouslySetInnerHTML={{
__html: t('features.open-source.body', {
linkGithubOpen:
'<strong><a href="https://github.com/JMPerez/spotify-dedup/">',
linkGithubClose: '</a></strong>',
linkWebApiOpen:
'<a href="https://developer.spotify.com/web-api/">',
linkWebApiClose: '</a>',
}),
}}
/>
</div>
<style jsx>
{`
.row {
margin-right: -15px;
margin-left: -15px;
}
.marketing {
padding-left: 15px;
padding-right: 15px;
}
.row:after,
.row:before {
display: table;
content: ' ';
}
.row:after {
clear: both;
}
h4 {
font-size: 18px;
line-height: 1.1;
margin-top: 10px;
margin-bottom: 10px;
}
.cols-3 > div {
flex: 1;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 4px;
}
@media (min-width: 768px) {
.cols-3 {
display: flex;
flex-wrap: wrap;
}
}
`}
</style>
</div>
);
};
Expand Down
99 changes: 46 additions & 53 deletions components/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,54 @@
import { useTranslation } from 'react-i18next';
import LanguageSelector from './languageSelector';

const Footer = () => {
const { t } = useTranslation();
return (
<div className="footer">
<p>
<span
dangerouslySetInnerHTML={{
__html: t('footer.author', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://jmperezperez.com">',
linkClose: '</a>',
}),
}}
/>{' '}
·{' '}
<span
dangerouslySetInnerHTML={{
__html: t('footer.github', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://github.com/JMPerez/spotify-dedup/">',
linkClose: '</a>',
}),
}}
/>
·{' '}
<span
dangerouslySetInnerHTML={{
__html: t('footer.bmc', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://www.buymeacoffee.com/jmp">',
linkClose: '</a>',
}),
}}
/>
·{' '}
<span
dangerouslySetInnerHTML={{
__html: t('footer.musicalyst', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://musicalyst.com">',
linkClose: '</a>',
}),
}}
/>
</p>
<style jsx>
{`
.footer {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
color: var(--secondary-text-color);
text-align: center;
}
`}
</style>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-sm leading-6">
<div className="pt-10 pb-14 border-t border-slate-200 justify-between text-slate-500 dark:border-slate-200/5">
<p className="mb-4">
<span
dangerouslySetInnerHTML={{
__html: t('footer.author', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://jmperezperez.com">',
linkClose: '</a>',
}),
}}
/>{' '}
·{' '}
<span
dangerouslySetInnerHTML={{
__html: t('footer.github', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://github.com/JMPerez/spotify-dedup/">',
linkClose: '</a>',
}),
}}
/>
·{' '}
<span
dangerouslySetInnerHTML={{
__html: t('footer.bmc', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://www.buymeacoffee.com/jmp">',
linkClose: '</a>',
}),
}}
/>
·{' '}
<span
dangerouslySetInnerHTML={{
__html: t('footer.musicalyst', {
linkOpen:
'<a target="_blank" rel="noreferrer" href="https://musicalyst.com">',
linkClose: '</a>',
}),
}}
/>
</p>
<LanguageSelector />
</div>
</div>
);
};
Expand Down
20 changes: 11 additions & 9 deletions components/head.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
const Head = () => {
return (
<div className="flex items-center mb-6 mx-4 md:mx-0">
<h3>
<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="" />
<span className="text">Spotify Dedup</span>
</h3>
<style jsx>
{`
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center py-6">
<div className="flex items-center mb-6 mx-4 md:mx-0">
<h3>
<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="" />
<span className="text">Spotify Dedup</span>
</h3>
<style jsx>
{`
.nav {
padding-left: 0;
margin-bottom: 0;
Expand Down Expand Up @@ -53,10 +54,11 @@ const Head = () => {
img {
width: 50px;
height: 40px;
margin: 0 10px;
margin-right: 10px;
}
`}
</style>
</style>
</div>
</div>
);
};
Expand Down
Loading

1 comment on commit f0b2fec

@vercel
Copy link

@vercel vercel bot commented on f0b2fec Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

spotify-dedup – ./

spotify-dedup-jmperez-team.vercel.app
spotify-dedup-git-master-jmperez-team.vercel.app
www.spotify-dedup.com
spotify-dedup.com

Please sign in to comment.