Skip to content

Commit

Permalink
add dummy new frontend design
Browse files Browse the repository at this point in the history
  • Loading branch information
@invisal
invisal committed Jul 17, 2024
1 parent 7f46cbc commit e4b60a1
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 130 deletions.
37 changes: 37 additions & 0 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,3 +258,40 @@ For Markdown Side
.mdx-content a {
@apply text-blue-500 underline;
}

@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}

@keyframes fadeOut {
0% {
opacity: 1;
}

100% {
opacity: 0;
}
}

.fade-view {
animation:
fadeIn ease-in-out both,
fadeOut ease-in forwards;
animation-range:
cover 30% contain 50%,
contain 90% cover 100%;
animation-timeline: view();
}

.fade-sticky {
position: sticky;
bottom: 0;
background-image: linear-gradient(to top, var(--background) 40%, transparent);
}
242 changes: 112 additions & 130 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import WebsiteLayout from "@/components/website-layout";
import { cn } from "@/lib/utils";
import type { Metadata } from "next";
import Link from "next/link";
import type { PropsWithChildren } from "react";

export const metadata: Metadata = {
title: "LibSQL Studio - LibSQL and rqlite client on your browser",
Expand All @@ -24,37 +23,44 @@ function LinkButton({ title, url }: Readonly<{ title: string; url: string }>) {
);
}

