Skip to content
This repository was archived by the owner on Apr 1, 2024. It is now read-only.

Commit e10b5d6

Browse files
CeamKrierumutcanbolat
CeamKrier
and
umutcanbolat
authored
feat: 🎸 landing page's interface revamped (#55)
* feat: 🎸 why-us component implemented why us component implemented as a part of ui-revamp to give detailed info about the application * feat: 🎸 newsletter subscription component implemented This component will enable users to subscribe to newsletters of ius * feat: 🎸 faq component implemented FAQ component will provide easy-to-access answers to users * feat: 🎸 donation component implemented Donation component will help us to gather funding from the donations of our users * chore: 🤖 adjustments for deployment various adjustments done to get ready for deployment * feat: 🎸 newsletter registry logic implemented * feat: 🎸 newsletter will validate input * feat: 🎸 newsletter service integration done * refactor: 💡 mailchimp script removed from html file * feat: 🎸 bare-minimum of translations defined * UI revamp touches (#56) * refactor: 💡 refactor landing page * feat: 🎸 update texts * feat: 🎸 change jumbotron bg color * feat: 🎸 increase margins * feat: 🎸 style whyus more * feat: 🎸 set background color for newsletter subscription * feat: 🎸 align margins of donations * feat: 🎸 use space items collection for icons * feat: 🎸 style email subscription form * feat: 🎸 style donations * feat: 🎸 remove language selector ✅ Closes: git push * feat: 🎸 replace moon rover with rocket * feat: 🎸 change copy texts * feat: 🎸 style jumbotron for different screen sizes * refactor: 💡 remove unused import * feat: 🎸 put content in container * feat: 🎸 style whyus for iphone 5 screen size * feat: 🎸 design subscription for iphone 5s * feat: 🎸 style astronaut and donation text * feat: 🎸 style donation section * style: 💄 newsletter icon position updated * feat: 🎸 btc address added to donation options Co-authored-by: Emre Çakır <ceamkrier@gmail.com> * chore: remove localization * feat: add loading state to email subscription Co-authored-by: Umut Canbolat <hello@umutcanbolat.com>
1 parent 15507bf commit e10b5d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1190
-411
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
"debounce": "^1.2.0",
88
"react": "^16.7.0",
99
"react-dom": "^16.7.0",
10-
"react-intl": "^2.8.0",
1110
"react-router-dom": "^5.0.0",
1211
"react-scripts": "^3.0.1"
1312
},

