Edit home.html

home.html

 {% extends 'base.html' %}
 
 {% block content %}
-<div class="jumbotron">
-    <h1 class="display-4">Welcome to Uni Hub!</h1>
-    <p class="lead">Your campus community platform</p>
+<!-- Hero Section -->
+<div class="hero-section bg-primary text-white py-5 mb-5 rounded-bottom animate__animated animate__fadeIn">
+    <div class="container text-center">
+        <h1 class="display-4 fw-bold">Welcome to Uni Hub</h1>
+        <p class="lead">Your all-in-one campus platform</p>
+    </div>
+</div>
+
+<!-- Cards Section -->
+<div class="container">
+    <div class="row g-4">
+        <!-- Communities -->
+        <div class="col-md-6">
+            <div class="card h-100 shadow-sm animate__animated animate__fadeInUp">
+                <div class="card-body text-center">
+                    <i class="fas fa-users fa-3x text-primary mb-3"></i>
+                    <h3>Communities</h3>
+                    <p>Connect with student groups and organizations.</p>
+                    <a href="{% url 'communities' %}" class="btn btn-primary">Explore</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Events -->
+        <div class="col-md-6">
+            <div class="card h-100 shadow-sm animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
+                <div class="card-body text-center">
+                    <i class="fas fa-calendar-alt fa-3x text-primary mb-3"></i>
+                    <h3>Events</h3>
+                    <p>Discover upcoming campus activities and events.</p>
+                    <a href="{% url 'events' %}" class="btn btn-primary">Browse</a>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}