Update app.py

app.py

@@ -1,20 +1,23 @@
 import streamlit as st
 
-# Set page configuration
-st.set_page_config(page_title="Federal University Lokoja AI Community", page_icon=":sparkles:", layout="centered")
+# Set page configuration for a wide layout
+st.set_page_config(page_title="Federal University Lokoja AI Community", page_icon=":sparkles:", layout="wide")
 
-# Custom CSS for styling the cards with navy/dark-night blue theme
-custom_css = """
+# Custom CSS for styling the cards with a navy/dark-night blue theme
+row_css = """
     <style>
-    .card-container {
+    .row-container {
         display: flex;
         justify-content: center;
+        align-items: stretch;
         gap: 20px;
+        padding: 20px;
         margin-top: 20px;
         flex-wrap: wrap;
     }
     .card {
-        width: 350px;
+        flex: 1;
+        max-width: 300px;
         border-radius: 12px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
         transition: transform 0.3s, box-shadow 0.3s;
@@ -22,9 +25,10 @@ custom_css = """
         background: linear-gradient(135deg, #1b2a49, #27476e);
         color: white;
         text-align: center;
+        margin: 10px;
     }
     .card:hover {
-        transform: translateY(-8px);
+        transform: scale(1.05);
         box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
     }
     .card-image img {
@@ -32,12 +36,12 @@ custom_css = """
         height: auto;
     }
     .card-title {
-        font-size: 1.8em;
-        margin: 15px 0;
+        font-size: 1.6em;
+        margin-top: 15px;
     }
     .card-description {
-        font-size: 1em;
         padding: 10px 15px;
+        font-size: 1em;
     }
     .card-button a {
         display: inline-block;
@@ -57,42 +61,44 @@ custom_css = """
 """
 
 # Inject the custom CSS
-st.markdown(custom_css, unsafe_allow_html=True)
+st.markdown(row_css, unsafe_allow_html=True)
 
-# Display the card layout in a row
+# Display the three cards in a single row
 st.markdown("""
-    <div class="card-container">
+    <div class="row-container">
         <div class="card">
             <div class="card-image">
-                <img src="https://via.placeholder.com/350x150" alt="AI Innovation Image">
+                <img src="https://via.placeholder.com/300x150" alt="AI Innovation Image">
             </div>
             <div class="card-title">Federal University Lokoja AI Community</div>
             <div class="card-description">
-                Connect, collaborate, and innovate with fellow AI enthusiasts, researchers, and experts. Explore the latest in machine learning and AI developments!
+                Join our vibrant AI community to connect with researchers and enthusiasts in machine learning and AI.
             </div>
             <div class="card-button">
                 <a href="https://huggingface.co/Federal-University-Lokoja" target="_blank">Join Us Now</a>
             </div>
         </div>
+
         <div class="card">
             <div class="card-image">
-                <img src="https://via.placeholder.com/350x150" alt="Community Events Image">
+                <img src="https://via.placeholder.com/300x150" alt="Workshops and Events">
             </div>
-            <div class="card-title">AI Workshops & Events</div>
+            <div class="card-title">Workshops & Events</div>
             <div class="card-description">
-                Participate in hands-on workshops, hackathons, and seminars led by experts. Network and learn new AI skills together!
+                Participate in AI workshops, hackathons, and networking events to hone your skills and connect with others.
             </div>
             <div class="card-button">
-                <a href="https://events.example.com" target="_blank">Discover Events</a>
+                <a href="https://events.example.com" target="_blank">Learn More</a>
             </div>
         </div>
+
         <div class="card">
             <div class="card-image">
-                <img src="https://via.placeholder.com/350x150" alt="Resources Image">
+                <img src="https://via.placeholder.com/300x150" alt="Resources">
             </div>
             <div class="card-title">Resources & Tools</div>
             <div class="card-description">
-                Access curated datasets, state-of-the-art models, and tutorials to help you excel in your AI journey.
+                Access state-of-the-art AI tools, datasets, and resources curated for your learning and projects.
             </div>
             <div class="card-button">
                 <a href="https://resources.example.com" target="_blank">View Resources</a>