Merge pull request #19 from serudda/feat/footer-enhancements-easing-b…

…ounce Feat: Footer enhancements open source
serudda · Oct 4, 2024 · e285a5f · e285a5f
2 parents 8fa0a71 + 672bc9b
commit e285a5f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/apps/nextjs/src/components/Footers/RootFooter/RootFooter.tsx b/apps/nextjs/src/components/Footers/RootFooter/RootFooter.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { definePrimaryHotkey, getOS } from '~/common';
+import { Icon, IconCatalog, IconStyle } from 'side-ui';
 
 export const RootFooter = () => {
   const prompts = [
@@ -25,8 +26,8 @@ export const RootFooter = () => {
   }, []);
 
   return (
-    <footer className="grid place-items-center gap-6">
-      <div className="flex select-none items-center gap-4 text-neutral-500">
+    <footer className="grid place-items-center gap-2">
+      <div className="mb-4 flex select-none items-center gap-4 text-neutral-500">
         {randomPrompt}
         <div className="flex items-center gap-2">
           <kbd className="flex h-6 items-center rounded-md bg-neutral-900 p-2 text-xs">
@@ -35,6 +36,12 @@ export const RootFooter = () => {
           <kbd className="flex aspect-square h-6 items-center rounded-md bg-neutral-900 p-2 text-xs">K</kbd>
         </div>
       </div>
+      <div className="[ easing-bounce ] transition-all duration-500 hover:scale-110">
+        <a href="https://github.com/serudda/text-snap" className="flex items-center gap-2 text-white" target="_blank">
+          <p className="text-lg font-semibold">Proudly Open Source</p>
+          <Icon icon={IconCatalog.gitHub} iconStyle={IconStyle.solid} className="h-6 w-6" />
+        </a>
+      </div>
       <p className="mb-6 text-center text-base text-neutral-200">
         With ❤️ from&nbsp;
         <a href="https://x.com/serudda" className="text-primary-300 transition-colors hover:text-primary-200">

diff --git a/apps/nextjs/src/styles/globals.css b/apps/nextjs/src/styles/globals.css
@@ -1,3 +1,54 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .easing-bounce {
+    transition-timing-function: linear(
+      0,
+      0.004,
+      0.016,
+      0.035,
+      0.062,
+      0.098,
+      0.141 11.4%,
+      0.25,
+      0.39,
+      0.562,
+      0.764,
+      1 30.3%,
+      0.847 34.8%,
+      0.787,
+      0.737,
+      0.699,
+      0.672,
+      0.655,
+      0.65,
+      0.656,
+      0.672,
+      0.699,
+      0.738,
+      0.787,
+      0.847 61.7%,
+      1 66.2%,
+      0.946,
+      0.908,
+      0.885 74.2%,
+      0.879,
+      0.878,
+      0.879,
+      0.885 79.5%,
+      0.908,
+      0.946,
+      1 87.4%,
+      0.981,
+      0.968,
+      0.96,
+      0.957,
+      0.96,
+      0.968,
+      0.981,
+      1
+    );
+  }
+}