From 6f2cdfddd60dba57edf9d8fd69e0af66ab6ef36f Mon Sep 17 00:00:00 2001
From: AdraDev <alfaroar98@gmail.com>
Date: Tue, 10 Oct 2023 14:43:14 -0600
Subject: [PATCH 1/4] Primera clase python web

---
 link_bio/.gitignore           |   9 +++++++++
 link_bio/assets/favicon.ico   | Bin 0 -> 15086 bytes
 link_bio/link_bio/__init__.py |   0
 link_bio/link_bio/link_bio.py |  14 ++++++++++++++
 link_bio/rxconfig.py          |   5 +++++
 5 files changed, 28 insertions(+)
 create mode 100644 link_bio/.gitignore
 create mode 100644 link_bio/assets/favicon.ico
 create mode 100644 link_bio/link_bio/__init__.py
 create mode 100644 link_bio/link_bio/link_bio.py
 create mode 100644 link_bio/rxconfig.py

diff --git a/link_bio/.gitignore b/link_bio/.gitignore
new file mode 100644
index 00000000..f09366ab
--- /dev/null
+++ b/link_bio/.gitignore
@@ -0,0 +1,9 @@
+*.db
+
+*.py[cod]
+
+.web
+
+__pycache__/
+
+/venv
\ No newline at end of file
diff --git a/link_bio/assets/favicon.ico b/link_bio/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..609f6abcbeb0fec5157b54a36d7b2aeb759f9e1b
GIT binary patch
diff --git a/link_bio/link_bio/__init__.py b/link_bio/link_bio/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/link_bio/link_bio/link_bio.py b/link_bio/link_bio/link_bio.py
new file mode 100644
index 00000000..1dfb2f8d
--- /dev/null
+++ b/link_bio/link_bio/link_bio.py
@@ -0,0 +1,14 @@
+import reflex as rx
+
+
+class State(rx.State):
+    pass
+
+
+def index() -> rx.Component:
+    return rx.text("Hola Reflex!", color="blue")
+
+
+app = rx.App()
+app.add_page(index)
+app.compile()
\ No newline at end of file
diff --git a/link_bio/rxconfig.py b/link_bio/rxconfig.py
new file mode 100644
index 00000000..3748522d
--- /dev/null
+++ b/link_bio/rxconfig.py
@@ -0,0 +1,5 @@
+import reflex as rx
+
+config = rx.Config(
+    app_name="link_bio",
+)
\ No newline at end of file

From 9f6aa492a0f1ba0e9426307676a73e41439bfecf Mon Sep 17 00:00:00 2001
From: AdraDev <alfaroar98@gmail.com>
Date: Sat, 21 Oct 2023 14:41:32 -0600
Subject: [PATCH 2/4] Segunda clase python web

---
 link_bio/link_bio/components/footer.py      | 13 +++++++++++++
 link_bio/link_bio/components/link_button.py |  8 ++++++++
 link_bio/link_bio/components/navbar.py      | 14 ++++++++++++++
 link_bio/link_bio/link_bio.py               | 11 ++++++++++-
 link_bio/link_bio/views/header/header.py    | 12 ++++++++++++
 link_bio/link_bio/views/links/links.py      | 10 ++++++++++
 6 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 link_bio/link_bio/components/footer.py
 create mode 100644 link_bio/link_bio/components/link_button.py
 create mode 100644 link_bio/link_bio/components/navbar.py
 create mode 100644 link_bio/link_bio/views/header/header.py
 create mode 100644 link_bio/link_bio/views/links/links.py

diff --git a/link_bio/link_bio/components/footer.py b/link_bio/link_bio/components/footer.py
new file mode 100644
index 00000000..6abdae0b
--- /dev/null
+++ b/link_bio/link_bio/components/footer.py
@@ -0,0 +1,13 @@
+import reflex as rx
+import datetime
+
+def footer() -> rx.Component:
+    return rx.vstack(
+        rx.image(src="favicon.ico"),
+        rx.link(
+            f"@ 2021-{datetime.date.today().year} ADRADEV BY ADRIAN RODRIGUEZ V1.",
+            href="https://github.com/adra-dev",
+            is_external=True
+        ),
+        rx.text("BUILDING SOFTWARE TO FIND SOLUTIONS.")
+    )
\ No newline at end of file
diff --git a/link_bio/link_bio/components/link_button.py b/link_bio/link_bio/components/link_button.py
new file mode 100644
index 00000000..cc534057
--- /dev/null
+++ b/link_bio/link_bio/components/link_button.py
@@ -0,0 +1,8 @@
+import reflex as rx
+
+def link_button(text: str, url: str) -> rx.Component:
+    return rx.link(
+        rx.button(text),
+        href=url,
+        is_external=True
+    )
\ No newline at end of file
diff --git a/link_bio/link_bio/components/navbar.py b/link_bio/link_bio/components/navbar.py
new file mode 100644
index 00000000..2734ae18
--- /dev/null
+++ b/link_bio/link_bio/components/navbar.py
@@ -0,0 +1,14 @@
+import reflex as rx
+
+def navbar() -> rx.Component:
+    return rx.hstack(
+        rx.text(
+            "adradev",
+            height="40px"
+        ),
+        position="sticky",
+        bg="Blue",
+        padding_x="16px",
+        padding_y="8px",
+        z_index="999"
+    )
\ No newline at end of file
diff --git a/link_bio/link_bio/link_bio.py b/link_bio/link_bio/link_bio.py
index 1dfb2f8d..477fa02a 100644
--- a/link_bio/link_bio/link_bio.py
+++ b/link_bio/link_bio/link_bio.py
@@ -1,4 +1,8 @@
 import reflex as rx
