From c50cd360b6f583c36e6a76e9cd0754ec15c4ddf1 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 17 Jul 2024 13:05:01 +0700
Subject: [PATCH] feat: add correct video

---
 src/app/page.tsx                  | 30 ++++++++--------
 src/components/website-layout.tsx | 59 ++++++++++++++-----------------
 2 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8fb81fd5..2e4a55ed 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -57,11 +57,7 @@ function TestimonyList() {
 
 function HeroSection() {
   return (
-    <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>
-
+    <div className="mx-auto max-w-[800px] px-4 pb-8 pt-16">
       <h2 className="text-center text-4xl lg:text-6xl font-bold">
         Powerful SQLite-based Database Client
       </h2>
@@ -71,6 +67,10 @@ function HeroSection() {
         SQLite-based databases like Turso, LibSQL, and rqlite. It runs entirely
         in your browser, so there&apos;s no need to download anything.
       </p>
+
+      <div className="flex gap-4 justify-center mt-12">
+        <LinkButton title="Open LibSQL Studio" url="/connect" />
+      </div>
     </div>
   );
 }
@@ -99,8 +99,8 @@ function SupportDriver() {
 
 function FeatureList() {
   return (
-    <div className="mx-auto max-w-[800px] p-4 mt-12">
-      <div className="py-12">
+    <div className="mx-auto max-w-[800px] mt-12">
+      <div className="py-12 px-4">
         <h1 className="text-3xl font-semibold mb-2">Powerful Data Editor</h1>
 
         <p className="text-xl mb-4">
@@ -112,7 +112,7 @@ function FeatureList() {
 
       <div>
         <div className="fade-view">
-          <video muted autoPlay loop className="rounded-lg" playsInline>
+          <video muted autoPlay loop className="lg:rounded-lg" playsInline>
             <source
               src="https://r2.invisal.com/libsqlstudio-table-editor.mp4"
               type="video/mp4"
@@ -120,7 +120,7 @@ function FeatureList() {
           </video>
         </div>
 
-        <div className="fade-sticky py-12">
+        <div className="fade-sticky py-12 px-4">
           <h1 className="text-3xl font-semibold mb-2">Create and Edit Table</h1>
 
           <p className="text-xl mb-4">
@@ -132,15 +132,15 @@ function FeatureList() {
 
       <div>
         <div className="fade-view">
-          <video muted autoPlay loop className="rounded-lg" playsInline>
+          <video muted autoPlay loop className="lg:rounded-lg" playsInline>
             <source
-              src="https://r2.invisal.com/libsqlstudio-table-editor.mp4"
+              src="https://r2.invisal.com/libsqlstudio-schema-editor.mp4"
               type="video/mp4"
             />
           </video>
         </div>
 
-        <div className="fade-sticky py-12">
+        <div className="fade-sticky py-12 px-4">
           <h1 className="text-3xl font-semibold mb-2">
             Writing and Running SQL
           </h1>
@@ -154,15 +154,15 @@ function FeatureList() {
 
       <div>
         <div className="fade-view">
-          <video muted autoPlay loop className="rounded-lg" playsInline>
+          <video muted autoPlay loop className="lg:rounded-lg" playsInline>
             <source
-              src="https://r2.invisal.com/libsqlstudio-table-editor.mp4"
+              src="https://r2.invisal.com/libsqlstudio-sql-query.mp4"
               type="video/mp4"
             />
           </video>
         </div>
 
-        <div className="fade-sticky py-12">
+        <div className="fade-sticky py-12 px-4">
           <div className="text-3xl font-semibold mb-2">
             and much much more...
           </div>
diff --git a/src/components/website-layout.tsx b/src/components/website-layout.tsx
index 389c5d93..803bf766 100644
--- a/src/components/website-layout.tsx
+++ b/src/components/website-layout.tsx
@@ -17,7 +17,7 @@ async function Topbar() {
     <header className="border-b">
       <div className="mx-auto container flex">
         <Link href="/">
-          <h1 className="text-lg p-2">
+          <h1 className="text-lg py-2">
             LibSQL <strong>Studio</strong>
           </h1>
         </Link>
@@ -63,38 +63,31 @@ async function Topbar() {
 function Footer() {
   return (
     <div className="border-t py-4 text-sm">
-      <div className="mx-auto container flex">
-        <div className="flex-grow">
-          <ul className="flex flex-wrap gap-4 mb-2">
-            <li>
-              <Link
-                href="/playground"
-                className="font-semibold hover:underline"
-              >
-                Playground
-              </Link>
-            </li>
-            <li>
-              <Link href="/docs" className="font-semibold hover:underline">
-                Document
-              </Link>
-            </li>
-            <li>
-              <Link href="/terms" className="font-semibold hover:underline">
-                Terms and Condition
-              </Link>
-            </li>
-            <li>
-              <Link href="/privacy" className="font-semibold hover:underline">
-                Privacy
-              </Link>
-            </li>
-          </ul>
-
-          <p>© 2024 Visal .In. | LibSQL Studio</p>
-        </div>
+      <div className="mx-auto container">
+        <ul className="flex flex-wrap gap-4 mb-2">
+          <li>
+            <Link href="/playground" className="font-semibold hover:underline">
+              Playground
+            </Link>
+          </li>
+          <li>
+            <Link href="/docs" className="font-semibold hover:underline">
+              Document
+            </Link>
+          </li>
+          <li>
+            <Link href="/terms" className="font-semibold hover:underline">
+              Terms and Condition
+            </Link>
+          </li>
+          <li>
+            <Link href="/privacy" className="font-semibold hover:underline">
+              Privacy
+            </Link>
+          </li>
+        </ul>
 
-        <div className="flex gap-4">
+        <div className="flex gap-4 my-4">
           <Link href="https://x.com/invisal89" target="blank">
             <svg
               className="w-6 h-6"
@@ -128,6 +121,8 @@ function Footer() {
             </svg>
           </Link>
         </div>
+
+        <p>© 2024 Visal .In. | LibSQL Studio</p>
       </div>
     </div>
   );