From 1291f2e99b5ec3e43073cca8dee7ab6c027da790 Mon Sep 17 00:00:00 2001
From: idler-wheel <maria.a.molchanova@gmail.com>
Date: Sun, 30 Mar 2025 10:00:53 -0400
Subject: [PATCH] login animations

---
 React/src/app/page.tsx   | 78 +++++++++++++++++++++++++++-------------
 React/src/app/styles.css | 34 ++++++++++++------
 2 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/React/src/app/page.tsx b/React/src/app/page.tsx
index a37023d..9f74058 100644
--- a/React/src/app/page.tsx
+++ b/React/src/app/page.tsx
@@ -78,39 +78,67 @@ export default function Home() {
 			<div className="space-y-7  items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 				
 				<h1
-  className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-bold animate-fadeIn"
-  style={{ fontFamily: "'Nunito', sans-serif" }}
+  className="space-y-3 text-4xl text-lime-500 subpixel-antialiased animate-fadeIn"
+  style={{ animationDelay: "0s", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' }}
 >
-  Welcome to Fauxcall
+  welcome to Fauxcall
 </h1>
 
 
-				<p>
-					We empower you to feel safe, whenever and wherever.
-				</p>
+<p
+  className="text-xl text-gray-700"
+  style={{
+    animation: 'fadeIn 1s ease-in-out forwards',
+    animationDelay: '1s',
+    opacity: 0,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  }}
+>
+  We empower you to feel safe.
+</p>
 
-				<p>
-					Make an account to begin.
-				</p>
+<p
+  className="text-xl text-gray-700"
+  style={{
+    animation: 'fadeIn 1s ease-in-out forwards',
+    animationDelay: '2s',
+    opacity: 0,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  }}
+>
+  Whenever and wherever.
+</p>
+
+
+<div
+  style={{
+    animation: 'fadeIn 1s ease-in-out forwards',
+    animationDelay: '3s',
+    opacity: 0,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  }}
+>
+<div className="space-y-20 flex flex-col items-center sm:items-start">
+  <a href="/auth/login?screen_hint=signup">
+    <button className="p-4 h-16 w-32 mb-10 mt-4 text-xl text-green-400 border-2 border-gray-200 rounded-md transition-opacity duration-1000 opacity-0 animate-fadeIn delay-0">
+      Sign up
+    </button>
+  </a>
+
+  <p className="mt-16 animate-fadeIn delay-1 opacity-0">
+    Already have an account?
+  </p>
+
+  <a href="/auth/login">
+    <button className="p-4 h-16 w-32 mt-10 text-xl text-green-300 border-2 border-violet-900 rounded-md transition-opacity duration-1000 opacity-0 animate-fadeIn delay-2">
+      Log in
+    </button>
+  </a>
+</div>
 
 
 
-				<main className="space-x-2 flex flex-row gap-[32px] row-start-2 items-center sm:items-start">
-					<a href="/auth/login?screen_hint=signup">
-						<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300">
-							Sign up
-						</button>
-					</a>
-				</main>
-					<p>
-					
-					Already have an account?
-				</p>
-					<a href="/auth/login">
-						<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400">
-							Log in
-						</button>
-					</a>
+</div>
 				
 
 			</div>
diff --git a/React/src/app/styles.css b/React/src/app/styles.css
index 403d681..216a055 100644
--- a/React/src/app/styles.css
+++ b/React/src/app/styles.css
@@ -1,17 +1,29 @@
-
+/* styles.css */
 @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
+  from {
+    opacity: 0;
   }
-  
-  .animate-fadeIn {
-    animation: fadeIn 1s ease-in-out;
+  to {
+    opacity: 1;
   }
-  
+}
+
+.animate-fadeIn {
+  animation: fadeIn 1s ease-in-out forwards;
+}
+
+.delay-0 {
+  animation-delay: 0s;
+}
+
+.delay-1 {
+  animation-delay: 1s;
+}
+
+.delay-2 {
+  animation-delay: 2s;
+}
+
 
   body {
     font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;