+from link_bio.components.navbar import navbar
+from link_bio.components.footer import footer
+from link_bio.views.header.header import header
+from link_bio.views.links.links import links
 
 
 class State(rx.State):
@@ -6,7 +10,12 @@ class State(rx.State):
 
 
 def index() -> rx.Component:
-    return rx.text("Hola Reflex!", color="blue")
+    return rx.vstack(
+        navbar(),
+        header(),
+        links(),
+        footer()
+    )
 
 
 app = rx.App()
diff --git a/link_bio/link_bio/views/header/header.py b/link_bio/link_bio/views/header/header.py
new file mode 100644
index 00000000..2b8e4d90
--- /dev/null
+++ b/link_bio/link_bio/views/header/header.py
@@ -0,0 +1,12 @@
+import reflex as rx
+
+def header() -> rx.Component:
+    return rx.vstack(
+        rx.avatar(name="Adrian Rodriguez", size="xl"),
+        rx.text("@adradev"),
+        rx.text("HOLA MI NOMBRE ES ADRIAN RODRIGUEZ"),
+        rx.text("""Soy ingeniero de software desde hace 2 años.
+                Actualmente me dedico a mejorar mis perfiles como 
+                Data Scientist, PostgresDBA, PythonDev. 
+                Aqui podras encontrar todos mis enlaces de interes. ¡Bienvenid@!"""),
+    )
diff --git a/link_bio/link_bio/views/links/links.py b/link_bio/link_bio/views/links/links.py
new file mode 100644
index 00000000..c4e9c0b3
--- /dev/null
+++ b/link_bio/link_bio/views/links/links.py
@@ -0,0 +1,10 @@
+import reflex as rx
+from link_bio.components.link_button import link_button
+
+def links() -> rx.Component:
+    return rx.vstack(
+        link_button("GitHub", "https://github.com/adra-dev"),
+        link_button("Linkedin", "https://github.com/adra-dev"),
+        link_button("CV.pdf", "https://github.com/adra-dev"),
+        link_button("Kaggle", "https://github.com/adra-dev")
+    )
\ No newline at end of file

From 8bc526c3df3a75ae925b25ecc04a1ce3a54b427c Mon Sep 17 00:00:00 2001
From: AdraDev <alfaroar98@gmail.com>
Date: Sat, 21 Oct 2023 19:23:52 -0600
Subject: [PATCH 3/4] Tercera clase python web

---
 link_bio/link_bio/components/footer.py      | 13 ++++--
 link_bio/link_bio/components/info_text.py   |  9 ++++
 link_bio/link_bio/components/link_button.py | 25 ++++++++--
 link_bio/link_bio/components/link_icon.py   | 12 +++++
 link_bio/link_bio/components/navbar.py      | 13 +++---
 link_bio/link_bio/components/title.py       | 10 ++++
 link_bio/link_bio/link_bio.py               | 19 ++++++--
 link_bio/link_bio/styles/styles.py          | 44 +++++++++++++++++
 link_bio/link_bio/views/header/header.py    | 36 ++++++++++++--
 link_bio/link_bio/views/links/links.py      | 52 +++++++++++++++++++--
 10 files changed, 209 insertions(+), 24 deletions(-)
 create mode 100644 link_bio/link_bio/components/info_text.py
 create mode 100644 link_bio/link_bio/components/link_icon.py
 create mode 100644 link_bio/link_bio/components/title.py
 create mode 100644 link_bio/link_bio/styles/styles.py

diff --git a/link_bio/link_bio/components/footer.py b/link_bio/link_bio/components/footer.py
index 6abdae0b..9116249e 100644
--- a/link_bio/link_bio/components/footer.py
+++ b/link_bio/link_bio/components/footer.py
@@ -1,13 +1,20 @@
 import reflex as rx
 import datetime
+from link_bio.styles.styles import Size as Size
 
 def footer() -> rx.Component:
     return rx.vstack(
         rx.image(src="favicon.ico"),
         rx.link(
-            f"@ 2021-{datetime.date.today().year} ADRADEV BY ADRIAN RODRIGUEZ V1.",
+            f"@ 2021-{datetime.date.today().year} adradev by Adrian Rodriguez v1.",
             href="https://github.com/adra-dev",
-            is_external=True
+            is_external=True,
+            font_size=Size.MEDIUM.value
         ),
-        rx.text("BUILDING SOFTWARE TO FIND SOLUTIONS.")
+        rx.text(
+            "BUILDING SOFTWARE TO FIND SOLUTIONS.",
+            font_size=Size.MEDIUM.value,
+            margin_top="0px !important"
+        ),
+        margin_bottom=Size.BIG.value
     )
\ No newline at end of file
diff --git a/link_bio/link_bio/components/info_text.py b/link_bio/link_bio/components/info_text.py
new file mode 100644
index 00000000..9f35418f
--- /dev/null
+++ b/link_bio/link_bio/components/info_text.py
@@ -0,0 +1,9 @@
+import reflex as rx
+from link_bio.styles.styles import Size as Size
+
+
+def info_text(title: str, body: str) -> rx.Component:
+    return rx.box(
+        rx.span(title, font_weight="bold", color="blue"),
+        f" {body}", font_size=Size.MEDIUM.value
+    )
\ No newline at end of file
diff --git a/link_bio/link_bio/components/link_button.py b/link_bio/link_bio/components/link_button.py
index cc534057..ccda5705 100644
--- a/link_bio/link_bio/components/link_button.py
+++ b/link_bio/link_bio/components/link_button.py
@@ -1,8 +1,25 @@
 import reflex as rx
+import link_bio.styles.styles as styles
 
