Add default webpage template

compose.dev.yml

@@ -12,8 +12,6 @@ services:
     restart: always
     networks:
       - caddy
-    depends_on:
-      - landing
 
   landing:
     container_name: landing
@@ -24,6 +22,8 @@ services:
       - ./src/landing/rxconfig.py:/app/rxconfig.py
     networks:
       - caddy
+    depends_on:
+      - caddy
 
 networks:
   caddy:

src/landing/landing/components/footer.py

@@ -1,10 +1,10 @@
 import reflex as rx
+from landing.style import * 
 
 def footer():
     return rx.box(
         footer_content(),
-        background="#FFF",
+        border_top=f"2px solid {color['white']};"
-        border_top=f"8px solid {rx.color('mauve', 4)};"
     )
 
 

src/landing/landing/components/navbar.py

@@ -1,16 +1,15 @@
 import reflex as rx
-
+from landing.style import *
 
 def navbar():
-    return rx.flex(
+    return rx.box(
-        background = "#FFF",
+        rx.center(
-        border_bottom=f"8px solid {rx.color('mauve', 4)};",
+            rx.vstack(
-        height="10vh",
+                rx.heading("Navbar", size="9"),
-        position="fixed",
+                align="center",
-        width="100%",
+                spacing="7"
-        top="0px",
+            ),
-        z_index="5", 
+            border_bottom=f"2px solid {color['white']};",
-        align_items= "center",
+            height="10vh"
-        spacing="6",
+        )
-        padding= "7px 20px 7px 20px;",
     )

src/landing/landing/landing.py

@@ -2,9 +2,15 @@ import reflex as rx
 from rxconfig import config
 from landing.state import *
 from landing.pages import *
+from landing.style import *
 
 # Create app instance and add index page.
 app = rx.App(
+    style=style,
+    stylesheets=[
+        "fonts/fonts.css",
+        "css/scrollbar.css"
+    ]
 )
 
 for route in routes:

src/landing/landing/state/__init__.py

@@ -1,2 +1 @@
 from .state import State
-from .theme import ThemeState

src/landing/landing/state/theme.py

@@ -1,10 +0,0 @@
-import reflex as rx
-
-from .state import State
-
-class ThemeState(State):
-    """State for the global theme"""
-    theme: str = "day"
-
-    def toggle_theme(self):
-        self.theme == "day" if self.theme != "day" else self.theme == "night"

src/landing/landing/style.py

@@ -0,0 +1,60 @@
+import reflex as rx
+
+color = {
+    "white": "#ebdbb2",
+    "black": "#000000",
+    "red": {
+        100: "#fb4934",
+        200: "#cc241d",
+    },
+    "green": {
+        100: "#b8bb26",
+        200: "#98971a",
+    },
+    "yellow": {
+        100: "#fabd2f",
+        200: "#d79921",
+    },
+    "blue": {
+        100: "#83a598",
+        200: "#458588",
+    },
+    "purple": { 
+        100: "#d3869b",
+        200: "#b16286",
+    },
+    "aqua": {
+        100: "#8ec07c",
+        200: "#689d6a",
+    }
+}
+
+style = {
+    # Background color
+    "background_color": color["black"],
+        
+    # Text
+    rx.text: {
+        "font_family": "ComicCode",
+        "font_size": 24,
+        "color": color["white"]
+    },
+
+    # Heading
+    rx.heading: {        
+        "font_family": "ComicCode",
+        "font_size": 32,
+        "color": color["white"]
+    },
+
+    # Link
+    rx.link: {
+        "font_family": "ComicCode",
+        "font_size": 24,
+        "color": color["black"],
+        "text_decoration": "none", 
+        "_hover": {
+            "color": color["green"][100]
+        }
+    },
+}