Footer

src/assets/bento.svg

@@ -0,0 +1,7 @@
+<svg width="368" height="337" viewBox="0 0 368 337" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.469 187.163L129.625 261.633C148.656 276.529 158.172 283.977 169.148 286.767C178.805 289.222 189.195 289.222 198.851 286.767C209.828 283.977 219.344 276.529 238.375 261.633L333.531 187.163L333.671 187.069L333.742 187.019L333.859 186.927C352.656 172.188 362.101 164.774 365.648 156.231C367.218 152.454 367.999 148.531 367.999 144.608V192.608C367.999 196.531 367.218 200.454 365.648 204.231C362.085 212.81 352.578 220.252 333.601 235.116L333.531 235.163L238.375 309.633C219.344 324.529 209.828 331.976 198.851 334.767C189.195 337.222 178.805 337.222 169.148 334.767C158.172 331.976 148.656 324.529 129.625 309.633L34.469 235.163L34.3987 235.116C15.4222 220.252 5.91442 212.81 2.35192 204.231C0.781616 200.454 0.000367613 196.531 0.000367613 192.607V144.608C0.000367613 148.531 0.781616 152.454 2.35192 156.231C5.89879 164.774 15.3441 172.188 34.1409 186.927L34.2581 187.019L34.3284 187.069L34.469 187.163Z" fill="#DBDBDB"/>
+<path d="M34.469 187.163C15.4359 172.267 5.91752 164.819 2.35192 156.231C-0.784465 148.677 -0.78373 140.54 2.35266 132.985C5.91826 124.397 15.4348 116.949 34.4679 102.054L129.625 27.5833C148.658 12.6878 158.174 5.24003 169.148 2.44957C178.801 -0.00499868 189.199 -0.00499868 198.852 2.44957C209.825 5.24003 219.342 12.6878 238.375 27.5833L333.532 102.054C352.565 116.949 362.082 124.397 365.647 132.985C368.784 140.54 368.784 148.677 365.648 156.231C362.082 164.819 352.564 172.267 333.531 187.163L238.375 261.633C219.344 276.529 209.828 283.977 198.851 286.767C189.195 289.222 178.805 289.222 169.148 286.767C158.172 283.977 148.656 276.529 129.625 261.633L34.469 187.163Z" fill="white"/>
+<path d="M143.218 94.9613C133.702 87.5136 128.944 83.7897 127.161 79.4956C125.593 75.7184 125.593 71.6497 127.161 67.8725C128.944 63.5784 133.702 59.8545 143.218 52.4067L156.812 41.7681C166.329 34.3204 171.087 30.5965 176.574 29.2013C181.4 27.974 186.599 27.974 191.426 29.2013C196.913 30.5965 201.671 34.3204 211.188 41.7681L224.781 52.4067C234.298 59.8545 239.056 63.5784 240.839 67.8725C242.407 71.6497 242.407 75.7184 240.839 79.4956C239.056 83.7897 234.298 87.5136 224.781 94.9613L211.188 105.6C201.671 113.048 196.913 116.772 191.426 118.167C186.599 119.394 181.4 119.394 176.574 118.167C171.087 116.772 166.329 113.048 156.812 105.6L143.218 94.9613Z" fill="#FF8686"/>
+<path d="M233.844 165.886C224.327 158.438 219.569 154.714 217.786 150.42C216.218 146.643 216.218 142.574 217.786 138.797C219.569 134.503 224.327 130.779 233.844 123.331L247.438 112.692C256.954 105.245 261.713 101.521 267.199 100.126C272.026 98.8982 277.225 98.8982 282.051 100.126C287.538 101.521 292.296 105.245 301.813 112.692L315.407 123.331C324.923 130.779 329.682 134.503 331.464 138.797C333.033 142.574 333.033 146.643 331.464 150.42C329.682 154.714 324.923 158.438 315.407 165.886L301.813 176.524C292.296 183.972 287.538 187.696 282.051 189.091C277.225 190.318 272.026 190.318 267.199 189.091C261.713 187.696 256.954 183.972 247.438 176.524L233.844 165.886Z" fill="#5AFF88"/>
+<path d="M52.593 165.886C43.0765 158.438 38.3182 154.714 36.5354 150.42C34.9672 146.643 34.9672 142.574 36.5354 138.797C38.3182 134.503 43.0765 130.779 52.593 123.331L66.1868 112.692C75.7034 105.245 80.4617 101.521 85.9486 100.126C90.775 98.8982 95.974 98.8982 100.8 100.126C106.287 101.521 111.046 105.245 120.562 112.692L224.781 194.255C234.298 201.703 239.056 205.427 240.839 209.721C242.407 213.498 242.407 217.567 240.839 221.344C239.056 225.638 234.298 229.362 224.781 236.81L211.188 247.448C201.671 254.896 196.913 258.62 191.426 260.015C186.599 261.243 181.4 261.243 176.574 260.015C171.087 258.62 166.329 254.896 156.812 247.448L52.593 165.886Z" fill="#768CFF"/>
+</svg>

