Update app.py

app.py

@@ -1,21 +1,5 @@
 import streamlit as st
-
-############# Style Setup ##############
-st.markdown(
-    """
-    <style>
-    .center-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-    }
-    </style>
-    """,
-    unsafe_allow_html=True
-)
-########################################
-
+from pages import landing, home, ica
 
 # --- Configure the app ---
 st.set_page_config(page_title="Multiplicity Demo", layout="centered")
@@ -24,75 +8,10 @@ st.set_page_config(page_title="Multiplicity Demo", layout="centered")
 if "page" not in st.session_state:
     st.session_state.page = "landing"  # can be: landing, main, sentence_X
 
-# --- Helper function to change page ---
-def go_to(page_name):
-    st.session_state.page = page_name
-    st.rerun()
-
-# -----------------------------
-# Landing Page
-# -----------------------------
+# Routing
 if st.session_state.page == "landing":
-    st.markdown("<div class='center-container'>", unsafe_allow_html=True)
-    st.markdown(
-        """
-        <div style='text-align: center; font-size:14px; color:gray;'>
-        Welcome to the Multiplicity Interactive Demo.<br><br>
-        In this demo, you will explore how developer decisions create a multiverse of possible models,
-        and how these connect to concepts like arbitrariness, homogenization, and the ICA framework.<br><br>
-        Follow the steps to see your decisions in context.
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
-    st.markdown("<br>", unsafe_allow_html=True)
-    if st.button("Get Started"):
-        go_to("main")
-
-    st.markdown("</div>", unsafe_allow_html=True)
-
-
-# -----------------------------
-# Main Page (Clickable Sentences)
-# -----------------------------
-elif st.session_state.page == "main":
-    st.markdown("<div class='center-container'>", unsafe_allow_html=True)
-
-    st.markdown(
-        "<div style='font-size:24px; color:#3366cc; font-weight:bold;'>Explore the concepts:</div>",
-        unsafe_allow_html=True
-    )
-    st.write("")
-
-    sentences = [
-        "Multiplicity: Many models, same accuracy, different predictions.",
-        "ICA Framework: Intentional, Conventional, and Arbitrary decisions.",
-        "Arbitrariness: Why different models might treat individuals differently.",
-        "Homogenization: Why similar decisions happen across many developers."
-    ]
-
-    for i, sentence in enumerate(sentences):
-        if st.button(sentence, key=f"sentence_{i}"):
-            go_to(f"sentence_{i}")
-
-    st.markdown("</div>", unsafe_allow_html=True)
-
-# -----------------------------
-# Empty Sentence Pages
-# -----------------------------
-else:
-    # Extract sentence index
-    sentence_index = int(st.session_state.page.split("_")[1])
-
-    st.markdown("<div class='center-container'>", unsafe_allow_html=True)
-    st.markdown(
-        f"<div style='font-size:20px; color:#cc3333; font-weight:bold;'>Page for Sentence {sentence_index + 1}</div>",
-        unsafe_allow_html=True
-    )
-
-    st.write("This page is currently empty. You can add the content for this concept here.")
-
-    if st.button("Back to Main Page"):
-        go_to("main")
-
-    st.markdown("</div>", unsafe_allow_html=True)
+    landing.render()
+elif st.session_state.page == "home":
+    home.render()
+elif st.session_state.page == "ica":
+    ica.render()