Skip to content

Commit 4a1b635

Browse files
RostislavDuginRostislavDugin
committed
FEATURE (videos): Add videos
1 parent 2f806cd commit 4a1b635

File tree

3 files changed

+113
-3
lines changed

3 files changed

+113
-3
lines changed

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function RootLayout({
77
children: React.ReactNode;
88
}>) {
99
return (
10-
<html lang="en">
10+
<html lang="en" suppressHydrationWarning>
1111
<head>
1212
{/* DNS Prefetch & Preconnect for Analytics */}
1313
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />

‎app/page.tsx‎

Lines changed: 112 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,8 +262,8 @@ export default function Index() {
262262
{/* END OF NAVBAR */}
263263

264264
{/* MAIN SECTION */}
265-
<div className="flex justify-center py-[50px] pt-[110px] md:py-[100px] md:pt-[180px]">
266-
<main className="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:flex lg:w-[1200px] lg:max-w-[1200px]">
265+
<div className="flex justify-center">
266+
<main className="w-[320px] py-[50px] pt-[110px] md:py-[100px] md:pt-[180px] border-blue-600 max-w-[320px] sm:w-[640px] border-b sm:max-w-[640px] lg:flex lg:w-[1200px] lg:max-w-[1200px]">
267267
<div className="lg:w-[500px] lg:min-w-[500px]">
268268
<h1 className="max-w-[300px] text-2xl font-bold sm:max-w-[400px] sm:text-3xl">
269269
PostgreSQL backup tool
@@ -379,6 +379,98 @@ export default function Index() {
379379
</div>
380380
{/* END OF MAIN SECTION */}
381381

382+
{/* OVERVIEW SECTION */}
383+
<div className="bg-linear-to-b from-white to-gray-50 py-12 sm:py-16 md:py-20">
384+
<div className="flex justify-center">
385+
<div className="flex flex-col gap-6 lg:flex-row lg:gap-8 w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]">
386+
{/* Quote Section */}
387+
<div className="flex-1 rounded-lg border border-blue-600 bg-linear-to-br p-5 shadow-lg md:p-6">
388+
<div className="space-y-3 text-base leading-relaxed md:text-base">
389+
<p className="mb-5">
390+
I am backuping a lot of databases for my projects. Before I
391+
used manual written scripts with{" "}
392+
<span className="text-gray-700">
393+
<code>pg_dump</code>
394+
</span>{" "}
395+
and it was a pain: I have to manage them, maintain, care about
396+
whether they are really working.
397+
</p>
398+
399+
<p className="mb-5">
400+
So I decided to create Postgresus:{" "}
401+
<span className="underline decoration-blue-600 decoration-2">
402+
to make scheduled backups of tens of DBs via simple UI
403+
</span>{" "}
404+
and receive notifications when backups are done or failed.
405+
Moreover, it was important to me to make{" "}
406+
<b>Postgresus easy deployable within 2 minutes</b>.
407+
</p>
408+
409+
<p>
410+
Now I really happy to say that I use it it production and it
411+
works great! Also, now I can share access to backups with my
412+
team that may be useful for DevOps and DBAs teams as well.
413+
</p>
414+
415+
<p>
416+
By the way, the project is written in Go. If you like what
417+
I&apos;ve created — please star it on GitHub ⭐. It&apos;s
418+
really will help me.
419+
</p>
420+
421+
<div className="mt-5 flex items-center gap-3 border-t border-blue-200 pt-3">
422+
<img
423+
src="/images/index/rostislav.png"
424+
alt="Rostislav Dugin"
425+
loading="lazy"
426+
className="h-12 w-12 shrink-0 rounded-full object-cover"
427+
/>
428+
429+
<div>
430+
<a
431+
href="https://rostislav-dugin.com"
432+
target="_blank"
433+
className="font-semibold text-blue-600 transition-colors hover:text-blue-700"
434+
>
435+
Rostislav Dugin
436+
</a>
437+
<p className="text-sm text-gray-600">
438+
Developer of Postgresus
439+
</p>
440+
</div>
441+
</div>
442+
</div>
443+
</div>
444+
445+
{/* Video Section */}
446+
<div className="flex-1">
447+
<div className="">
448+
<div className="relative aspect-video w-full overflow-hidden rounded-lg shadow">
449+
<iframe
450+
src="https://www.youtube.com/embed/1qsAnijJfJE?si=LgbFoNc_Xg5C1saW"
451+
title="How to use Postgresus (overview)?"
452+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
453+
allowFullScreen
454+
className="absolute inset-0 h-full w-full"
455+
/>
456+
</div>
457+
458+
<h3 className="mb-1 mt-5 text-xl font-semibold md:text-xl">
459+
How to use Postgresus (overview)?
460+
</h3>
461+
462+
<p>
463+
Watch in this short 4 minutes video how to use Postgresus: how
464+
connect datase, how to configure backups schedule, how to
465+
download and restore backups, how to add team members and what
466+
is users&apos; audit logs
467+
</p>
468+
</div>
469+
</div>
470+
</div>
471+
</div>
472+
</div>
473+
382474
{/* HOW TO MAKE BACKUPS SECTION */}
383475
<div id="guide" className="flex justify-center py-[50px] md:py-[100px]">
384476
<div className="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]">
@@ -782,6 +874,24 @@ export default function Index() {
782874
Read more about installation →
783875
</a>
784876
</div>
877+
878+
<div className="mt-12">
879+
<p className="mb-6 text-base sm:text-lg">
880+
Also you can watch the video with guide how to install Postgresus
881+
on VPS (all 3 ways)
882+
</p>
883+
<div className="max-w-[800px]">
884+
<div className="relative aspect-video w-full overflow-hidden rounded-lg shadow-lg">
885+
<iframe
886+
src="https://www.youtube.com/embed/1qsAnijJfJE?si=KCa_IhCtPbOv5XfO"
887+
title="How to install Postgresus on VPS"
888+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
889+
allowFullScreen
890+
className="absolute inset-0 h-full w-full"
891+
/>
892+
</div>
893+
</div>
894+
</div>
785895
</div>
786896
</div>
787897
{/* END OF INSTALLATION SECTION */}

‎public/images/index/rostislav.png‎

28.7 KB
Loading

0 commit comments

Comments
 (0)