Merge pull request #334 from pendulum-chain/435-footer

Increase Credibility

src/assets/SocialsGithub.tsx

@@ -0,0 +1,24 @@
+export function Github({ className }: { className?: string }) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_293_6601)">
+        <path
+          d="M9 0C4.0567 0 0 4.0567 0 9C0 13.2183 2.95999 17.0502 6.89062 18V15.0224C6.50116 15.1077 6.14273 15.1102 5.74626 14.9933C5.21439 14.8363 4.78221 14.482 4.46141 13.9418C4.25693 13.5968 3.89452 13.2227 3.51645 13.2502L3.42375 12.1996C4.24127 12.1296 4.94852 12.6977 5.36833 13.403C5.55482 13.7167 5.76947 13.9006 6.04495 13.9819C6.31123 14.0603 6.59715 14.0227 6.93031 13.905C7.01395 13.238 7.3195 12.9883 7.55035 12.6367V12.6362C5.20615 12.2866 4.2719 11.0429 3.90111 10.0613C3.40974 8.75789 3.67342 7.12958 4.5423 6.10057C4.55919 6.08052 4.58968 6.02806 4.57787 5.99139C4.17947 4.78798 4.66493 3.79248 4.68279 3.68687C5.14256 3.82283 5.21727 3.55009 6.67996 4.43875L6.93279 4.59064C7.03853 4.65367 7.00529 4.61769 7.11104 4.60973C7.72174 4.44383 8.36554 4.35223 8.99986 4.34399C9.63899 4.35223 10.2787 4.44383 10.9146 4.61646L10.9965 4.62469C10.9893 4.6236 11.0187 4.61948 11.068 4.59009C12.8952 3.48335 12.8296 3.84508 13.3195 3.68578C13.3373 3.79152 13.8163 4.80322 13.4221 5.99139C13.369 6.15509 15.0062 7.65431 14.0988 10.0609C13.728 11.0429 12.7939 12.2866 10.4496 12.6362V12.6367C10.7501 13.0947 11.1112 13.3384 11.1092 14.2832V18C15.04 17.0502 17.9999 13.2183 17.9999 9C18 4.0567 13.9433 0 9 0V0Z"
+          fill="inherit"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_293_6601">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

src/assets/SocialsTelegram.tsx

@@ -0,0 +1,19 @@
+export function Telegram({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="20"
+      viewBox="0 0 24 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.4 19.8C18.7 20 19.1 20.1 19.5 19.9C19.9 19.8 20.1 19.4 20.2 19.1C21.1 15 23.2 4.7 24 1C24 0.700003 24 0.400003 23.7 0.200003C23.5 3.05474e-06 23.2 3.05474e-06 22.9 0.200003C18.7 1.6 5.8 6.4 0.5 8.4C0.2 8.5 0 8.8 0 9.2C0 9.6 0.2 0.9 0.6 10C3 10.7 6.1 11.7 6.1 11.7C6.1 11.7 7.6 16.1 8.3 18.3C8.3 18.6 8.6 18.8 8.9 18.9C9.2 18.9 9.5 18.9 9.7 18.7C10.9 17.6 12.8 15.8 12.8 15.8C12.8 15.8 16.4 18.4 18.4 19.9V19.8ZM7.4 11.1L9.1 16.6L9.5 13.1C9.5 13.1 16 7.2 19.7 3.9C19.8 3.9 19.8 3.6 19.7 3.5C19.7 3.5 19.4 3.5 19.3 3.5C15 6.2 7.4 11.1 7.4 11.1Z"
+        fill="inherit"
+      ></path>
+    </svg>
+  );
+}

src/assets/SocialsX.tsx

