1
import React from 'react';
2
import Image from 'next/image';
3

4
/**
5
 * Footer component containing site navigation, email subscription, and company information
6
 * Displays a responsive grid layout with multiple sections that adapts to different screen sizes
7
 */
8
const Footer = () => {
9
  // Navigation items organized by category
10
  const productLinks = [
11
    'UI Components',
12
    'Backend Utilities',
13
    'Authentication Snippets',
14
    'Database Helpers',
15
    'API Endpoints'
16
  ];
17

18
  const helpLinks = ['How to Use StackBits', 'Report an Issue', 'Request a Feature', 'FAQs'];
19

20
  const companyLinks = ['About StackBits', 'News', 'Careers', 'Contact Us', 'Terms & Conditions'];
21

22
  // Helper function to render navigation lists
23
  const renderNavList = (title: string, items: string[]) => (
24
    <div className="w-full sm:w-auto">
25
      <h3 className="font-medium text-base sm:text-lg mb-3 sm:mb-4">{title}</h3>
26
      <ul className="flex flex-col gap-2 text-gray-400">
27
        {items.map((item) => (
28
          <li
29
            key={item}
30
            className="cursor-pointer hover:text-white transition-colors text-sm sm:text-base"
31
          >
32
            {item}
33
          </li>
34
        ))}
35
      </ul>
36
    </div>
37
  );
38

39
  return (
40
    <footer className="bg-black text-white py-8 sm:py-12 lg:py-16 px-4 sm:px-8 lg:px-20">
41
      <div className="flex flex-col lg:flex-row gap-8 lg:gap-0 lg:justify-between">
42
        {/* Logo and email subscription section */}
43
        <div className="flex flex-col gap-4 sm:gap-6 w-full lg:w-auto lg:max-w-sm">
44
          <Image
45
            src="/stackbits-logo.png"
46
            alt="boAt"
47
            width={120}
48
            height={40}
49
            priority // Logo should load first
50
            className="w-24 sm:w-28 lg:w-32"
51
          />
52
          <p className="text-gray-400 text-sm sm:text-base">
53
            Subscribe to email alerts. We promise not to spam your inbox.
54
          </p>
55
          <div className="flex flex-col sm:flex-row gap-2">
56
            <input
57
              type="email"
58
              placeholder="Email Address"
59
              className="bg-white/10 px-4 py-2 rounded-lg w-full sm:w-auto"
60
              aria-label="Email subscription input"
61
            />
62
            <button
63
              className="bg-red-500 px-6 py-2 rounded-lg font-medium whitespace-nowrap"
64
              aria-label="Subscribe to newsletter"
65
            >
66
              Subscribe
67
            </button>
68
          </div>
69
        </div>
70

71
        {/* Navigation grid section */}
72
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-12 lg:gap-20">
73
          {renderNavList('Products', productLinks)}
74
          {renderNavList('Help', helpLinks)}
75
          {renderNavList('Company', companyLinks)}
76
        </div>
77
      </div>
78
    </footer>
79
  );
80
};
81

82
export default Footer;