From 796526ef061994fa48c8f9ca9297c12961bfa5f5 Mon Sep 17 00:00:00 2001
From: Arkaprabha Chakraborty <arkorty@gmail.com>
Date: Thu, 15 Aug 2024 02:13:46 +0530
Subject: [PATCH] Chore: Update UI to better fit bigger screen sizes

---
 frontend/bun.lockb                      | Bin 635761 -> 635761 bytes
 frontend/src/components/DownloadForm.js |   6 +++---
 frontend/src/components/Home.js         |  14 +++++++-------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index d28c15789783317e3eccce2d64a5a5138e9c80cc..7fee5e221177b4b46b1527075d77250c1c23dc6d 100755
GIT binary patch
delta 62
zcmezPOzq<{wT2eP7N!>F7M2#)Eo=`baxlgj=@}a78BKpVku3qnGiVQ-#0JFdK+Lf{
Ja1y72A^_EN6$$_V

delta 62
zcmezPOzq<{wT2eP7N!>F7M2#)Eo=`baxgJK!1R|B*%IKq_P|MOK+F!r9NPmYaVjVR
E0DY1Y3;+NC

diff --git a/frontend/src/components/DownloadForm.js b/frontend/src/components/DownloadForm.js
index e45c75d..7d5c105 100644
--- a/frontend/src/components/DownloadForm.js
+++ b/frontend/src/components/DownloadForm.js
@@ -93,7 +93,7 @@ const DownloadForm = () => {
   }, [showConfetti]);
 
   return (
-    <div className="p-4 relative">
+    <div className="md: p-4 mt-12 relative">
       <form onSubmit={handleDownload} className="space-y-4">
         <div className="flex gap-2">
           <div className="flex-grow">
@@ -165,9 +165,9 @@ const DownloadForm = () => {
           {!isDownloading && !message.startsWith("Downloading") && (
             <button
               type="submit"
-              className="relative inline-flex items-center px-10 py-6 text-2xl font-bold rounded-2xl text-black bg-white bg-opacity-60 hover:shadow-lg focus:outline-none transition-all duration-300"
+              className="relative inline-flex items-center px-10 py-6 text-2xl font-bold rounded-2xl text-white bg-black bg-opacity-60 border border-white hover:shadow-lg focus:outline-none transition-all duration-300"
             >
-              <span className="absolute inset-0 bg-black opacity-0 transition-opacity duration-300 ease-in-out active:opacity-40 rounded-xl"></span>
+              <span className="absolute inset-0 bg-black opacity-0 transition-opacity duration-300 ease-in-out active:opacity-40 rounded-2xl"></span>
               Download
             </button>
           )}
diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
index d180077..683dd6c 100644
--- a/frontend/src/components/Home.js
+++ b/frontend/src/components/Home.js
@@ -6,21 +6,21 @@ import { TypeAnimation } from "react-type-animation";
 
 const Home = () => {
   return (
-    <div className="relative z-10 pt-20">
+    <div className="relative z-10 sm: pt-32 md: pt-64 lg:pt-96">
       <div className="max-w-4xl mx-auto text-center">
-        <h1 className="text-white mb-4 text-4xl sm:text-5xl lg:text-6xl xl:text-8xl font-extrabold">
+        <h1 className="text-white mb-4 text-4xl sm:text-5xl lg:text-6xl font-extrabold">
           <TypeAnimation
             sequence={[
               "From YouTube!",
-              1000,
+              800,
               "And Instagram!",
-              1000,
+              800,
               "Download Now!",
-              1000,
+              800,
               "HD Quality!",
-              1000,
+              800,
               "DownLink!",
-              1000,
+              800,
             ]}
             wrapper="span"
             speed={30}