Skip to content

Commit 7759598

Browse files
mftsmfts
authored
Merge pull request #296 from shnai0/alternative-pages
Alternative pages small updates
2 parents 62acb34 + 0a90d2e commit 7759598

File tree

3 files changed

+70
-78
lines changed

3 files changed

+70
-78
lines changed

‎pages/alternatives/docsend.tsx

Lines changed: 70 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Head from "next/head";
22
import Footer from "@/components/web/footer";
33
import { Disclosure } from "@headlessui/react";
44
import { CheckIcon } from "lucide-react";
5+
import { XIcon } from "lucide-react";
56
import { cn } from "@/lib/utils";
67
import {
78
Plus as PlusSmallIcon,
@@ -124,17 +125,12 @@ const tiers: {
124125
price: { monthly: "$0", annually: "$144" },
125126
description: "Papermark plans start from freemium",
126127
features: [
127-
"1 user",
128-
"Unlimited links",
129-
"Unlimited files",
130-
"Analytics for each page",
131-
"Document sharing controls",
132128
"Open Source",
133-
"✅ Custom domain",
134-
"✅ Advanced tracking system",
135-
"✅ Work as a team",
136-
"✅ Host by yourself",
137-
"✅ Pitchdeck analytics",
129+
"Custom domain",
130+
"Advanced tracking system",
131+
"Work as a team",
132+
"Host by yourself",
133+
"Pitchdeck analytics",
138134
],
139135

140136
bgColor: "#fb7a00",
@@ -157,7 +153,7 @@ const tiers: {
157153
"Team access",
158154
"Hosting",
159155
],
160-
bgColor: "bg-gray-200",
156+
bgColor: "bg-gray-100",
161157
borderColor: "#bg-gray-800",
162158
textColor: "#bg-gray-800",
163159
buttonText: "Start with DocSend alternative",
@@ -224,7 +220,7 @@ export default function DocsendPage() {
224220
/>
225221
<meta
226222
property="og:description"
227-
content="Looking for DocSend alternatives? Papermark is the leading open-source alternative to DocSend. Experience the advantages of secure document sharing, real-time analytics, and more."
223+
content="Looking for DocSend alternatives? Papermark is the leading open-source alternative to DocSend in 2024. Experience the advantages of secure document sharing, real-time analytics, and more."
228224
/>
229225
<meta
230226
property="og:image"
@@ -235,33 +231,34 @@ export default function DocsendPage() {
235231
</Head>
236232

237233
{/* Hero section */}
238-
<div className="flex flex-1 flex-col bg-white text-black">
234+
<div className="flex flex-1 flex-col bg-white text-black justify-center">
239235
<Navbar />
240-
<div className="max-w-5xl w-full mx-auto px-4 md:px-8">
241-
<div className="pt-24">
236+
<div className="max-w-5xl w-full mx-auto px-4 md:px-8 text-center">
237+
<div className="pt-32">
242238
<div className=" pb-4">
243239
<img
244240
src="https://www.papermark.io/_static/docsend/logo.png"
245241
alt="App screenshot"
246-
className=""
247-
width={100}
242+
className="mx-auto"
243+
width={150}
248244
height={50}
249245
/>
250246
</div>
251-
<div className="relative rounded-full px-3 py-1 text-sm leading-6 text-black dark:text-white ring-1 ring-black/10 dark:ring-white/10 hover:ring-white/20">
247+
{/* <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-black ring-black/10 hover:ring-white/20">
252248
Free DocSend alternative
253-
</div>
254-
<h1 className="text-6xl md:text-6xl text-balance">
249+
</div> */}
250+
<h1 className="text-6xl text-balance">
255251
Open Source
256252
<br />
257253
DocSend alternative
258254
</h1>
259-
<p className="text-2xl mt-8 text-balance max-w-3xl">
260-
Powerful software to send PitchDeck with custom domain
255+
<p className="text-xl mt-8 text-balance max-w-3xl mx-auto md:text-2xl">
256+
Powerful software to send PitchDeck and other documents with
257+
custom domain
261258
</p>
262259
<div className="pt-8 space-x-2">
263260
<Link href="/login">
264-
<Button className="text-white bg-gray-800 rounded-3xl hover:bg-gray-600">
261+
<Button className="text-white bg-gray-800 rounded-3xl hover:bg-gray-500 justify-center">
265262
Send document for free
266263
</Button>
267264
</Link>
@@ -292,11 +289,10 @@ export default function DocsendPage() {
292289
</div>
293290
</div>
294291
</div>
295-
296292
{/* Comparison section */}
297293
<div className="max-w-5xl w-full mx-auto px-4 md:px-8">
298294
<div className="pt-32 pb-2">
299-
<h2 className="text-4xl md:text-6xl text-balance">
295+
<h2 className="text-5xl text-balance">
300296
Select Free
301297
<br />
302298
DocSend alternative
@@ -320,22 +316,22 @@ export default function DocsendPage() {
320316
<div className="border-b border-black p-6 bg-gray-100">
321317
<h3
322318
id={tier.id}
323-
className="text-balance text-gray-900 text-xl leading-8"
319+
className="text-balance text-gray-800 text-xl leading-8"
324320
>
325321
{tier.name}
326322
</h3>
327323
</div>
328324
<div className="p-6">
329-
<p className="mt-4 text-sm leading-6 text-gray-600 text-balance">
325+
<p className="mt-4 text-sm leading-6 text-gray-500 text-balance">
330326
{tier.description}
331327
</p>
332328
<p className="mt-6 flex items-baseline gap-x-1">
333-
<span className="text-balance text-4xl font-medium text-gray-900">
329+
<span className="text-balance text-4xl font-medium text-gray-800">
334330
{tier.price[frequency.value]}
335331
</span>
336332
<span
337333
className={cn(
338-
"text-sm font-semibold leading-6 text-gray-600",
334+
"text-sm font-semibold leading-6 text-gray-500",
339335
tier.id === "tier-enterprise" ? "hidden" : "",
340336
)}
341337
>
@@ -344,14 +340,24 @@ export default function DocsendPage() {
344340
</p>
345341
<ul
346342
role="list"
347-
className="mt-8 space-y-3 text-sm leading-6 text-gray-600"
343+
className="mt-8 space-y-3 text-sm leading-6 text-gray-500"
348344
>
349-
{tier.features.map((feature) => (
350-
<li key={feature} className="flex gap-x-3">
351-
<CheckIcon
352-
className="h-6 w-5 flex-none text-[#fb7a00]"
353-
aria-hidden="true"
354-
/>
345+
{tier.features.map((feature, index) => (
346+
<li
347+
key={index}
348+
className="flex items-center gap-x-3"
349+
>
350+
{tier.id === "tier-free" ? (
351+
<CheckIcon
352+
className="h-6 w-6 text-green-500"
353+
aria-hidden="true"
354+
/>
355+
) : (
356+
<XIcon
357+
className="h-6 w-6 text-red-500"
358+
aria-hidden="true"
359+
/>
360+
)}
355361
{feature}
356362
</li>
357363
))}
@@ -381,6 +387,8 @@ export default function DocsendPage() {
381387
</div>
382388
</div>
383389

390+
{/* /* Feature Section*/}
391+
384392
<div
385393
className="w-full mx-auto max-w-5xl px-4 md:px-8 py-20"
386394
id="features"
@@ -406,38 +414,26 @@ export default function DocsendPage() {
406414
<dt className="inline text-gray-500 text-xl">
407415
{feature.name}
408416
</dt>{" "}
409-
<dd className="inline text-base text-balance">
417+
<dd className="inline text-balance text-balance">
410418
{feature.description}
411419
</dd>
412420
</div>
413421
))}
414422
</dl>
415423
</div>
416424
</div>
417-
418425
{/* Testimonial section */}
419-
<div className="relative z-10 mt-32 bg-white dark:bg-gray-900 pb-20 sm:mt-56 sm:pb-24 xl:pb-0">
420-
<div
421-
className="absolute inset-0 overflow-hidden"
422-
aria-hidden="true"
423-
>
424-
<div className="absolute left-[calc(50%-19rem)] top-[calc(50%-36rem)] transform-gpu blur-3xl">
425-
<div
426-
className="aspect-[1097/1023] w-[68.5625rem] bg-gradient-to-r from-[#ff4694] to-[#776fff] opacity-25"
427-
style={{
428-
clipPath:
429-
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
430-
}}
431-
/>
432-
</div>
433-
</div>
434-
<div className="mx-auto flex max-w-7xl flex-col items-center gap-x-8 gap-y-10 px-6 sm:gap-y-8 lg:px-8 xl:flex-row xl:items-stretch">
426+
<div
427+
className="w-full mx-auto max-w-5xl px-4 md:px-8 py-20 bg-gray-100 rounded-3xl"
428+
id="features"
429+
>
430+
<div className="mx-auto flex flex-col items-center gap-x-8 gap-y-10 px-6 sm:gap-y-8 lg:px-8 xl:flex-row xl:items-stretch">
435431
<div className="-mt-8 w-full max-w-2xl xl:-mb-8 xl:w-96 xl:flex-none flex items-center justify-center">
436432
<div className="relative w-64 h-64">
437433
{" "}
438434
<img
439435
className="absolute inset-0 object-cover rounded-2xl bg-gray-800 shadow-2xl"
440-
src="https://pbs.twimg.com/profile_images/1506792347840888834/dS-r50Je_400x400.jpg"
436+
src="https://www.papermark.io/_static/testimonials/jaski.jpeg"
441437
alt=""
442438
/>
443439
</div>
@@ -456,46 +452,44 @@ export default function DocsendPage() {
456452
/>
457453
<use href="#b56e9dab-6ccb-4d32-ad02-6b4bb5d9bbeb" x={86} />
458454
</svg>
459-
<blockquote className="text-xl font-semibold leading-8 text-gray-800 dark:text-white sm:text-2xl sm:leading-9">
455+
<blockquote className="text-xl font-medium leading-8 text-balance text-gray-800 text-black sm:text-2xl sm:leading-9">
460456
<p>
461-
This looks awesome!! Incredible work – love how the link
462-
was automatically copied to clipboard when it&apos;s
463-
created.
457+
True builders listen to their users and build what they
458+
need. Thanks Papermark team for solving a big pain point.
459+
DocSend monopoly will end soon!
464460
</p>
465461
</blockquote>
466-
<figcaption className="mt-8 text-base">
467-
<div className="font-semibold text-black dark:text-white">
468-
Steven Tey
469-
</div>
470-
<div className="mt-1 text-gray-500">
471-
Senior Developer Advocate at Vercel
462+
<figcaption className="mt-8 text-balance ">
463+
<div className="font-semibold text-black ">Jaski</div>
464+
<div className="mt-1 text-gray-500 ">
465+
Founder in web3 space
472466
</div>
473467
</figcaption>
474468
</figure>
475469
</div>
476470
</div>
477471
</div>
478-
479472
{/* FAQ section */}
480473
<div
481-
className="w-full mx-auto max-w-5xl px-4 md:px-8 py-20 "
474+
className="w-full mx-auto max-w-5xl px-4 md:px-8 py-32 "
482475
id="features"
483476
>
484-
<h2 className="text-4xl text-balance pt-12 pb-20 max-w-3xl">
485-
Share docs with ease{" "}
477+
<h2 className="text-4xl text-balance pt-6 max-w-3xl">
478+
FAQ{" "}
486479
<span className="text-gray-500">
487-
Share your document with custom domain and branding
480+
Everything you need to know about Papermark - DocSend
481+
alternative
488482
</span>
489483
</h2>
490484
<div className="">
491-
<dl className="mt-10 space-y-6 divide-y divide-gray-900/10 dark:divide-gray-200/10">
485+
<dl className="mt-10 space-y-6 divide-y divide-gray-800/10 ">
492486
{faqs.map((faq) => (
493487
<Disclosure as="div" key={faq.question} className="pt-6">
494488
{({ open }) => (
495489
<>
496490
<dt>
497-
<Disclosure.Button className="flex w-full items-start justify-between text-left text-gray-900 dark:text-gray-200">
498-
<span className="text-base font-semibold leading-7">
491+
<Disclosure.Button className="flex w-full items-start justify-between text-left text-gray-800">
492+
<span className="text-balance font-medium leading-7">
499493
{faq.question}
500494
</span>
501495
<span className="ml-6 flex h-7 items-center">
@@ -514,7 +508,7 @@ export default function DocsendPage() {
514508
</Disclosure.Button>
515509
</dt>
516510
<Disclosure.Panel as="dd" className="mt-2 pr-12">
517-
<p className="text-base leading-7 text-gray-500">
511+
<p className="text-balance leading-7 text-gray-500">
518512
{faq.answer}
519513
</p>
520514
</Disclosure.Panel>
@@ -525,9 +519,7 @@ export default function DocsendPage() {
525519
</dl>
526520
</div>
527521
</div>
528-
529522
{/* CTA */}
530-
531523
<div className="bg-[#fb7a00]">
532524
<div className="w-full mx-auto max-w-5xl py-32 px-4 md:px-8">
533525
<h2 className="text-4xl text-balance ">
@@ -542,13 +534,13 @@ export default function DocsendPage() {
542534
>
543535
<Button
544536
variant="outline"
545-
className="text-base rounded-3xl bg-transparent border-black"
537+
className="text-balance rounded-3xl bg-transparent border-black"
546538
>
547539
Book a demo
548540
</Button>
549541
</Link>
550542
<Link href="/login">
551-
<Button className="text-base rounded-3xl">
543+
<Button className="text-balance rounded-3xl">
552544
Start for free
553545
</Button>
554546
</Link>

‎public/_static/testimonials/jaski.jpeg

445 KB
Loading

‎public/_static/testimonials/steven.jpeg

161 KB
Loading

0 commit comments

Comments
 (0)