more content work and minor layouting

main.py

@@ -97,7 +97,7 @@ async def index_page(client: Client):
         with ui.column().classes('gap-8'):
             ui.html('Meet the <em>NiceGUI</em>.') \
                 .style('font-size: 400%; line-height: 0.9; font-weight: 500')
-            ui.markdown('And let the browser be the frontend\n\nto your Python code.') \
+            ui.markdown('And let every browser be the frontend\n\nto your Python code.') \
                 .style('font-size: 200%; line-height: 0.9')
 
     with ui.row() \
@@ -108,7 +108,7 @@ async def index_page(client: Client):
                 .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500').classes('mb-4')
             ui.label('''
                 NiceGUI handles the web development details for you.
-                So you can focus the development of your Python code that needs an user interface.
+                So you can focus the development of Python code that needs an user interface.
                 Anything from short scripts and dashboards to full robotics projects, IoT solutions, 
                 smart home automations and machine learning projects can benefit from having all code in one place.
                 
@@ -124,9 +124,9 @@ async def index_page(client: Client):
         demo_card.create()
 
     ui.link_target('features').style(f'position: relative; top: -{HEADER_HEIGHT}')
-    with ui.column().classes('w-full q-pa-xl'):
+    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
         ui.label('Features').classes('text-bold text-lg')
-        ui.html('Do everything the <em>nice</em> way') \
+        ui.html('Do it the <em>nice</em> way') \
             .style('font-size: 300%; font-weight: 500; margin-top: -20px')
         with ui.row().classes('w-full no-wrap text-lg leading-tight justify-between'):
             with ui.column().classes('gap-1'):
@@ -151,7 +151,7 @@ async def index_page(client: Client):
                 ui.markdown('- straight-forward data binding')
 
     ui.link_target('installation').style(f'position: relative; top: -{HEADER_HEIGHT}')
-    with ui.column().classes('w-full q-pa-xl'):
+    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
         ui.label('Installation').classes('text-bold text-lg')
         ui.html('Get <em>started</em>') \
             .style('font-size: 300%; font-weight: 500; margin-top: -20px')
@@ -179,9 +179,9 @@ ui.run()
                     ui.markdown('```bash\npython3 main.py\n```')
 
     ui.link_target('examples').style(f'position: relative; top: -{HEADER_HEIGHT}')
-    with ui.column().classes('w-full q-pa-xl'):
-        ui.label('Documentation').classes('text-bold text-lg')
-        ui.html('Interactive <em>Examples</em>') \
+    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
+        ui.label('Examples').classes('text-bold text-lg')
+        ui.html('Try <em>this</em> out') \
             .style('font-size: 300%; font-weight: 500; margin-top: -20px')
         reference.create_intro()
 
@@ -191,34 +191,37 @@ ui.run()
         with ui.column().classes('gap-4'):
             ui.markdown('Go to the API reference to see a ton of live examples.') \
                 .style('font-size: 220%; color: white; line-height: 0.9; font-weight: 500')
-            ui.html('The whole content of <a href="https://nicegui.io/">nicegui.io</a> is implemented with NiceGUI itself.') \
+            ui.html('Fun-Fact: The whole page here is coded with NiceGUI itself.') \
                 .style('font-size: 150%; color: white')
         ui.link('API reference', '/reference') \
             .classes('rounded-full mx-auto px-12 py-2 text-xl text-bold bg-white')
 
-    with ui.column().classes('w-full q-pa-xl'):
-        ui.label('In-depth demonstration').classes('text-bold text-lg')
-        ui.html('What else can you do with <em>NiceGUI</em>?') \
+    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
+        ui.label('In-depth demonstrations').classes('text-bold text-lg')
+        ui.html('Pick your <em>solution</em>') \
             .style('font-size: 300%; font-weight: 500; margin-top: -20px')
         with ui.row().classes('w-full no-wrap text-lg leading-tight'):
             with ui.column().classes('w-1/3'):
-                ui.markdown(
-                    'You may also have a look at the following examples for in-depth demonstrations of what you can do with NiceGUI:')
                 example_link('Slideshow', 'implements a keyboard-controlled image slideshow')
                 example_link('Authentication', 'shows how to use sessions to build a login screen')
                 example_link(
                     'Modularization',
-                    'provides an example of how to modularize your application into multiple files and create a specialized page decorator')
+                    'provides an example of how to modularize your application into multiple files and reuse code')
+                example_link(
+                    'FastAPI',
+                    'illustrates the integration of NiceGUI with an existing FastAPI application')
             with ui.column().classes('w-1/3'):
-                example_link('Map', 'uses the JavaScript library leaflet to display a map at specific locations')
+                example_link(
+                    'Map',
+                    'demonstrates wrapping the JavaScript library leaflet to display a map at specific locations')
                 example_link(
                     'AI Interface',
-                    'utilizes the great but non-async API from <https://replicate.com> to perform voice-to-text transcription and generate images from prompts with Stable Diffusion')
-                example_link('3D Scene', 'creates a 3D scene and loads an STL mesh illuminated with a spotlight')
+                    'utilizes the great [replicate](https://replicate.com) library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion')
+                example_link('3D Scene', 'creates a webGL view and loads an STL mesh illuminated with a spotlight')
             with ui.column().classes('w-1/3'):
                 example_link('Custom Vue Component', 'shows how to write and integrate a custom vue component')
                 example_link('Image Mask Overlay', 'shows how to overlay an image with a mask')
-                example_link('Infinite Scroll', 'shows an infinitely scrolling image gallery')
+                example_link('Infinite Scroll', 'presents an infinitely scrolling image gallery')
 
     with ui.row() \
             .classes('w-full h-screen q-pa-md items-center gap-28 p-32 no-wrap') \
@@ -241,12 +244,13 @@ ui.run()
                 <strong><a href="https://quasar.dev/">Quasar</a></strong>
                 for the frontend.<br/>
 
-                The backend is build on top of
+                We have build on top of
                 <strong><a href="https://fastapi.tiangolo.com/">FastAPI</a></strong>,
                 which itself is based on the ASGI framework
                 <strong><a href="https://www.starlette.io/">Starlette</a></strong>,
                 and the ASGI webserver
-                <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>.
+                <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>
+                because of their great performance and ease of use.
             ''').style('font-size: 150%; color: white').classes('leading-tight')
 
         ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-white').style('width: 1500px')