feat: Add Premium Footer Component with Glassmorphism Design

[eranmol2007-coder]

📦 Pull Request

🎯 Description

This PR adds a comprehensive, production-ready footer component to the EaseMotion CSS library with modern glassmorphism design and premium features.

✨ Features Added

🎨 Visual Design

• Premium glassmorphism design with backdrop blur effects
• Animated gradient background orbs with smooth floating animations
• Modern color palette with gradient accents
• Light/Dark mode automatic theme switching using prefers-color-scheme

📐 Layout & Structure

• Responsive grid layout with 5 sections: Brand, Product, Resources, Company, Newsletter
• Brand section with logo, description, and social media links
• Multi-column link sections with animated titles
• Newsletter subscription form with glassmorphic styling
• Footer bottom bar with copyright and legal links

🎭 Animations & Interactions

• Smooth hover effects on all interactive elements
• Animated underlines on footer links
• Floating background orbs with CSS animations
• Bouncing hover effects on social icons
• Heartbeat animation on copyright heart icon
• Expanding accent lines on column titles

🌐 Social Media Integration

• CSS-only social media icons using SVG masks
• Support for: GitHub, Twitter/X, YouTube, LinkedIn, Facebook, Instagram, Discord
• Gradient hover effects with smooth transitions
• Fallback styling for unknown social platforms

♿ Accessibility Features

• Proper ARIA labels and semantic HTML
• Keyboard navigation support with visible focus states
• Screen reader friendly structure
• prefers-reduced-motion support for users with motion sensitivity
• High contrast focus indicators

📱 Responsive Design

• Mobile-first approach with fluid typography
• Breakpoints at 1024px, 768px, and 480px
• Stacking columns on smaller screens
• Optimized spacing and touch targets for mobile
• Centered layout on mobile devices

🎨 CSS Architecture

• Uses CSS custom properties for easy theming
• Organized with CSS @layer for proper cascade control
• BEM-inspired naming convention (ease-footer-*)
• Modular structure for maintainability
• Print-friendly styles included

🛠️ Additional Features

• Newsletter form with interactive feedback
• Glassmorphic input fields with focus states
• Gradient buttons with hover animations
• Customizable spacing and colors via CSS variables
• Print styles for documentation

📁 Files Added

• components/footer.css - Complete footer component styles (700+ lines)
• components/footer-demo.html - Interactive demo page

🎯 Usage Example

<footer class="ease-footer">
  <div class="ease-footer-container">
    <div class="ease-footer-grid">
      <!-- Brand Section -->
      <div class="ease-footer-brand">
        <a href="#" class="ease-footer-logo">
          <span class="ease-footer-logo-icon">⚡</span>
          <span>EaseMotion</span>
        </a>
        <p class="ease-footer-description">Your description here</p>
        <div class="ease-footer-social">
          <a href="https://github.com/..."><span class="icon"></span></a>
        </div>
      </div>

      <!-- Link Columns -->
      <div class="ease-footer-col">
        <h3 class="ease-footer-col-title">Product</h3>
        <ul class="ease-footer-links">
          <li><a href="#">Features</a></li>
        </ul>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="ease-footer-bottom">
      <div class="ease-footer-copyright">
        <span>&copy; 2024 Your Company</span>
      </div>
    </div>
  </div>
</footer>

[SAPTARSHI-coder]

❌ PR Closed — Files Outside submissions/ Folder

@eranmol2007-coder, this PR has been automatically closed because it modifies files outside the allowed submissions/ directory:

• components/footer-demo.html

What to do

Contributions must only add files inside the submissions/ folder. Please:

1. Create a new branch
2. Add only your submission files under submissions/examples/your-feature-name/
3. Open a new PR

See the contribution guide for details.

— EaseMotion CSS Guard

[github-actions]

📊 CSS Bundle Size Benchmark

No change in CSS bundle size. ✨

[github-actions]

🔒 PR Closed (Unmerged). This PR was closed without being merged. No GSSoC points or credit awarded.

[SAPTARSHI-coder]

🔒 Pull Request Closed: This PR has been automatically closed because it does not contain any file changes under the submissions/ directory. Contributors must place their submissions under the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/). Thank you!

[SAPTARSHI-coder]

❌ Submission Validation Failed

Thank you for your contribution! However, some required files are missing or incorrect.

📋 Required Structure

submissions/your-category/your-feature-name/ (e.g., submissions/examples/ or submissions/docs/)
├── demo.html     ← Interactive demo with DOCTYPE, html, head, body tags
├── style.css     ← Your original CSS (not copy-pasted from a template)
└── README.md     ← Brief description of your feature

🔍 Issues Found:

🔠 Core Framework Protection

• ❌ PR modifies core framework/configuration files: components/footer-demo.html. Contributors may only modify files inside the submissions/ directory.

---

🔠 Submission Folder Protection

• ❌ This PR does not contain any additions inside the submissions/ directory. Contributors must place their submissions under the submissions/ directory (e.g. submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/).

---

📝 How to Fix:

1. Ensure all 3 files exist with real, original content
2. demo.html must have <!DOCTYPE html>, <html>, <head>, <body> tags
3. style.css must contain your own CSS (not copy-pasted boilerplate)
4. Push fixes to this branch — the validator will re-run automatically

📖 See CONTRIBUTING.md for full guidelines.

[SAPTARSHI-coder]

🔒 Pull Request Closed

This PR was automatically closed because it failed the submission validation check.

Please fix the issues listed above, then open a new pull request. Thank you!