From 11c5577752a5ac5761b2f0f6035188de2a036953 Mon Sep 17 00:00:00 2001
From: S3CRE-7 <sedighi.arian88@gmail.com>
Date: Wed, 13 Nov 2024 16:22:56 +0330
Subject: [PATCH 1/2] update 1

---
 src/app/(tools)/layout.tsx |  1 +
 src/app/page.tsx           |  3 ++-
 tailwind.config.ts         | 30 ++++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/(tools)/layout.tsx b/src/app/(tools)/layout.tsx
index c70d623..2b4147b 100644
--- a/src/app/(tools)/layout.tsx
+++ b/src/app/(tools)/layout.tsx
@@ -34,6 +34,7 @@ export default function ToolsLayout({
 }) {
   return (
     <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
+      <div className="absolute inset-0 left-[-10%] top-[50%] z-50 h-[300px] w-[300px] animate-scalePulse rounded-full bg-gradient-to-br from-purple-800 to-purple-600 opacity-50 blur-[250px] md:h-[500px] md:w-[500px] lg:h-[700px] lg:w-[700px]"></div>
       <BackButton />
       <main className="flex flex-grow flex-col items-center justify-center">
         {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d093b4..8c69037 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,8 @@ export default function Home() {
   return (
     <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
       <main className="flex flex-grow flex-col items-center justify-center">
-        <div>
+        <div className="absolute z-10 h-64 w-64 animate-shift rounded-full border-4 border-purple-600 bg-transparent shadow-2xl sm:h-72 sm:w-72 lg:h-96 lg:w-96" />
+        <div className="z-20">
           Hi. I&apos;m{" "}
           <a
             href="https://twitter.com/t3dotgg"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 021c393..e29ad1b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,36 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      animation: {
+        shift: "shift 4s ease-in-out infinite",
+        scalePulse: "scalePulse 10s ease-in-out infinite",
+      },
+      keyframes: {
+        scalePulse: {
+          "0%": {
+            transform: "scale(1)",
+          },
+          "50%": {
+            transform: "scale(1.3)",
+          },
+          "100%": {
+            transform: "scale(1)",
+          },
+        },
+        shift: {
+          "0%": {
+            transform: "rotate(0deg)",
+            borderRadius: "0%",
+          },
+          "50%": {
+            borderRadius: "50%",
+          },
+          "100%": {
+            transform: "rotate(360deg)",
+            borderRadius: "0%",
+          },
+        },
+      },
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",

From c064af1a3b3252622f64b0d7b50527b2d9306470 Mon Sep 17 00:00:00 2001
From: S3CRE-7 <sedighi.arian88@gmail.com>
Date: Wed, 13 Nov 2024 16:25:41 +0330
Subject: [PATCH 2/2] update 2

---
 src/app/(tools)/layout.tsx | 7 ++++---
 src/app/layout.tsx         | 2 +-
 src/app/page.tsx           | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/(tools)/layout.tsx b/src/app/(tools)/layout.tsx
index 2b4147b..2f73887 100644
--- a/src/app/(tools)/layout.tsx
+++ b/src/app/(tools)/layout.tsx
@@ -33,10 +33,11 @@ export default function ToolsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
-      <div className="absolute inset-0 left-[-10%] top-[50%] z-50 h-[300px] w-[300px] animate-scalePulse rounded-full bg-gradient-to-br from-purple-800 to-purple-600 opacity-50 blur-[250px] md:h-[500px] md:w-[500px] lg:h-[700px] lg:w-[700px]"></div>
+    <div className="flex min-h-screen flex-col justify-between overflow-hidden p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
       <BackButton />
-      <main className="flex flex-grow flex-col items-center justify-center">
+      <main className="flex flex-grow flex-col items-center justify-center overflow-hidden">
+        <div className="absolute inset-0 left-[-10%] top-[50%] z-50 h-[300px] w-[300px] animate-scalePulse rounded-full bg-gradient-to-br from-purple-800 to-purple-600 opacity-50 blur-[250px] md:h-[500px] md:w-[500px] lg:h-[700px] lg:w-[700px]"></div>
+
         {children}
       </main>
       <footer className="mt-8 text-center text-sm text-gray-500">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 337be0e..3b890f4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({
         <PlausibleProvider domain="quickpic.t3.gg" />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} dark antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} dark overflow-hidden antialiased`}
       >
         {children}
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8c69037..b0cb2f9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,7 +17,7 @@ export default function Home() {
           </a>
           . I built these tools because I was annoyed they did not exist.
         </div>
-        <div className="mt-4"></div>
+        <div className="z-20 mt-4"></div>
         <Link href="/svg-to-png" className="text-blue-500 hover:underline">
           SVG to PNG converter
         </Link>