diff --git a/components/footer.css b/components/footer.css
new file mode 100644
index 0000000..f638265
--- /dev/null
+++ b/components/footer.css
@@ -0,0 +1,319 @@
+.footer-footer {
+  width: 100%;
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: var(--dl-space-space-fourunits);
+  padding-right: var(--dl-space-space-fourunits);
+  flex-direction: column;
+  padding-bottom: var(--dl-space-space-twounits);
+  justify-content: space-between;
+  background-image: linear-gradient(180deg, rgb(18, 18, 18) 0.00%,rgb(35, 55, 74) 97.00%);
+}
+.footer-container {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.footer-logo {
+  display: flex;
+  max-width: var(--dl-size-size-maxwidth);
+  align-self: flex-start;
+  align-items: flex-start;
+  margin-right: 56px;
+  flex-direction: column;
+  justify-content: center;
+}
+.footer-logo1 {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.footer-image {
+  width: var(--dl-size-size-medium);
+  height: 64px;
+}
+.footer-text {
+  color: var(--dl-color-primary-500);
+  margin-top: var(--dl-space-space-halfunit);
+  margin-bottom: var(--dl-space-space-halfunit);
+}
+.footer-text02 {
+  color: var(--dl-color-gray-900);
+  width: 224px;
+  margin-top: var(--dl-space-space-unit);
+  line-height: 1.32;
+}
+.footer-links-container {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.footer-container1 {
+  display: flex;
+  align-items: flex-start;
+  margin-right: var(--dl-space-space-fourunits);
+  flex-direction: row;
+  justify-content: space-between;
+}
+.footer-community-container {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  margin-right: var(--dl-space-space-fourunits);
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.footer-text05 {
+  color: var(--dl-color-primary-700);
+  font-weight: 700;
+  margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.footer-link {
+  text-decoration: none;
+}
+.footer-link01 {
+  text-decoration: none;
+}
+.footer-link02 {
+  text-decoration: none;
+}
+.footer-sources-container {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.footer-text08 {
+  color: var(--dl-color-primary-700);
+  font-weight: 700;
+  margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.footer-link03 {
+  text-decoration: none;
+}
+.footer-link04 {
+  text-decoration: none;
+}
+.footer-link05 {
+  text-decoration: none;
+}
+.footer-link06 {
+  text-decoration: none;
+}
+.footer-link07 {
+  text-decoration: none;
+}
+.footer-container2 {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.footer-contact {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 40px;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.footer-text12 {
+  color: var(--dl-color-primary-700);
+  margin-bottom: var(--dl-space-space-oneandhalfunits);
+}
+.footer-link08 {
+  text-decoration: none;
+}
+.footer-link09 {
+  text-decoration: none;
+}
+.footer-link10 {
+  text-decoration: none;
+}
+.footer-socials {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.footer-text13 {
+  color: var(--dl-color-primary-700);
+  margin-bottom: var(--dl-space-space-unit);
+}
+.footer-icon-group {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.footer-link11 {
+  display: contents;
+}
+.footer-link12 {
+  display: contents;
+}
+.footer-icon02 {
+  text-decoration: none;
+}
+.footer-link13 {
+  display: contents;
+}
+.footer-icon04 {
+  text-decoration: none;
+}
+.footer-link14 {
+  display: contents;
+}
+.footer-icon06 {
+  fill: #D9D9D9;
+  text-decoration: none;
+}
+.footer-link15 {
+  display: contents;
+}
+.footer-icon08 {
+  text-decoration: none;
+}
+.footer-link16 {
+  display: contents;
+}
+.footer-separator {
+  width: 100%;
+  height: 1px;
+  margin-top: var(--dl-space-space-twounits);
+  margin-bottom: var(--dl-space-space-twounits);
+  background-color: var(--dl-color-primary-700);
+}
+
+.rootClassName1 {
+  margin-top: var(--dl-space-space-oneandhalfunits);
+  background-image: linear-gradient(180deg, rgb(18, 18, 18) 0.00%,rgb(16, 44, 70) 97.00%);
+}
+@media(max-width: 991px) {
+  .footer-footer {
+    flex-direction: column;
+  }
+  .footer-links-container {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .footer-container1 {
+    margin-right: var(--dl-space-space-fourunits);
+  }
+  .footer-community-container {
+    margin-right: var(--dl-space-space-fourunits);
+  }
+}
+@media(max-width: 767px) {
+  .footer-footer {
+    padding-left: var(--dl-space-space-twounits);
+    padding-right: var(--dl-space-space-twounits);
+  }
+  .footer-container {
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .footer-logo {
+    align-items: center;
+  }
+  .footer-image {
+    margin-bottom: var(--dl-space-space-oneandhalfunits);
+  }
+  .footer-text02 {
+    margin-top: var(--dl-space-space-twounits);
+    text-align: center;
+    margin-bottom: var(--dl-space-space-twounits);
+  }
+  .footer-links-container {
+    width: 100%;
+    align-items: flex-start;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .footer-container1 {
+    margin-right: var(--dl-space-space-fourunits);
+  }
+  .footer-community-container {
+    margin-right: var(--dl-space-space-fourunits);
+  }
+  .rootClassName {
+    width: 100%;
+  }
+}
+@media(max-width: 479px) {
+  .footer-footer {
+    padding: var(--dl-space-space-unit);
+  }
+  .footer-container {
+    padding: var(--dl-space-space-twounits);
+    align-self: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .footer-logo {
+    align-self: center;
+    align-items: center;
+    margin-right: 0px;
+    justify-content: center;
+  }
+  .footer-image {
+    margin-bottom: 0px;
+  }
+  .footer-text02 {
+    width: var(--dl-size-size-xxlarge);
+    align-self: center;
+    margin-top: var(--dl-space-space-unit);
+    text-align: center;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .footer-links-container {
+    align-self: flex-start;
+    flex-direction: column;
+  }
+  .footer-container1 {
+    margin: var(--dl-space-space-unit);
+    flex-direction: column;
+  }
+  .footer-sources-container {
+    margin-top: var(--dl-space-space-twounits);
+  }
+  .footer-container2 {
+    margin: var(--dl-space-space-unit);
+  }
+  .footer-contact {
+    align-items: flex-start;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .footer-socials {
+    margin-top: var(--dl-space-space-oneandhalfunits);
+  }
+  .footer-icon02 {
+    fill: var(--dl-color-gray-white);
+  }
+  .footer-icon04 {
+    fill: var(--dl-color-gray-white);
+  }
+  .footer-icon06 {
+    fill: var(--dl-color-gray-white);
+  }
+  .footer-icon08 {
+    fill: var(--dl-color-gray-white);
+  }
+  .footer-icon10 {
+    fill: var(--dl-color-gray-white);
+  }
+  .footer-separator {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    background-color: var(--dl-color-primary-700);
+  }
+  .rootClassName {
+    width: 100%;
+  }
+}