@@ -0,0 +1,24 @@
+export function X({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="22"
+      viewBox="0 0 21 22"
+      fill="none"
+      className={className}
+    >
+      <g clipPath="url(#clip0_55_3748)">
+        <path
+          d="M12.5836 9.21475L20.0291 0.322754H18.2647L11.7999 8.04366L6.63641 0.322754H0.680908L8.48907 11.998L0.680908 21.3228H2.44541L9.27257 13.1693L14.7256 21.3228H20.6811L12.5834 9.21475H12.5839H12.5836ZM10.1669 12.101L9.37574 10.9384L3.08107 1.68734H5.79107L10.8711 9.15311L11.6622 10.3156L18.2656 20.02H15.5556L10.1671 12.1011V12.1006L10.1669 12.101Z"
+          fill="inherit"
+        ></path>
+      </g>
+      <defs>
+        <clipPath id="clip0_55_3748">
+          <rect width="20" height="21" fill="white" transform="translate(0.680908 0.322754)"></rect>
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

src/components/Footer/index.tsx

@@ -0,0 +1,56 @@
+import { ComponentType } from 'preact';
+import { Telegram } from '../../assets/SocialsTelegram';
+import { Github } from '../../assets/SocialsGithub';
+import { X } from '../../assets/SocialsX';
+
+interface SocialLink {
+  name: string;
+  icon: ComponentType<{ className?: string }>;
+  url: string;
+}
+
+const SOCIALS: SocialLink[] = [
+  {
+    name: 'X',
+    icon: X,
+    url: 'https://x.com/Vortex_Fi',
+  },
+  {
+    name: 'Telegram',
+    icon: Telegram,
+    url: 'https://t.me/vortex_fi',
+  },
+  {
+    name: 'Github',
+    icon: Github,
+    url: 'https://github.com/pendulum-chain/vortex',
+  },
+];
+
+const SocialIcon = ({ social }: { social: SocialLink }) => (
+  <a key={social.name} href={social.url} target="_blank" rel="noopener noreferrer">
+    <social.icon className="w-5 h-5 transition-colors fill-primary hover:fill-pink-600" />
+  </a>
+);
+
+const Copyright = () => (
+  <div>
+    <p>Copyright © {new Date().getFullYear()}, Vortex. </p>
+    <p>All rights reserved.</p>
+  </div>
+);
+
+export function Footer() {
+  return (
+    <footer className="items-end justify-between px-4 pt-2 pb-4 md:px-12 footer">
+      <div className="flex flex-col gap-2">
+        <Copyright />
+        <div className="flex gap-4">
+          {SOCIALS.map((social) => (
+            <SocialIcon key={social.name} social={social} />
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/Navbar/index.tsx

@@ -94,7 +94,7 @@ export const Navbar = () => {
   const [showMenu, setShowMenu] = useState(false);
 
   return (
-    <header className="flex items-center justify-between px-4 py-4 bg-blue-950 md:py-7 md:px-10">
+    <header className="flex items-center justify-between px-4 py-4 bg-blue-950 md:py-5 md:px-10">
       <div className="flex">
         <a href="https://www.vortexfinance.co/" target="_blank" rel="noreferrer" className="flex text-slate-400">
           <img src={whiteLogo} alt="Vortex Logo" className="mr-1 max-w-26 max-h-6 md:max-w-52 md:max-h-12" />

src/components/PoweredBy/index.tsx

@@ -0,0 +1,12 @@
+import satoshipayLogo from '../../assets/logo/satoshipay.svg';
+
+export function PoweredBy() {
+  return (
+    <div className="flex items-center justify-center">
+      <p className="mr-1 text-sm text-gray-500">Powered by</p>
+      <a href="https://satoshipay.io" target="_blank" rel="noopener noreferrer" className="transition hover:opacity-80">
+        <img src={satoshipayLogo} alt="Satoshipay" />
+      </a>
+    </div>
+  );
+}

src/layouts/index.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'preact/compat';
 import { Navbar } from '../components/Navbar';
+import { Footer } from '../components/Footer';
 
 interface BaseLayoutProps {
   main: ReactNode;
@@ -11,5 +12,6 @@ export const BaseLayout: FC<BaseLayoutProps> = ({ main, modals }) => (
     {modals}
     <Navbar />
     {main}
+    <Footer />
   </>
 );