app/assets/stylesheets/application.postcss.css

@@ -9,44 +9,7 @@
 /* Import components */
 @import "components/hero";
 @import "components/flash";
-@import "components/footer";
 @import "components/event-finder";
 
 /* Import pages */
 @import "pages/home";
-
-/* Base styles */
-body {
-  font-family: var(--font-sans);
-  line-height: 1.6;
-  color: var(--color-neutral-900);
-  background: var(--color-neutral-50);
-}
-
-/* App wrapper */
-.app-wrapper {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Main content */
-main {
-  flex: 1;
-}
-
-/* Footer */
-.footer {
-  background: var(--color-neutral-800);
-  color: var(--color-neutral-300);
-}
-
-/* Flash messages */
-.flash {
-  width: 100%;
-}
-
-/* Yield content */
-.yield {
-  width: 100%;
-}

app/views/components/_footer.html.erb

@@ -1,41 +1,41 @@
-<div class="footer-content">
+<div class="grid gap-6 mb-6 md:grid-cols-2 lg:grid-cols-4">
-  <div class="footer-section">
+  <div>
-    <h3>Events</h3>
+    <h3 class="font-bold text-lg text-white mb-3">Events</h3>
-    <ul class="footer-links">
+    <ul class="space-y-2">
-      <li><a href="#">Find Events</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Find Events</a></li>
-      <li><a href="#">Host an Event</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Host an Event</a></li>
-      <li><a href="#">Event Categories</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Event Categories</a></li>
-      <li><a href="#">Premium Events</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Premium Events</a></li>
     </ul>
   </div>
-  <div class="footer-section">
+  <div>
-    <h3>Community</h3>
+    <h3 class="font-bold text-lg text-white mb-3">Community</h3>
-    <ul class="footer-links">
+    <ul class="space-y-2">
-      <li><a href="#">Join Us</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Join Us</a></li>
-      <li><a href="#">Member Benefits</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Member Benefits</a></li>
-      <li><a href="#">Success Stories</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Success Stories</a></li>
-      <li><a href="#">Ambassador Program</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Ambassador Program</a></li>
     </ul>
   </div>
-  <div class="footer-section">
+  <div>
-    <h3>Support</h3>
+    <h3 class="font-bold text-lg text-white mb-3">Support</h3>
-    <ul class="footer-links">
+    <ul class="space-y-2">
-      <li><a href="#">Help Center</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Help Center</a></li>
-      <li><a href="#">Contact Us</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Contact Us</a></li>
-      <li><a href="#">Safety Guidelines</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Safety Guidelines</a></li>
-      <li><a href="#">Cancellation Policy</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Cancellation Policy</a></li>
     </ul>
   </div>
-  <div class="footer-section">
+  <div>
-    <h3>Company</h3>
+    <h3 class="font-bold text-lg text-white mb-3">Company</h3>
-    <ul class="footer-links">
+    <ul class="space-y-2">
-      <li><a href="#">About Aperonight</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">About Aperonight</a></li>
-      <li><a href="#">Careers</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Careers</a></li>
-      <li><a href="#">Press & Media</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Press & Media</a></li>
-      <li><a href="#">Partner With Us</a></li>
+      <li><a href="#" class="text-neutral-400 text-sm hover:text-accent-400 transition-colors duration-300">Partner With Us</a></li>
     </ul>
   </div>
 </div>
-<div class="footer-bottom">
+<div class="border-t border-neutral-700 pt-4 text-center text-neutral-400 text-sm">
-  <p>&copy; 2024 Aperonight. All rights reserved. • <a href="#" style="color: var(--color-accent-400);">Privacy Policy</a> • <a href="#" style="color: var(--color-accent-400);">Terms of Service</a></p>
+  <p>&copy; 2024 Aperonight. All rights reserved. • <a href="#" class="text-accent-400 hover:text-accent-300 transition-colors">Privacy Policy</a> • <a href="#" class="text-accent-400 hover:text-accent-300 transition-colors">Terms of Service</a></p>
 </div>

app/views/layouts/application.html.erb

@@ -24,6 +24,7 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
+    <%# stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
 
@@ -41,20 +42,11 @@
         </div>
       </main>
 
-      <footer class="footer">
+      <footer class="bg-neutral-800 text-neutral-300 py-8 pb-4">
         <div class="container">
           <%= render "components/footer" %>
         </div>
       </footer>
     </div>
-
-    <script>
-      // Initialize Lucide icons
-      document.addEventListener("DOMContentLoaded", function() {
-        if (typeof lucide !== 'undefined') {
-          lucide.createIcons();
-        }
-      });
-    </script>
   </body>
 </html>