Fix Footer Alignment & Improve Mobile Responsiveness #fix1

src/app/_styles/main.css

@@ -4,7 +4,7 @@
 @import "./about.css";
 @import "../faq/faq.css";
 @import "./contact.css";
-@import "../../components/layout/footer.css";
+@import "./contact.css";
 @import "../../components/layout/navbar.css";
 @import "../../components/layout/navbar-menu.css";
 @import "../../components/ui/button/button.css";

src/components/layout/footer-alignment.md

@@ -0,0 +1,34 @@
+    # Footer Alignment & Mobile Responsiveness Fix
+
+    ## Overview
+    This document outlines the modifications made to the `Footer` component and its associated styles (`footer.css`) to address alignment issues on mobile devices and enhance the overall visual hierarchy.
+
+    ## Key Changes
+
+    ### 1. Structural Layout Updates (CSS Grid & Flexbox)
+    - **Responsive Grid System**: Replaced the basic `1fr` grid with a more robust responsive layout.
+    - **Mobile**: Single column stack with increased gap (`3rem`) for better touch target separation.
+    - **Desktop (`min-width: 1024px`)**: Implemented a `2fr 1fr 1fr` grid to allocate more space to the description/mission statement while keeping links and social icons compact.
+    - **Flexbox Alignment**:
+    - `footer-bottom-content`: adopted `flex-direction: column-reverse` on mobile devices. This ensures legal/copyright text appears below navigation links on small screens, following standard mobile UX patterns.
+    - `footer-socials`: Aligned to `flex-end` on desktop to balance the layout against the left-aligned content.
+
+    ### 2. Visual Enhancements & Typography
+    - **Animated Interactions**: Replaced standard `border-bottom` underlines with a CSS transition effect (`transform: scaleX`) on `.footer-link--underline`. This creates a smooth left-to-right underline animation on hover.
+    - **Typography**:
+    - Updated font weights to `500` for better readability.
+    - Added "Community" and "Follow Us" section headers in uppercase, tracking-wider styles to establish clear visual hierarchy.
+    - Standardized font sizes and colors using Tailwind utility classes (e.g., `text-gray-600`, `text-sm`).
+    - **Clean Cleanup**: Removed temporary debug styles (`background-color: red;`).
+
+    ### 3. Component Refactoring (`footer.jsx`)
+    - **Semantic Grouping**: Grouped navigation links into a "Community" section and social icons into a "Follow Us" section.
+    - **Content Updates**:
+    - Added "Fiscally sponsored by Root Access" block with proper spacing.
+    - Renamed link labels for clarity (e.g., "meetup" → "Weekly Meetup").
+    - Implemented dynamic date rendering for the copyright year (`new Date().getFullYear()`).
+    - **Tailwind Integration**: Utilized Tailwind utility classes for spacing (`mb-6`, `space-y-4`) and responsive visibility (`hidden md:block`) to reduce custom CSS bloat.
+
+    ## Files Modified
+    - `src/components/layout/footer.css`
+    - `src/components/layout/footer.jsx`

src/components/layout/footer.css

@@ -1,54 +1,87 @@
 .footer-top-content {
   display: grid;
   grid-template-columns: 1fr;
-  column-gap: 2rem;
-  row-gap: 2rem;
+  gap: 3rem;
   margin: auto;
-  padding: 2.5rem 1.5rem 2rem;
+  padding: 3rem 1.5rem;
   width: 100%;
   max-width: calc(var(--screen-xxl) + 80px);
 
   @media (min-width: 768px) {
     grid-template-columns: 1fr 1fr;
+    padding: 4rem 2.5rem;
   }
 
-  @media (min-width: 992px) {
-    grid-template-columns: 1fr 1fr auto;
-    padding: 4rem 2.5rem 2rem;
+  @media (min-width: 1024px) {
+    grid-template-columns: 2fr 1fr 1fr;
+    column-gap: 4rem;
   }
 }
 
+.footer-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .footer-link--underline {
   cursor: pointer;
-  border-bottom: 1px solid var(--primary-900);
   color: var(--primary-900);
-  font-weight: bold;
+  font-weight: 500;
   text-decoration: none;
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+}
+
+.footer-link--underline::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--primary-900);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.footer-link--underline:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
 .footer-bottom-content {
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  flex-direction: column-reverse;
+  gap: 1.5rem;
   margin: auto;
-  padding: 1rem 1.5rem;
+  padding: 2rem 1.5rem;
   max-width: calc(var(--screen-xxl) + 80px);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 
   @media (min-width: 768px) {
     flex-direction: row;
-  }
-
-  @media (min-width: 992px) {
-    padding: 1rem 2.5rem;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem 2.5rem;
   }
 }
 
 .footer-socials {
   display: flex;
-  justify-content: start;
-  gap: 3rem;
+  gap: 1.5rem;
+  align-items: center;
+
+  justify-content: flex-start;
 
-  @media (min-width: 992px) {
-    justify-content: end;
+  @media (min-width: 1024px) {
+    justify-content: flex-end;
   }
 }
+
+.caption-footer {
+  font-size: 0.875rem;
+  color: #666;
+}