-def link_button(text: str, url: str) -> rx.Component:
+
+def link_button(title: str, body: str, url: str) -> rx.Component:
     return rx.link(
-        rx.button(text),
+        rx.button(
+            rx.hstack(
+                rx.icon(
+                    tag="arrow_forward",
+                    width=styles.Size.BIG.value,
+                    height=styles.Size.DEFAULT.value
+                ),
+                rx.vstack(
+                    rx.text(title, style=styles.button_title_style),
+                    rx.text(body, style=styles.button_body_style),
+                    align_items="start"
+                )
+            )
+        ),
+        
         href=url,
-        is_external=True
-    )
\ No newline at end of file
+        is_external=True,
+        width="100%"
+    )
diff --git a/link_bio/link_bio/components/link_icon.py b/link_bio/link_bio/components/link_icon.py
new file mode 100644
index 00000000..5a2248ed
--- /dev/null
+++ b/link_bio/link_bio/components/link_icon.py
@@ -0,0 +1,12 @@
+import reflex as rx
+import link_bio.styles.styles as styles
+
+
+def link_icon(url: str) -> rx.Component:
+    return rx.link(
+        rx.icon(
+            tag="link",
+        ),
+        href=url,
+        is_external=True
+    )
\ No newline at end of file
diff --git a/link_bio/link_bio/components/navbar.py b/link_bio/link_bio/components/navbar.py
index 2734ae18..02d25bdb 100644
--- a/link_bio/link_bio/components/navbar.py
+++ b/link_bio/link_bio/components/navbar.py
@@ -1,14 +1,15 @@
 import reflex as rx
+from link_bio.styles.styles import Size as Size
 
 def navbar() -> rx.Component:
     return rx.hstack(
         rx.text(
-            "adradev",
-            height="40px"
+            "adradev"
         ),
         position="sticky",
-        bg="Blue",
-        padding_x="16px",
-        padding_y="8px",
-        z_index="999"
+        bg="lightgray",
+        padding_x=Size.DEFAULT.value,
+        padding_y=Size.SMALL.value,
+        z_index="999",
+        top="0"
     )
\ No newline at end of file
diff --git a/link_bio/link_bio/components/title.py b/link_bio/link_bio/components/title.py
new file mode 100644
index 00000000..5ebc3765
--- /dev/null
+++ b/link_bio/link_bio/components/title.py
@@ -0,0 +1,10 @@
+import reflex as rx
+import link_bio.styles.styles as styles
+
+
+def title(text: str) -> rx.Component:
+    return rx.heading(
+        text,
+        size="lg", 
+        style=styles.title_style
+    )
\ No newline at end of file
diff --git a/link_bio/link_bio/link_bio.py b/link_bio/link_bio/link_bio.py
index 477fa02a..00def52f 100644
--- a/link_bio/link_bio/link_bio.py
+++ b/link_bio/link_bio/link_bio.py
@@ -3,6 +3,8 @@
 from link_bio.components.footer import footer
 from link_bio.views.header.header import header
 from link_bio.views.links.links import links
+import link_bio.styles.styles as styles
+from link_bio.styles.styles import Size as Size
 
 
 class State(rx.State):
@@ -10,14 +12,23 @@ class State(rx.State):
 
 
 def index() -> rx.Component:
