diff --git a/src/App.tsx b/src/App.tsx
index 46febaf3..cbceb48a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,7 +18,7 @@ import { Landing } from "modules/home/Landing"
import { WarningFooter } from "modules/common/WarningFooter"
import { ActionSheetProvider } from "modules/explorer/context/ActionSheets"
import { legacyTheme } from "theme/legacy"
-import { Footer } from "modules/common/Footer"
+import { ExplorerFooter } from "modules/common/Footer"
import { FAQ } from "modules/home/FAQ"
import { EnvKey, HUMANITEZ_DAO, getEnv } from "services/config"
import { DAOCreatorRouter } from "modules/creator/router"
@@ -134,7 +134,7 @@ const App: React.FC = () => {
/>
) : null}
-
+
diff --git a/src/assets/logos/footer_discord.svg b/src/assets/logos/footer_discord.svg
new file mode 100644
index 00000000..44aa5da4
--- /dev/null
+++ b/src/assets/logos/footer_discord.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/logos/footer_documentation.svg b/src/assets/logos/footer_documentation.svg
new file mode 100644
index 00000000..87b585d2
--- /dev/null
+++ b/src/assets/logos/footer_documentation.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/logos/footer_dorg.svg b/src/assets/logos/footer_dorg.svg
new file mode 100644
index 00000000..39472191
--- /dev/null
+++ b/src/assets/logos/footer_dorg.svg
@@ -0,0 +1,149 @@
+
diff --git a/src/assets/logos/footer_explorer.svg b/src/assets/logos/footer_explorer.svg
new file mode 100644
index 00000000..af8a14b0
--- /dev/null
+++ b/src/assets/logos/footer_explorer.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/logos/footer_github.svg b/src/assets/logos/footer_github.svg
new file mode 100644
index 00000000..d176fdd0
--- /dev/null
+++ b/src/assets/logos/footer_github.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/logos/footer_help.svg b/src/assets/logos/footer_help.svg
new file mode 100644
index 00000000..56f8f667
--- /dev/null
+++ b/src/assets/logos/footer_help.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/logos/footer_logo.svg b/src/assets/logos/footer_logo.svg
new file mode 100644
index 00000000..c1c3e088
--- /dev/null
+++ b/src/assets/logos/footer_logo.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/assets/logos/footer_tezos.svg b/src/assets/logos/footer_tezos.svg
new file mode 100644
index 00000000..186f1351
--- /dev/null
+++ b/src/assets/logos/footer_tezos.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/logos/footer_youtube.svg b/src/assets/logos/footer_youtube.svg
new file mode 100644
index 00000000..ba7f5acf
--- /dev/null
+++ b/src/assets/logos/footer_youtube.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/modules/common/Footer.tsx b/src/modules/common/Footer.tsx
index a3447a16..e92f5899 100644
--- a/src/modules/common/Footer.tsx
+++ b/src/modules/common/Footer.tsx
@@ -1,11 +1,208 @@
-import { Grid, styled } from "@material-ui/core"
+import React from "react"
+import { Grid, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core"
+import HomeButton from "assets/logos/footer_logo.svg"
+import Documentation from "assets/logos/footer_documentation.svg"
+import Help from "assets/logos/footer_help.svg"
+import Tezos from "assets/logos/footer_tezos.svg"
+import Explorer from "assets/logos/footer_explorer.svg"
+import Github from "assets/logos/footer_github.svg"
+import Discord from "assets/logos/footer_discord.svg"
+import Youtube from "assets/logos/footer_youtube.svg"
+import dOrg from "assets/logos/footer_dorg.svg"
+import { useTezos } from "services/beacon/hooks/useTezos"
-export const Footer = styled(Grid)(({ theme }) => ({
+const Footer = styled(Grid)(({ theme }) => ({
width: "100%",
- height: 60,
- background: theme.palette.primary.dark,
+ height: "126px",
+ backgroundColor: "#24282d",
+ paddingTop: 40,
+ paddingBottom: 40,
+ marginTop: 32,
+ [theme.breakpoints.down("sm")]: {
+ height: "auto",
+ paddingTop: 30,
+ paddingBottom: 30
+ }
+}))
+
+const LogoItem = styled("img")({
+ opacity: 0.65,
+ cursor: "pointer"
+})
+
+const HomebaseLogoItem = styled("img")({
+ opacity: 0.65,
+ cursor: "default"
+})
- ["@media (max-width:960px)"]: {
- height: 100
+const ItemText = styled(Typography)({
+ fontSize: 15,
+ opacity: 0.65,
+ cursor: "pointer"
+})
+
+const DesignedByText = styled(Typography)({
+ fontSize: 13.5,
+ opacity: 0.65,
+ fontWeight: 300
+})
+
+const BottomContainer = styled(Grid)(({ theme }) => ({
+ [theme.breakpoints.down("sm")]: {
+ gap: 12
}
}))
+
+const Container = styled(Grid)(({ theme }) => ({
+ margin: "auto",
+ width: 1000,
+ ["@media (max-width: 1425px)"]: {},
+
+ ["@media (max-width:1335px)"]: {},
+
+ ["@media (max-width:1167px)"]: {
+ width: "86vw"
+ },
+
+ ["@media (max-width:1030px)"]: {},
+
+ ["@media (max-width:960px)"]: {}
+}))
+
+export const ExplorerFooter: React.FC = () => {
+ const theme = useTheme()
+ const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
+ const { network } = useTezos()
+
+ const goToFAQ = () => {
+ window.open("https://faq.tezos-homebase.io/homebase-faq/", "_blank")
+ }
+
+ const goToExplorer = () => {
+ return network === "ghostnet"
+ ? window.open("https://ghostnet.tzkt.io/", "_blank")
+ : window.open("https://tzkt.io/", "_blank")
+ }
+
+ const goToTezos = () => {
+ window.open("https://tezos.com/", "_blank")
+ }
+
+ const goToGithub = () => {
+ window.open("https://github.com/dOrgTech/homebase-app", "_blank")
+ }
+
+ const goToDiscord = () => {
+ window.open("https://discord.com/invite/yXaPy6s5Nr", "_blank")
+ }
+
+ const goToYoutube = () => {
+ window.open("https://www.youtube.com/@Tezos", "_blank")
+ }
+
+ const goTodOrg = () => {
+ window.open("https://www.dorg.tech/", "_blank")
+ }
+
+ return (
+
+ )
+}