Skip to content

Commit fa86d74

Browse files
akhileshthiteakhileshthite
authored
refactor: remove unnecessary newsletter form, improve readability and styling
1 parent b2b1093 commit fa86d74

File tree

1 file changed

+49
-90
lines changed

1 file changed

+49
-90
lines changed

‎src/components/LandingPage.js

Lines changed: 49 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,11 @@
11
import React from "react";
2-
// import firebase from "firebase/compat/app";
3-
// import db from "../firebase";
42
import Hero from "../images/hero.png";
53
import Peersky from "../images/peersky-browser.png";
64
import DScan from "../images/dscan.png";
75
import Dhost from "../images/dhost.png";
86
import NFT from "../images/1clicknft.png";
97

108
function LandingPage() {
11-
// Newsletter
12-
// const [input, setInput] = useState("");
13-
// const [subscribe, setSubscribe] = useState("");
14-
15-
// function inputHandler(e) {
16-
// setInput(e.target.value);
17-
// }
18-
19-
// async function submitHandler(e) {
20-
// e.preventDefault();
21-
// if (input) {
22-
// await db.collection("emails").add({
23-
// email: input,
24-
// time: firebase.firestore.FieldValue.serverTimestamp(),
25-
// });
26-
// setSubscribe("Subscribed successfully!");
27-
// setTimeout(() => {
28-
// setSubscribe("");
29-
// }, 3690);
30-
// }
31-
// }
329

3310
return (
3411
<div style={{ backgroundColor: "#FFFCF9" }}>
@@ -54,7 +31,6 @@ function LandingPage() {
5431
</b>
5532
</p>
5633
<div className="block justify-center">
57-
{/* <form onSubmit={submitHandler}> */}
5834
<div className="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
5935
<div className="relative w-48 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
6036
<label
@@ -71,28 +47,8 @@ function LandingPage() {
7147
@p2plabs.xyz:matrix.org
7248
</a>
7349
</label>
74-
{/* <input
75-
type="email"
76-
onChange={inputHandler}
77-
value={input}
78-
id="footer-field"
79-
placeholder="email address"
80-
name="footer-field"
81-
className="w-full bg-white bg-opacity-50 rounded border border-gray-300 focus:bg-transparent focus:ring-2 focus:ring-cyan-200 focus:border-cyan-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
82-
required
83-
/> */}
8450
</div>
85-
{/* <button
86-
type="submit"
87-
className="lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-cyan-400 border-0 py-2 px-4 focus:outline-none hover:bg-cyan-500 rounded"
88-
>
89-
Subscribe
90-
</button> */}
9151
</div>
92-
{/* </form> */}
93-
{/* <p className="text-sky-400 text-sm mt-2 md:text-left text-center">
94-
{subscribe}
95-
</p> */}
9652
</div>
9753
</div>
9854
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
@@ -124,39 +80,40 @@ function LandingPage() {
12480
</div>
12581
{/* dscan */}
12682
<div className="flex flex-wrap -m-4">
83+
{/* Peersky */}
12784
<div className="p-4 md:w-1/3">
128-
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
85+
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden flex flex-col">
12986
<img
13087
className="lg:h-48 md:h-36 w-full object-cover object-center"
13188
src={Peersky}
13289
alt="Peersky Browser"
13390
/>
134-
<div className="p-6">
91+
<div className="p-6 flex flex-col flex-grow">
13592
<h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
13693
Infrastructure
13794
</h2>
13895
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
13996
Peersky Browser
14097
</h1>
141-
<p className="leading-relaxed mb-3">
142-
A minimal p2p web browser.
98+
<p className="leading-relaxed mb-5">
99+
A Minimal Local-First P2P Web Browser: Access, Communicate, and Publish Offline
143100
</p>
144-
<br />
145-
<br />
146-
<div className="flex items-center flex-wrap">
101+
<div className="mt-auto">
147102
<a
148-
className="text-sky-500 hover:text-sky-600 inline-flex items-center md:mb-2 lg:mb-0"
103+
className="text-sky-500 hover:text-sky-600 inline-flex items-center"
149104
href="https://peersky.p2plabs.xyz"
105+
target="_blank"
106+
rel="noopener noreferrer"
150107
>
151108
Download for desktop
152109
<svg
153110
className="w-4 h-4 ml-2"
154111
viewBox="0 0 24 24"
155112
stroke="currentColor"
156-
stroke-width="2"
113+
strokeWidth="2"
157114
fill="none"
158-
stroke-linecap="round"
159-
stroke-linejoin="round"
115+
strokeLinecap="round"
116+
strokeLinejoin="round"
160117
>
161118
<path d="M5 12h14"></path>
162119
<path d="M12 5l7 7-7 7"></path>
@@ -166,28 +123,29 @@ function LandingPage() {
166123
</div>
167124
</div>
168125
</div>
169-
{/* dscan */}
126+
127+
{/* DScan */}
170128
<div className="p-4 md:w-1/3">
171-
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
129+
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden flex flex-col">
172130
<img
173131
className="lg:h-48 md:h-36 w-full object-cover object-center"
174132
src={DScan}
175133
alt="DScan"
176134
/>
177-
<div className="p-6">
135+
<div className="p-6 flex flex-col flex-grow">
178136
<h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
179-
Tool
137+
Publishing
180138
</h2>
181139
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
182140
DScan
183141
</h1>
184-
<p className="leading-relaxed mb-3">
185-
A decentralized storage and file-sharing tool that uploads
186-
content to IPFS and generates decentralized QR codes.
142+
<p className="leading-relaxed mb-5">
143+
A decentralized storage and file-sharing tool that uploads content to
144+
IPFS and generates decentralized QR codes.
187145
</p>
188-
<div className="flex items-center flex-wrap">
146+
<div className="mt-auto">
189147
<a
190-
className="text-sky-500 hover:text-sky-600 inline-flex items-center md:mb-2 lg:mb-0"
148+
className="text-sky-500 hover:text-sky-600 inline-flex items-center"
191149
href="https://chrome.google.com/webstore/detail/dscan-decentralized-qr-co/idpfgkgogjjgklefnkjdpghkifbjenap"
192150
target="_blank"
193151
rel="noopener noreferrer"
@@ -197,10 +155,10 @@ function LandingPage() {
197155
className="w-4 h-4 ml-2"
198156
viewBox="0 0 24 24"
199157
stroke="currentColor"
200-
stroke-width="2"
158+
strokeWidth="2"
201159
fill="none"
202-
stroke-linecap="round"
203-
stroke-linejoin="round"
160+
strokeLinecap="round"
161+
strokeLinejoin="round"
204162
>
205163
<path d="M5 12h14"></path>
206164
<path d="M12 5l7 7-7 7"></path>
@@ -210,29 +168,28 @@ function LandingPage() {
210168
</div>
211169
</div>
212170
</div>
213-
{/* dhost */}
171+
172+
{/* DHost */}
214173
<div className="p-4 md:w-1/3">
215-
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
174+
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden flex flex-col">
216175
<img
217176
className="lg:h-48 md:h-36 w-full object-cover object-center"
218177
src={Dhost}
219178
alt="Dhost"
220179
/>
221-
<div className="p-6">
180+
<div className="p-6 flex flex-col flex-grow">
222181
<h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
223182
Dev tool
224183
</h2>
225184
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
226185
DHost
227186
</h1>
228-
<p className="leading-relaxed mb-3">
229-
DHost is a vscode extension that publishes static websites
230-
to IPFS.
187+
<p className="leading-relaxed mb-5">
188+
DHost is a vscode extension that publishes static websites to IPFS.
231189
</p>
232-
<br />
233-
<div className="flex items-center flex-wrap">
190+
<div className="mt-auto">
234191
<a
235-
className="text-sky-500 hover:text-sky-600 inline-flex items-center md:mb-2 lg:mb-0"
192+
className="text-sky-500 hover:text-sky-600 inline-flex items-center"
236193
href="https://marketplace.visualstudio.com/items?itemName=DHost.dhost"
237194
target="_blank"
238195
rel="noopener noreferrer"
@@ -242,10 +199,10 @@ function LandingPage() {
242199
className="w-4 h-4 ml-2"
243200
viewBox="0 0 24 24"
244201
stroke="currentColor"
245-
stroke-width="2"
202+
strokeWidth="2"
246203
fill="none"
247-
stroke-linecap="round"
248-
stroke-linejoin="round"
204+
strokeLinecap="round"
205+
strokeLinejoin="round"
249206
>
250207
<path d="M5 12h14"></path>
251208
<path d="M12 5l7 7-7 7"></path>
@@ -255,28 +212,29 @@ function LandingPage() {
255212
</div>
256213
</div>
257214
</div>
258-
{/* 1clicknft */}
215+
216+
{/* 1ClickNFT */}
259217
<div className="p-4 md:w-1/3">
260-
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
218+
<div className="h-full bg-white border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden flex flex-col">
261219
<img
262220
className="lg:h-48 md:h-36 w-full object-cover object-center"
263221
src={NFT}
264222
alt="1clickNFT"
265223
/>
266-
<div className="p-6">
224+
<div className="p-6 flex flex-col flex-grow">
267225
<h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
268226
Dev tool
269227
</h2>
270228
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
271229
1clickNFT
272230
</h1>
273-
<p className="leading-relaxed mb-3">
274-
1clickNFT allows you to instantly upload NFT data to IPFS
275-
right from VS Code by using nft.storage.
231+
<p className="leading-relaxed mb-5">
232+
1clickNFT allows you to instantly upload NFT data to IPFS right from VS
233+
Code by using nft.storage.
276234
</p>
277-
<div className="flex items-center flex-wrap">
235+
<div className="mt-auto">
278236
<a
279-
className="text-sky-500 hover:text-sky-600 inline-flex items-center md:mb-2 lg:mb-0"
237+
className="text-sky-500 hover:text-sky-600 inline-flex items-center"
280238
href="https://marketplace.visualstudio.com/items?itemName=1clickNFT.1clicknft"
281239
target="_blank"
282240
rel="noopener noreferrer"
@@ -286,10 +244,10 @@ function LandingPage() {
286244
className="w-4 h-4 ml-2"
287245
viewBox="0 0 24 24"
288246
stroke="currentColor"
289-
stroke-width="2"
247+
strokeWidth="2"
290248
fill="none"
291-
stroke-linecap="round"
292-
stroke-linejoin="round"
249+
strokeLinecap="round"
250+
strokeLinejoin="round"
293251
>
294252
<path d="M5 12h14"></path>
295253
<path d="M12 5l7 7-7 7"></path>
@@ -299,6 +257,7 @@ function LandingPage() {
299257
</div>
300258
</div>
301259
</div>
260+
302261
</div>
303262
</div>
304263
</section>

0 commit comments

Comments
 (0)