src/components/ContactPage/index.tsx

@@ -39,7 +39,7 @@ if(Math.random() > .5) {
     return <div className="hero min-h-screen ">
     <div className="hero-content text-center">
       <div className="max-w-md">
-        <h1 className="text-5xl font-bold text-highlight">Contact Form</h1>
+        <h1 className="text-5xl font-bold text-highlight mt-10">Contact Form</h1>
         {/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p> */}
 {(error || done) ? <FormResults error={error} email={email} done={done} /> : <ContactForm onSubmit={onSubmit} 
 email={email} uiE={ui(setEmail)} 
@@ -69,7 +69,7 @@ export function ContactForm({ onSubmit,
      nameOfPerson, message, email,
     uiE,uiN,uiM 
 }: any) {
-    return <form onSubmit={onSubmit} className="form mt-5">
+    return <form onSubmit={onSubmit} className="mt-5">
 <label className="input input-bordered flex items-center mb-2">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="var(--mauve)" className="w-4 h-4 opacity-70"><path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" /><path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" /></svg>
   <input required type="email" className="grow" placeholder="Email" value={email} onChange={uiE} />

src/components/footer/index.css

@@ -0,0 +1,3 @@
+.orange {
+    color: var(--maroon);
+  }

src/components/footer/index.tsx

@@ -0,0 +1,30 @@
+import { SiReplit } from "react-icons/si";
+import Icon from "../static/Icons";
+import { git, npm } from "../static/icons_list";
+import bento from "../../assets/bento.svg"
+import "./index.css"
+
+export default function Footer() {
+    return <footer className="footer items-center p-4 bottom-0 overflow-hidden" style={{ zIndex: 9999, overflow: "hidden", color: "var(--text)", background: "var(--mantle)" }}>
+    <aside className="items-center grid-flow-col">
+      {/* <svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" clipRule="evenodd" className="fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg>  */}
+    {/* <p>Copyright © 2024 - All right reserved</p> */}
+    <p>Designed by <span className="text-highlight">Saahil</span></p>
+    
+    </aside> 
+    
+    <nav className="grid-flow-col gap-4 md:place-self-center md:justify-self-end flex">
+     <a href="https://github.com/NeonGamerBot-QK" target="_blank"><Icon icon={git} /></a>
+     <a href="https://www.npmjs.com/~neongamerbot" target="_blank"><Icon icon={npm} /></a>
+     <div className="inline-flex gap-2 bottom mt-1">
+     <a href="https://replit.com/@NeonGamerBotQK" target="_blank" className="inline-flex"><SiReplit className="inline-flex hover:scale-125 duration-500 linear" height="16" width="16" fill="var(--maroon)"/></a>
+     <a href="https://bento.me/saahil" target="_blank" className="inline-flex"><Icon icon={bento} width={16} height={16}/> </a>
+     </div>
+     
+      {/* <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
+      </a>
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a> */}
+    </nav>
+  </footer>
+}

src/index.tsx

@@ -10,6 +10,7 @@ import Navbar from './components/navbar';
 import { runTitle } from './scripts/title';
 import { startEvent } from './scripts/hashevent';
 import { listenForEasterEgg } from './scripts/oneko_easteregg';
+import Footer from './components/footer';
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
@@ -25,6 +26,7 @@ root.render(
 
       <Navbar />
     <App />
+    <Footer />
 
   </React.StrictMode>
 );