start to fill website with content

website/main.py

@@ -1,12 +1,61 @@
 #!/usr/bin/env python3
+from pathlib import Path
+
 import website.api_docs_and_examples as api_docs_and_examples
-from nicegui import ui
+from nicegui import Client, ui
+
+ACCENT_COLOR = '#428BF5'
+HEADER_HEIGHT = '70px'
 
 
 @ui.page('/')
-async def index():
+async def index(client: Client):
     ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
-    api_docs_and_examples.create_intro()
+    client.content.classes(remove='q-pa-md gap-4')
+
+    with ui.header() \
+            .classes('justify-between items-center') \
+            .style(f'background-color: {ACCENT_COLOR}; height: {HEADER_HEIGHT}') \
+            .props('elevated'):
+        ui.label('NiceGUI').classes('text-3xl')
+        with ui.row().classes('items-center'):
+            ui.link('Features').classes('text-lg').style('color: white!important')
+            ui.link('Installation').classes('text-lg').style('color: white!important')
+            ui.link('Documentation').classes('text-lg').style('color: white!important')
+            ui.link('API Reference').classes('text-lg').style('color: white!important')
+            ui.link('Docker').classes('text-lg').style('color: white!important')
+            ui.link('Deployment').classes('text-lg').style('color: white!important')
+            with ui.link(target='https://github.com/zauberzeug/nicegui/'):
+                ui.html(Path('static/github.svg').read_text()).classes('fill-white scale-125 m-1')
+
+    with ui.row() \
+            .classes('w-full q-pa-md items-center gap-8') \
+            .style(f'height: calc(100vh - {HEADER_HEIGHT}); transform: translateX(-375px)'):
+        ui.icon('face').style('font-size: 5000%')
+        with ui.column().classes('gap-8'):
+            ui.markdown('The NiceGUI you really\n\nneed in your life.') \
+                .style('font-size: 400%; line-height: 0.9; font-weight: 500')
+            ui.markdown('An easy-to-use Python-based UI framework\n\nwhich shows up in your web browser.') \
+                .style('font-size: 200%; line-height: 0.9')
+
+    with ui.row() \
+            .classes('w-full q-pa-md items-center gap-32 p-32 no-wrap') \
+            .style(f'height: calc(100vh - {HEADER_HEIGHT}); background-color: {ACCENT_COLOR}'):
+        with ui.column().classes('gap-8'):
+            ui.markdown('Create buttons, dialogs, markdown,\n\n3D scenes, plots and much more at ease.') \
+                .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500')
+            ui.label('''
+                It is great for micro web apps, dashboards, robotics projects, smart home solutions
+                and similar use cases. You can also use it in development, for example when
+                tweaking/configuring a machine learning algorithm or tuning motor controllers.
+                NiceGUl is available as PyPl package, Docker image and on GitHub
+            ''') \
+                .style('font-size: 150%; color: white')
+        with ui.card().style('min-width: 350px; height: 500px'):
+            ui.label('Demo')
+
+    with ui.row().classes('w-full q-pa-md'):
+        api_docs_and_examples.create_intro()
 
 
 @ui.page('/reference')

website/static/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>