footer

app/src/components/Background.tsx

@@ -7,29 +7,30 @@ const Background = ({className}) => {
         "value": 70,
         "density": {
           "enable": true,
-           "area": 450
+          "area": 450
         }
       },
       "color": {
-        "value": "#ffffff"
+        "value": "#52abff",
       },
       "size": {
         "value": 30,
         "random": true
       },
       "shape": {
-        "type": "image",
-        "image": {
-          "src": "/images/snowflake.svg",
-        }
+        "type": "circle",
+        "stroke": {
+          "width": 4,
+          "color": "#52abff",
+          "opacity": 0.2
+        },
       },
       "opacity": {
-        "value": 0.75,
-        "random": true,
+        "random": true
       },
       "move": {
         "enable": true,
-        "speed": {min: 1, max: 2},
+        "speed": { min: 1, max: 2 },
         "direction": "bottom",
         "straight": false,
         "out_mode": "out",
@@ -85,10 +86,10 @@ const Background = ({className}) => {
 
   return (
     <div className='fixed top-0 left-0 w-full h-full bg-navy z-[-1]'>
-      {/* <Particles
-        className={`w-full h-full ${className}`}
+      <Particles
+        className={`w-full h-full ${className} opacity-20`}
         options={particleParams}
-      /> */}
+      />
     </div>
   );
 }

app/src/components/OutlineButton.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 
 const OutlineButton = ({name="", className="", link="", onClick=()=>{}}) => {
-  const btn = <button className={`w-fit px-2 py-1 text-md md:px-4 md:py-2 md:text-base text-pink border-solid border-2 border-pink bg-pink bg-opacity-0 hover:bg-opacity-10 transition-all ease-in-out ${className}`} onClick={onClick}>{name}</button>
+  const btn = <button className={`w-fit px-2 py-1 text-md md:px-4 md:py-2 md:text-base text-blue border-solid border-2 border-blue bg-blue bg-opacity-0 hover:bg-opacity-10 transition-all ease-in-out ${className}`} onClick={onClick}>{name}</button>
 
   if(link.length > 0){
     return <Link href={link} passHref>

app/src/components/footer.tsx

@@ -5,8 +5,16 @@ import SiteLink from './SiteLink';
 
 export const Footer = () => {
     return (
-        <footer className="relative mt-12 p-4 md:p-16 lg:px-24 bg-pink bg-opacity-75 z-20">
-
+        <footer className="absolute bottom-0 text-white w-full pb-4 bg-navy-darkest bg-opacity-100">
+            <p className='mt-4 text-center text-base'>Made with 💖 by <SiteLink href={"https://arulandu.com"} txt="Alvan Caleb Arulandu" /> {' '} <SiteLink href={"https://crucialnet.org"} txt="Rushil Umaretiya" /> for HackTJ 10.0.</p>
+            <div className='flex justify-center'>
+                <p>Backend: <a className='inline-block align-middle' href="https://github.com/VitalityAI/therapist">
+                    <img className='h-full' src="https://img.shields.io/github/last-commit/VitalityAI/therapist" />
+                </a></p>
+                <p className='ml-4'>Frontend: <a className='inline-block align-middle' href="https://github.com/VitalityAI/therapist">
+                    <img className='h-full' src="https://img.shields.io/github/last-commit/VitalityAI/therapist" />
+                </a></p>
+            </div>
         </footer>
     );
 }

app/src/components/header.tsx

@@ -9,7 +9,7 @@ import { ToastAction, useToasts } from './ToastProvider';
 const NavLink = ({ index, href, name, onClick = () => { } }) => {
   return (
     <Link href={href} passHref>
-      <a className='mb-2 md:mx-4 md:mb-0 text-white hover:text-pink text-md transition-all' onClick={onClick}><span className='text-pink'>#{index}. </span>{name}</a>
+      <a className='mb-2 md:mx-4 md:mb-0 text-white hover:text-blue text-md transition-all' onClick={onClick}><span className='text-blue'>#{index}. </span>{name}</a>
     </Link>
   );
 }
@@ -17,9 +17,9 @@ const NavLink = ({ index, href, name, onClick = () => { } }) => {
 const HamburgerButton = ({ open, onClick = () => { } }) => {
   return (
     <button className='relative md:hidden' onClick={onClick}>
-      <div className={`w-8 h-[2px] bg-pink ${open ? 'translate-y-[10px] rotate-45' : ''} transition-all`}></div>
-      <div className={`my-2 w-8 h-[2px] ${open ? 'bg-transparent' : 'bg-pink'} transition-all`}></div>
-      <div className={`w-8 h-[2px] bg-pink ${open ? ' -translate-y-[10px] -rotate-45' : ''} transition-all`}></div>
+      <div className={`w-8 h-[2px] bg-blue ${open ? 'translate-y-[10px] rotate-45' : ''} transition-all`}></div>
+      <div className={`my-2 w-8 h-[2px] ${open ? 'bg-transparent' : 'bg-blue'} transition-all`}></div>
+      <div className={`w-8 h-[2px] bg-blue ${open ? ' -translate-y-[10px] -rotate-45' : ''} transition-all`}></div>
     </button>
   );
 }
@@ -27,9 +27,9 @@ const HamburgerButton = ({ open, onClick = () => { } }) => {
 const CloseButton = ({ open, className = '', onClick = () => { } }) => {
   return (
     <button className={`${className}`} onClick={onClick}>
-      <div className={`w-2 h-[2px] bg-pink ${open ? 'translate-y-[10px] rotate-45' : ''} transition-all`}></div>
-      <div className={`w-2 h-[2px] my-2 ${open ? 'bg-transparent' : 'bg-pink'} transition-all`}></div>
-      <div className={`w-2 h-[2px] bg-pink ${open ? ' -translate-y-[10px] -rotate-45' : ''} transition-all`}></div>
+      <div className={`w-2 h-[2px] bg-blue ${open ? 'translate-y-[10px] rotate-45' : ''} transition-all`}></div>
+      <div className={`w-2 h-[2px] my-2 ${open ? 'bg-transparent' : 'bg-blue'} transition-all`}></div>
+      <div className={`w-2 h-[2px] bg-blue ${open ? ' -translate-y-[10px] -rotate-45' : ''} transition-all`}></div>
     </button>
   );
 }

app/src/components/layout.tsx

@@ -30,7 +30,7 @@ export const Layout: FC<any> = ({ dim=false, children }) => {
                 <Background className={dim ? "opacity-25" : 'opacity-100'}/>
                 <main className='relative w-full min-h-screen bg-transparent'>
                     {children}
-                    {/* <Footer/> */}
+                    <Footer/>
                 </main>
             </div>
         </>