Hackathons/HooHacks-12
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login animations

Browse Source
This commit is contained in:
idler-wheel
2025-03-30 10:00:53 -04:00
parent ed765fb9d0
commit 1291f2e99b
2 changed files with 76 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
React/src/app/page.tsx
View File

@@ -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)]"> <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 <h1
className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-bold animate-fadeIn" className="space-y-3 text-4xl text-lime-500 subpixel-antialiased animate-fadeIn"
style={{ fontFamily: "'Nunito', sans-serif" }} style={{ animationDelay: "0s", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' }}
> >
Welcome to Fauxcall welcome to Fauxcall
</h1> </h1>
<p> <p
We empower you to feel safe, whenever and wherever. className="text-xl text-gray-700"
</p> 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> <p
Make an account to begin. className="text-xl text-gray-700"
</p> 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
<main className="space-x-2 flex flex-row gap-[32px] row-start-2 items-center sm:items-start"> 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"> <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"> <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 Sign up
</button> </button>
</a> </a>
</main>
<p>
<p className="mt-16 animate-fadeIn delay-1 opacity-0">
Already have an account? Already have an account?
</p> </p>
<a href="/auth/login"> <a href="/auth/login">
<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400"> <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 Log in
</button> </button>
</a> </a>
</div>
</div>
</div> </div>

26
React/src/app/styles.css
View File

@@ -1,16 +1,28 @@
/* styles.css */
@keyframes fadeIn { @keyframes fadeIn {
0% { from {
opacity: 0; opacity: 0;
} }
100% { to {
opacity: 1; opacity: 1;
} }
} }
.animate-fadeIn { .animate-fadeIn {
animation: fadeIn 1s ease-in-out; animation: fadeIn 1s ease-in-out forwards;
} }
.delay-0 {
animation-delay: 0s;
}
.delay-1 {
animation-delay: 1s;
}
.delay-2 {
animation-delay: 2s;
}
body { body {