‎public/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,22 @@
1919
async
2020
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
2121
></script>
22+
<!-- Hotjar Tracking Code for instantusername.com -->
23+
<script>
24+
(function(h, o, t, j, a, r) {
25+
h.hj =
26+
h.hj ||
27+
function() {
28+
(h.hj.q = h.hj.q || []).push(arguments);
29+
};
30+
h._hjSettings = { hjid: 2448198, hjsv: 6 };
31+
a = o.getElementsByTagName('head')[0];
32+
r = o.createElement('script');
33+
r.async = 1;
34+
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
35+
a.appendChild(r);
36+
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
37+
</script>
2238
<title>Instant Username Search</title>
2339
</head>
2440

‎src/components/App.js

+29-29
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
11
/* eslint-disable react/prop-types */
22
/* eslint-disable react/no-deprecated */
33
import React, { useState, useEffect, useMemo } from 'react';
4-
import { IntlProvider, addLocaleData } from 'react-intl';
54
import Search from './Search';
65
import Results from './Results';
76
import Footer from './Footer';
87
import Privacy from './Privacy';
98
import Terms from './Terms';
109
import LandingPage from './Landing';
1110

12-
import locales from '../translations/locales';
13-
import translations from '../translations';
14-
1511
import 'antd/dist/antd.css';
1612
import '../styles/App.css';
1713

1814
window.apiUrl = process.env.REACT_APP_API_URL;
1915

20-
addLocaleData(locales);
21-
22-
const defaultLanguage = navigator.language || navigator.userLanguage;
23-
2416
export default function App({ match }) {
25-
const { page, lang = defaultLanguage } = match.params;
17+
const { page } = match.params;
2618
const [services, setServices] = useState([]);
2719
const [username, setUsername] = useState('');
2820

@@ -46,16 +38,28 @@ export default function App({ match }) {
4638
let content;
4739

4840
if (username.length > 0) {
49-
content = <Results username={username} services={services} />;
41+
content = (
42+
<div className="container" id="content">
43+
<Results username={username} services={services} />;
44+
</div>
45+
);
5046
} else {
5147
// search is empty, show the page content
5248
switch (page) {
5349
case 'privacy':
54-
content = <Privacy />;
50+
content = (
51+
<div className="container" id="content">
52+
<Privacy />
53+
</div>
54+
);
5555
break;
5656
case 'terms':
5757
//terms and conditions
58-
content = <Terms />;
58+
content = (
59+
<div className="container" id="content">
60+
<Terms />
61+
</div>
62+
);
5963
break;
6064
default:
6165
content = <LandingPage />;
@@ -64,25 +68,21 @@ export default function App({ match }) {
6468
}
6569

6670
return (
67-
<IntlProvider locale={lang} messages={translations[lang]}>
68-
<>
69-
<div className="jumbotron">
70-
<div className="container" id="jumbotron">
71-
<Search input={username} onChange={inputChanged} />
72-
</div>
71+
<>
72+
<div className="jumbotron">
73+
<div className="container" id="jumbotron">
74+
<Search input={username} onChange={inputChanged} />
7375
</div>
74-
<div className="container" id="content">
75-
{content}
76-
</div>
77-
<div id="footer">
78-
<hr />
79-
<div className="container">
80-
<Footer page={page} lang={lang} />
81-
</div>
76+
</div>
77+
{content}
78+
<div id="footer">
79+
<hr />
80+
<div className="container">
81+
<Footer page={page} />
8282
</div>
83-
</>
84-
</IntlProvider>
83+
</div>
84+
</>
8585
);
8686
// eslint-disable-next-line
87-
}, [username, page, lang]);
87+
}, [username, page]);
8888
}

‎src/components/Donation.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import { Card, Tooltip } from 'antd';
3+
4+
import '../styles/Donation.css';
5+
6+
export default function Donation() {
7+
return (
8+
<div className="donation-container">
9+
<div className="donation-illustration">
10+
<img src={require('../resources/astronaut.svg')} alt="Donation illustration" />
11+
</div>
12+
<div className="donation-body">
13+
<h2>Enjoying the service?</h2>
14+
<p>
15+
We are more than happy to help you find your online usernames with ease. In order to
16+
sustain the service, we are accepting donations. It will help us pay various expenses to
17+
run this service and provide it to everyone for free. If you find our service helpful,
18+
consider supporting us!
19+
</p>
20+
</div>
21+
<div className="donation-optionsRow">
22+
<div className="donation-option">
23+
<a
24+
target="_blank"
25+
rel="noopener noreferrer"
26+
href="https://www.buymeacoffee.com/1ulP4IGFm"
27+
>
28+
<Card className="donation-card" hoverable>
29+
<div className="donation-content">
30+
<img src={require('../resources/bmc-coffee.svg')} alt="Buy me a coffee!" />
31+
<span>Buy us a coffee!</span>
32+
</div>
33+
</Card>
34+
</a>
35+
</div>
36+
<div className="donation-option">
37+
<Tooltip
38+
title={
39+
<div className="donation-btc-address-tooltip">
40+
<img src={require('../resources/btcDepositAddress.png')} alt="Bitcoin Address" />
41+
<span>1Mg7xc6eHqo9QsTAQeTu8DcrFHcNpTfkNa</span>
42+
</div>
43+
}
44+
>
45+
<Card hoverable>
46+
<div className="donation-content">
47+
<img src={require('../resources/bitcoin.svg')} alt="Donate cryptocurrency" />
48+
<span>Donate Bitcoin</span>
49+
</div>
50+
</Card>
51+
</Tooltip>
52+
</div>
53+
</div>
54+
</div>
55+
);
56+
}

‎src/components/Footer.js

+4-67
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,20 @@
11
import React, { Component } from 'react';
22
import { withRouter } from 'react-router-dom';
3-
import { Select } from 'antd';
4-
import { FormattedMessage } from 'react-intl';
53
import { Link } from 'react-router-dom';
6-
import translations from '../translations';
74
import '../styles/Footer.css';
85

9-
// ["en", "de", "tr", ...]
10-
const supportedLocaleStrings = Object.keys(translations);
11-
126
class Footer extends Component {
13-
handleChange = value => {
14-
let { page } = this.props;
15-
if (typeof page === 'undefined') {
16-
page = '';
17-
}
18-
this.props.history.push('/' + value + '/' + page);
19-
};
20-
217
render() {
22-
let { lang } = this.props;
23-
24-
// if user's default language (or the lang param read from url) is not supported, let's fallback to English.
25-
if (!supportedLocaleStrings.includes(lang)) {
26-
lang = 'en';
27-
}
28-
298
return (
309
<footer className="footer">
3110
<div className="vessel pull-left">
3211
<a href="https://github.com/umutcanbolat/instant-username-search/blob/master/LICENSE">
3312
{'© ' + new Date().getFullYear() + ' GPL 3.0'}
3413
</a>
35-
<a href="https://github.com/umutcanbolat/instant-username-search/">
36-
<FormattedMessage id="app.contribute" defaultMessage="Fork on GitHub" />
37-
</a>
38-
<Link to={'/' + lang + '/privacy'}>
39-
<FormattedMessage id="app.privacy" defaultMessage="Privacy" />
40-
</Link>
41-
<Link to={'/' + lang + '/terms'}>
42-
<FormattedMessage id="app.terms" defaultMessage="Terms" />
43-
</Link>
44-
<a href="mailto:help@instantusername.com">
45-
<FormattedMessage id="app.contact" defaultMessage="Contact" />
46-
</a>
47-
</div>
48-
<div className="languages pull-right">
49-
<div className="coffee">
50-
<a
51-
target="_blank"
52-
rel="noopener noreferrer"
53-
href="https://www.buymeacoffee.com/1ulP4IGFm"
54-
>
55-
<img
56-
src="https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg"
57-
alt="Buy me a coffee!"
58-
/>
59-
<span>
60-
<FormattedMessage id="app.coffee" defaultMessage="Buy me a coffee" />
61-
</span>
62-
</a>
63-
</div>
64-
<Select
65-
style={{ width: 120 }}
66-
placeholder="Language"
67-
value={lang}
68-
onChange={this.handleChange}
69-
>
70-
<Select.Option value="ca">Català</Select.Option>
71-
<Select.Option value="de">Deutsch</Select.Option>
72-
<Select.Option value="en">English</Select.Option>
73-
<Select.Option value="es">Español</Select.Option>
74-
<Select.Option value="fr">Français</Select.Option>
75-
<Select.Option value="pt">Portuguesa</Select.Option>
76-
<Select.Option value="ru">Pусский</Select.Option>
77-
<Select.Option value="tr">Türkçe</Select.Option>
78-
<Select.Option value="uk">Українська</Select.Option>
79-
<Select.Option value="zh">中文</Select.Option>
80-
</Select>
14+
<a href="https://github.com/umutcanbolat/instant-username-search/">Fork on GitHub</a>
15+
<Link to={'/privacy'}>Privacy</Link>
16+
<Link to={'/terms'}>Terms</Link>
17+
<a href="mailto:help@instantusername.com">Contact</a>
8118
</div>
8219
</footer>
8320
);

‎src/components/FrequentQuestions.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import { Collapse } from 'antd';
3+
4+
import '../styles/FrequentQuestions.css';
5+
6+
export default function FrequentQuestions({ questions = [] }) {
7+
return (
8+
<div className="frequentQuestions-container">
9+
<div className="frequentQuestions-illustration mobile">
10+
<img src={require('../resources/faq.png')} alt="Frequent questions" />
11+
</div>
12+
<h2>Frequently asked questions</h2>
13+
<div className="frequentQuestions-body">
14+
<Collapse className="frequentQuestions-collapse" accordion bordered={false}>
15+
{questions.map((q, index) => (
16+
<Collapse.Panel header={q.question} key={`faq-${index + 1}`}>
17+
<p className="frequentQuestions-answer">{q.answer}</p>
18+
</Collapse.Panel>
19+
))}
20+
</Collapse>
21+
<div className="frequentQuestions-illustration">
22+
<img src={require('../resources/faq.png')} alt="Frequent questions" />
23+
</div>
24+
</div>
25+
<div className="frequentQuestions-footer">
26+
<h3>Still have questions?</h3>
27+
<p>
28+
<a href="mailto:someone@yoursite.com?subject=I%20have%20a%20question">Mail</a> your
29+
question to us. We are happy to help!
30+
</p>
31+
</div>
32+
</div>
33+
);
34+
}

0 commit comments

Comments
 (0)