Footer Section Two

1import LogoMark from '@/site/ui-library/ui-library-logo'
2import { IconBrandLinkedin, IconBrandGithub, IconBrandX, IconMail } from '@tabler/icons-react'
3import Link from 'next/link'
4 
5const links = [
6  { title: 'Features', href: '#' },
7  { title: 'Solutions', href: '#' },
8  { title: 'Customers', href: '#' },
9  { title: 'Pricing', href: '#' },
10  { title: 'Help', href: '#' },
11]
12 
13const socials = [
14  {
15    title: 'LinkedIn',
16    href: '#',
17    icon: IconBrandLinkedin,
18  },
19  {
20    title: 'GitHub',
21    href: '#',
22    icon: IconBrandGithub,
23  },
24  {
25    title: 'Twitter',
26    href: '#',
27    icon: IconBrandX,
28  },
29  {
30    title: 'Email',
31    href: '#',
32    icon: IconMail,
33  },
34]
35 
36export default function FooterSectionTwo() {
37  return (
38    <footer className="py-40">
39      <div className="mx-auto max-w-6xl px-4 sm:px-6">
40        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
41          <div className="flex flex-col gap-3">
42            <div className="flex items-center gap-1">
43              <LogoMark aria-hidden="true" className="size-6" />
44              <span className="text-lg font-semibold text-foreground">Nav UI</span>
45            </div>
46          </div>
47 
48          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
49            {links.map((item) => (
50              <Link
51                href={item.href}
52                key={item.title}
53                className="text-sm font-normal text-neutral-600 transition-colors duration-200 hover:text-black dark:text-neutral-400 dark:hover:text-neutral-100"
54              >
55                {item.title}
56              </Link>
57            ))}
58          </div>
59        </div>
60 
61        <div className="mt-8 flex flex-col items-center justify-between gap-4 border-t border-dashed border-neutral-200 py-6 sm:flex-row dark:border-neutral-800">
62          <span className="text-center text-sm text-muted-foreground sm:text-left">
63            © {new Date().getFullYear()} Nav UI, All rights reserved
64          </span>
65          <ul className="flex items-center gap-5">
66            {socials.map((item) => {
67              const Icon = item.icon
68              return (
69                <li key={item.title}>
70                  <a
71                    href={item.href}
72                    aria-label={item.title}
73                    className="text-neutral-700 transition-colors hover:text-neutral-900 dark:hover:text-neutral-100"
74                  >
75// … truncated