-    return rx.vstack(
+    return rx.box(
         navbar(),
-        header(),
-        links(),
+        rx.center(
+             rx.vstack(
+                header(),
+                links(),
+                max_width=styles.MAX_WIDTH,
+                width="100%",
+                margin_y=Size.BIG.value,
+            )
+        ),
         footer()
     )
 
 
-app = rx.App()
+app = rx.App(
+    style=styles.BASE_STYLE
+)
 app.add_page(index)
 app.compile()
\ No newline at end of file
diff --git a/link_bio/link_bio/styles/styles.py b/link_bio/link_bio/styles/styles.py
new file mode 100644
index 00000000..4450fb31
--- /dev/null
+++ b/link_bio/link_bio/styles/styles.py
@@ -0,0 +1,44 @@
+import reflex as rx
+from enum import Enum
+
+# Constants
+MAX_WIDTH = "560px"
+
+# Sizes
+
+
+class Size(Enum):
+    SMALL="0.5em"
+    MEDIUM="0.8em"
+    DEFAULT="1em"
+    BIG="2em"
+
+# Styles
+
+BASE_STYLE = {
+    rx.Button: {
+        "width": "100%",
+        "height": "100%",
+        "display": "block",
+        "padding": Size.SMALL.value,
+        "border_radius": Size.DEFAULT.value
+    },
+
+    rx.Link: {
+        "text_decoration":"none",
+        "_hover": {}
+    }
+}
+
+title_style = dict(
+    width="100%",
+    padding_top=Size.DEFAULT.value
+)
+
+button_title_style = dict(
+    font_size=Size.DEFAULT.value,
+)
+
+button_body_style = dict(
+    font_size=Size.MEDIUM.value,
+)
\ No newline at end of file
diff --git a/link_bio/link_bio/views/header/header.py b/link_bio/link_bio/views/header/header.py
index 2b8e4d90..c811389c 100644
--- a/link_bio/link_bio/views/header/header.py
+++ b/link_bio/link_bio/views/header/header.py
@@ -1,12 +1,42 @@
 import reflex as rx
+from link_bio.components.link_icon import link_icon
+from link_bio.components.info_text import info_text
+from link_bio.styles.styles import Size as Size
 
 def header() -> rx.Component:
     return rx.vstack(
-        rx.avatar(name="Adrian Rodriguez", size="xl"),
-        rx.text("@adradev"),
-        rx.text("HOLA MI NOMBRE ES ADRIAN RODRIGUEZ"),
+        rx.hstack(
+            rx.avatar(name="Adrian Rodriguez", size="xl"),
+            rx.vstack(
+                rx.heading(
+                    "ADRIAN RODRIGUEZ", 
+                    size="lg"
+                ),
+                rx.text(
+                    "@adradev",
+                    margin_top="0px !important"
+                ),
+                rx.hstack(
+                    link_icon("https://github.com/adra-dev/python-web"),
+                    link_icon("https://github.com/adra-dev/python-web"),
+                    link_icon("https://github.com/adra-dev/python-web"),
+                ),
+                align_items="start"
+            ),
+            spacing=Size.DEFAULT.value
+        ),
+        rx.flex(
+            info_text("2", "años de experiencia"),
+            rx.spacer(),
+            info_text("2", "años de experiencia"),
+            rx.spacer(),
+            info_text("2", "años de experiencia"),
+            width="100%"
+        ),
         rx.text("""Soy ingeniero de software desde hace 2 años.
                 Actualmente me dedico a mejorar mis perfiles como 
                 Data Scientist, PostgresDBA, PythonDev. 
                 Aqui podras encontrar todos mis enlaces de interes. ¡Bienvenid@!"""),
+        spacing=Size.BIG.value,
+        align_items="start"
     )
diff --git a/link_bio/link_bio/views/links/links.py b/link_bio/link_bio/views/links/links.py
index c4e9c0b3..3c5cf532 100644
--- a/link_bio/link_bio/views/links/links.py
+++ b/link_bio/link_bio/views/links/links.py
@@ -1,10 +1,54 @@
 import reflex as rx
 from link_bio.components.link_button import link_button
+from link_bio.components.title import title
+from link_bio.styles.styles import Size as Size
+
+
 
 def links() -> rx.Component:
     return rx.vstack(
-        link_button("GitHub", "https://github.com/adra-dev"),
-        link_button("Linkedin", "https://github.com/adra-dev"),
-        link_button("CV.pdf", "https://github.com/adra-dev"),
-        link_button("Kaggle", "https://github.com/adra-dev")
+        title("Repositorios"),
+        link_button(
+            "GitHub", 
+            "Portafolio de codigo", 
+            "https://github.com/adra-dev"
+        ),
+        link_button(
+            "Linkedin", 
+            "Perfil de linkedin", 
+            "https://github.com/adra-dev"
+        ),
+        link_button(
+            "CV.pdf", 
+            "CV para descargar en pdf", 
+            "https://github.com/adra-dev"
+        ),
+        link_button(
+            "Kaggle", 
+            "Repositorios de Kaggle",
+            "https://github.com/adra-dev"
+        ),
+        title("Repositorios"),
+        link_button(
+            "GitHub", 
+            "Portafolio de codigo", 
+            "https://github.com/adra-dev"
+        ),
+        link_button(
+            "Linkedin", 
+            "Perfil de linkedin", 
+            "https://github.com/adra-dev"
+        ),
+        link_button(
+            "CV.pdf", 
+            "CV para descargar en pdf", 
+            "https://github.com/adra-dev"
+        ),
+        link_button(
+            "Kaggle", 
+            "Repositorios de Kaggle",
+            "https://github.com/adra-dev"
+        ),
+        width="100%",
+        spacing=Size.MEDIUM.value
     )
\ No newline at end of file

From 3780462af62f5ed28ad70f3c9a26f3fa9f2e0d80 Mon Sep 17 00:00:00 2001
From: AdraDev <alfaroar98@gmail.com>
Date: Wed, 25 Oct 2023 20:30:18 -0600
Subject: [PATCH 4/4] Cuarta clase python web

---
 link_bio/assets/GitHub_Logo_White.png        | Bin 0 -> 31120 bytes
 link_bio/assets/avatar.jpg                   | Bin 0 -> 1474 bytes
 link_bio/assets/avatar2.jpg                  | Bin 0 -> 1362 bytes
 link_bio/assets/github-mark-white.png        | Bin 0 -> 4837 bytes
 link_bio/assets/github3.png                  | Bin 0 -> 27432 bytes
 link_bio/assets/icons/download.svg           |   1 +
 link_bio/assets/icons/email.svg              |   1 +
 link_bio/assets/icons/github.svg             |   1 +
 link_bio/assets/icons/linkedin.svg           |   1 +
 link_bio/link_bio/components/footer.py       |  26 +++++--
 link_bio/link_bio/components/info_text.py    |  12 +++-
 link_bio/link_bio/components/link_button.py  |  17 +++--
 link_bio/link_bio/components/link_icon.py    |   9 +--
 link_bio/link_bio/components/link_sponsor.py |  14 ++++
 link_bio/link_bio/components/navbar.py       |  16 +++--
 link_bio/link_bio/constants.py               |  29 ++++++++
 link_bio/link_bio/link_bio.py                |  10 ++-
 link_bio/link_bio/styles/colors.py           |  13 ++++
 link_bio/link_bio/styles/fonts.py            |   6 ++
 link_bio/link_bio/styles/styles.py           |  27 +++++++-
 link_bio/link_bio/views/header/header.py     |  68 +++++++++++++++----
 link_bio/link_bio/views/links/links.py       |  46 ++++++++++---
 link_bio/link_bio/views/sponsors/sponsors.py |  24 +++++++
 23 files changed, 270 insertions(+), 51 deletions(-)
 create mode 100644 link_bio/assets/GitHub_Logo_White.png
 create mode 100644 link_bio/assets/avatar.jpg
 create mode 100644 link_bio/assets/avatar2.jpg
 create mode 100644 link_bio/assets/github-mark-white.png
 create mode 100644 link_bio/assets/github3.png
 create mode 100644 link_bio/assets/icons/download.svg
 create mode 100644 link_bio/assets/icons/email.svg
 create mode 100644 link_bio/assets/icons/github.svg
 create mode 100644 link_bio/assets/icons/linkedin.svg
 create mode 100644 link_bio/link_bio/components/link_sponsor.py
 create mode 100644 link_bio/link_bio/constants.py
 create mode 100644 link_bio/link_bio/styles/colors.py
 create mode 100644 link_bio/link_bio/styles/fonts.py
 create mode 100644 link_bio/link_bio/views/sponsors/sponsors.py

diff --git a/link_bio/assets/GitHub_Logo_White.png b/link_bio/assets/GitHub_Logo_White.png
new file mode 100644
index 0000000000000000000000000000000000000000..c61ab9d0582e487852d3afdbf22987208123591e
GIT binary patch
diff --git a/link_bio/assets/avatar.jpg b/link_bio/assets/avatar.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..99771eeeaf419bf1912b7f9fe4b88d88ea3c4386
GIT binary patch
diff --git a/link_bio/assets/avatar2.jpg b/link_bio/assets/avatar2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2b8e0e9e6ac20c21ea270e6b6018502fa736e55e
GIT binary patch
diff --git a/link_bio/assets/github-mark-white.png b/link_bio/assets/github-mark-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..50b81752278d084ba9d449fff25f4051df162b0f
GIT binary patch
diff --git a/link_bio/assets/github3.png b/link_bio/assets/github3.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec469827a94a513c6d6876f7b8177ee337f98f18
GIT binary patch
diff --git a/link_bio/assets/icons/download.svg b/link_bio/assets/icons/download.svg
new file mode 100644
index 00000000..21e6cbb9
--- /dev/null
+++ b/link_bio/assets/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#f1f2f4}</style><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
\ No newline at end of file
diff --git a/link_bio/assets/icons/email.svg b/link_bio/assets/icons/email.svg
new file mode 100644
index 00000000..96819caa
--- /dev/null
+++ b/link_bio/assets/icons/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#f1f2f4}</style><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
\ No newline at end of file
diff --git a/link_bio/assets/icons/github.svg b/link_bio/assets/icons/github.svg
new file mode 100644
index 00000000..994d769b
--- /dev/null
+++ b/link_bio/assets/icons/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#f1f2f4}</style><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
\ No newline at end of file
diff --git a/link_bio/assets/icons/linkedin.svg b/link_bio/assets/icons/linkedin.svg
new file mode 100644
index 00000000..663cfa13
--- /dev/null
+++ b/link_bio/assets/icons/linkedin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
\ No newline at end of file
diff --git a/link_bio/link_bio/components/footer.py b/link_bio/link_bio/components/footer.py
index 9116249e..e4482729 100644
--- a/link_bio/link_bio/components/footer.py
+++ b/link_bio/link_bio/components/footer.py
@@ -1,20 +1,34 @@
 import reflex as rx
 import datetime
+import link_bio.constants as const
 from link_bio.styles.styles import Size as Size
+from link_bio.styles.colors import Color as Color
+from link_bio.styles.colors import TextColor as TextColor
+
 
 def footer() -> rx.Component:
     return rx.vstack(
-        rx.image(src="favicon.ico"),
+        rx.image(
+            src="GitHub_Logo_White.png",
+            height=Size.VERYBIG.value
+        ),
         rx.link(
-            f"@ 2021-{datetime.date.today().year} adradev by Adrian Rodriguez v1.",
-            href="https://github.com/adra-dev",
+            rx.box(
+                f"@ 2021-{datetime.date.today().year}",
+                rx.span("adradev by Adrian Rodriguez", color=Color.PRIMARY.value),
+                "v3."
+            ),
+            href=const.GITHUB_URL,
             is_external=True,
             font_size=Size.MEDIUM.value
         ),
         rx.text(
             "BUILDING SOFTWARE TO FIND SOLUTIONS.",
             font_size=Size.MEDIUM.value,
-            margin_top="0px !important"
+            margin_top=Size.ZERO.value,
         ),
-        margin_bottom=Size.BIG.value
-    )
\ No newline at end of file
+        margin_bottom=Size.BIG.value,
+        padding_bottom=Size.BIG.value,
+        spacing=Size.DEFAULT.value,
+        color=TextColor.FOOTER.value,
+    )
diff --git a/link_bio/link_bio/components/info_text.py b/link_bio/link_bio/components/info_text.py
index 9f35418f..7744c690 100644
--- a/link_bio/link_bio/components/info_text.py
+++ b/link_bio/link_bio/components/info_text.py
@@ -1,9 +1,17 @@
 import reflex as rx
 from link_bio.styles.styles import Size as Size
