Footer and links to promotional site.

40acres · Oct 31, 2024 · 22a902f · 22a902f
1 parent 2dfef36
commit 22a902f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 8 deletions.
diff --git a/swap-frontend/src/App.tsx b/swap-frontend/src/App.tsx
@@ -10,6 +10,7 @@ import { Toaster } from 'solid-toast';
 import { History } from './History.js';
 import { SwapForm } from './SwapForm.js';
 import { Header } from './Header.js';
+import { Footer } from './Footer.js';
 
 const Layout: Component<RouteSectionProps> = (props) => {
     return <>
@@ -19,7 +20,7 @@ const Layout: Component<RouteSectionProps> = (props) => {
             </header>
             {props.children}
         </div>
-        <footer>TBD</footer>
+        <Footer />
         <Toaster toastOptions={{
             duration: 5000,
             position: 'bottom-right',

diff --git a/swap-frontend/src/Footer.tsx b/swap-frontend/src/Footer.tsx
@@ -0,0 +1,17 @@
+import { Component } from 'solid-js';
+import brandUrl from '/assets/brand.svg';
+import elSalvadorUrl from '/assets/gobierno-de-el-salvador.png';
+
+export const Footer: Component = () => <>
+    <footer>
+        <div class="d-flex flex-column gap-3">
+            <div><img src={brandUrl} /></div>
+            <div><strong>40 ACRES, S.A. DE C.V.</strong><br />Company Registration No. 2024113630 - El Salvador</div>
+            <div>Copyright © 2024 40Swap.com</div>
+        </div>
+        <div class="d-flex flex-column gap-3">
+            <div><img src={elSalvadorUrl} /></div>
+            <div><strong>BTC License</strong><br /> Codigo de registro: 664bd64379e50005ac479693</div>
+        </div>
+    </footer>
+</>;
diff --git a/swap-frontend/src/Header.tsx b/swap-frontend/src/Header.tsx
@@ -14,7 +14,7 @@ const NavLinks: Component = () => <>
         <Nav.Link link href="/faq">FAQ</Nav.Link>
     </Nav.Item>
     <Nav.Item>
-        <Nav.Link link href="/contact">Contact</Nav.Link>
+        <Nav.Link href="https://www.40swap.com/#contact-form">Contact</Nav.Link>
     </Nav.Item>
 </>;
 
@@ -26,7 +26,7 @@ export const Header: Component = () => {
     return <>
         <Navbar class="mb-4 pt-4" expand="md" collapseOnSelect>
             <Container>
-                <Navbar.Brand class="fs-2" href="/">
+                <Navbar.Brand class="fs-2" href="https://www.40swap.com">
                     <img src={logo} style="height: 3rem"/>
                 </Navbar.Brand>
                 <Navbar.Toggle class="d-sm-block d-md-none" onClick={() => setShowOffCanvas(true)} />

diff --git a/swap-frontend/src/app.scss b/swap-frontend/src/app.scss
@@ -34,10 +34,7 @@ $small-font-size: .80em;
 @import "../../node_modules/bootstrap/scss/bootstrap";
 
 #main {
-  background-image: url("assets/swap-background.jpeg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+  background: linear-gradient(rgba(231, 235, 247, 1), rgba(241, 241, 241, 1)) !important;
   min-height: 100vh;
   padding-bottom: 60px;
 }
@@ -62,10 +59,34 @@ $small-font-size: .80em;
 }
 
 footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: start;
   font-family: "Degular", sans-serif !important;
   color: rgba(52, 46, 81, 1) !important;
   min-height: 200px !important;
-  background: linear-gradient(rgba(231, 235, 247, 1), rgba(255, 255, 255, 1)) !important;
+  background: linear-gradient(rgba(231, 235, 247, 1), rgba(241, 241, 241, 1)) !important;
+  padding: 75px 108px;
+  @extend .gap-4;
+
+  > div {
+    max-width: 392px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+    padding: 20px;
+    align-items: center;
+    text-align: center;
+
+    > div {
+      max-width: none;
+      align-items: center;
+      padding-top: 20px;
+      padding-bottom: 40px;
+    }
+  }
 }
 
 h3 {

diff --git a/swap-frontend/src/assets/gobierno-de-el-salvador.png b/swap-frontend/src/assets/gobierno-de-el-salvador.png