BLUR-2: Utworzenie strony kontaktowej

.web/pages/404.js

@@ -5,8 +5,8 @@ import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from
 import "focus-visible/dist/focus-visible"
 import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
-import { useClientSideRouting } from "/utils/client_side_routing"
 import Error from "next/error"
+import { useClientSideRouting } from "/utils/client_side_routing"
 import NextHead from "next/head"
 
 

.web/pages/dashboard.js

@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
 import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
 import "focus-visible/dist/focus-visible"
-import { Box, Code, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
+import { Box, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
 import NextLink from "next/link"
 import { HamburgerIcon } from "@chakra-ui/icons"
@@ -102,20 +102,35 @@ export default function Component() {
 </Box>
   <Box sx={{"paddingTop": "5em", "paddingX": ["auto", "2em"], "flex": "1"}}>
   <Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
-  <VStack>
+  <Fragment>
   <Heading sx={{"fontSize": "3em"}}>
-  {`Dashboard`}
+  {`Kontakt`}
 </Heading>
   <Text>
-  {`Welcome to Reflex!`}
+  {`Witaj na stronie Kontaktowej w aplikacji BlurMe!`}
 </Text>
   <Text>
-  {`You can edit this page in `}
-  <Code>
-  {`{your_app}/pages/dashboard.py`}
-</Code>
+  {`Jesteśmy dostępni dla Ciebie na różnych platformach. Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub po prostu chcesz porozmawiać o naszej aplikacji.`}
 </Text>
-</VStack>
+  <Heading sx={{"level": 3}}>
+  {`E-mail:`}
+</Heading>
+  <Text>
+  {`Zapraszamy do napisania do nas na adres: contact@blurme.com`}
+</Text>
+  <Heading sx={{"level": 3}}>
+  {`Telefon:`}
+</Heading>
+  <Text>
+  {`Możesz także zadzwonić pod numer: +48 123 456 789`}
+</Text>
+  <Heading sx={{"level": 3}}>
+  {`Media Społecznościowe:`}
+</Heading>
+  <Text>
+  {`Odwiedź nas na Facebooku, Twitterze i Instagramie @BlurMeApp`}
+</Text>
+</Fragment>
 </Box>
 </Box>
   <Box sx={{"position": "fixed", "right": "1.5em", "top": "1.5em", "zIndex": "500"}}>

blurme/pages/__init__.py

@@ -1,4 +1,3 @@
 from .dashboard import dashboard
 from .index import index
 from .settings import settings
-from .about import AboutPage

blurme/pages/about.py

@@ -1,3 +1,5 @@
+from blurme.templates import template
+
 import reflex as rx
 
 about_authors_text = """
@@ -38,4 +40,15 @@ stronę kontaktową. Jesteśmy otwarci na współpracę i ciekawe pomysły!
 Dziękujemy za korzystanie z **BlurMe**!
 """
 
-about_page = rx.markdown(about_authors_text)
+
+@template(route="/about", title="About BlurMe", description="Learn more about the BlurMe app and its features.")
+def about() -> rx.Component:
+    """The about page.
+
+    Returns:
+        The UI for the about page.
+    """
+    return rx.vstack(
+        rx.heading("About Us", font_size="3em"),
+        rx.markdown(about_authors_text)
+    )

blurme/pages/dashboard.py

@@ -4,18 +4,25 @@ from blurme.templates import template
 import reflex as rx
 
 
-@template(route="/dashboard", title="Kontakt", image = "/contact-icon.png")
+@template(route="/dashboard", title="Kontakt", image="/contact-icon.png")
 def dashboard() -> rx.Component:
     """The dashboard page.
 
     Returns:
         The UI for the dashboard page.
     """
-    return rx.vstack(
-        rx.heading("Dashboard", font_size="3em"),
-        rx.text("Welcome to Reflex!"),
+    return rx.fragment(
+        rx.heading("Kontakt", font_size="3em"),
+        rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"),
         rx.text(
-            "You can edit this page in ",
-            rx.code("{your_app}/pages/dashboard.py"),
+            "Jesteśmy dostępni dla Ciebie na różnych platformach. "
+            "Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub "
+            "po prostu chcesz porozmawiać o naszej aplikacji."
         ),
+        rx.heading("E-mail:", level=3),
+        rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com"),
+        rx.heading("Telefon:", level=3),
+        rx.text("Możesz także zadzwonić pod numer: +48 123 456 789"),
+        rx.heading("Media Społecznościowe:", level=3),
+        rx.text("Odwiedź nas na Facebooku, Twitterze i Instagramie @BlurMeApp")
     )