+from link_bio.styles.colors import TextColor as TextColor
+from link_bio.styles.colors import Color as Color
 
 
 def info_text(title: str, body: str) -> rx.Component:
     return rx.box(
-        rx.span(title, font_weight="bold", color="blue"),
-        f" {body}", font_size=Size.MEDIUM.value
+        rx.span(
+            title, 
+            font_weight="bold", 
+            color=Color.PRIMARY.value,
+        ),
+        f" {body}", 
+        font_size=Size.MEDIUM.value,
+        color=TextColor.BODY.value,
     )
\ No newline at end of file
diff --git a/link_bio/link_bio/components/link_button.py b/link_bio/link_bio/components/link_button.py
index ccda5705..8b32c8fc 100644
--- a/link_bio/link_bio/components/link_button.py
+++ b/link_bio/link_bio/components/link_button.py
@@ -1,24 +1,27 @@
 import reflex as rx
 import link_bio.styles.styles as styles
+from link_bio.styles.styles import Size as Size
 
 
-def link_button(title: str, body: str, url: str) -> rx.Component:
+def link_button(title: str, body: str, image: str, url: str) -> rx.Component:
     return rx.link(
         rx.button(
             rx.hstack(
-                rx.icon(
-                    tag="arrow_forward",
-                    width=styles.Size.BIG.value,
-                    height=styles.Size.DEFAULT.value
+                rx.image(
+                    src=image,
+                    width=Size.LARGE.value,
+                    height=Size.LARGE.value,
+                    margin=Size.MEDIUM.value,
                 ),
                 rx.vstack(
                     rx.text(title, style=styles.button_title_style),
                     rx.text(body, style=styles.button_body_style),
-                    align_items="start"
+                    align_items="start",
+                    spacing=Size.SMALL.value,
+                    padding_y=Size.SMALL.value
                 )
             )
         ),
-        
         href=url,
         is_external=True,
         width="100%"
diff --git a/link_bio/link_bio/components/link_icon.py b/link_bio/link_bio/components/link_icon.py
index 5a2248ed..fd1b0055 100644
--- a/link_bio/link_bio/components/link_icon.py
+++ b/link_bio/link_bio/components/link_icon.py
@@ -1,11 +1,12 @@
 import reflex as rx
-import link_bio.styles.styles as styles
+from link_bio.styles.styles import Size as Size
 
 
-def link_icon(url: str) -> rx.Component:
+def link_icon(image: str, url: str) -> rx.Component:
     return rx.link(
-        rx.icon(
-            tag="link",
+        rx.image(
+            src=image,
+            width=Size.DEFAULT.value,
         ),
         href=url,
         is_external=True
diff --git a/link_bio/link_bio/components/link_sponsor.py b/link_bio/link_bio/components/link_sponsor.py
new file mode 100644
index 00000000..e2688f1e
--- /dev/null
+++ b/link_bio/link_bio/components/link_sponsor.py
@@ -0,0 +1,14 @@
+import reflex as rx
+import link_bio.styles.styles as styles
+from link_bio.styles.styles import Size as Size
+
+
+def link_sponsors(imagen: str, url: str) -> rx.Component:
+    return rx.link(
+        rx.image(
+            height=Size.VERYBIG.value,
+            src=imagen
+        ),
+        href=url,
+        is_external=True
+    )
diff --git a/link_bio/link_bio/components/navbar.py b/link_bio/link_bio/components/navbar.py
index 02d25bdb..243b498d 100644
--- a/link_bio/link_bio/components/navbar.py
+++ b/link_bio/link_bio/components/navbar.py
@@ -1,15 +1,19 @@
 import reflex as rx
+import link_bio.styles.styles as styles
 from link_bio.styles.styles import Size as Size
+from link_bio.styles.colors import Color as Color
 
 def navbar() -> rx.Component:
     return rx.hstack(
-        rx.text(
-            "adradev"
+        rx.box(
+            rx.span("adra", color=Color.PRIMARY.value),
+            rx.span("dev", color=Color.PRIMARY.value),
+            style=styles.navbar_title_style,
         ),
         position="sticky",
-        bg="lightgray",
-        padding_x=Size.DEFAULT.value,
-        padding_y=Size.SMALL.value,
+        bg=Color.CONTENT.value,
+        padding_x=Size.BIG.value,
+        padding_y=Size.DEFAULT.value,
         z_index="999",
         top="0"
-    )
\ No newline at end of file
+    )
diff --git a/link_bio/link_bio/constants.py b/link_bio/link_bio/constants.py
new file mode 100644
index 00000000..703e5ef8
--- /dev/null
+++ b/link_bio/link_bio/constants.py
@@ -0,0 +1,29 @@
+# Cabecera
+GITHUB_URL = "https://github.com/adra-dev"
+# TWITTER_X_URL = "https://twitter.com/mouredev"
+# INSTAGRAM_URL = "https://instagram.com/mouredev"
+# TIKTOK_URL = "https://tiktok.com/@mouredev"
+# SPOTIFY_URL = "https://open.spotify.com/show/4iKXt5k2zCbAQOrMePh7qh"
+LINKEDIN_URL = "https://github.com/adra-dev"
+
+# Comunidad
+TWITCH_URL = "https://twitch.tv/mouredev"
+YOUTUBE_URL = "https://youtube.com/@mouredev"
+YOUTUBE_SECONDARY_URL = "https://youtube.com/@mouredevtv"
+DISCORD_URL = "https://discord.gg/mouredev"
+CODE_CHALLENGES_URL = "https://retosdeprogramacion.com"
+
+# Recursos y más
+BOOK_URL = "https://mouredev.com/libro-git"
+BOOKS_URL = "https://amazon.es/shop/mouredev/list/2ZIHJJFJ9AVZ3"
+SETUP_URL = "https://mouredev.com/setup"
+MOUREDEV_URL = "https://mouredev.com"
+COFFEE_URL = "https://buymeacoffee.com/mouredev"
+
+# Contacto
+MYPUBLICINBOX_URL = "https://mypublicinbox.com/mouredev"
+EMAIL = "alfaroar98@gmail.com"
+
+# Sponsors
+ELGATO_URL = "https://e.lga.to/MoureDev"
+MVP_URL = "https://mvp.microsoft.com/es-es/PublicProfile/5004970"
\ No newline at end of file
diff --git a/link_bio/link_bio/link_bio.py b/link_bio/link_bio/link_bio.py
index 00def52f..8bf55bab 100644
--- a/link_bio/link_bio/link_bio.py
+++ b/link_bio/link_bio/link_bio.py
@@ -3,6 +3,7 @@
 from link_bio.components.footer import footer
 from link_bio.views.header.header import header
 from link_bio.views.links.links import links
+from link_bio.views.sponsors.sponsors import sponsors
 import link_bio.styles.styles as styles
 from link_bio.styles.styles import Size as Size
 
@@ -18,9 +19,11 @@ def index() -> rx.Component:
              rx.vstack(
                 header(),
                 links(),
+                sponsors(),
                 max_width=styles.MAX_WIDTH,
                 width="100%",
                 margin_y=Size.BIG.value,
+                padding=Size.BIG.value,
             )
         ),
         footer()
@@ -30,5 +33,10 @@ def index() -> rx.Component:
 app = rx.App(
     style=styles.BASE_STYLE
 )
-app.add_page(index)
+app.add_page(
+    index,
+    title="adradev | Apasionado del Lenguaje Python",
+    description="Hola mi nombre es Adrian Rodriguez. Soy ingeniero de software, desarrollador freelance",
+    image="avatar.jpg"
+)
 app.compile()
\ No newline at end of file
diff --git a/link_bio/link_bio/styles/colors.py b/link_bio/link_bio/styles/colors.py
new file mode 100644
index 00000000..ec552e4e
--- /dev/null
+++ b/link_bio/link_bio/styles/colors.py
@@ -0,0 +1,13 @@
+from enum import Enum
+
+
+class Color(Enum):
+    PRIMARY ="#14A1F0"
+    SECONDARY ="#087ec4"
+    BACKGROUND ="#0C151D"
+    CONTENT ="#171F26"
+
+class TextColor(Enum):
+    HEADER = "#F1F2F4"
+    BODY = "#C3C7CB"
+    FOOTER = "#A3ABB2"
\ No newline at end of file
diff --git a/link_bio/link_bio/styles/fonts.py b/link_bio/link_bio/styles/fonts.py
new file mode 100644
index 00000000..8a07aa48
--- /dev/null
+++ b/link_bio/link_bio/styles/fonts.py
@@ -0,0 +1,6 @@
+from enum import Enum
+
+class Font(Enum):
+    DEFAULT = "Poppins-Light"
+    TITLE = "Poppins-Bold"
+    LOGO = "Comfortaa-Medium"
\ No newline at end of file
diff --git a/link_bio/link_bio/styles/styles.py b/link_bio/link_bio/styles/styles.py
index 4450fb31..9f51249d 100644
--- a/link_bio/link_bio/styles/styles.py
+++ b/link_bio/link_bio/styles/styles.py
@@ -1,5 +1,8 @@
 import reflex as rx
 from enum import Enum
+from .colors import Color as Color
+from .colors import TextColor as TextColor
+from .fonts import Font as Font
 
 # Constants
 MAX_WIDTH = "560px"
@@ -8,20 +11,34 @@
 
 
 class Size(Enum):
+    ZERO = "0px !important"
     SMALL="0.5em"
     MEDIUM="0.8em"
     DEFAULT="1em"
+    LARGE="1.5em"
     BIG="2em"
+    VERYBIG="4em"
 
 # Styles
 
 BASE_STYLE = {
+    "font_family":Font.DEFAULT.value,
+    "background_color": Color.BACKGROUND.value,
+    rx.Heading: {
+        "color": TextColor.HEADER.value,
+        "font_family": Font.TITLE.value,
+    }, 
     rx.Button: {
         "width": "100%",
         "height": "100%",
         "display": "block",
         "padding": Size.SMALL.value,
-        "border_radius": Size.DEFAULT.value
+        "border_radius": Size.DEFAULT.value,
+        "color": TextColor.HEADER.value,
+        "background_color": Color.CONTENT.value,
+        "_hover":{
+            "background_color": Color.SECONDARY.value,
+        }
     },
 
     rx.Link: {
@@ -30,15 +47,23 @@ class Size(Enum):
     }
 }
 
+navbar_title_style = dict(
+    font_family=Font.LOGO.value,
+    font_size=Size.LARGE.value
+)
+
 title_style = dict(
     width="100%",
     padding_top=Size.DEFAULT.value
 )
 
 button_title_style = dict(
+    font_family=Font.LOGO.value,
     font_size=Size.DEFAULT.value,
+    color=TextColor.HEADER.value
 )
 
 button_body_style = dict(
     font_size=Size.MEDIUM.value,
+    color=TextColor.BODY.value
 )
\ No newline at end of file
diff --git a/link_bio/link_bio/views/header/header.py b/link_bio/link_bio/views/header/header.py
index c811389c..2ed96558 100644
--- a/link_bio/link_bio/views/header/header.py
+++ b/link_bio/link_bio/views/header/header.py
@@ -2,41 +2,83 @@
 from link_bio.components.link_icon import link_icon
 from link_bio.components.info_text import info_text
 from link_bio.styles.styles import Size as Size
+from link_bio.styles.colors import Color as Color
+from link_bio.styles.colors import TextColor as TextColor
+import link_bio.constants as const
+import datetime
+
 
 def header() -> rx.Component:
     return rx.vstack(
         rx.hstack(
-            rx.avatar(name="Adrian Rodriguez", size="xl"),
+            rx.avatar(
+                name="Adrian Rodriguez", 
+                size="xl",
+                src="avatar.jpg",
+                color=TextColor.BODY.value,
+                bg=Color.CONTENT.value,
+                padding="2px",
+                border="4px",
+                border_color=Color.PRIMARY.value
+            ),
             rx.vstack(
                 rx.heading(
                     "ADRIAN RODRIGUEZ", 
-                    size="lg"
+                    size="lg",
                 ),
                 rx.text(
                     "@adradev",
-                    margin_top="0px !important"
+                    margin_top=Size.ZERO.value,
+                    color=Color.PRIMARY.value,
                 ),
                 rx.hstack(
-                    link_icon("https://github.com/adra-dev/python-web"),
-                    link_icon("https://github.com/adra-dev/python-web"),
-                    link_icon("https://github.com/adra-dev/python-web"),
+                    link_icon(
+                        "icons/github.svg",
+                        const.GITHUB_URL
+                    ),
+                    link_icon(
+                        "icons/github.svg",
+                        const.GITHUB_URL
+                    ),
+                    link_icon(
+                        "icons/github.svg",
+                        const.GITHUB_URL
+                    ),
+                    spacing=Size.LARGE.value
                 ),
                 align_items="start"
             ),
             spacing=Size.DEFAULT.value
         ),
         rx.flex(
-            info_text("2", "años de experiencia"),
+            info_text(
+                f"{experience()}+", 
+                "años de experiencia"
+            ),
             rx.spacer(),
-            info_text("2", "años de experiencia"),
+            info_text(
+                "2", "años de experiencia"
+            ),
             rx.spacer(),
-            info_text("2", "años de experiencia"),
+            info_text(
+                "2", "años de experiencia"
+            ),
             width="100%"
         ),
-        rx.text("""Soy ingeniero de software desde hace 2 años.
-                Actualmente me dedico a mejorar mis perfiles como 
-                Data Scientist, PostgresDBA, PythonDev. 
-                Aqui podras encontrar todos mis enlaces de interes. ¡Bienvenid@!"""),
+        rx.text(
+            f"""
+            Soy ingeniero de software desde hace {experience()} años.
+            Actualmente me dedico a mejorar mis perfiles como 
+            Data Scientist, PostgresDBA, PythonDev. 
+            Aqui podras encontrar todos mis enlaces de interes. ¡Bienvenid@!
+            """,
+            font_size=Size.DEFAULT.value,
+            color=TextColor.BODY.value,
+        ),
         spacing=Size.BIG.value,
         align_items="start"
     )
+
+
+def experience() -> int:
+    return datetime.date.today().year - 2021
\ No newline at end of file
diff --git a/link_bio/link_bio/views/links/links.py b/link_bio/link_bio/views/links/links.py
index 3c5cf532..3fc9d211 100644
--- a/link_bio/link_bio/views/links/links.py
+++ b/link_bio/link_bio/views/links/links.py
@@ -2,6 +2,7 @@
 from link_bio.components.link_button import link_button
 from link_bio.components.title import title
 from link_bio.styles.styles import Size as Size
+import link_bio.constants as const
 
 
 
@@ -10,45 +11,68 @@ def links() -> rx.Component:
         title("Repositorios"),
         link_button(
             "GitHub", 
-            "Portafolio de codigo", 
-            "https://github.com/adra-dev"
+            "Portafolio de codigo",
+            "icons/github.svg", 
+            const.GITHUB_URL
         ),
         link_button(
             "Linkedin", 
-            "Perfil de linkedin", 
-            "https://github.com/adra-dev"
+            "Perfil de linkedin",
+            "icons/linkedin.svg", 
+            const.LINKEDIN_URL
         ),
         link_button(
             "CV.pdf", 
-            "CV para descargar en pdf", 
+            "CV para descargar en pdf",
+            "icons/download.svg", 
             "https://github.com/adra-dev"
         ),
         link_button(
             "Kaggle", 
             "Repositorios de Kaggle",
+            "icons/github.svg",
             "https://github.com/adra-dev"
         ),
+
         title("Repositorios"),
         link_button(
             "GitHub", 
-            "Portafolio de codigo", 
-            "https://github.com/adra-dev"
+            "Portafolio de codigo",
+            "icons/github.svg", 
+            const.GITHUB_URL
         ),
         link_button(
             "Linkedin", 
-            "Perfil de linkedin", 
-            "https://github.com/adra-dev"
+            "Perfil de linkedin",
+            "icons/github.svg", 
+            const.LINKEDIN_URL
         ),
         link_button(
             "CV.pdf", 
-            "CV para descargar en pdf", 
+            "CV para descargar en pdf",
+            "icons/github.svg", 
             "https://github.com/adra-dev"
         ),
         link_button(
             "Kaggle", 
             "Repositorios de Kaggle",
+            "icons/github.svg",
             "https://github.com/adra-dev"
         ),
+
+        title("Contacto"),
+        link_button(
+            "MyPublicInbox",
+            "Respuesta rápida y con preferencia",
+            "icons/github.svg",
+            const.MYPUBLICINBOX_URL
+        ),
+        link_button(
+            "Email",
+            const.EMAIL,
+            "icons/email.svg",
+            f"mailto:{const.EMAIL}"
+        ),
         width="100%",
-        spacing=Size.MEDIUM.value
+        spacing=Size.MEDIUM.value,
     )
\ No newline at end of file
diff --git a/link_bio/link_bio/views/sponsors/sponsors.py b/link_bio/link_bio/views/sponsors/sponsors.py
new file mode 100644
index 00000000..bdff1237
--- /dev/null
+++ b/link_bio/link_bio/views/sponsors/sponsors.py
@@ -0,0 +1,24 @@
+import reflex as rx
+import link_bio.constants as const
+from link_bio.styles.styles import Size as Size
+from link_bio.components.title import title
+from link_bio.components.link_sponsor import link_sponsors
+
+def sponsors() -> rx.Component:
+    return rx.stack(
+        title("Colaboran"),
+        rx.hstack(
+            link_sponsors(
+                "github-mark-white.png",
+                const.GITHUB_URL
+            ),
+            link_sponsors(
+                "GitHub_Logo_White.png",
+                const.GITHUB_URL
+            ),
+            spacing=Size.BIG.value,
+        ),
+        width="100%",
+        align_items="start",
+        spacing=Size.MEDIUM.value,
+    )
\ No newline at end of file