function Screenshot() {
function TestimonyItem() {
return (
<div className="my-2 mx-4">
<div className="max-w-[800px] mx-auto border-2 border-gray-200 bg-gray-200 rounded-lg overflow-hidden">
<div className="h-6 flex items-center">
<div className="grow" />
<div className="px-2 flex gap-1">
<div className="rounded-full h-3 w-3 bg-red-500" />
<div className="rounded-full h-3 w-3 bg-yellow-400" />
<div className="rounded-full h-3 w-3 bg-green-600" />
</div>
</div>
<img
src="/screenshot2.png"
className="w-full"
alt="LibSQL Studio Powerful Browser Database GUI"
style={{ aspectRatio: 1134 / 649 }}
/>
<div className="bg-secondary p-4 rounded-lg">
<div className="font-bold">Review Name</div>
<div>Company Name</div>
<div className="text-red-500 text-xl">★★★★★</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book
</p>
</div>
);
}

function TestimonyList() {
return (
<div className="mx-auto max-w-[800px]">
<div className="grid grid-cols-2 gap-4">
<TestimonyItem />
<TestimonyItem />
</div>
<div className="text-xl mt-4 px-4">
and thousands of happy developers use our tools.
</div>
</div>
);
}

function HeroSection() {
return (
<div className="mx-auto container py-16">
<div className="flex flex-col gap-4 justify-center mb-8 md:flex-row">
<div className="mx-auto max-w-[800px] px-4 py-16">
<div className="flex flex-col gap-4 justify-center mb-12 md:flex-row">
<LinkButton title="Open LibSQL Studio" url="/connect" />
</div>

<h2 className="text-center text-4xl font-bold">
<h2 className="text-center text-6xl font-bold">
Powerful SQLite-based Database Client
</h2>

Expand All @@ -67,40 +73,9 @@ function HeroSection() {
);
}

function FeatureItem({
children,
image,
reverse,
}: PropsWithChildren<{ reverse?: boolean; image?: string }>) {
return (
<div className="flex flex-col md:flex-row gap-8">
<div
className={
reverse
? "md:w-1/2 lg:w-1/2 text-gray-300 flex flex-col justify-center order-1"
: "md:w-1/2 lg:w-1/2 text-gray-300 flex flex-col justify-center order-1 lg:order-3"
}
>
{children}
</div>
<div className="md:w-1/2 lg:w-1/2 order-2">
{image ? (
<img
src={image}
className="w-full rounded shadow-lg"
alt="Data Editor"
/>
) : (
<div className="h-[300px] bg-gray-500" />
)}
</div>
</div>
);
}

function SupportDriver() {
return (
<div className="bg-secondary mt-12">
<div className="mt-12">
<div className="container mx-auto py-12">
<h2 className="text-center font-semibold text-2xl">
Supports a wide range of{" "}
Expand All @@ -120,88 +95,95 @@ function SupportDriver() {
);
}

function FeatureList() {
return (
<div className="mx-auto max-w-[800px] p-4 mt-12">
<div className="py-12">
<h1 className="text-3xl font-semibold mb-2">Powerful Data Editor</h1>

<p className="text-xl mb-4">
The handy data editor allows you to add, delete, and edit information.
Any changes you make in the data editor are saved on your device and
can be submitted all at once.
</p>
</div>

<div>
<div className="fade-view">
<video muted autoPlay loop className="rounded-lg">
<source
src="https://r2.invisal.com/libsqlstudio-table-editor.mp4"
type="video/mp4"
/>
</video>
</div>

<div className="fade-sticky py-12">
<h1 className="text-3xl font-semibold mb-2">Create and Edit Table</h1>

<p className="text-xl mb-4">
LibSQL Studio allows you to quickly create, modify, and remove table
columns with just a few clicks without writing any SQL.
</p>
</div>
</div>

<div>
<div className="fade-view">
<video muted autoPlay loop className="rounded-lg">
<source
src="https://r2.invisal.com/libsqlstudio-table-editor.mp4"
type="video/mp4"
/>
</video>
</div>

<div className="fade-sticky py-12">
<h1 className="text-3xl font-semibold mb-2">
Writing and Running SQL
</h1>

<p className="text-xl mb-4">
LibSQL Studio offers a simple query editor with auto-completion
features. You can run multiple queries and view their results
</p>
</div>
</div>

<div>
<div className="fade-view">
<video muted autoPlay loop className="rounded-lg">
<source
src="https://r2.invisal.com/libsqlstudio-table-editor.mp4"
type="video/mp4"
/>
</video>
</div>

<div className="fade-sticky py-12">
<div className="text-3xl font-semibold mb-2">
and much much more...
</div>

<p className="text-xl mb-4">
LibSQL Studio has many features and is regularly updated. Since it
is an open-source project, you can request new features or even
extend them yourself.
</p>
</div>
</div>
</div>
);
}

export default async function MainPage() {
return (
<WebsiteLayout>
<HeroSection />
<Screenshot />
<TestimonyList />
<FeatureList />
<SupportDriver />
<div className="bg-zinc-800 py-12">
<div className="max-w-[900px] px-4 mx-auto flex flex-col gap-12">
<FeatureItem reverse image="/data-editor.png">
<h2 className="text-xl mb-4 font-semibold text-white">
Powerful Data Editor
</h2>

<div className="flex flex-col gap-4">
<p>
The handy data editor allows you to add, delete, and edit
information.
</p>

<p>
Any changes you make in the data editor are saved on your device
and can be submitted all at once.
</p>

<p>
You can export any table or result set in various formats such
as CSV, JSON, and SQL.
</p>
</div>
</FeatureItem>

<FeatureItem image="/sql-editor.png">
<h2 className="text-xl mb-4 font-semibold text-white">
Writing and Running SQL
</h2>

<div className="flex flex-col gap-4">
<p>
LibSQL Studio offers a simple query editor with auto-completion
features. You can run multiple queries and view their results
</p>
<p>Enjoy unlimited query tab.</p>
</div>
</FeatureItem>

<FeatureItem reverse image="/edit-table.png">
<h2 className="text-xl mb-4 font-semibold text-white">
Create and Edit Table
</h2>
<p>
LibSQL Studio allows you to quickly create, modify, and remove
table columns with just a few clicks without writing any SQL.
</p>

<p className="mt-4">
Before executing, you have the option to preview the SQL script
for creating or modifying a table.
</p>
</FeatureItem>

<FeatureItem image="/open-source.png">
<h2 className="text-xl mb-4 font-semibold text-white">
No Download
</h2>
<p>
There is no need to download anything. LibSQL Studio runs directly
in your favorite web browser, making it compatible across
different platforms.
</p>

<h2 className="text-xl mb-4 font-semibold text-white mt-8">
Open Source and Free
</h2>

<p>
LibSQL Studio is open source and completely free to use. You have
the opportunity to suggest new features or even contribute to
adding them yourself.
</p>
</FeatureItem>
</div>
</div>
<div className="h-32"></div>
</WebsiteLayout>
);
}

0 comments on commit e4b60a1

Please sign in to comment.